update: margin

tiptiz · Dec 29, 2024 · 47d6f8b · 47d6f8b
1 parent 10d4914
commit 47d6f8b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/docs/src/components/IconBar.tsx b/docs/src/components/IconBar.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps } from "@mui/material"
 import type { AriaAttributes, CSSProperties, RefObject } from "react"
 
-import { Icon } from "@mdi/react"
+import { Icon, Stack } from "@mdi/react"
 import { Button, Tooltip } from "@mui/material"
 
 export interface HTMLProps extends AriaAttributes {
@@ -25,7 +25,7 @@ export interface IconProps extends HTMLProps {
 }
 
 export interface IconBarProps extends ButtonProps {
-    path: string
+    path: string | string[]
     tooltip?: string
     disabled?: boolean
     onClick?: () => void
@@ -42,7 +42,15 @@ export default function IconBar({ tooltip, iconProps, path, ...btnProps }: IconB
                 color="inherit"
                 {...btnProps}
             >
-                <Icon size={0.8} path={path} {...iconProps} />
+                {typeof path === "string"
+                    ? <Icon size={0.8} path={path} {...iconProps} />
+                    : (
+                        <Stack size={0.8}>
+                            {path.map((p, i) => (
+                                <Icon key={i} path={p} {...iconProps} />
+                            ))}
+                        </Stack>
+                    )}
             </Button>
         </Tooltip>
     )

diff --git a/docs/src/components/editor-toolbars/Margin.tsx b/docs/src/components/editor-toolbars/Margin.tsx
@@ -0,0 +1,18 @@
+import PlainTextDropdown from "@/components/PlainTextDropdown"
+import { Icon, Stack } from "@mdi/react"
+import { ediMarginStack } from "@tiptiz/editor-icons"
+
+export default function Margin() {
+    return (
+        <PlainTextDropdown
+            tooltip="Margin"
+            Label={(
+                <Stack size={0.8}>
+                    {ediMarginStack.map((path, i) => <Icon path={path} key={i} />)}
+                </Stack>
+            )}
+        >
+            Margin panel
+        </PlainTextDropdown>
+    )
+}
diff --git a/docs/src/components/page-index/ToolbarRich.tsx b/docs/src/components/page-index/ToolbarRich.tsx
@@ -20,13 +20,16 @@ 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 Margin from "../editor-toolbars/Margin"
 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"
 
+const Splitter = <Hr className="h-[80%] mx-2" />
+
 export default function ToolbarRich() {
     return (
         <>
@@ -44,8 +47,8 @@ export default function ToolbarRich() {
                     <FormatClear />
                     <FormatBrush />
                 </div>
-                <Hr className="h-[80%] mx-2" />
-                <div className="w-95">
+                {Splitter}
+                <div className="w-[388px] flex flex-wrap justify-around">
                     <FontFamily />
                     <FontSize />
                     <HeadingLevel />
@@ -64,7 +67,9 @@ export default function ToolbarRich() {
                     <TextAlignCenter />
                     <TextAlignRight />
                     <TextAlignJustify />
+                    <Margin />
                 </div>
+                {Splitter}
             </div>
             <div className="h-[62px]" />
         </>

diff --git a/packages/tiptiz-editor-icons/src/index.ts b/packages/tiptiz-editor-icons/src/index.ts
@@ -61,3 +61,10 @@ export const ediAlignLeft = mdiFormatAlignLeft
 export const ediAlignCenter = mdiFormatAlignCenter
 export const ediAlignRight = mdiFormatAlignRight
 export const ediAlignJustify = mdiFormatAlignJustify
+
+import { mdiBorderNoneVariant, mdiSquareMedium } from "@mdi/js"
+
+export const ediMarginContent = mdiSquareMedium
+export const ediBorderNoneVariant = mdiBorderNoneVariant
+
+export const ediMarginStack = [ediMarginContent, ediBorderNoneVariant]