update: components, select menu

docs/package.json

@@ -11,6 +11,7 @@
     "dependencies": {
         "@emotion/cache": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
         "@mui/material": "^6.3.0",
         "@mui/material-nextjs": "^6.3.0",

docs/src/components/PlainTextSelect.tsx

@@ -0,0 +1,48 @@
+import { mdiMenuDown } from "@mdi/js"
+import { Icon } from "@mdi/react"
+import { ButtonBase, ClickAwayListener, Menu, MenuItem, MenuList } from "@mui/material"
+import cn from "clsx"
+import React, { useState } from "react"
+
+import useMenuTrigger from "@/hooks/useMenuTrigger"
+
+interface PlainTextSelectProps<T> {
+    className?: string
+    items: T[]
+    renderLabel: (value: T | null) => string
+    children: (value: T) => React.ReactNode
+}
+
+export default function PlainTextSelect<T>(
+    { className, items, renderLabel, children }: PlainTextSelectProps<T>
+) {
+    const [value, setValue] = useState<T | null>(null)
+    const { anchor, open, handleClick, handleClose } = useMenuTrigger()
+    const handleMenuClick = (data: T | null) => {
+        setValue(data)
+        handleClose()
+    }
+    return (
+        <>
+            <ButtonBase
+                className={cn("bar-menu-selector px-1", className)}
+                onClick={handleClick}
+            >
+                {renderLabel(value)}
+                <Icon path={mdiMenuDown} rotate={open ? 180 : 0} size={1} />
+            </ButtonBase>
+            <Menu open={open} anchorEl={anchor}>
+                <ClickAwayListener onClickAway={handleClose}>
+                    <MenuList>
+                        <MenuItem onClick={() => handleMenuClick(null)}>None</MenuItem>
+                        {items.map((item, index) => (
+                            <MenuItem key={index} onClick={() => handleMenuClick(item)}>
+                                {children(item)}
+                            </MenuItem>
+                        ))}
+                    </MenuList>
+                </ClickAwayListener>
+            </Menu>
+        </>
+    )
+}

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

@@ -1,17 +1,15 @@
-import { MenuItem, Select } from "@mui/material"
+import PlainTextSelect from "@/components/PlainTextSelect"
 
 const fonts = ["Inter", "Roboto", "sans-serif", "serif", "monospace", "cursive", "Arial", "Helvetica", "fantasy"]
 
 export default function FontFamily() {
     return (
-        <Select<string>
-            className="w-[140px]"
-            size="small"
-            displayEmpty
-            renderValue={value => value || "Font Family"}
+        <PlainTextSelect
+            className="w-[120px]"
+            items={fonts}
+            renderLabel={value => value || "Font Family"}
         >
-            <MenuItem value="">None</MenuItem>
-            {fonts.map(font => <MenuItem key={font} value={font}>{font}</MenuItem>)}
-        </Select>
+            {font => font}
+        </PlainTextSelect>
     )
 }

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

@@ -0,0 +1,16 @@
+"use client"
+import PlainTextSelect from "@/components/PlainTextSelect"
+
+const sizes = [12, 14, 15, 16, 17, 18, 20, 22, 24, 26].slice(6)
+
+export default function FontSize() {
+    return (
+        <PlainTextSelect
+            className="w-[100px]"
+            items={sizes}
+            renderLabel={value => value ? value + " px" : "Font Size"}
+        >
+            {size => <span style={{ fontSize: size }}>{size} px</span>}
+        </PlainTextSelect>
+    )
+}

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

@@ -1,15 +1,17 @@
 "use client"
+import "@/styles/toolbars.css"
+
 import cn from "clsx"
 
-import FontFamily from "@/components/editor-toolbars/FontFamily"
 import Hr from "@/components/Hr"
 
+import FontFamily from "../editor-toolbars/FontFamily"
+import FontSize from "../editor-toolbars/FontSize"
 import FormatBrush from "../editor-toolbars/FormatBrush"
 import FormatClear from "../editor-toolbars/FormatClear"
 import Redo from "../editor-toolbars/Redo"
 import Undo from "../editor-toolbars/Undo"
 
-// TODO fix tailwindcss dark mode
 export default function ToolbarRich() {
     return (
         <>
@@ -30,6 +32,7 @@ export default function ToolbarRich() {
                 <Hr className="h-[80%] mr-3" />
                 <div>
                     <FontFamily />
+                    <FontSize />
                 </div>
             </div>
             <div className="h-[62px]" />

docs/src/content/en/index.mdx

@@ -2,10 +2,17 @@
 title: "Home page"
 ---
 import "@/components/page-index/index.css"
+
 import Heading from "@/components/page-index/Heading"
+import TiptapEditor from "@/components/page-index/TiptapEditor"
+import ToolbarRich from "@/components/page-index/ToolbarRich"
 
-<Heading/>
+<Heading />
 
 ```bash
 pnpm add @tiptiz/editor-icons
-```
+```
+
+<TiptapEditor>
+    <ToolbarRich />
+</TiptapEditor>

docs/src/hooks/useMenuTrigger.ts

@@ -0,0 +1,20 @@
+import type React from "react"
+
+import { useState } from "react"
+
+export default function useMenuTrigger() {
+    const [anchor, setAnchor] = useState<HTMLElement | null>(null)
+    const open = Boolean(anchor)
+
+    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        setAnchor(e.currentTarget)
+    }
+    const handleClose = () => setAnchor(null)
+
+    return {
+        anchor,
+        open,
+        handleClick,
+        handleClose
+    }
+}

docs/src/styles/toolbars.css

@@ -0,0 +1,7 @@
+button.bar-menu-selector {
+    text-transform: initial;
+    justify-content: space-between;
+}
+.bar-menu-selector > svg {
+    transition: 0.4s transform;
+}

docs/tailwind.config.ts

@@ -6,5 +6,6 @@ export default {
         "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
         "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
     ],
-    darkMode: ["variant", "dark (&:where(.dark *))"]
+    darkMode: ["variant", "dark (&:where(.dark *))"],
+    important: true
 } satisfies Config