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: