diff --git a/docs/src/components/editor-toolbars/BulletList.tsx b/docs/src/components/editor-toolbars/BulletList.tsx new file mode 100644 index 0000000..9826d78 --- /dev/null +++ b/docs/src/components/editor-toolbars/BulletList.tsx @@ -0,0 +1,37 @@ +import PlainTextSelect from "@/components/PlainTextSelect" +import { Icon } from "@mdi/react" +import { ediBulletList, ediListCircle, ediListDisc, ediListSquare } from "@tiptiz/editor-icons" + +interface ListStyle { + icon?: string + label?: string + name: string + style: string +} + +const listStyles: ListStyle[] = [ + { icon: ediListDisc, name: "Bulleted", style: "disc" }, + { icon: ediListSquare, name: "Squared", style: "square" }, + { icon: ediListCircle, name: "Circle", style: "circle" }, + { label: "1, 2, 3...", name: "Numbered", style: "decimal" }, + { label: "a, b, c...", name: "Lower Alpha", style: "lower-alpha" }, + { label: "A, B, C...", name: "Upper Alpha", style: "upper-alpha" }, + { label: "i, ii, iii...", name: "Lower Roman", style: "lower-roman" } +] + +export default function BulletList() { + return ( + } + > + {list => ( + <> + {list.icon && } + {list.label || list.name} + + )} + + ) +} diff --git a/docs/src/components/editor-toolbars/CheckList.tsx b/docs/src/components/editor-toolbars/CheckList.tsx new file mode 100644 index 0000000..de2ac45 --- /dev/null +++ b/docs/src/components/editor-toolbars/CheckList.tsx @@ -0,0 +1,6 @@ +import IconBar from "@/components/IconBar" +import { ediCheckList } from "@tiptiz/editor-icons" + +export default function CheckList() { + return +} diff --git a/docs/src/components/editor-toolbars/FontSize.tsx b/docs/src/components/editor-toolbars/FontSize.tsx index a32dcdb..f5c7612 100644 --- a/docs/src/components/editor-toolbars/FontSize.tsx +++ b/docs/src/components/editor-toolbars/FontSize.tsx @@ -1,7 +1,7 @@ "use client" import PlainTextSelect from "@/components/PlainTextSelect" -const sizes = [12, 14, 15, 16, 17, 18, 20, 22, 24, 26].slice(6) +const sizes = [12, 14, 15, 16, 17, 18, 20, 22, 24, 26] export default function FontSize() { return ( diff --git a/docs/src/components/page-index/ToolbarRich.tsx b/docs/src/components/page-index/ToolbarRich.tsx index 8a5770b..42c2c89 100644 --- a/docs/src/components/page-index/ToolbarRich.tsx +++ b/docs/src/components/page-index/ToolbarRich.tsx @@ -1,11 +1,11 @@ "use client" import "@/styles/toolbars.css" -import TextIndentDec from "@/components/editor-toolbars/TextIndentDec" -import TextIndentInc from "@/components/editor-toolbars/TextIndentInc" +import CheckList from "@/components/editor-toolbars/CheckList" import Hr from "@/components/Hr" import cn from "clsx" +import BulletList from "../editor-toolbars/BulletList" import ColorFill from "../editor-toolbars/ColorFill" import ColorText from "../editor-toolbars/ColorText" import FontBold from "../editor-toolbars/FontBold" @@ -28,6 +28,8 @@ import TextAlignCenter from "../editor-toolbars/TextAlignCenter" import TextAlignJustify from "../editor-toolbars/TextAlignJustify" import TextAlignLeft from "../editor-toolbars/TextAlignLeft" import TextAlignRight from "../editor-toolbars/TextAlignRight" +import TextIndentDec from "../editor-toolbars/TextIndentDec" +import TextIndentInc from "../editor-toolbars/TextIndentInc" import Undo from "../editor-toolbars/Undo" const Splitter =
@@ -74,6 +76,10 @@ export default function ToolbarRich() { {Splitter} +
+ + +
diff --git a/packages/tiptiz-editor-icons/src/index.ts b/packages/tiptiz-editor-icons/src/index.ts index 5eb58c5..2399a7f 100644 --- a/packages/tiptiz-editor-icons/src/index.ts +++ b/packages/tiptiz-editor-icons/src/index.ts @@ -77,7 +77,10 @@ export const ediBorderNoneVariant = mdiBorderNoneVariant export const ediMarginContent = mdiSquareMedium export const ediMarginStack = [mdiBorderNoneVariant, mdiSquareMedium] -import { mdiFormatListBulletedType, mdiFormatListChecks } from "@mdi/js" +import { mdiFormatListBulletedType, mdiCircle, mdiSquare, mdiCircleOutline } from "@mdi/js" export const ediBulletList = mdiFormatListBulletedType -export const ediCheckList = mdiFormatListChecks +export const ediCheckList = "M6.248 16.002c.966 0 1.75.784 1.75 1.75v2.498A1.75 1.75 0 0 1 6.248 22H3.75A1.75 1.75 0 0 1 2 20.25v-2.498c0-.966.784-1.75 1.75-1.75zm0 1.5H3.75a.25.25 0 0 0-.25.25v2.498c0 .138.112.25.25.25h2.498a.25.25 0 0 0 .25-.25v-2.498a.25.25 0 0 0-.25-.25m3.5.498h11.505a.75.75 0 0 1 .102 1.493l-.102.007H9.748a.75.75 0 0 1-.102-1.493zh11.505zm-3.5-8.999c.966 0 1.75.784 1.75 1.75v2.498a1.75 1.75 0 0 1-1.75 1.75H3.75A1.75 1.75 0 0 1 2 13.249V10.75C2 9.784 2.784 9 3.75 9zm0 1.5H3.75a.25.25 0 0 0-.25.25v2.498c0 .138.112.25.25.25h2.498a.25.25 0 0 0 .25-.25V10.75a.25.25 0 0 0-.25-.25m3.5.499h11.505a.75.75 0 0 1 .102 1.493l-.102.007H9.748a.75.75 0 0 1-.102-1.493zh11.505zm-3.5-9c.966 0 1.75.784 1.75 1.75v2.498a1.75 1.75 0 0 1-1.75 1.75H3.75A1.75 1.75 0 0 1 2 6.248V3.75C2 2.784 2.784 2 3.75 2zm0 1.5H3.75a.25.25 0 0 0-.25.25v2.498c0 .138.112.25.25.25h2.498a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25m3.5.5h11.505a.75.75 0 0 1 .102 1.493l-.102.007H9.748a.75.75 0 0 1-.102-1.493zh11.505z" +export const ediListDisc = mdiCircle +export const ediListSquare = mdiSquare +export const ediListCircle = mdiCircleOutline