Add font-size-toolbar-button

udecode · Dec 26, 2024 · 7195c46 · 7195c46
1 parent ab95053
commit 7195c46
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 31 deletions.
diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
@@ -1,6 +1,18 @@
 'use client';
-import { type TElement, getAboveNode, getMarks } from '@udecode/plate-common';
-import { useEditorSelector } from '@udecode/plate-common/react';
+import { useState } from 'react';
+
+import {
+  type TElement,
+  getAboveNode,
+  getMarks,
+  setMarks,
+} from '@udecode/plate-common';
+import {
+  focusEditor,
+  useEditorPlugin,
+  useEditorSelector,
+} from '@udecode/plate-common/react';
+import { BaseFontSizePlugin } from '@udecode/plate-font';
 import { FontSizePlugin } from '@udecode/plate-font/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
 import { Minus, Plus } from 'lucide-react';
@@ -13,9 +25,11 @@ const FONT_SIZE_MAP = {
   [HEADING_KEYS.h3]: '20px',
 };
 
-export const FontSizeToolbarButton = () => {
-  // const { api } = useEditorPlugin(FontSizePlugin);
-  // const setChangedFontSize = api.fontSize.setChangedFontSize;
+export function FontSizeToolbarButton() {
+  const [inputValue, setInputValue] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const { api, editor } = useEditorPlugin(BaseFontSizePlugin);
+  const setChangedFontSize = api.fontSize.setChangedFontSize;
 
   const cursorFontSize = useEditorSelector((editor) => {
     const marks = getMarks(editor) || {};
@@ -36,25 +50,51 @@ export const FontSizeToolbarButton = () => {
     return '16px';
   }, []);
 
+  const handleInputChange = () => {
+    if (inputValue && inputValue !== cursorFontSize) {
+      setMarks(editor, {
+        [FontSizePlugin.key]: inputValue,
+      });
+    }
+
+    focusEditor(editor);
+  };
+
+  const displayValue = isFocused ? inputValue : cursorFontSize;
+
   return (
     <div className="flex items-center gap-1 rounded-md bg-muted/70 p-0">
       <ToolbarButton
-        // onClick={() =>
-        //   setChangedFontSize({ fontSize: cursorFontSize, increase: false })
-        // }
+        onClick={() =>
+          setChangedFontSize({ fontSize: displayValue, increase: false })
+        }
         onMouseDown={(e) => e.preventDefault()}
       >
         <Minus />
       </ToolbarButton>
-      <ToolbarButton>{cursorFontSize as string}</ToolbarButton>
+      <input
+        className="w-16 bg-transparent px-2 text-center"
+        value={displayValue}
+        onBlur={() => {
+          setIsFocused(false);
+          handleInputChange();
+        }}
+        onChange={(e) => setInputValue(e.target.value)}
+        onFocus={() => {
+          setIsFocused(true);
+          setInputValue(cursorFontSize);
+        }}
+        onKeyDown={(e) => e.key === 'Enter' && handleInputChange()}
+        type="text"
+      />
       <ToolbarButton
-        // onClick={() =>
-        //   setChangedFontSize({ fontSize: cursorFontSize, increase: true })
-        // }
+        onClick={() =>
+          setChangedFontSize({ fontSize: displayValue, increase: true })
+        }
         onMouseDown={(e) => e.preventDefault()}
       >
         <Plus />
       </ToolbarButton>
     </div>
   );
-};
+}
diff --git a/packages/font/src/lib/BaseFontSizePlugin.ts b/packages/font/src/lib/BaseFontSizePlugin.ts
@@ -1,26 +1,48 @@
-import { createSlatePlugin } from '@udecode/plate-common';
+import {
+  type PluginConfig,
+  bindFirst,
+  createTSlatePlugin,
+} from '@udecode/plate-common';
 
-export const BaseFontSizePlugin = createSlatePlugin({
+import { type getChangedFontSizeOptions, setChangedFontSize } from './utils';
+
+export type BaseFontSizeConfig = PluginConfig<
+  'fontSize',
+  FontSizeSelectors,
+  {
+    fontSize: {
+      setChangedFontSize: (options: getChangedFontSizeOptions) => void;
+    };
+  }
+>;
+
+type FontSizeSelectors = {};
+
+export const BaseFontSizePlugin = createTSlatePlugin({
   key: 'fontSize',
   inject: {
     nodeProps: {
       nodeKey: 'fontSize',
     },
   },
-}).extend(({ type }) => ({
-  parsers: {
-    html: {
-      deserializer: {
-        isLeaf: true,
-        parse: ({ element }) => ({ [type]: element.style.fontSize }),
-        rules: [
-          {
-            validStyle: {
-              fontSize: '*',
+})
+  .extend(({ type }) => ({
+    parsers: {
+      html: {
+        deserializer: {
+          isLeaf: true,
+          parse: ({ element }) => ({ [type]: element.style.fontSize }),
+          rules: [
+            {
+              validStyle: {
+                fontSize: '*',
+              },
             },
-          },
-        ],
+          ],
+        },
       },
     },
-  },
-}));
+  }))
+  .extendApi(({ editor }) => ({
+    setChangedFontSize: bindFirst(setChangedFontSize, editor),
+  }));
diff --git a/packages/font/src/lib/utils/setChangedFontSize.ts b/packages/font/src/lib/utils/setChangedFontSize.ts
@@ -1,6 +1,6 @@
 import { type SlateEditor, setMarks } from '@udecode/plate-common';
 
-import { FontSizePlugin } from '../../react';
+import { BaseFontSizePlugin } from '../BaseFontSizePlugin';
 
 export const setChangedFontSize = (
   editor: SlateEditor,
@@ -9,7 +9,7 @@ export const setChangedFontSize = (
   const { fontSize, increase } = options;
 
   setMarks(editor, {
-    [FontSizePlugin.key]: getChangedFontSize({ fontSize, increase }),
+    [BaseFontSizePlugin.key]: getChangedFontSize({ fontSize, increase }),
   });
 };