update: list

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 (
+        <PlainTextSelect
+            items={listStyles}
+            tooltip="Bullet List"
+            renderLabel={<Icon path={ediBulletList} size={0.8} />}
+        >
+            {list => (
+                <>
+                    {list.icon && <Icon className="mr-2" path={list.icon} size={0.5} />}
+                    <span style={{ wordSpacing: 8 }}>{list.label || list.name}</span>
+                </>
+            )}
+        </PlainTextSelect>
+    )
+}

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 <IconBar path={ediCheckList} tooltip="Check List" />
+}

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 (

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 = <Hr className="h-[80%] mx-2" />
@@ -74,6 +76,10 @@ export default function ToolbarRich() {
                     <TextIndentDec />
                 </div>
                 {Splitter}
+                <div>
+                    <BulletList />
+                    <CheckList />
+                </div>
             </div>
             <div className="h-[62px]" />
         </>

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