From b6e771a59f01de74acf0d1db6b3122332a9d8c8c Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 26 Dec 2024 12:14:48 +0800
Subject: [PATCH 1/9] Move tooltip from `ToolbarSplitButton` to
 `ToolbarSplitButtonPrimary`

---
 .../plate-ui/indent-list-toolbar-button.tsx   | 12 +++--
 .../default/plate-ui/media-toolbar-button.tsx |  3 +-
 .../src/registry/default/plate-ui/toolbar.tsx | 46 ++++++++++---------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
index c1d809ac33..e9ead8cc3b 100644
--- a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
@@ -41,15 +41,16 @@ export function NumberedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Numbered List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => {
+        onClick={() =>
           toggleIndentList(editor, {
             listStyleType: ListStyleType.Decimal,
-          });
-        }}
+          })
+        }
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Numbered List"
       >
         <ListOrdered className="size-4" />
       </ToolbarSplitButtonPrimary>
@@ -128,7 +129,7 @@ export function BulletedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Bulleted List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
         onClick={() => {
@@ -137,6 +138,7 @@ export function BulletedIndentListToolbarButton() {
           });
         }}
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Bulleted List"
       >
         <List className="size-4" />
       </ToolbarSplitButtonPrimary>
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index fa9689a1bb..25a3e8c102 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -114,9 +114,8 @@ export function MediaToolbarButton({
           }
         }}
         pressed={openState.open}
-        tooltip={currentConfig.tooltip}
       >
-        <ToolbarSplitButtonPrimary>
+        <ToolbarSplitButtonPrimary tooltip={currentConfig.tooltip}>
           {currentConfig.icon}
         </ToolbarSplitButtonPrimary>
 
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index 1d27f55edd..38d2064918 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -170,28 +170,30 @@ export const ToolbarSplitButton = React.forwardRef<
   );
 });
 
-export const ToolbarSplitButtonPrimary = React.forwardRef<
-  React.ElementRef<typeof ToolbarToggleItem>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
->(({ children, className, size, variant, ...props }, ref) => {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        toolbarButtonVariants({
-          size,
-          variant,
-        }),
-        'rounded-r-none',
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+export const ToolbarSplitButtonPrimary = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+  >(({ children, className, size, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          toolbarButtonVariants({
+            size,
+            variant,
+          }),
+          'rounded-r-none',
+          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  })
+);
 
 export const ToolbarSplitButtonSecondary = React.forwardRef<
   HTMLButtonElement,

From ab950537729bcc8e74bd0b5ee8a34481855d5ec2 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 26 Dec 2024 16:42:00 +0800
Subject: [PATCH 2/9] tmp

---
 .../styles/default/fixed-toolbar-buttons.json |  2 +-
 .../default/indent-list-toolbar-button.json   |  2 +-
 .../styles/default/media-toolbar-button.json  |  2 +-
 .../r/styles/default/table-dropdown-menu.json |  2 +-
 apps/www/public/r/styles/default/toolbar.json |  2 +-
 .../plate-ui/fixed-toolbar-buttons.tsx        |  2 +
 .../plate-ui/font-size-toolbar-butoon.tsx     | 60 +++++++++++++++++++
 packages/font/src/lib/index.ts                |  1 +
 packages/font/src/lib/utils/index.ts          |  5 ++
 .../font/src/lib/utils/setChangedFontSize.ts  | 48 +++++++++++++++
 yarn.lock                                     | 28 ++++-----
 11 files changed, 135 insertions(+), 19 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
 create mode 100644 packages/font/src/lib/utils/index.ts
 create mode 100644 packages/font/src/lib/utils/setChangedFontSize.ts

diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index f22080cbdb..58df0fa98a 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -14,7 +14,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  ArrowUpToLineIcon,\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  PaintBucketIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n  WandSparklesIcon,\n} from 'lucide-react';\n\nimport { MoreDropdownMenu } from '@/components/plate-ui/more-dropdown-menu';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { ExportToolbarButton } from './export-toolbar-button';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport {\n  BulletedIndentListToolbarButton,\n  NumberedIndentListToolbarButton,\n} from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton tooltip=\"AI commands\">\n              <WandSparklesIcon />\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <ExportToolbarButton>\n              <ArrowUpToLineIcon />\n            </ExportToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <NumberedIndentListToolbarButton />\n            <BulletedIndentListToolbarButton />\n            {/* <IndentListToolbarButton nodeType={ListStyleType.Disc} /> */}\n            {/* <IndentListToolbarButton nodeType={ListStyleType.Decimal} /> */}\n            <IndentTodoToolbarButton />\n            <ToggleToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LineHeightDropdownMenu />\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n        <CommentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  ArrowUpToLineIcon,\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  PaintBucketIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n  WandSparklesIcon,\n} from 'lucide-react';\n\nimport { MoreDropdownMenu } from '@/components/plate-ui/more-dropdown-menu';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { ExportToolbarButton } from './export-toolbar-button';\nimport { FontSizeToolbarButton } from './font-size-toolbar-butoon';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport {\n  BulletedIndentListToolbarButton,\n  NumberedIndentListToolbarButton,\n} from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton tooltip=\"AI commands\">\n              <WandSparklesIcon />\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <ExportToolbarButton>\n              <ArrowUpToLineIcon />\n            </ExportToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n            <FontSizeToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <NumberedIndentListToolbarButton />\n            <BulletedIndentListToolbarButton />\n            <IndentTodoToolbarButton />\n            <ToggleToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LineHeightDropdownMenu />\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n        <CommentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/indent-list-toolbar-button.json b/apps/www/public/r/styles/default/indent-list-toolbar-button.json
index 8b091ef329..8ab7b8e06a 100644
--- a/apps/www/public/r/styles/default/indent-list-toolbar-button.json
+++ b/apps/www/public/r/styles/default/indent-list-toolbar-button.json
@@ -15,7 +15,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { useEditorRef, useEditorSelector } from '@udecode/plate-common/react';\nimport {\n  ListStyleType,\n  someIndentList,\n  toggleIndentList,\n} from '@udecode/plate-indent-list';\nimport { List, ListOrdered } from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nexport function NumberedIndentListToolbarButton() {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const pressed = useEditorSelector(\n    (editor) =>\n      someIndentList(editor, [\n        ListStyleType.Decimal,\n        ListStyleType.LowerAlpha,\n        ListStyleType.UpperAlpha,\n        ListStyleType.LowerRoman,\n        ListStyleType.UpperRoman,\n      ]),\n    []\n  );\n\n  return (\n    <ToolbarSplitButton pressed={openState.open} tooltip=\"Numbered List\">\n      <ToolbarSplitButtonPrimary\n        onClick={() => {\n          toggleIndentList(editor, {\n            listStyleType: ListStyleType.Decimal,\n          });\n        }}\n        pressed={pressed}\n      >\n        <ListOrdered className=\"size-4\" />\n      </ToolbarSplitButtonPrimary>\n\n      <DropdownMenu {...openState} modal={false}>\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent align=\"start\" alignOffset={-32}>\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Decimal,\n                })\n              }\n            >\n              Decimal (1, 2, 3)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.LowerAlpha,\n                })\n              }\n            >\n              Lower Alpha (a, b, c)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.UpperAlpha,\n                })\n              }\n            >\n              Upper Alpha (A, B, C)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.LowerRoman,\n                })\n              }\n            >\n              Lower Roman (i, ii, iii)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.UpperRoman,\n                })\n              }\n            >\n              Upper Roman (I, II, III)\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ToolbarSplitButton>\n  );\n}\n\nexport function BulletedIndentListToolbarButton() {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const pressed = useEditorSelector(\n    (editor) =>\n      someIndentList(editor, [\n        ListStyleType.Disc,\n        ListStyleType.Circle,\n        ListStyleType.Square,\n      ]),\n    []\n  );\n\n  return (\n    <ToolbarSplitButton pressed={openState.open} tooltip=\"Bulleted List\">\n      <ToolbarSplitButtonPrimary\n        onClick={() => {\n          toggleIndentList(editor, {\n            listStyleType: ListStyleType.Disc,\n          });\n        }}\n        pressed={pressed}\n      >\n        <List className=\"size-4\" />\n      </ToolbarSplitButtonPrimary>\n\n      <DropdownMenu {...openState} modal={false}>\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent align=\"start\" alignOffset={-32}>\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Disc,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 rounded-full border border-current bg-current\" />\n                Default\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Circle,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 rounded-full border border-current\" />\n                Circle\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Square,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 border border-current bg-current\" />\n                Square\n              </div>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ToolbarSplitButton>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { useEditorRef, useEditorSelector } from '@udecode/plate-common/react';\nimport {\n  ListStyleType,\n  someIndentList,\n  toggleIndentList,\n} from '@udecode/plate-indent-list';\nimport { List, ListOrdered } from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nexport function NumberedIndentListToolbarButton() {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const pressed = useEditorSelector(\n    (editor) =>\n      someIndentList(editor, [\n        ListStyleType.Decimal,\n        ListStyleType.LowerAlpha,\n        ListStyleType.UpperAlpha,\n        ListStyleType.LowerRoman,\n        ListStyleType.UpperRoman,\n      ]),\n    []\n  );\n\n  return (\n    <ToolbarSplitButton pressed={openState.open}>\n      <ToolbarSplitButtonPrimary\n        className=\"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\"\n        onClick={() =>\n          toggleIndentList(editor, {\n            listStyleType: ListStyleType.Decimal,\n          })\n        }\n        data-state={pressed ? 'on' : 'off'}\n        tooltip=\"Numbered List\"\n      >\n        <ListOrdered className=\"size-4\" />\n      </ToolbarSplitButtonPrimary>\n\n      <DropdownMenu {...openState} modal={false}>\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent align=\"start\" alignOffset={-32}>\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Decimal,\n                })\n              }\n            >\n              Decimal (1, 2, 3)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.LowerAlpha,\n                })\n              }\n            >\n              Lower Alpha (a, b, c)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.UpperAlpha,\n                })\n              }\n            >\n              Upper Alpha (A, B, C)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.LowerRoman,\n                })\n              }\n            >\n              Lower Roman (i, ii, iii)\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onSelect={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.UpperRoman,\n                })\n              }\n            >\n              Upper Roman (I, II, III)\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ToolbarSplitButton>\n  );\n}\n\nexport function BulletedIndentListToolbarButton() {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const pressed = useEditorSelector(\n    (editor) =>\n      someIndentList(editor, [\n        ListStyleType.Disc,\n        ListStyleType.Circle,\n        ListStyleType.Square,\n      ]),\n    []\n  );\n\n  return (\n    <ToolbarSplitButton pressed={openState.open}>\n      <ToolbarSplitButtonPrimary\n        className=\"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\"\n        onClick={() => {\n          toggleIndentList(editor, {\n            listStyleType: ListStyleType.Disc,\n          });\n        }}\n        data-state={pressed ? 'on' : 'off'}\n        tooltip=\"Bulleted List\"\n      >\n        <List className=\"size-4\" />\n      </ToolbarSplitButtonPrimary>\n\n      <DropdownMenu {...openState} modal={false}>\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent align=\"start\" alignOffset={-32}>\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Disc,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 rounded-full border border-current bg-current\" />\n                Default\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Circle,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 rounded-full border border-current\" />\n                Circle\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={() =>\n                toggleIndentList(editor, {\n                  listStyleType: ListStyleType.Square,\n                })\n              }\n            >\n              <div className=\"flex items-center gap-2\">\n                <div className=\"size-2 border border-current bg-current\" />\n                Square\n              </div>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ToolbarSplitButton>\n  );\n}\n",
       "path": "plate-ui/indent-list-toolbar-button.tsx",
       "target": "components/plate-ui/indent-list-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index b288486770..539ad99e6d 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useCallback, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { insertNodes, isUrl } from '@udecode/plate-common';\nimport { useEditorRef } from '@udecode/plate-common/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { toast } from 'sonner';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from './alert-dialog';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { FloatingInput } from './input';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    title: string;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    title: 'Insert Audio',\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    title: 'Insert File',\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    title: 'Insert Image',\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    title: 'Insert Video',\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaToolbarButton({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  return (\n    <>\n      <ToolbarSplitButton\n        onClick={() => {\n          openFilePicker();\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown') {\n            e.preventDefault();\n            openState.onOpenChange(true);\n          }\n        }}\n        pressed={openState.open}\n        tooltip={currentConfig.tooltip}\n      >\n        <ToolbarSplitButtonPrimary>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenu {...openState} modal={false} {...props}>\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n\n          <DropdownMenuContent\n            onClick={(e) => e.stopPropagation()}\n            align=\"start\"\n            alignOffset={-32}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuItem onSelect={() => openFilePicker()}>\n                {currentConfig.icon}\n                Upload from computer\n              </DropdownMenuItem>\n              <DropdownMenuItem onSelect={() => setDialogOpen(true)}>\n                <LinkIcon />\n                Insert via URL\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ToolbarSplitButton>\n\n      <AlertDialog\n        open={dialogOpen}\n        onOpenChange={(value) => {\n          setDialogOpen(value);\n        }}\n      >\n        <AlertDialogContent className=\"gap-6\">\n          <MediaUrlDialogContent\n            currentConfig={currentConfig}\n            nodeType={nodeType}\n            setOpen={setDialogOpen}\n          />\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n\nfunction MediaUrlDialogContent({\n  currentConfig,\n  nodeType,\n  setOpen,\n}: {\n  currentConfig: (typeof MEDIA_CONFIG)[string];\n  nodeType: string;\n  setOpen: (value: boolean) => void;\n}) {\n  const editor = useEditorRef();\n  const [url, setUrl] = useState('');\n\n  const embedMedia = useCallback(() => {\n    if (!isUrl(url)) return toast.error('Invalid URL');\n\n    setOpen(false);\n    insertNodes(editor, {\n      children: [{ text: '' }],\n      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,\n      type: nodeType,\n      url,\n    });\n  }, [url, editor, nodeType, setOpen]);\n\n  return (\n    <>\n      <AlertDialogHeader>\n        <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>\n      </AlertDialogHeader>\n\n      <AlertDialogDescription className=\"group relative w-full\">\n        <FloatingInput\n          id=\"url\"\n          className=\"w-full\"\n          value={url}\n          onChange={(e) => setUrl(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') embedMedia();\n          }}\n          label=\"URL\"\n          placeholder=\"\"\n          type=\"url\"\n          autoFocus\n        />\n      </AlertDialogDescription>\n\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction\n          onClick={(e) => {\n            e.preventDefault();\n            embedMedia();\n          }}\n        >\n          Accept\n        </AlertDialogAction>\n      </AlertDialogFooter>\n    </>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useCallback, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { insertNodes, isUrl } from '@udecode/plate-common';\nimport { useEditorRef } from '@udecode/plate-common/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { toast } from 'sonner';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from './alert-dialog';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { FloatingInput } from './input';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    title: string;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    title: 'Insert Audio',\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    title: 'Insert File',\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    title: 'Insert Image',\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    title: 'Insert Video',\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaToolbarButton({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  return (\n    <>\n      <ToolbarSplitButton\n        onClick={() => {\n          openFilePicker();\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown') {\n            e.preventDefault();\n            openState.onOpenChange(true);\n          }\n        }}\n        pressed={openState.open}\n      >\n        <ToolbarSplitButtonPrimary tooltip={currentConfig.tooltip}>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenu {...openState} modal={false} {...props}>\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n\n          <DropdownMenuContent\n            onClick={(e) => e.stopPropagation()}\n            align=\"start\"\n            alignOffset={-32}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuItem onSelect={() => openFilePicker()}>\n                {currentConfig.icon}\n                Upload from computer\n              </DropdownMenuItem>\n              <DropdownMenuItem onSelect={() => setDialogOpen(true)}>\n                <LinkIcon />\n                Insert via URL\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ToolbarSplitButton>\n\n      <AlertDialog\n        open={dialogOpen}\n        onOpenChange={(value) => {\n          setDialogOpen(value);\n        }}\n      >\n        <AlertDialogContent className=\"gap-6\">\n          <MediaUrlDialogContent\n            currentConfig={currentConfig}\n            nodeType={nodeType}\n            setOpen={setDialogOpen}\n          />\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n\nfunction MediaUrlDialogContent({\n  currentConfig,\n  nodeType,\n  setOpen,\n}: {\n  currentConfig: (typeof MEDIA_CONFIG)[string];\n  nodeType: string;\n  setOpen: (value: boolean) => void;\n}) {\n  const editor = useEditorRef();\n  const [url, setUrl] = useState('');\n\n  const embedMedia = useCallback(() => {\n    if (!isUrl(url)) return toast.error('Invalid URL');\n\n    setOpen(false);\n    insertNodes(editor, {\n      children: [{ text: '' }],\n      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,\n      type: nodeType,\n      url,\n    });\n  }, [url, editor, nodeType, setOpen]);\n\n  return (\n    <>\n      <AlertDialogHeader>\n        <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>\n      </AlertDialogHeader>\n\n      <AlertDialogDescription className=\"group relative w-full\">\n        <FloatingInput\n          id=\"url\"\n          className=\"w-full\"\n          value={url}\n          onChange={(e) => setUrl(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') embedMedia();\n          }}\n          label=\"URL\"\n          placeholder=\"\"\n          type=\"url\"\n          autoFocus\n        />\n      </AlertDialogDescription>\n\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction\n          onClick={(e) => {\n            e.preventDefault();\n            embedMedia();\n          }}\n        >\n          Accept\n        </AlertDialogAction>\n      </AlertDialogFooter>\n    </>\n  );\n}\n",
       "path": "plate-ui/media-toolbar-button.tsx",
       "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/table-dropdown-menu.json b/apps/www/public/r/styles/default/table-dropdown-menu.json
index 01dca91675..267c5f65e2 100644
--- a/apps/www/public/r/styles/default/table-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/table-dropdown-menu.json
@@ -16,7 +16,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useCallback, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { someNode } from '@udecode/plate-common';\nimport {\n  focusEditor,\n  useEditorPlugin,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport {\n  deleteColumn,\n  deleteRow,\n  deleteTable,\n  insertTable,\n  insertTableRow,\n} from '@udecode/plate-table';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport {\n  Minus,\n  Plus,\n  RectangleHorizontal,\n  RectangleVertical,\n  Table,\n  Trash,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst COLS = 8;\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n  const tableSelected = useEditorSelector(\n    (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n    []\n  );\n\n  const { editor, tf } = useEditorPlugin(TablePlugin);\n\n  const openState = useOpenState();\n\n  const [table, setTable] = useState(\n    Array.from({ length: COLS }, () => Array.from({ length: COLS }).fill(0))\n  );\n  const [info, setInfo] = useState({ colCount: 0, rowCount: 0 });\n\n  const onCellMove = useCallback(\n    (rowIndex: number, colIndex: number) => {\n      const newTables = [...table];\n\n      for (let i = 0; i < newTables.length; i++) {\n        for (let j = 0; j < newTables[i].length; j++) {\n          newTables[i][j] =\n            i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;\n        }\n      }\n\n      setInfo({ colCount: colIndex + 1, rowCount: rowIndex + 1 });\n      setTable(newTables);\n    },\n    [table]\n  );\n\n  const onInsertTable = useCallback(() => {\n    insertTable(editor, info);\n  }, [editor, info]);\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Table\" isDropdown>\n          <Table />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex w-[180px] min-w-0 flex-col\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Table />\n              <span>Table</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent className=\"m-0 p-0\">\n              <div className=\"m-0 !flex flex-col p-0\" onClick={onInsertTable}>\n                <div className=\"grid size-[130px] grid-cols-8 gap-0.5 p-1\">\n                  {table.map((rows, rowIndex) =>\n                    rows.map((value, columIndex) => {\n                      return (\n                        <div\n                          key={`(${rowIndex},${columIndex})`}\n                          className={cn(\n                            'col-span-1 size-3 border border-solid bg-secondary',\n                            !!value && 'border-current'\n                          )}\n                          onMouseMove={() => {\n                            onCellMove(rowIndex, columIndex);\n                          }}\n                        />\n                      );\n                    })\n                  )}\n                </div>\n\n                <div className=\"text-center text-xs text-current\">\n                  {info.rowCount} x {info.colCount}\n                </div>\n              </div>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger disabled={!tableSelected}>\n              <RectangleVertical />\n              <span>Column</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  tf.insert.tableColumn();\n                  focusEditor(editor);\n                }}\n              >\n                <Plus />\n                Insert column after\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  deleteColumn(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Minus />\n                Delete column\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger disabled={!tableSelected}>\n              <RectangleHorizontal />\n              <span>Row</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  insertTableRow(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Plus />\n                Insert row after\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  deleteRow(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Minus />\n                Delete row\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                deleteTable(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Trash />\n              Delete table\n            </DropdownMenuItem>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useCallback, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { someNode } from '@udecode/plate-common';\nimport {\n  focusEditor,\n  useEditorPlugin,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport {\n  deleteColumn,\n  deleteRow,\n  deleteTable,\n  insertTable,\n  insertTableRow,\n} from '@udecode/plate-table';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport {\n  Minus,\n  Plus,\n  RectangleHorizontal,\n  RectangleVertical,\n  Table,\n  Trash,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst COLS = 8;\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n  const tableSelected = useEditorSelector(\n    (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n    []\n  );\n\n  const { editor, tf } = useEditorPlugin(TablePlugin);\n\n  const openState = useOpenState();\n\n  const [table, setTable] = useState(\n    Array.from({ length: COLS }, () => Array.from({ length: COLS }).fill(0))\n  );\n  const [size, setSize] = useState({ colCount: 0, rowCount: 0 });\n\n  const onCellMove = useCallback(\n    (rowIndex: number, colIndex: number) => {\n      const newTables = [...table];\n\n      for (let i = 0; i < newTables.length; i++) {\n        for (let j = 0; j < newTables[i].length; j++) {\n          newTables[i][j] =\n            i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;\n        }\n      }\n\n      setSize({ colCount: colIndex + 1, rowCount: rowIndex + 1 });\n      setTable(newTables);\n    },\n    [table]\n  );\n\n  const onInsertTable = useCallback(() => {\n    insertTable(editor, size);\n    focusEditor(editor);\n  }, [editor, size]);\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Table\" isDropdown>\n          <Table />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex w-[180px] min-w-0 flex-col\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Table />\n              <span>Table</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent className=\"m-0 p-0\">\n              <div className=\"m-0 !flex flex-col p-0\" onClick={onInsertTable}>\n                <div className=\"grid size-[130px] grid-cols-8 gap-0.5 p-1\">\n                  {table.map((rows, rowIndex) =>\n                    rows.map((value, columIndex) => {\n                      return (\n                        <div\n                          key={`(${rowIndex},${columIndex})`}\n                          className={cn(\n                            'col-span-1 size-3 border border-solid bg-secondary',\n                            !!value && 'border-current'\n                          )}\n                          onMouseMove={() => {\n                            onCellMove(rowIndex, columIndex);\n                          }}\n                        />\n                      );\n                    })\n                  )}\n                </div>\n\n                <div className=\"text-center text-xs text-current\">\n                  {size.rowCount} x {size.colCount}\n                </div>\n              </div>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger disabled={!tableSelected}>\n              <RectangleVertical />\n              <span>Column</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  tf.insert.tableColumn();\n                  focusEditor(editor);\n                }}\n              >\n                <Plus />\n                Insert column after\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  deleteColumn(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Minus />\n                Delete column\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger disabled={!tableSelected}>\n              <RectangleHorizontal />\n              <span>Row</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  insertTableRow(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Plus />\n                Insert row after\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                disabled={!tableSelected}\n                onSelect={() => {\n                  deleteRow(editor);\n                  focusEditor(editor);\n                }}\n              >\n                <Minus />\n                Delete row\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                deleteTable(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Trash />\n              Delete table\n            </DropdownMenuItem>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/table-dropdown-menu.tsx",
       "target": "components/plate-ui/table-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 562b75dfdb..07029fd1b8 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -7,7 +7,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarButton>,\n  React.ComponentPropsWithoutRef<typeof ToolbarButton>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <ToolbarButton\n      ref={ref}\n      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}\n      {...props}\n    >\n      {children}\n    </ToolbarButton>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'> & {\n    pressed?: boolean;\n  }\n>(({ children, className, pressed, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        toolbarButtonVariants({\n          size,\n          variant,\n        }),\n        'rounded-r-none',\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',\n        pressed && 'bg-accent text-accent-foreground',\n        className\n      )}\n      data-pressed={pressed}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<'span'> &\n    VariantProps<typeof dropdownArrowVariants>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',\n        className\n      )}\n      onClick={(e) => e.stopPropagation()}\n      role=\"button\"\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </span>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarButton>,\n  React.ComponentPropsWithoutRef<typeof ToolbarButton>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <ToolbarButton\n      ref={ref}\n      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}\n      {...props}\n    >\n      {children}\n    </ToolbarButton>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = withTooltip(\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n  >(({ children, className, size, variant, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          toolbarButtonVariants({\n            size,\n            variant,\n          }),\n          'rounded-r-none',\n          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  })\n);\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<'span'> &\n    VariantProps<typeof dropdownArrowVariants>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',\n        className\n      )}\n      onClick={(e) => e.stopPropagation()}\n      role=\"button\"\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </span>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index b9c5a2d180..6e9955b627 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -42,6 +42,7 @@ import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
 import { ExportToolbarButton } from './export-toolbar-button';
+import { FontSizeToolbarButton } from './font-size-toolbar-butoon';
 import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
 import {
   BulletedIndentListToolbarButton,
@@ -88,6 +89,7 @@ export function FixedToolbarButtons() {
           <ToolbarGroup>
             <InsertDropdownMenu />
             <TurnIntoDropdownMenu />
+            <FontSizeToolbarButton />
           </ToolbarGroup>
 
           <ToolbarGroup>
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
new file mode 100644
index 0000000000..976ff18840
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
@@ -0,0 +1,60 @@
+'use client';
+import { type TElement, getAboveNode, getMarks } from '@udecode/plate-common';
+import { useEditorSelector } from '@udecode/plate-common/react';
+import { FontSizePlugin } from '@udecode/plate-font/react';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+import { Minus, Plus } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+const FONT_SIZE_MAP = {
+  [HEADING_KEYS.h1]: '36px',
+  [HEADING_KEYS.h2]: '24px',
+  [HEADING_KEYS.h3]: '20px',
+};
+
+export const FontSizeToolbarButton = () => {
+  // const { api } = useEditorPlugin(FontSizePlugin);
+  // const setChangedFontSize = api.fontSize.setChangedFontSize;
+
+  const cursorFontSize = useEditorSelector((editor) => {
+    const marks = getMarks(editor) || {};
+
+    if (marks[FontSizePlugin.key]) return marks[FontSizePlugin.key] as string;
+
+    const entry = getAboveNode<TElement>(editor, {
+      at: editor.selection?.focus,
+    });
+
+    if (!entry) return '16px';
+
+    const [node] = entry;
+
+    if (node.type in FONT_SIZE_MAP)
+      return FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP];
+
+    return '16px';
+  }, []);
+
+  return (
+    <div className="flex items-center gap-1 rounded-md bg-muted/70 p-0">
+      <ToolbarButton
+        // onClick={() =>
+        //   setChangedFontSize({ fontSize: cursorFontSize, increase: false })
+        // }
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <Minus />
+      </ToolbarButton>
+      <ToolbarButton>{cursorFontSize as string}</ToolbarButton>
+      <ToolbarButton
+        // onClick={() =>
+        //   setChangedFontSize({ fontSize: cursorFontSize, increase: true })
+        // }
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <Plus />
+      </ToolbarButton>
+    </div>
+  );
+};
diff --git a/packages/font/src/lib/index.ts b/packages/font/src/lib/index.ts
index 3526ae15dc..93eac919ca 100644
--- a/packages/font/src/lib/index.ts
+++ b/packages/font/src/lib/index.ts
@@ -8,3 +8,4 @@ export * from './BaseFontFamilyPlugin';
 export * from './BaseFontSizePlugin';
 export * from './BaseFontWeightPlugin';
 export * from './transforms/index';
+export * from './utils/index';
diff --git a/packages/font/src/lib/utils/index.ts b/packages/font/src/lib/utils/index.ts
new file mode 100644
index 0000000000..9628fad69d
--- /dev/null
+++ b/packages/font/src/lib/utils/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './setChangedFontSize';
diff --git a/packages/font/src/lib/utils/setChangedFontSize.ts b/packages/font/src/lib/utils/setChangedFontSize.ts
new file mode 100644
index 0000000000..380aa77517
--- /dev/null
+++ b/packages/font/src/lib/utils/setChangedFontSize.ts
@@ -0,0 +1,48 @@
+import { type SlateEditor, setMarks } from '@udecode/plate-common';
+
+import { FontSizePlugin } from '../../react';
+
+export const setChangedFontSize = (
+  editor: SlateEditor,
+  options: getChangedFontSizeOptions
+): void => {
+  const { fontSize, increase } = options;
+
+  setMarks(editor, {
+    [FontSizePlugin.key]: getChangedFontSize({ fontSize, increase }),
+  });
+};
+
+export type getChangedFontSizeOptions = {
+  fontSize: string;
+  increase: boolean;
+};
+
+const getChangedFontSize = (options: getChangedFontSizeOptions): string => {
+  const { fontSize, increase } = options;
+
+  if (!fontSize) return '16px';
+
+  const pxMatch = /^([\d.]+)px$/i.exec(fontSize);
+
+  if (pxMatch) {
+    const [, value] = pxMatch;
+    const numericValue = Number.parseFloat(value);
+    const newValue = increase ? numericValue + 2 : numericValue - 2;
+
+    return `${Number(newValue.toFixed(3))}px`;
+  }
+
+  const remMatch = /^([\d.]+)rem$/i.exec(fontSize);
+
+  if (remMatch) {
+    const [, value] = remMatch;
+    const numericValue = Number.parseFloat(value);
+    const newValue = increase ? numericValue + 0.125 : numericValue - 0.125;
+
+    return `${Number(newValue.toFixed(3))}rem`;
+  }
+
+  // TODO: Handle other units
+  return fontSize;
+};
diff --git a/yarn.lock b/yarn.lock
index 5bb8053802..b12715edba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6371,7 +6371,7 @@ __metadata:
   dependencies:
     "@udecode/plate-combobox": "npm:41.0.0"
     "@udecode/plate-markdown": "npm:41.0.0"
-    "@udecode/plate-selection": "npm:41.0.0"
+    "@udecode/plate-selection": "npm:41.0.8"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
   peerDependencies:
@@ -6636,13 +6636,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-csv@npm:41.0.0, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv":
+"@udecode/plate-csv@npm:41.0.9, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-csv@workspace:packages/csv"
   dependencies:
     "@types/papaparse": "npm:^5.3.14"
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-table": "npm:41.0.0"
+    "@udecode/plate-table": "npm:41.0.9"
     papaparse: "npm:^5.4.1"
   peerDependencies:
     "@udecode/plate-common": ">=41.0.5"
@@ -6729,16 +6729,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-docx@npm:41.0.0, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
+"@udecode/plate-docx@npm:41.0.10, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-docx@workspace:packages/docx"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     "@udecode/plate-heading": "npm:41.0.0"
     "@udecode/plate-indent": "npm:41.0.0"
-    "@udecode/plate-indent-list": "npm:41.0.0"
+    "@udecode/plate-indent-list": "npm:41.0.10"
     "@udecode/plate-media": "npm:41.0.0"
-    "@udecode/plate-table": "npm:41.0.0"
+    "@udecode/plate-table": "npm:41.0.9"
     validator: "npm:^13.12.0"
   peerDependencies:
     "@udecode/plate-common": ">=41.0.5"
@@ -6894,7 +6894,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-indent-list@npm:41.0.0, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list":
+"@udecode/plate-indent-list@npm:41.0.10, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-indent-list@workspace:packages/indent-list"
   dependencies:
@@ -7219,7 +7219,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-selection@npm:41.0.0, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
+"@udecode/plate-selection@npm:41.0.8, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-selection@workspace:packages/selection"
   dependencies:
@@ -7292,7 +7292,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-table@npm:41.0.0, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
+"@udecode/plate-table@npm:41.0.9, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-table@workspace:packages/table"
   dependencies:
@@ -7429,9 +7429,9 @@ __metadata:
     "@udecode/plate-combobox": "npm:41.0.0"
     "@udecode/plate-comments": "npm:41.0.0"
     "@udecode/plate-common": "npm:41.0.5"
-    "@udecode/plate-csv": "npm:41.0.0"
+    "@udecode/plate-csv": "npm:41.0.9"
     "@udecode/plate-diff": "npm:41.0.0"
-    "@udecode/plate-docx": "npm:41.0.0"
+    "@udecode/plate-docx": "npm:41.0.10"
     "@udecode/plate-find-replace": "npm:41.0.0"
     "@udecode/plate-floating": "npm:41.0.0"
     "@udecode/plate-font": "npm:41.0.0"
@@ -7439,7 +7439,7 @@ __metadata:
     "@udecode/plate-highlight": "npm:41.0.0"
     "@udecode/plate-horizontal-rule": "npm:41.0.0"
     "@udecode/plate-indent": "npm:41.0.0"
-    "@udecode/plate-indent-list": "npm:41.0.0"
+    "@udecode/plate-indent-list": "npm:41.0.10"
     "@udecode/plate-kbd": "npm:41.0.0"
     "@udecode/plate-layout": "npm:41.0.2"
     "@udecode/plate-line-height": "npm:41.0.0"
@@ -7453,11 +7453,11 @@ __metadata:
     "@udecode/plate-reset-node": "npm:41.0.0"
     "@udecode/plate-resizable": "npm:41.0.0"
     "@udecode/plate-select": "npm:41.0.0"
-    "@udecode/plate-selection": "npm:41.0.0"
+    "@udecode/plate-selection": "npm:41.0.8"
     "@udecode/plate-slash-command": "npm:41.0.0"
     "@udecode/plate-suggestion": "npm:41.0.0"
     "@udecode/plate-tabbable": "npm:41.0.0"
-    "@udecode/plate-table": "npm:41.0.0"
+    "@udecode/plate-table": "npm:41.0.9"
     "@udecode/plate-toggle": "npm:41.0.0"
     "@udecode/plate-trailing-block": "npm:41.0.0"
   peerDependencies:

From 7195c4632f2df2e34c063cdc9ec32c5cd79ba79a Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 26 Dec 2024 17:51:15 +0800
Subject: [PATCH 3/9] Add font-size-toolbar-button

---
 .../plate-ui/font-size-toolbar-butoon.tsx     | 66 +++++++++++++++----
 packages/font/src/lib/BaseFontSizePlugin.ts   | 54 ++++++++++-----
 .../font/src/lib/utils/setChangedFontSize.ts  |  4 +-
 3 files changed, 93 insertions(+), 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
index 976ff18840..e4d40f18aa 100644
--- 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
index b9ee69f873..e6b8c04feb 100644
--- 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
index 380aa77517..299262c27e 100644
--- 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 }),
   });
 };
 

From f91c5ec2b80279e231831b7e3f239ff59ba3cc8e Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 26 Dec 2024 20:12:20 +0800
Subject: [PATCH 4/9] feat

---
 .../plate-ui/font-size-toolbar-butoon.tsx     | 46 ++++++++++++++-----
 .../font/src/lib/utils/setChangedFontSize.ts  | 41 +++++++++--------
 2 files changed, 56 insertions(+), 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
index e4d40f18aa..0e60016c6d 100644
--- 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,7 @@
 'use client';
 import { useState } from 'react';
 
+import { cn } from '@udecode/cn';
 import {
   type TElement,
   getAboveNode,
@@ -19,12 +20,24 @@ import { Minus, Plus } from 'lucide-react';
 
 import { ToolbarButton } from './toolbar';
 
+const DEFAULT_FONT_SIZE = '16px';
+
 const FONT_SIZE_MAP = {
   [HEADING_KEYS.h1]: '36px',
   [HEADING_KEYS.h2]: '24px',
   [HEADING_KEYS.h3]: '20px',
 };
 
+const pxUnitConfig = {
+  increment: 1,
+  unitRegex: /^([\d.]+)px$/i,
+};
+
+const remUnitConfig = {
+  increment: 0.125,
+  unitRegex: /^([\d.]+)rem$/i,
+};
+
 export function FontSizeToolbarButton() {
   const [inputValue, setInputValue] = useState('');
   const [isFocused, setIsFocused] = useState(false);
@@ -40,14 +53,14 @@ export function FontSizeToolbarButton() {
       at: editor.selection?.focus,
     });
 
-    if (!entry) return '16px';
+    if (!entry) return DEFAULT_FONT_SIZE;
 
     const [node] = entry;
 
     if (node.type in FONT_SIZE_MAP)
       return FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP];
 
-    return '16px';
+    return DEFAULT_FONT_SIZE;
   }, []);
 
   const handleInputChange = () => {
@@ -63,17 +76,21 @@ export function FontSizeToolbarButton() {
   const displayValue = isFocused ? inputValue : cursorFontSize;
 
   return (
-    <div className="flex items-center gap-1 rounded-md bg-muted/70 p-0">
+    <div className="flex items-center gap-1 rounded-md bg-muted/60 p-0">
       <ToolbarButton
-        onClick={() =>
-          setChangedFontSize({ fontSize: displayValue, increase: false })
-        }
-        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => {
+          setChangedFontSize({
+            fontSize: displayValue,
+            increase: false,
+            unitConfig: [pxUnitConfig, remUnitConfig],
+          });
+          focusEditor(editor);
+        }}
       >
         <Minus />
       </ToolbarButton>
       <input
-        className="w-16 bg-transparent px-2 text-center"
+        className={cn('w-16 bg-transparent px-2 text-center hover:bg-muted')}
         value={displayValue}
         onBlur={() => {
           setIsFocused(false);
@@ -85,13 +102,18 @@ export function FontSizeToolbarButton() {
           setInputValue(cursorFontSize);
         }}
         onKeyDown={(e) => e.key === 'Enter' && handleInputChange()}
+        data-plate-focus="true"
         type="text"
       />
       <ToolbarButton
-        onClick={() =>
-          setChangedFontSize({ fontSize: displayValue, increase: true })
-        }
-        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => {
+          setChangedFontSize({
+            fontSize: displayValue,
+            increase: true,
+            unitConfig: [pxUnitConfig, remUnitConfig],
+          });
+          focusEditor(editor);
+        }}
       >
         <Plus />
       </ToolbarButton>
diff --git a/packages/font/src/lib/utils/setChangedFontSize.ts b/packages/font/src/lib/utils/setChangedFontSize.ts
index 299262c27e..39e8857952 100644
--- a/packages/font/src/lib/utils/setChangedFontSize.ts
+++ b/packages/font/src/lib/utils/setChangedFontSize.ts
@@ -6,43 +6,46 @@ export const setChangedFontSize = (
   editor: SlateEditor,
   options: getChangedFontSizeOptions
 ): void => {
-  const { fontSize, increase } = options;
+  const { fontSize, increase, unitConfig } = options;
 
   setMarks(editor, {
-    [BaseFontSizePlugin.key]: getChangedFontSize({ fontSize, increase }),
+    [BaseFontSizePlugin.key]: getChangedFontSize({
+      fontSize,
+      increase,
+      unitConfig,
+    }),
   });
 };
 
 export type getChangedFontSizeOptions = {
+  unitConfig: {
+    increment: number;
+    unitRegex: RegExp;
+  }[];
   fontSize: string;
   increase: boolean;
 };
 
 const getChangedFontSize = (options: getChangedFontSizeOptions): string => {
-  const { fontSize, increase } = options;
+  const { fontSize, increase, unitConfig } = options;
 
   if (!fontSize) return '16px';
 
-  const pxMatch = /^([\d.]+)px$/i.exec(fontSize);
+  for (const config of unitConfig) {
+    const match = config.unitRegex.exec(fontSize);
 
-  if (pxMatch) {
-    const [, value] = pxMatch;
-    const numericValue = Number.parseFloat(value);
-    const newValue = increase ? numericValue + 2 : numericValue - 2;
+    if (match) {
+      const [, value] = match;
+      const numericValue = Number.parseFloat(value);
+      const newValue = increase
+        ? numericValue + config.increment
+        : numericValue - config.increment;
 
-    return `${Number(newValue.toFixed(3))}px`;
-  }
-
-  const remMatch = /^([\d.]+)rem$/i.exec(fontSize);
-
-  if (remMatch) {
-    const [, value] = remMatch;
-    const numericValue = Number.parseFloat(value);
-    const newValue = increase ? numericValue + 0.125 : numericValue - 0.125;
+      const unit = match[0].replace(value, '');
 
-    return `${Number(newValue.toFixed(3))}rem`;
+      return `${Number(newValue.toFixed(3))}${unit}`;
+    }
   }
 
-  // TODO: Handle other units
   return fontSize;
 };

From ea167b35ae7b251220d88e387d47e02c3c852338 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 27 Dec 2024 10:30:47 +0800
Subject: [PATCH 5/9] popover

---
 .../plate-ui/fixed-toolbar-buttons.tsx        |   2 +-
 .../plate-ui/font-size-toolbar-butoon.tsx     | 122 --------------
 .../plate-ui/font-size-toolbar-button.tsx     | 156 ++++++++++++++++++
 packages/font/src/lib/BaseFontSizePlugin.ts   |  10 +-
 packages/font/src/lib/utils/index.ts          |   3 +-
 .../font/src/lib/utils/setChangedFontSize.ts  |  51 ------
 packages/font/src/lib/utils/setFontSize.ts    |   9 +
 packages/font/src/lib/utils/toUnitLess.ts     |  14 ++
 8 files changed, 186 insertions(+), 181 deletions(-)
 delete mode 100644 apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
 delete mode 100644 packages/font/src/lib/utils/setChangedFontSize.ts
 create mode 100644 packages/font/src/lib/utils/setFontSize.ts
 create mode 100644 packages/font/src/lib/utils/toUnitLess.ts

diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 6e9955b627..c1197a3bf6 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -42,7 +42,7 @@ import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
 import { ExportToolbarButton } from './export-toolbar-button';
-import { FontSizeToolbarButton } from './font-size-toolbar-butoon';
+import { FontSizeToolbarButton } from './font-size-toolbar-button';
 import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
 import {
   BulletedIndentListToolbarButton,
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
deleted file mode 100644
index 0e60016c6d..0000000000
--- a/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-import { useState } from 'react';
-
-import { cn } from '@udecode/cn';
-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';
-
-import { ToolbarButton } from './toolbar';
-
-const DEFAULT_FONT_SIZE = '16px';
-
-const FONT_SIZE_MAP = {
-  [HEADING_KEYS.h1]: '36px',
-  [HEADING_KEYS.h2]: '24px',
-  [HEADING_KEYS.h3]: '20px',
-};
-
-const pxUnitConfig = {
-  increment: 1,
-  unitRegex: /^([\d.]+)px$/i,
-};
-
-const remUnitConfig = {
-  increment: 0.125,
-  unitRegex: /^([\d.]+)rem$/i,
-};
-
-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) || {};
-
-    if (marks[FontSizePlugin.key]) return marks[FontSizePlugin.key] as string;
-
-    const entry = getAboveNode<TElement>(editor, {
-      at: editor.selection?.focus,
-    });
-
-    if (!entry) return DEFAULT_FONT_SIZE;
-
-    const [node] = entry;
-
-    if (node.type in FONT_SIZE_MAP)
-      return FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP];
-
-    return DEFAULT_FONT_SIZE;
-  }, []);
-
-  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/60 p-0">
-      <ToolbarButton
-        onClick={() => {
-          setChangedFontSize({
-            fontSize: displayValue,
-            increase: false,
-            unitConfig: [pxUnitConfig, remUnitConfig],
-          });
-          focusEditor(editor);
-        }}
-      >
-        <Minus />
-      </ToolbarButton>
-      <input
-        className={cn('w-16 bg-transparent px-2 text-center hover:bg-muted')}
-        value={displayValue}
-        onBlur={() => {
-          setIsFocused(false);
-          handleInputChange();
-        }}
-        onChange={(e) => setInputValue(e.target.value)}
-        onFocus={() => {
-          setIsFocused(true);
-          setInputValue(cursorFontSize);
-        }}
-        onKeyDown={(e) => e.key === 'Enter' && handleInputChange()}
-        data-plate-focus="true"
-        type="text"
-      />
-      <ToolbarButton
-        onClick={() => {
-          setChangedFontSize({
-            fontSize: displayValue,
-            increase: true,
-            unitConfig: [pxUnitConfig, remUnitConfig],
-          });
-          focusEditor(editor);
-        }}
-      >
-        <Plus />
-      </ToolbarButton>
-    </div>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
new file mode 100644
index 0000000000..b5833ed91b
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
@@ -0,0 +1,156 @@
+'use client';
+import { useState } from 'react';
+
+import { cn } from '@udecode/cn';
+import { type TElement, getAboveNode, getMarks } from '@udecode/plate-common';
+import {
+  focusEditor,
+  useEditorPlugin,
+  useEditorSelector,
+} from '@udecode/plate-common/react';
+import { BaseFontSizePlugin, toUnitLess } from '@udecode/plate-font';
+import { FontSizePlugin } from '@udecode/plate-font/react';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+import { Minus, Plus } from 'lucide-react';
+
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { ToolbarButton } from './toolbar';
+
+const DEFAULT_FONT_SIZE = '16';
+
+const FONT_SIZE_MAP = {
+  [HEADING_KEYS.h1]: '36',
+  [HEADING_KEYS.h2]: '24',
+  [HEADING_KEYS.h3]: '20',
+} as const;
+
+const FONT_SIZES = [
+  '8',
+  '9',
+  '10',
+  '12',
+  '14',
+  '16',
+  '18',
+  '24',
+  '30',
+  '36',
+  '48',
+  '60',
+  '72',
+  '96',
+] as const;
+
+export function FontSizeToolbarButton() {
+  const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE);
+  const [isFocused, setIsFocused] = useState(false);
+  const { api, editor } = useEditorPlugin(BaseFontSizePlugin);
+  const setMark = api.fontSize.setMark;
+
+  const cursorFontSize = useEditorSelector((editor) => {
+    const marks = getMarks(editor);
+    const fontSize = marks?.[FontSizePlugin.key];
+
+    if (fontSize) {
+      return toUnitLess(fontSize as string);
+    }
+
+    const [node] =
+      getAboveNode<TElement>(editor, {
+        at: editor.selection?.focus,
+      }) || [];
+
+    return node?.type && node.type in FONT_SIZE_MAP
+      ? FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP]
+      : DEFAULT_FONT_SIZE;
+  }, []);
+
+  const handleInputChange = () => {
+    const newSize = toUnitLess(inputValue);
+
+    if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) {
+      focusEditor(editor);
+
+      return;
+    }
+    if (newSize !== toUnitLess(cursorFontSize)) {
+      setMark(`${newSize}px`);
+    }
+
+    focusEditor(editor);
+  };
+
+  const handleFontSizeChange = (delta: number) => {
+    const newSize = Number(displayValue) + delta;
+    setMark(`${newSize}px`);
+    focusEditor(editor);
+  };
+
+  const displayValue = isFocused ? inputValue : cursorFontSize;
+
+  return (
+    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0 ">
+      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
+        <Minus />
+      </ToolbarButton>
+
+      <Popover open={isFocused} modal={false}>
+        <PopoverTrigger asChild>
+          <input
+            className={cn(
+              'h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted'
+            )}
+            value={displayValue}
+            onBlur={() => {
+              setIsFocused(false);
+              handleInputChange();
+            }}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={(e) => {
+              setIsFocused(true);
+              setInputValue(toUnitLess(cursorFontSize));
+              e.target.select();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleInputChange();
+              }
+            }}
+            data-plate-focus="true"
+            type="text"
+          />
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-10 px-px py-1"
+          onCloseAutoFocus={(e) => {
+            e.preventDefault();
+            focusEditor(editor);
+          }}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {FONT_SIZES.map((size) => (
+            <button
+              key={size}
+              className={cn(
+                'flex h-8 w-full items-center justify-center  text-sm hover:bg-accent data-[highlighted=true]:bg-accent'
+              )}
+              onClick={() => {
+                setMark(`${size}px`);
+                setIsFocused(false);
+              }}
+              data-highlighted={size === displayValue}
+              type="button"
+            >
+              {size}
+            </button>
+          ))}
+        </PopoverContent>
+      </Popover>
+
+      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
+        <Plus />
+      </ToolbarButton>
+    </div>
+  );
+}
diff --git a/packages/font/src/lib/BaseFontSizePlugin.ts b/packages/font/src/lib/BaseFontSizePlugin.ts
index e6b8c04feb..5695d68de1 100644
--- a/packages/font/src/lib/BaseFontSizePlugin.ts
+++ b/packages/font/src/lib/BaseFontSizePlugin.ts
@@ -4,20 +4,18 @@ import {
   createTSlatePlugin,
 } from '@udecode/plate-common';
 
-import { type getChangedFontSizeOptions, setChangedFontSize } from './utils';
+import { setFontSize } from './utils';
 
 export type BaseFontSizeConfig = PluginConfig<
   'fontSize',
-  FontSizeSelectors,
+  {},
   {
     fontSize: {
-      setChangedFontSize: (options: getChangedFontSizeOptions) => void;
+      setChangedFontSize: (fontSize: string) => void;
     };
   }
 >;
 
-type FontSizeSelectors = {};
-
 export const BaseFontSizePlugin = createTSlatePlugin({
   key: 'fontSize',
   inject: {
@@ -44,5 +42,5 @@ export const BaseFontSizePlugin = createTSlatePlugin({
     },
   }))
   .extendApi(({ editor }) => ({
-    setChangedFontSize: bindFirst(setChangedFontSize, editor),
+    setMark: bindFirst(setFontSize, editor),
   }));
diff --git a/packages/font/src/lib/utils/index.ts b/packages/font/src/lib/utils/index.ts
index 9628fad69d..f4b63d8f72 100644
--- a/packages/font/src/lib/utils/index.ts
+++ b/packages/font/src/lib/utils/index.ts
@@ -2,4 +2,5 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './setChangedFontSize';
+export * from './setFontSize';
+export * from './toUnitLess';
diff --git a/packages/font/src/lib/utils/setChangedFontSize.ts b/packages/font/src/lib/utils/setChangedFontSize.ts
deleted file mode 100644
index 39e8857952..0000000000
--- a/packages/font/src/lib/utils/setChangedFontSize.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { type SlateEditor, setMarks } from '@udecode/plate-common';
-
-import { BaseFontSizePlugin } from '../BaseFontSizePlugin';
-
-export const setChangedFontSize = (
-  editor: SlateEditor,
-  options: getChangedFontSizeOptions
-): void => {
-  const { fontSize, increase, unitConfig } = options;
-
-  setMarks(editor, {
-    [BaseFontSizePlugin.key]: getChangedFontSize({
-      fontSize,
-      increase,
-      unitConfig,
-    }),
-  });
-};
-
-export type getChangedFontSizeOptions = {
-  unitConfig: {
-    increment: number;
-    unitRegex: RegExp;
-  }[];
-  fontSize: string;
-  increase: boolean;
-};
-
-const getChangedFontSize = (options: getChangedFontSizeOptions): string => {
-  const { fontSize, increase, unitConfig } = options;
-
-  if (!fontSize) return '16px';
-
-  for (const config of unitConfig) {
-    const match = config.unitRegex.exec(fontSize);
-
-    if (match) {
-      const [, value] = match;
-      const numericValue = Number.parseFloat(value);
-      const newValue = increase
-        ? numericValue + config.increment
-        : numericValue - config.increment;
-
-      const unit = match[0].replace(value, '');
-
-      return `${Number(newValue.toFixed(3))}${unit}`;
-    }
-  }
-
-  return fontSize;
-};
diff --git a/packages/font/src/lib/utils/setFontSize.ts b/packages/font/src/lib/utils/setFontSize.ts
new file mode 100644
index 0000000000..76a59185c8
--- /dev/null
+++ b/packages/font/src/lib/utils/setFontSize.ts
@@ -0,0 +1,9 @@
+import { type SlateEditor, setMarks } from '@udecode/plate-common';
+
+import { BaseFontSizePlugin } from '../BaseFontSizePlugin';
+
+export const setFontSize = (editor: SlateEditor, fontSize: string): void => {
+  setMarks(editor, {
+    [BaseFontSizePlugin.key]: fontSize,
+  });
+};
diff --git a/packages/font/src/lib/utils/toUnitLess.ts b/packages/font/src/lib/utils/toUnitLess.ts
new file mode 100644
index 0000000000..1cf3e8db70
--- /dev/null
+++ b/packages/font/src/lib/utils/toUnitLess.ts
@@ -0,0 +1,14 @@
+// return '0' if value not valid
+export const toUnitLess = (value: string): string => {
+  const match = /\d+/.exec(value);
+
+  if (!match) return '0';
+
+  const num = Number(match[0]);
+
+  if (value.endsWith('rem')) {
+    return (num * 16).toString();
+  }
+
+  return num.toString();
+};

From 2d650d53d8c3da8f63cb4fc2a5d5e5fa3ba767de Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 27 Dec 2024 10:32:28 +0800
Subject: [PATCH 6/9] fix

---
 .../registry/default/plate-ui/font-size-toolbar-button.tsx    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
index b5833ed91b..1868ab4943 100644
--- a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
@@ -123,10 +123,6 @@ export function FontSizeToolbarButton() {
         </PopoverTrigger>
         <PopoverContent
           className="w-10 px-px py-1"
-          onCloseAutoFocus={(e) => {
-            e.preventDefault();
-            focusEditor(editor);
-          }}
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
           {FONT_SIZES.map((size) => (

From a856c4f294c08e89d25622f9690d021be3faba31 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 27 Dec 2024 15:40:35 +0800
Subject: [PATCH 7/9] docs

---
 .changeset/great-starfishes-shake.md          |  6 ++++
 .../content/docs/cn/components/changelog.mdx  |  3 ++
 apps/www/content/docs/cn/font.mdx             | 30 +++++++++++++++++++
 .../content/docs/en/components/changelog.mdx  |  4 +++
 apps/www/content/docs/en/font.mdx             | 30 +++++++++++++++++++
 .../plate-ui/font-size-toolbar-button.tsx     |  7 ++---
 packages/font/src/lib/BaseFontSizePlugin.ts   |  2 +-
 7 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/great-starfishes-shake.md

diff --git a/.changeset/great-starfishes-shake.md b/.changeset/great-starfishes-shake.md
new file mode 100644
index 0000000000..853171ee19
--- /dev/null
+++ b/.changeset/great-starfishes-shake.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-font': patch
+---
+
+Add api `api.fontSize.setMark`.
+Add utils `toUnitLess`.
\ No newline at end of file
diff --git a/apps/www/content/docs/cn/components/changelog.mdx b/apps/www/content/docs/cn/components/changelog.mdx
index dc4c05df4d..fd337dc319 100644
--- a/apps/www/content/docs/cn/components/changelog.mdx
+++ b/apps/www/content/docs/cn/components/changelog.mdx
@@ -10,6 +10,9 @@ toc: true
 
 ## 2024年12月 #17
 
+### 12月27日 #17.7
+
+- `fixed-toolbar-buttons`: 添加 `font-size-toolbar-button`
 
 ### 12月25日 #17.6
 
diff --git a/apps/www/content/docs/cn/font.mdx b/apps/www/content/docs/cn/font.mdx
index dc89f06e69..bc3308ff77 100644
--- a/apps/www/content/docs/cn/font.mdx
+++ b/apps/www/content/docs/cn/font.mdx
@@ -57,6 +57,36 @@ const plugins = [
 
 ### FontSizePlugin
 
+#### API
+
+##### editor.api.fontSize.setMark
+
+设置字体大小标记。
+
+<APIParameters>
+  <APIItem name="fontSize" type="string">
+    要设置的字体大小值。
+  </APIItem>
+</APIParameters>
+
+#### Utils
+
+##### toUnitLess
+
+将字体大小值转换为无单位的值。
+
+<APIParameters>
+  <APIItem name="fontSize" type="string">
+    要转换的字体大小值。
+  </APIItem>
+</APIParameters>
+
+<APIReturns>
+  <APIItem name="unitLess" type="string">
+    无单位字体大小值。
+  </APIItem>
+</APIReturns>
+
 ### FontWeightPlugin
 
 ## API Components
diff --git a/apps/www/content/docs/en/components/changelog.mdx b/apps/www/content/docs/en/components/changelog.mdx
index 8318b69c4f..87a8a730f2 100644
--- a/apps/www/content/docs/en/components/changelog.mdx
+++ b/apps/www/content/docs/en/components/changelog.mdx
@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2024 #17
 
+### December 27 #17.7
+
+- `fixed-toolbar-buttons`: add `font-size-toolbar-button`
+
 ### December 25 #17.6
 
 - `indent-list-toolbar-button`: Remove `IndentListToolbarButton` use `NumberedIndentListToolbarButton` and `BulletedIndentListToolbarButton` instead.
diff --git a/apps/www/content/docs/en/font.mdx b/apps/www/content/docs/en/font.mdx
index d4001cf990..8b3e7e87a3 100644
--- a/apps/www/content/docs/en/font.mdx
+++ b/apps/www/content/docs/en/font.mdx
@@ -57,6 +57,36 @@ const plugins = [
 
 ### FontSizePlugin
 
+#### API
+
+##### editor.api.fontSize.setMark
+
+Set the font size mark.
+
+<APIParameters>
+  <APIItem name="fontSize" type="string">
+    The font size value to set.
+  </APIItem>
+</APIParameters>
+
+#### Utils
+
+##### toUnitLess
+
+Convert a font size value to a unitless value.
+
+<APIParameters>
+  <APIItem name="fontSize" type="string">
+    The font size value to convert.
+  </APIItem>
+</APIParameters>
+
+<APIReturns>
+  <APIItem name="unitLess" type="string">
+    The font size value without units.
+  </APIItem>
+</APIReturns>
+
 ### FontWeightPlugin
 
 ## API Components
diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
index 1868ab4943..135c40b8f0 100644
--- a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
@@ -45,7 +45,6 @@ export function FontSizeToolbarButton() {
   const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE);
   const [isFocused, setIsFocused] = useState(false);
   const { api, editor } = useEditorPlugin(BaseFontSizePlugin);
-  const setMark = api.fontSize.setMark;
 
   const cursorFontSize = useEditorSelector((editor) => {
     const marks = getMarks(editor);
@@ -74,7 +73,7 @@ export function FontSizeToolbarButton() {
       return;
     }
     if (newSize !== toUnitLess(cursorFontSize)) {
-      setMark(`${newSize}px`);
+      api.fontSize.setMark(`${newSize}px`);
     }
 
     focusEditor(editor);
@@ -82,7 +81,7 @@ export function FontSizeToolbarButton() {
 
   const handleFontSizeChange = (delta: number) => {
     const newSize = Number(displayValue) + delta;
-    setMark(`${newSize}px`);
+    api.fontSize.setMark(`${newSize}px`);
     focusEditor(editor);
   };
 
@@ -132,7 +131,7 @@ export function FontSizeToolbarButton() {
                 'flex h-8 w-full items-center justify-center  text-sm hover:bg-accent data-[highlighted=true]:bg-accent'
               )}
               onClick={() => {
-                setMark(`${size}px`);
+                api.fontSize.setMark(`${size}px`);
                 setIsFocused(false);
               }}
               data-highlighted={size === displayValue}
diff --git a/packages/font/src/lib/BaseFontSizePlugin.ts b/packages/font/src/lib/BaseFontSizePlugin.ts
index 5695d68de1..b940d36ace 100644
--- a/packages/font/src/lib/BaseFontSizePlugin.ts
+++ b/packages/font/src/lib/BaseFontSizePlugin.ts
@@ -11,7 +11,7 @@ export type BaseFontSizeConfig = PluginConfig<
   {},
   {
     fontSize: {
-      setChangedFontSize: (fontSize: string) => void;
+      setMark: (fontSize: string) => void;
     };
   }
 >;

From a0a5685a78b8bb50d51011c05474d46c58022b67 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 27 Dec 2024 15:46:05 +0800
Subject: [PATCH 8/9] fix

---
 .../src/registry/default/plate-ui/font-size-toolbar-button.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
index 135c40b8f0..433895716c 100644
--- a/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-button.tsx
@@ -105,10 +105,9 @@ export function FontSizeToolbarButton() {
               handleInputChange();
             }}
             onChange={(e) => setInputValue(e.target.value)}
-            onFocus={(e) => {
+            onFocus={() => {
               setIsFocused(true);
               setInputValue(toUnitLess(cursorFontSize));
-              e.target.select();
             }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {

From d7f360c1b32a1346aa2caf125d2dd70d007a7c7c Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 28 Dec 2024 10:43:37 +0800
Subject: [PATCH 9/9] sync template

---
 apps/www/public/r/index.json                  |  28 ++++
 .../styles/default/fixed-toolbar-buttons.json |   1 +
 .../default/font-size-toolbar-button.json     |  29 ++++
 apps/www/src/__registry__/index.tsx           |  18 ++-
 apps/www/src/registry/registry-ui.ts          |  15 ++
 .../plate-playground-template/pnpm-lock.yaml  |  16 +-
 .../plate-ui/fixed-toolbar-buttons.tsx        |   2 +
 .../plate-ui/font-size-toolbar-button.tsx     | 150 ++++++++++++++++++
 .../plate-ui/indent-list-toolbar-button.tsx   |  12 +-
 .../plate-ui/insert-dropdown-menu.tsx         |  29 ++--
 .../plate-ui/media-toolbar-button.tsx         |   3 +-
 .../src/components/plate-ui/toolbar.tsx       |  46 +++---
 12 files changed, 299 insertions(+), 50 deletions(-)
 create mode 100644 apps/www/public/r/styles/default/font-size-toolbar-button.json
 create mode 100644 templates/plate-playground-template/src/components/plate-ui/font-size-toolbar-button.tsx

diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 82f3af3a92..5fafae7ff1 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -462,6 +462,33 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-font"
+    ],
+    "doc": {
+      "description": "A toolbar control for adjusting font size.",
+      "docs": [
+        {
+          "route": "/docs/font"
+        }
+      ],
+      "examples": [
+        "list-demo"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/font-size-toolbar-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "font-size-toolbar-button",
+    "registryDependencies": [
+      "toolbar"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [],
     "doc": {
@@ -2259,6 +2286,7 @@
       "color-dropdown-menu",
       "comment-toolbar-button",
       "emoji-dropdown-menu",
+      "font-size-toolbar-button",
       "history-toolbar-button",
       "indent-list-toolbar-button",
       "indent-todo-toolbar-button",
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index 3202f0b06f..e0a61a5ef7 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -28,6 +28,7 @@
     "color-dropdown-menu",
     "comment-toolbar-button",
     "emoji-dropdown-menu",
+    "font-size-toolbar-button",
     "history-toolbar-button",
     "indent-list-toolbar-button",
     "indent-todo-toolbar-button",
diff --git a/apps/www/public/r/styles/default/font-size-toolbar-button.json b/apps/www/public/r/styles/default/font-size-toolbar-button.json
new file mode 100644
index 0000000000..2e9486665b
--- /dev/null
+++ b/apps/www/public/r/styles/default/font-size-toolbar-button.json
@@ -0,0 +1,29 @@
+{
+  "dependencies": [
+    "@udecode/plate-font"
+  ],
+  "doc": {
+    "description": "A toolbar control for adjusting font size.",
+    "docs": [
+      {
+        "route": "/docs/font"
+      }
+    ],
+    "examples": [
+      "list-demo"
+    ]
+  },
+  "files": [
+    {
+      "content": "'use client';\nimport { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { type TElement, getAboveNode, getMarks } from '@udecode/plate-common';\nimport {\n  focusEditor,\n  useEditorPlugin,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { BaseFontSizePlugin, toUnitLess } from '@udecode/plate-font';\nimport { FontSizePlugin } from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { Minus, Plus } from 'lucide-react';\n\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { ToolbarButton } from './toolbar';\n\nconst DEFAULT_FONT_SIZE = '16';\n\nconst FONT_SIZE_MAP = {\n  [HEADING_KEYS.h1]: '36',\n  [HEADING_KEYS.h2]: '24',\n  [HEADING_KEYS.h3]: '20',\n} as const;\n\nconst FONT_SIZES = [\n  '8',\n  '9',\n  '10',\n  '12',\n  '14',\n  '16',\n  '18',\n  '24',\n  '30',\n  '36',\n  '48',\n  '60',\n  '72',\n  '96',\n] as const;\n\nexport function FontSizeToolbarButton() {\n  const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE);\n  const [isFocused, setIsFocused] = useState(false);\n  const { api, editor } = useEditorPlugin(BaseFontSizePlugin);\n\n  const cursorFontSize = useEditorSelector((editor) => {\n    const marks = getMarks(editor);\n    const fontSize = marks?.[FontSizePlugin.key];\n\n    if (fontSize) {\n      return toUnitLess(fontSize as string);\n    }\n\n    const [node] =\n      getAboveNode<TElement>(editor, {\n        at: editor.selection?.focus,\n      }) || [];\n\n    return node?.type && node.type in FONT_SIZE_MAP\n      ? FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP]\n      : DEFAULT_FONT_SIZE;\n  }, []);\n\n  const handleInputChange = () => {\n    const newSize = toUnitLess(inputValue);\n\n    if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) {\n      focusEditor(editor);\n\n      return;\n    }\n    if (newSize !== toUnitLess(cursorFontSize)) {\n      api.fontSize.setMark(`${newSize}px`);\n    }\n\n    focusEditor(editor);\n  };\n\n  const handleFontSizeChange = (delta: number) => {\n    const newSize = Number(displayValue) + delta;\n    api.fontSize.setMark(`${newSize}px`);\n    focusEditor(editor);\n  };\n\n  const displayValue = isFocused ? inputValue : cursorFontSize;\n\n  return (\n    <div className=\"flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0 \">\n      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>\n        <Minus />\n      </ToolbarButton>\n\n      <Popover open={isFocused} modal={false}>\n        <PopoverTrigger asChild>\n          <input\n            className={cn(\n              'h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted'\n            )}\n            value={displayValue}\n            onBlur={() => {\n              setIsFocused(false);\n              handleInputChange();\n            }}\n            onChange={(e) => setInputValue(e.target.value)}\n            onFocus={() => {\n              setIsFocused(true);\n              setInputValue(toUnitLess(cursorFontSize));\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                handleInputChange();\n              }\n            }}\n            data-plate-focus=\"true\"\n            type=\"text\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-10 px-px py-1\"\n          onOpenAutoFocus={(e) => e.preventDefault()}\n        >\n          {FONT_SIZES.map((size) => (\n            <button\n              key={size}\n              className={cn(\n                'flex h-8 w-full items-center justify-center  text-sm hover:bg-accent data-[highlighted=true]:bg-accent'\n              )}\n              onClick={() => {\n                api.fontSize.setMark(`${size}px`);\n                setIsFocused(false);\n              }}\n              data-highlighted={size === displayValue}\n              type=\"button\"\n            >\n              {size}\n            </button>\n          ))}\n        </PopoverContent>\n      </Popover>\n\n      <ToolbarButton onClick={() => handleFontSizeChange(1)}>\n        <Plus />\n      </ToolbarButton>\n    </div>\n  );\n}\n",
+      "path": "plate-ui/font-size-toolbar-button.tsx",
+      "target": "components/plate-ui/font-size-toolbar-button.tsx",
+      "type": "registry:ui"
+    }
+  ],
+  "name": "font-size-toolbar-button",
+  "registryDependencies": [
+    "toolbar"
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index f4dbe49ae1..0b2001dcce 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -277,6 +277,22 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "font-size-toolbar-button": {
+      name: "font-size-toolbar-button",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toolbar"],
+      files: [{
+        path: "src/registry/default/plate-ui/font-size-toolbar-button.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/plate-ui/font-size-toolbar-button.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "heading-element": {
       name: "heading-element",
       description: "",
@@ -1353,7 +1369,7 @@ export const Index: Record<string, any> = {
       name: "fixed-toolbar-buttons",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["toolbar","ai-toolbar-button","align-dropdown-menu","color-dropdown-menu","comment-toolbar-button","emoji-dropdown-menu","history-toolbar-button","indent-list-toolbar-button","indent-todo-toolbar-button","indent-toolbar-button","insert-dropdown-menu","line-height-dropdown-menu","link-toolbar-button","mark-toolbar-button","media-toolbar-button","mode-dropdown-menu","more-dropdown-menu","outdent-toolbar-button","table-dropdown-menu","toggle-toolbar-button","turn-into-dropdown-menu","export-toolbar-button"],
+      registryDependencies: ["toolbar","ai-toolbar-button","align-dropdown-menu","color-dropdown-menu","comment-toolbar-button","emoji-dropdown-menu","font-size-toolbar-button","history-toolbar-button","indent-list-toolbar-button","indent-todo-toolbar-button","indent-toolbar-button","insert-dropdown-menu","line-height-dropdown-menu","link-toolbar-button","mark-toolbar-button","media-toolbar-button","mode-dropdown-menu","more-dropdown-menu","outdent-toolbar-button","table-dropdown-menu","toggle-toolbar-button","turn-into-dropdown-menu","export-toolbar-button"],
       files: [{
         path: "src/registry/default/plate-ui/fixed-toolbar-buttons.tsx",
         type: "registry:ui",
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
index b4c78c8ebe..635abe1c72 100644
--- a/apps/www/src/registry/registry-ui.ts
+++ b/apps/www/src/registry/registry-ui.ts
@@ -360,6 +360,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';`,
       'color-dropdown-menu',
       'comment-toolbar-button',
       'emoji-dropdown-menu',
+      'font-size-toolbar-button',
       'history-toolbar-button',
       'indent-list-toolbar-button',
       'indent-todo-toolbar-button',
@@ -1152,6 +1153,20 @@ export const uiNodes: Registry = [
     registryDependencies: ['plate-element'],
     type: 'registry:ui',
   },
+  {
+    dependencies: ['@udecode/plate-font'],
+    doc: {
+      description: 'A toolbar control for adjusting font size.',
+      docs: [{ route: '/docs/font' }],
+      examples: ['list-demo'],
+    },
+    files: [
+      { path: 'plate-ui/font-size-toolbar-button.tsx', type: 'registry:ui' },
+    ],
+    name: 'font-size-toolbar-button',
+    registryDependencies: ['toolbar'],
+    type: 'registry:ui',
+  },
   {
     dependencies: [],
     doc: {
diff --git a/templates/plate-playground-template/pnpm-lock.yaml b/templates/plate-playground-template/pnpm-lock.yaml
index ba579231ef..2ad82f9a31 100644
--- a/templates/plate-playground-template/pnpm-lock.yaml
+++ b/templates/plate-playground-template/pnpm-lock.yaml
@@ -7109,8 +7109,8 @@ snapshots:
       '@typescript-eslint/parser': 8.18.1(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1)
@@ -7133,7 +7133,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -7145,22 +7145,22 @@ snapshots:
       is-glob: 4.0.3
       stable-hash: 0.0.4
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.18.1(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -7171,7 +7171,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.0
       is-glob: 4.0.3
diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
index 8ea968f6a4..8ad418eeb4 100644
--- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -42,6 +42,7 @@ import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
 import { ExportToolbarButton } from './export-toolbar-button';
+import { FontSizeToolbarButton } from './font-size-toolbar-button';
 import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
 import {
   BulletedIndentListToolbarButton,
@@ -88,6 +89,7 @@ export function FixedToolbarButtons() {
           <ToolbarGroup>
             <InsertDropdownMenu />
             <TurnIntoDropdownMenu />
+            <FontSizeToolbarButton />
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/templates/plate-playground-template/src/components/plate-ui/font-size-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/font-size-toolbar-button.tsx
new file mode 100644
index 0000000000..433895716c
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/font-size-toolbar-button.tsx
@@ -0,0 +1,150 @@
+'use client';
+import { useState } from 'react';
+
+import { cn } from '@udecode/cn';
+import { type TElement, getAboveNode, getMarks } from '@udecode/plate-common';
+import {
+  focusEditor,
+  useEditorPlugin,
+  useEditorSelector,
+} from '@udecode/plate-common/react';
+import { BaseFontSizePlugin, toUnitLess } from '@udecode/plate-font';
+import { FontSizePlugin } from '@udecode/plate-font/react';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+import { Minus, Plus } from 'lucide-react';
+
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { ToolbarButton } from './toolbar';
+
+const DEFAULT_FONT_SIZE = '16';
+
+const FONT_SIZE_MAP = {
+  [HEADING_KEYS.h1]: '36',
+  [HEADING_KEYS.h2]: '24',
+  [HEADING_KEYS.h3]: '20',
+} as const;
+
+const FONT_SIZES = [
+  '8',
+  '9',
+  '10',
+  '12',
+  '14',
+  '16',
+  '18',
+  '24',
+  '30',
+  '36',
+  '48',
+  '60',
+  '72',
+  '96',
+] as const;
+
+export function FontSizeToolbarButton() {
+  const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE);
+  const [isFocused, setIsFocused] = useState(false);
+  const { api, editor } = useEditorPlugin(BaseFontSizePlugin);
+
+  const cursorFontSize = useEditorSelector((editor) => {
+    const marks = getMarks(editor);
+    const fontSize = marks?.[FontSizePlugin.key];
+
+    if (fontSize) {
+      return toUnitLess(fontSize as string);
+    }
+
+    const [node] =
+      getAboveNode<TElement>(editor, {
+        at: editor.selection?.focus,
+      }) || [];
+
+    return node?.type && node.type in FONT_SIZE_MAP
+      ? FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP]
+      : DEFAULT_FONT_SIZE;
+  }, []);
+
+  const handleInputChange = () => {
+    const newSize = toUnitLess(inputValue);
+
+    if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) {
+      focusEditor(editor);
+
+      return;
+    }
+    if (newSize !== toUnitLess(cursorFontSize)) {
+      api.fontSize.setMark(`${newSize}px`);
+    }
+
+    focusEditor(editor);
+  };
+
+  const handleFontSizeChange = (delta: number) => {
+    const newSize = Number(displayValue) + delta;
+    api.fontSize.setMark(`${newSize}px`);
+    focusEditor(editor);
+  };
+
+  const displayValue = isFocused ? inputValue : cursorFontSize;
+
+  return (
+    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0 ">
+      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
+        <Minus />
+      </ToolbarButton>
+
+      <Popover open={isFocused} modal={false}>
+        <PopoverTrigger asChild>
+          <input
+            className={cn(
+              'h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted'
+            )}
+            value={displayValue}
+            onBlur={() => {
+              setIsFocused(false);
+              handleInputChange();
+            }}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={() => {
+              setIsFocused(true);
+              setInputValue(toUnitLess(cursorFontSize));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleInputChange();
+              }
+            }}
+            data-plate-focus="true"
+            type="text"
+          />
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-10 px-px py-1"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {FONT_SIZES.map((size) => (
+            <button
+              key={size}
+              className={cn(
+                'flex h-8 w-full items-center justify-center  text-sm hover:bg-accent data-[highlighted=true]:bg-accent'
+              )}
+              onClick={() => {
+                api.fontSize.setMark(`${size}px`);
+                setIsFocused(false);
+              }}
+              data-highlighted={size === displayValue}
+              type="button"
+            >
+              {size}
+            </button>
+          ))}
+        </PopoverContent>
+      </Popover>
+
+      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
+        <Plus />
+      </ToolbarButton>
+    </div>
+  );
+}
diff --git a/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx
index c1d809ac33..e9ead8cc3b 100644
--- a/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx
@@ -41,15 +41,16 @@ export function NumberedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Numbered List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => {
+        onClick={() =>
           toggleIndentList(editor, {
             listStyleType: ListStyleType.Decimal,
-          });
-        }}
+          })
+        }
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Numbered List"
       >
         <ListOrdered className="size-4" />
       </ToolbarSplitButtonPrimary>
@@ -128,7 +129,7 @@ export function BulletedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Bulleted List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
         onClick={() => {
@@ -137,6 +138,7 @@ export function BulletedIndentListToolbarButton() {
           });
         }}
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Bulleted List"
       >
         <List className="size-4" />
       </ToolbarSplitButtonPrimary>
diff --git a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx
index b53ca0a4eb..e9ac6a5fa5 100644
--- a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx
@@ -19,6 +19,10 @@ import { TocPlugin } from '@udecode/plate-heading/react';
 import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
 import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';
 import { LinkPlugin } from '@udecode/plate-link/react';
+import {
+  EquationPlugin,
+  InlineEquationPlugin,
+} from '@udecode/plate-math/react';
 import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
 import { TablePlugin } from '@udecode/plate-table/react';
 import { TogglePlugin } from '@udecode/plate-toggle/react';
@@ -40,6 +44,7 @@ import {
   PilcrowIcon,
   PlusIcon,
   QuoteIcon,
+  RadicalIcon,
   SquareIcon,
   TableIcon,
   TableOfContentsIcon,
@@ -192,12 +197,12 @@ const groups: Group[] = [
         label: '3 columns',
         value: 'action_three_columns',
       },
-      // {
-      //   focusEditor: false,
-      //   icon: <RadicalIcon />,
-      //   label: 'Equation',
-      //   value: EquationPlugin.key,
-      // },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Equation',
+        value: EquationPlugin.key,
+      },
     ].map((item) => ({
       ...item,
       onSelect: (editor, value) => {
@@ -219,12 +224,12 @@ const groups: Group[] = [
         label: 'Date',
         value: DatePlugin.key,
       },
-      // {
-      //   focusEditor: false,
-      //   icon: <RadicalIcon />,
-      //   label: 'Inline Equation',
-      //   value: InlineEquationPlugin.key,
-      // },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Inline Equation',
+        value: InlineEquationPlugin.key,
+      },
     ].map((item) => ({
       ...item,
       onSelect: (editor, value) => {
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
index fa9689a1bb..25a3e8c102 100644
--- a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
@@ -114,9 +114,8 @@ export function MediaToolbarButton({
           }
         }}
         pressed={openState.open}
-        tooltip={currentConfig.tooltip}
       >
-        <ToolbarSplitButtonPrimary>
+        <ToolbarSplitButtonPrimary tooltip={currentConfig.tooltip}>
           {currentConfig.icon}
         </ToolbarSplitButtonPrimary>
 
diff --git a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
index 1d27f55edd..38d2064918 100644
--- a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
@@ -170,28 +170,30 @@ export const ToolbarSplitButton = React.forwardRef<
   );
 });
 
-export const ToolbarSplitButtonPrimary = React.forwardRef<
-  React.ElementRef<typeof ToolbarToggleItem>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
->(({ children, className, size, variant, ...props }, ref) => {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        toolbarButtonVariants({
-          size,
-          variant,
-        }),
-        'rounded-r-none',
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+export const ToolbarSplitButtonPrimary = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+  >(({ children, className, size, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          toolbarButtonVariants({
+            size,
+            variant,
+          }),
+          'rounded-r-none',
+          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  })
+);
 
 export const ToolbarSplitButtonSecondary = React.forwardRef<
   HTMLButtonElement,