update: alignments

docs/src/components/editor-toolbars/ColorFill.tsx

@@ -15,7 +15,7 @@ export default function ColorFill({ color }: ColorTextProps) {
                 size="small"
                 color="inherit"
             >
-                <Stack size={0.8}>
+                <Stack size={0.7}>
                     <Icon path={ediColorFill} />
                     <Icon path={ediColorHelper} color={color} />
                 </Stack>

docs/src/components/editor-toolbars/ColorText.tsx

@@ -15,7 +15,7 @@ export default function ColorText({ color }: ColorTextProps) {
                 size="small"
                 color="inherit"
             >
-                <Stack size={0.8}>
+                <Stack size={0.7}>
                     <Icon path={ediColorText} />
                     <Icon path={ediColorHelper} color={color} />
                 </Stack>

docs/src/components/editor-toolbars/FontSubscript.tsx

@@ -2,5 +2,11 @@ import IconBar from "@/components/IconBar"
 import { ediSubscript } from "@tiptiz/editor-icons"
 
 export default function FontSubscript() {
-    return <IconBar path={ediSubscript} tooltip="Font Subscript" />
+    return (
+        <IconBar
+            path={ediSubscript}
+            tooltip="Font Subscript"
+            iconProps={{ style: { stroke: "currentColor", strokeWidth: 0.5 } }}
+        />
+    )
 }

docs/src/components/editor-toolbars/FontSuperscript.tsx

@@ -2,5 +2,11 @@ import IconBar from "@/components/IconBar"
 import { ediSuperscript } from "@tiptiz/editor-icons"
 
 export default function FontSuperscript() {
-    return <IconBar path={ediSuperscript} tooltip="Font Superscript" />
+    return (
+        <IconBar
+            path={ediSuperscript}
+            tooltip="Font Superscript"
+            iconProps={{ style: { stroke: "currentColor", strokeWidth: 0.5 } }}
+        />
+    )
 }

docs/src/components/editor-toolbars/TextAlignCenter.tsx

@@ -0,0 +1,6 @@
+import IconBar from "@/components/IconBar"
+import { ediAlignCenter } from "@tiptiz/editor-icons"
+
+export default function TextAlignCenter() {
+    return <IconBar path={ediAlignCenter} tooltip="Align Center" />
+}

docs/src/components/editor-toolbars/TextAlignJustify.tsx

@@ -0,0 +1,6 @@
+import IconBar from "@/components/IconBar"
+import { ediAlignJustify } from "@tiptiz/editor-icons"
+
+export default function TextAlignJustify() {
+    return <IconBar path={ediAlignJustify} tooltip="Align Justify" />
+}

docs/src/components/editor-toolbars/TextAlignLeft.tsx

@@ -0,0 +1,6 @@
+import IconBar from "@/components/IconBar"
+import { ediAlignLeft } from "@tiptiz/editor-icons"
+
+export default function TextAlignLeft() {
+    return <IconBar path={ediAlignLeft} tooltip="Align Left" />
+}

docs/src/components/editor-toolbars/TextAlignRight.tsx

@@ -0,0 +1,6 @@
+import IconBar from "@/components/IconBar"
+import { ediAlignRight } from "@tiptiz/editor-icons"
+
+export default function TextAlignRight() {
+    return <IconBar path={ediAlignRight} tooltip="Align Right" />
+}

docs/src/components/page-index/ToolbarRich.tsx

@@ -1,26 +1,30 @@
 "use client"
 import "@/styles/toolbars.css"
 
-import ColorFill from "@/components/editor-toolbars/ColorFill"
-import ColorText from "@/components/editor-toolbars/ColorText"
-import FontBold from "@/components/editor-toolbars/FontBold"
-import FontItalic from "@/components/editor-toolbars/FontItalic"
-import FontStrike from "@/components/editor-toolbars/FontStrike"
-import FontSubscript from "@/components/editor-toolbars/FontSubscript"
-import FontSuperscript from "@/components/editor-toolbars/FontSuperscript"
-import FontUnderline from "@/components/editor-toolbars/FontUnderline"
 import Hr from "@/components/Hr"
 import cn from "clsx"
 
+import ColorFill from "../editor-toolbars/ColorFill"
+import ColorText from "../editor-toolbars/ColorText"
+import FontBold from "../editor-toolbars/FontBold"
 import FontFamily from "../editor-toolbars/FontFamily"
+import FontItalic from "../editor-toolbars/FontItalic"
 import FontSize from "../editor-toolbars/FontSize"
 import FontSizeMinus from "../editor-toolbars/FontSizeMinus"
 import FontSizePus from "../editor-toolbars/FontSizePus"
+import FontStrike from "../editor-toolbars/FontStrike"
+import FontSubscript from "../editor-toolbars/FontSubscript"
+import FontSuperscript from "../editor-toolbars/FontSuperscript"
+import FontUnderline from "../editor-toolbars/FontUnderline"
 import FormatBrush from "../editor-toolbars/FormatBrush"
 import FormatClear from "../editor-toolbars/FormatClear"
 import HeadingLevel from "../editor-toolbars/HeadingLevel"
 import LineHeight from "../editor-toolbars/LineHeight"
 import Redo from "../editor-toolbars/Redo"
+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 Undo from "../editor-toolbars/Undo"
 
 export default function ToolbarRich() {
@@ -56,6 +60,10 @@ export default function ToolbarRich() {
                     <FontSubscript />
                     <ColorText />
                     <ColorFill />
+                    <TextAlignLeft />
+                    <TextAlignCenter />
+                    <TextAlignRight />
+                    <TextAlignJustify />
                 </div>
             </div>
             <div className="h-[62px]" />

packages/tiptiz-editor-icons/src/index.ts

@@ -29,7 +29,6 @@ export const ediHeadingPound = mdiFormatHeaderPound
 export const ediFontSizePlus = "M1 19L6.25 5h2.5L14 19h-2.4l-1.275-3.575h-5.65L3.4 19zm4.4-5.6h4.2L7.55 7.6h-.1zM18 16v-3h-3v-2h3V8h2v3h3v2h-3v3z"
 export const ediFontSizeMinus = "M1 19L6.25 5h2.5L14 19h-2.4l-1.275-3.575h-5.65L3.4 19zm4.4-5.6h4.2L7.55 7.6h-.1zM15 13v-2h8v2z"
 
-
 import { mdiFormatLineSpacing } from "@mdi/js"
 
 export const ediLineHeight = mdiFormatLineSpacing // "M5.707 3.293L5 2.586l-.707.707L2 5.586l-.707.707l1.414 1.414L3.414 7L4 6.414v11.171L3.414 17l-.707-.707l-1.414 1.414l.707.707l2.293 2.293l.707.707l.707-.707L8 18.414l.707-.707l-1.414-1.414l-.707.707l-.586.585V6.414L6.586 7l.707.707l1.414-1.414L8 5.586zM13 4h-1v2h10V4zm-2 7h-1v2h12v-2zm1 7h10v2H12z"
@@ -55,3 +54,10 @@ import { mdiColorHelper, mdiFormatColorFill, mdiFormatColorText } from "@mdi/js"
 export const ediColorHelper = mdiColorHelper
 export const ediColorText = mdiFormatColorText
 export const ediColorFill = mdiFormatColorFill
+
+import { mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignRight, mdiFormatAlignJustify } from "@mdi/js"
+
+export const ediAlignLeft = mdiFormatAlignLeft
+export const ediAlignCenter = mdiFormatAlignCenter
+export const ediAlignRight = mdiFormatAlignRight
+export const ediAlignJustify = mdiFormatAlignJustify