diff --git a/apps/www/public/r/styles/default/comments-plugin.json b/apps/www/public/r/styles/default/comments-plugin.json
index ee7eeb91eb..37e5370148 100644
--- a/apps/www/public/r/styles/default/comments-plugin.json
+++ b/apps/www/public/r/styles/default/comments-plugin.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\n\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\n\nexport const commentsPlugin = CommentsPlugin.configure({\n  options: {\n    myUserId: '1',\n    users: {\n      1: {\n        id: '1',\n        avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',\n        name: 'zbeyens',\n      },\n      2: {\n        id: '2',\n        avatarUrl: 'https://avatars.githubusercontent.com/u/4272090?v=4',\n        name: '12joan',\n      },\n    },\n  },\n  render: { afterEditable: () => <CommentsPopover /> },\n});\n",
+      "content": "'use client';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\n\nimport { commentsData } from '@/components/values/comments-value';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\n\nexport const commentsPlugin = CommentsPlugin.configure({\n  options: {\n    comments: commentsData,\n    myUserId: '1',\n    users: {\n      1: {\n        id: '1',\n        avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',\n        name: 'zbeyens',\n      },\n      2: {\n        id: '2',\n        avatarUrl: 'https://avatars.githubusercontent.com/u/4272090?v=4',\n        name: '12joan',\n      },\n    },\n  },\n  render: { afterEditable: () => <CommentsPopover /> },\n});\n",
       "path": "components/editor/plugins/comments-plugin.tsx",
       "target": "components/editor/plugins/comments-plugin.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json
index 8341a471d4..c3351d0f19 100644
--- a/apps/www/public/r/styles/default/draggable.json
+++ b/apps/www/public/r/styles/default/draggable.json
@@ -34,7 +34,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { isType, someNode } from '@udecode/plate-common';\nimport {\n  type NodeWrapperComponent,\n  type PlateRenderElementProps,\n  MemoizedChildren,\n  ParagraphPlugin,\n  useEditorPlugin,\n  useEditorRef,\n  useElement,\n  usePath,\n} from '@udecode/plate-common/react';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport {\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { GripVertical } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nconst UNDRAGGABLE_KEYS = [\n  ColumnItemPlugin.key,\n  TableRowPlugin.key,\n  TableCellPlugin.key,\n];\n\nexport const DraggableAboveNodes: NodeWrapperComponent = (props) => {\n  const { editor, element, path } = props;\n  const readOnly = useReadOnly();\n\n  const enabled = useMemo(() => {\n    if (readOnly) return false;\n    if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      return true;\n    }\n    if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      const block = someNode(editor, {\n        at: path,\n        match: {\n          type: editor.getType(ColumnPlugin),\n        },\n      });\n\n      if (block) {\n        return true;\n      }\n    }\n    if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      const block = someNode(editor, {\n        at: path,\n        match: {\n          type: editor.getType(TablePlugin),\n        },\n      });\n\n      if (block) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [editor, element, path, readOnly]);\n\n  if (!enabled) return;\n\n  return (props) => <Draggable {...props} />;\n};\n\nexport const Draggable = withRef<'div', PlateRenderElementProps>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element, path } = props;\n    const { isDragging, previewRef, handleRef } = useDraggable({ element });\n\n    const isInColumn = path?.length === 3;\n    const isInTable = path?.length === 4;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          STRUCTURAL_TYPES.includes(element.type)\n            ? 'group/structural'\n            : 'group',\n          className\n        )}\n      >\n        <Gutter>\n          <div\n            className={cn(\n              'slate-blockToolbarWrapper',\n              'flex h-[1.5em]',\n              isType(editor, element, [\n                HEADING_KEYS.h1,\n                HEADING_KEYS.h2,\n                HEADING_KEYS.h3,\n                HEADING_KEYS.h4,\n                HEADING_KEYS.h5,\n              ]) && 'h-[1.3em]',\n              isInColumn && 'h-4',\n              isInTable && 'mt-1 size-4'\n            )}\n          >\n            <div\n              className={cn(\n                'slate-blockToolbar',\n                'pointer-events-auto mr-1 flex items-center',\n                isInColumn && 'mr-1.5'\n              )}\n            >\n              <div ref={handleRef} className=\"size-4\">\n                <DragHandle />\n              </div>\n            </div>\n          </div>\n        </Gutter>\n\n        <div ref={previewRef} className=\"slate-blockWrapper\">\n          <MemoizedChildren>{children}</MemoizedChildren>\n\n          <DropLine />\n        </div>\n      </div>\n    );\n  }\n);\n\nconst Gutter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  const { editor, useOption } = useEditorPlugin(BlockSelectionPlugin);\n  const element = useElement();\n  const path = usePath();\n  const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n  const selected = useSelected();\n\n  const isNodeType = (keys: string[] | string) => isType(editor, element, keys);\n\n  const isInColumn = path?.length === 3;\n  const isInTable = path?.length === 4;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'slate-gutterLeft',\n        'absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0',\n        STRUCTURAL_TYPES.includes(element.type)\n          ? 'main-hover:group-hover/structural:opacity-100'\n          : 'main-hover:group-hover:opacity-100',\n        isSelectionAreaVisible && 'hidden',\n        !selected && 'opacity-0',\n        isNodeType(HEADING_KEYS.h1) && 'pb-1 text-[1.875em]',\n        isNodeType(HEADING_KEYS.h2) && 'pb-1 text-[1.5em]',\n        isNodeType(HEADING_KEYS.h3) && 'pb-1 pt-[2px] text-[1.25em]',\n        isNodeType([HEADING_KEYS.h4, HEADING_KEYS.h5]) &&\n          'pb-0 pt-[3px] text-[1.1em]',\n        isNodeType(HEADING_KEYS.h6) && 'pb-0',\n        isNodeType(ParagraphPlugin.key) && 'pb-0 pt-[3px]',\n        isNodeType(['ul', 'ol']) && 'pb-0',\n        isNodeType(BlockquotePlugin.key) && 'pb-0',\n        isNodeType(CodeBlockPlugin.key) && 'pb-0 pt-6',\n        isNodeType([\n          ImagePlugin.key,\n          MediaEmbedPlugin.key,\n          ExcalidrawPlugin.key,\n          TogglePlugin.key,\n          ColumnPlugin.key,\n        ]) && 'py-0',\n        isNodeType([PlaceholderPlugin.key, TablePlugin.key]) && 'pb-0 pt-3',\n        isInColumn && 'mt-2 h-4 pt-0',\n        isInTable && 'size-4',\n        className\n      )}\n      contentEditable={false}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst DragHandle = React.memo(() => {\n  const editor = useEditorRef();\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger type=\"button\">\n          <GripVertical\n            className=\"size-4 text-muted-foreground\"\n            onClick={(event) => {\n              event.stopPropagation();\n              event.preventDefault();\n            }}\n            onMouseDown={() => {\n              editor\n                .getApi(BlockSelectionPlugin)\n                .blockSelection?.resetSelectedIds();\n            }}\n          />\n        </TooltipTrigger>\n        <TooltipPortal>\n          <TooltipContent>Drag to move</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    </TooltipProvider>\n  );\n});\n\nconst DropLine = React.memo(\n  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => {\n      const { dropLine } = useDropLine();\n\n      if (!dropLine) return null;\n\n      return (\n        <div\n          ref={ref}\n          {...props}\n          className={cn(\n            'slate-dropLine',\n            'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n            'bg-brand/50',\n            dropLine === 'top' && '-top-px',\n            dropLine === 'bottom' && '-bottom-px',\n            className\n          )}\n        />\n      );\n    }\n  )\n);\n",
+      "content": "'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { isType, someNode } from '@udecode/plate-common';\nimport {\n  type NodeWrapperComponent,\n  type PlateRenderElementProps,\n  MemoizedChildren,\n  ParagraphPlugin,\n  useEditorPlugin,\n  useEditorRef,\n  useElement,\n  usePath,\n} from '@udecode/plate-common/react';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport {\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { GripVertical } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nconst UNDRAGGABLE_KEYS = [\n  ColumnItemPlugin.key,\n  TableRowPlugin.key,\n  TableCellPlugin.key,\n];\n\nexport const DraggableAboveNodes: NodeWrapperComponent = (props) => {\n  const { editor, element, path } = props;\n  const readOnly = useReadOnly();\n\n  const enabled = useMemo(() => {\n    if (readOnly) return false;\n    if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      return true;\n    }\n    if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      const block = someNode(editor, {\n        at: path,\n        match: {\n          type: editor.getType(ColumnPlugin),\n        },\n      });\n\n      if (block) {\n        return true;\n      }\n    }\n    if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n      const block = someNode(editor, {\n        at: path,\n        match: {\n          type: editor.getType(TablePlugin),\n        },\n      });\n\n      if (block) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [editor, element, path, readOnly]);\n\n  if (!enabled) return;\n\n  return (props) => <Draggable {...props} />;\n};\n\nexport const Draggable = withRef<'div', PlateRenderElementProps>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element, path } = props;\n    const { isDragging, previewRef, handleRef } = useDraggable({ element });\n\n    const isInColumn = path?.length === 3;\n    const isInTable = path?.length === 4;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          STRUCTURAL_TYPES.includes(element.type) ? 'group/structural' : 'group'\n        )}\n      >\n        <Gutter>\n          <div\n            className={cn(\n              'slate-blockToolbarWrapper',\n              'flex h-[1.5em]',\n              isType(editor, element, [\n                HEADING_KEYS.h1,\n                HEADING_KEYS.h2,\n                HEADING_KEYS.h3,\n                HEADING_KEYS.h4,\n                HEADING_KEYS.h5,\n              ]) && 'h-[1.3em]',\n              isInColumn && 'h-4',\n              isInTable && 'mt-1 size-4'\n            )}\n          >\n            <div\n              className={cn(\n                'slate-blockToolbar',\n                'pointer-events-auto mr-1 flex items-center',\n                isInColumn && 'mr-1.5'\n              )}\n            >\n              <div ref={handleRef} className=\"size-4\">\n                <DragHandle />\n              </div>\n            </div>\n          </div>\n        </Gutter>\n\n        <div ref={previewRef} className=\"slate-blockWrapper\">\n          <MemoizedChildren>{children}</MemoizedChildren>\n\n          <DropLine />\n        </div>\n      </div>\n    );\n  }\n);\n\nconst Gutter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  const { editor, useOption } = useEditorPlugin(BlockSelectionPlugin);\n  const element = useElement();\n  const path = usePath();\n  const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n  const selected = useSelected();\n\n  const isNodeType = (keys: string[] | string) => isType(editor, element, keys);\n\n  const isInColumn = path?.length === 3;\n  const isInTable = path?.length === 4;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'slate-gutterLeft',\n        'absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0',\n        STRUCTURAL_TYPES.includes(element.type)\n          ? 'main-hover:group-hover/structural:opacity-100'\n          : 'main-hover:group-hover:opacity-100',\n        isSelectionAreaVisible && 'hidden',\n        !selected && 'opacity-0',\n        isNodeType(HEADING_KEYS.h1) && 'pb-1 text-[1.875em]',\n        isNodeType(HEADING_KEYS.h2) && 'pb-1 text-[1.5em]',\n        isNodeType(HEADING_KEYS.h3) && 'pb-1 pt-[2px] text-[1.25em]',\n        isNodeType([HEADING_KEYS.h4, HEADING_KEYS.h5]) &&\n          'pb-0 pt-[3px] text-[1.1em]',\n        isNodeType(HEADING_KEYS.h6) && 'pb-0',\n        isNodeType(ParagraphPlugin.key) && 'pb-0 pt-[3px]',\n        isNodeType(['ul', 'ol']) && 'pb-0',\n        isNodeType(BlockquotePlugin.key) && 'pb-0',\n        isNodeType(CodeBlockPlugin.key) && 'pb-0 pt-6',\n        isNodeType([\n          ImagePlugin.key,\n          MediaEmbedPlugin.key,\n          ExcalidrawPlugin.key,\n          TogglePlugin.key,\n          ColumnPlugin.key,\n        ]) && 'py-0',\n        isNodeType([PlaceholderPlugin.key, TablePlugin.key]) && 'pb-0 pt-3',\n        isInColumn && 'mt-2 h-4 pt-0',\n        isInTable && 'size-4',\n        className\n      )}\n      contentEditable={false}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst DragHandle = React.memo(() => {\n  const editor = useEditorRef();\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger type=\"button\">\n          <GripVertical\n            className=\"size-4 text-muted-foreground\"\n            onClick={(event) => {\n              event.stopPropagation();\n              event.preventDefault();\n            }}\n            onMouseDown={() => {\n              editor\n                .getApi(BlockSelectionPlugin)\n                .blockSelection?.resetSelectedIds();\n            }}\n          />\n        </TooltipTrigger>\n        <TooltipPortal>\n          <TooltipContent>Drag to move</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    </TooltipProvider>\n  );\n});\n\nconst DropLine = React.memo(\n  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => {\n      const { dropLine } = useDropLine();\n\n      if (!dropLine) return null;\n\n      return (\n        <div\n          ref={ref}\n          {...props}\n          className={cn(\n            'slate-dropLine',\n            'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n            'bg-brand/50',\n            dropLine === 'top' && '-top-px',\n            dropLine === 'bottom' && '-bottom-px',\n            className\n          )}\n        />\n      );\n    }\n  )\n);\n",
       "path": "plate-ui/draggable.tsx",
       "target": "components/plate-ui/draggable.tsx",
       "type": "registry:ui"
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 c6e3dda1b5..f22080cbdb 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 { ListStyleType } from '@udecode/plate-indent-list';\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 { IndentListToolbarButton } 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            <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 { 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",
       "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 0745bd17c1..8b091ef329 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 { withRef } from '@udecode/cn';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  useIndentListToolbarButton,\n  useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list/react';\nimport { List, ListOrdered } from 'lucide-react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentListToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType?: ListStyleType;\n  }\n>(({ nodeType = ListStyleType.Disc }, ref) => {\n  const state = useIndentListToolbarButtonState({ nodeType });\n  const { props } = useIndentListToolbarButton(state);\n\n  return (\n    <ToolbarButton\n      ref={ref}\n      tooltip={\n        nodeType === ListStyleType.Disc ? 'Bulleted List' : 'Numbered List'\n      }\n      {...props}\n    >\n      {nodeType === ListStyleType.Disc ? <List /> : <ListOrdered />}\n    </ToolbarButton>\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} 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",
       "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/table-dropdown-menu.json b/apps/www/public/r/styles/default/table-dropdown-menu.json
index 40134acc52..01dca91675 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 from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\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\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  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>\n              <DropdownMenuItem\n                className=\"min-w-[180px]\"\n                onSelect={() => {\n                  insertTable(editor, {}, { select: true });\n                  focusEditor(editor);\n                }}\n              >\n                <Plus />\n                Insert table\n              </DropdownMenuItem>\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            </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          </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 [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",
       "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/table-element.json b/apps/www/public/r/styles/default/table-element.json
index 1f36f11cd0..215cd5f550 100644
--- a/apps/www/public/r/styles/default/table-element.json
+++ b/apps/www/public/r/styles/default/table-element.json
@@ -20,7 +20,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n  useEditorRef,\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n  withHOC,\n} from '@udecode/plate-common/react';\nimport {\n  type TTableElement,\n  mergeTableCells,\n  unmergeTableCells,\n} from '@udecode/plate-table';\nimport {\n  TableProvider,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\n\nexport const TableBordersDropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n  const {\n    getOnSelectTableBorder,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasOuterBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      className={cn('min-w-[220px]')}\n      align=\"start\"\n      side=\"right\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasBottomBorder}\n          onCheckedChange={getOnSelectTableBorder('bottom')}\n        >\n          <BorderBottom />\n          <div>Bottom Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasTopBorder}\n          onCheckedChange={getOnSelectTableBorder('top')}\n        >\n          <BorderTop />\n          <div>Top Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasLeftBorder}\n          onCheckedChange={getOnSelectTableBorder('left')}\n        >\n          <BorderLeft />\n          <div>Left Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasRightBorder}\n          onCheckedChange={getOnSelectTableBorder('right')}\n        >\n          <BorderRight />\n          <div>Right Border</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasNoBorders}\n          onCheckedChange={getOnSelectTableBorder('none')}\n        >\n          <BorderNone />\n          <div>No Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasOuterBorders}\n          onCheckedChange={getOnSelectTableBorder('outer')}\n        >\n          <BorderAll />\n          <div>Outside Borders</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n    </DropdownMenuContent>\n  );\n});\n\nexport const TableFloatingToolbar = withRef<typeof PopoverContent>(\n  ({ children, ...props }, ref) => {\n    const element = useElement<TTableElement>();\n    const { props: buttonProps } = useRemoveNodeButton({ element });\n\n    const selectionCollapsed = useEditorSelector(\n      (editor) => !isSelectionExpanded(editor),\n      []\n    );\n\n    const readOnly = useReadOnly();\n    const selected = useSelected();\n    const editor = useEditorRef();\n\n    const collapsed = !readOnly && selected && selectionCollapsed;\n    const open = !readOnly && selected;\n\n    const { canMerge, canUnmerge } = useTableMergeState();\n\n    const mergeContent = canMerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => mergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Combine />\n        Merge\n      </Button>\n    );\n\n    const unmergeButton = canUnmerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => unmergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Ungroup />\n        Unmerge\n      </Button>\n    );\n\n    const bordersContent = collapsed && (\n      <>\n        <DropdownMenu modal={false}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" isMenu>\n              <BorderAll />\n              Borders\n            </Button>\n          </DropdownMenuTrigger>\n\n          <DropdownMenuPortal>\n            <TableBordersDropdownMenuContent />\n          </DropdownMenuPortal>\n        </DropdownMenu>\n\n        <Button variant=\"ghost\" contentEditable={false} isMenu {...buttonProps}>\n          <Trash2Icon />\n          Delete\n        </Button>\n      </>\n    );\n\n    return (\n      <Popover open={open} modal={false}>\n        <PopoverAnchor asChild>{children}</PopoverAnchor>\n        {(canMerge || canUnmerge || collapsed) && (\n          <PopoverContent\n            ref={ref}\n            className={cn(popoverVariants(), 'flex w-[220px] flex-col p-1')}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            {...props}\n          >\n            {unmergeButton}\n            {mergeContent}\n            {bordersContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport const TableElement = withHOC(\n  TableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n      useTableElementState();\n    const { colGroupProps, props: tableProps } = useTableElement();\n\n    return (\n      <TableFloatingToolbar>\n        <PlateElement\n          className={cn(className, 'overflow-x-auto')}\n          style={{ paddingLeft: marginLeft }}\n          {...props}\n        >\n          <table\n            ref={ref}\n            className={cn(\n              'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse',\n              isSelectingCell && '[&_*::selection]:bg-none'\n            )}\n            {...tableProps}\n          >\n            <colgroup {...colGroupProps}>\n              {colSizes.map((width, index) => (\n                <col\n                  key={index}\n                  style={{\n                    minWidth: minColumnWidth,\n                    width: width || undefined,\n                  }}\n                />\n              ))}\n            </colgroup>\n\n            <tbody className=\"min-w-full\">{children}</tbody>\n          </table>\n        </PlateElement>\n      </TableFloatingToolbar>\n    );\n  })\n);\n\nconst BorderAll = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z\" />\n  </svg>\n);\n\nconst BorderBottom = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z\" />\n  </svg>\n);\n\nconst BorderLeft = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z\" />\n  </svg>\n);\n\nconst BorderNone = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z\" />\n  </svg>\n);\n\nconst BorderRight = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z\" />\n  </svg>\n);\n\nconst BorderTop = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z\" />\n  </svg>\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n  useEditorRef,\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n  withHOC,\n} from '@udecode/plate-common/react';\nimport {\n  type TTableElement,\n  mergeTableCells,\n  unmergeTableCells,\n} from '@udecode/plate-table';\nimport {\n  TableProvider,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\n\nexport const TableBordersDropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n  const {\n    getOnSelectTableBorder,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasOuterBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      className={cn('min-w-[220px]')}\n      align=\"start\"\n      side=\"right\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasBottomBorder}\n          onCheckedChange={getOnSelectTableBorder('bottom')}\n        >\n          <BorderBottom />\n          <div>Bottom Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasTopBorder}\n          onCheckedChange={getOnSelectTableBorder('top')}\n        >\n          <BorderTop />\n          <div>Top Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasLeftBorder}\n          onCheckedChange={getOnSelectTableBorder('left')}\n        >\n          <BorderLeft />\n          <div>Left Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasRightBorder}\n          onCheckedChange={getOnSelectTableBorder('right')}\n        >\n          <BorderRight />\n          <div>Right Border</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasNoBorders}\n          onCheckedChange={getOnSelectTableBorder('none')}\n        >\n          <BorderNone />\n          <div>No Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasOuterBorders}\n          onCheckedChange={getOnSelectTableBorder('outer')}\n        >\n          <BorderAll />\n          <div>Outside Borders</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n    </DropdownMenuContent>\n  );\n});\n\nexport const TableFloatingToolbar = withRef<typeof PopoverContent>(\n  ({ children, ...props }, ref) => {\n    const element = useElement<TTableElement>();\n    const { props: buttonProps } = useRemoveNodeButton({ element });\n\n    const selectionCollapsed = useEditorSelector(\n      (editor) => !isSelectionExpanded(editor),\n      []\n    );\n\n    const readOnly = useReadOnly();\n    const selected = useSelected();\n    const editor = useEditorRef();\n\n    const collapsed = !readOnly && selected && selectionCollapsed;\n    const open = !readOnly && selected;\n\n    const { canMerge, canUnmerge } = useTableMergeState();\n\n    const mergeContent = canMerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => mergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Combine />\n        Merge\n      </Button>\n    );\n\n    const unmergeButton = canUnmerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => unmergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Ungroup />\n        Unmerge\n      </Button>\n    );\n\n    const bordersContent = collapsed && (\n      <>\n        <DropdownMenu modal={false}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" isMenu>\n              <BorderAll />\n              Borders\n            </Button>\n          </DropdownMenuTrigger>\n\n          <DropdownMenuPortal>\n            <TableBordersDropdownMenuContent />\n          </DropdownMenuPortal>\n        </DropdownMenu>\n\n        <Button variant=\"ghost\" contentEditable={false} isMenu {...buttonProps}>\n          <Trash2Icon />\n          Delete\n        </Button>\n      </>\n    );\n\n    return (\n      <Popover open={open} modal={false}>\n        <PopoverAnchor asChild>{children}</PopoverAnchor>\n        {(canMerge || canUnmerge || collapsed) && (\n          <PopoverContent\n            ref={ref}\n            className={cn(popoverVariants(), 'flex w-[220px] flex-col p-1')}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            {...props}\n          >\n            {unmergeButton}\n            {mergeContent}\n            {bordersContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport const TableElement = withHOC(\n  TableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n      useTableElementState();\n    const { colGroupProps, props: tableProps } = useTableElement();\n\n    return (\n      <TableFloatingToolbar>\n        <PlateElement\n          className={cn(className, 'overflow-x-auto')}\n          style={{ paddingLeft: marginLeft }}\n          {...props}\n        >\n          <table\n            ref={ref}\n            className={cn(\n              'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse',\n              isSelectingCell && '[&_*::selection]:!bg-transparent'\n            )}\n            {...tableProps}\n          >\n            <colgroup {...colGroupProps}>\n              {colSizes.map((width, index) => (\n                <col\n                  key={index}\n                  style={{\n                    minWidth: minColumnWidth,\n                    width: width || undefined,\n                  }}\n                />\n              ))}\n            </colgroup>\n\n            <tbody className=\"min-w-full\">{children}</tbody>\n          </table>\n        </PlateElement>\n      </TableFloatingToolbar>\n    );\n  })\n);\n\nconst BorderAll = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z\" />\n  </svg>\n);\n\nconst BorderBottom = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z\" />\n  </svg>\n);\n\nconst BorderLeft = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z\" />\n  </svg>\n);\n\nconst BorderNone = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z\" />\n  </svg>\n);\n\nconst BorderRight = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z\" />\n  </svg>\n);\n\nconst BorderTop = (props: LucideProps) => (\n  <svg\n    fill=\"currentColor\"\n    focusable=\"false\"\n    height=\"48\"\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z\" />\n  </svg>\n);\n",
       "path": "plate-ui/table-element.tsx",
       "target": "components/plate-ui/table-element.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 60d117938c..562b75dfdb 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>(({ 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\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 = 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",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
index b4cb6e4ce0..ce46e4f0b2 100644
--- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
+++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
@@ -11,7 +11,6 @@ import {
   FontBackgroundColorPlugin,
   FontColorPlugin,
 } from '@udecode/plate-font/react';
-import { ListStyleType } from '@udecode/plate-indent-list';
 import {
   AudioPlugin,
   FilePlugin,
@@ -33,7 +32,10 @@ import { ColorDropdownMenu } from '@/registry/default/plate-ui/color-dropdown-me
 import { CommentToolbarButton } from '@/registry/default/plate-ui/comment-toolbar-button';
 import { EmojiDropdownMenu } from '@/registry/default/plate-ui/emoji-dropdown-menu';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
-import { IndentListToolbarButton } from '@/registry/default/plate-ui/indent-list-toolbar-button';
+import {
+  BulletedIndentListToolbarButton,
+  NumberedIndentListToolbarButton,
+} from '@/registry/default/plate-ui/indent-list-toolbar-button';
 import { IndentToolbarButton } from '@/registry/default/plate-ui/indent-toolbar-button';
 import { InsertDropdownMenu } from '@/registry/default/plate-ui/insert-dropdown-menu';
 import { LineHeightDropdownMenu } from '@/registry/default/plate-ui/line-height-dropdown-menu';
@@ -111,8 +113,8 @@ export function CardsToolbar() {
 
             <LineHeightDropdownMenu />
 
-            <IndentListToolbarButton nodeType={ListStyleType.Disc} />
-            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />
+            <BulletedIndentListToolbarButton />
+            <NumberedIndentListToolbarButton />
 
             <OutdentToolbarButton />
             <IndentToolbarButton />
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 07f08f9853..b9c5a2d180 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
@@ -140,8 +140,6 @@ export function FixedToolbarButtons() {
 
             <NumberedIndentListToolbarButton />
             <BulletedIndentListToolbarButton />
-            {/* <IndentListToolbarButton nodeType={ListStyleType.Disc} /> */}
-            {/* <IndentListToolbarButton nodeType={ListStyleType.Decimal} /> */}
             <IndentTodoToolbarButton />
             <ToggleToolbarButton />
           </ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
index 0983df6f3d..229de1fe88 100644
--- a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
@@ -56,7 +56,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
   const [table, setTable] = useState(
     Array.from({ length: COLS }, () => Array.from({ length: COLS }).fill(0))
   );
-  const [info, setInfo] = useState({ colCount: 0, rowCount: 0 });
+  const [size, setSize] = useState({ colCount: 0, rowCount: 0 });
 
   const onCellMove = useCallback(
     (rowIndex: number, colIndex: number) => {
@@ -69,15 +69,16 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
         }
       }
 
-      setInfo({ colCount: colIndex + 1, rowCount: rowIndex + 1 });
+      setSize({ colCount: colIndex + 1, rowCount: rowIndex + 1 });
       setTable(newTables);
     },
     [table]
   );
 
   const onInsertTable = useCallback(() => {
-    insertTable(editor, info);
-  }, [editor, info]);
+    insertTable(editor, size);
+    focusEditor(editor);
+  }, [editor, size]);
 
   return (
     <DropdownMenu modal={false} {...openState} {...props}>
@@ -119,7 +120,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
                 </div>
 
                 <div className="text-center text-xs text-current">
-                  {info.rowCount} x {info.colCount}
+                  {size.rowCount} x {size.colCount}
                 </div>
               </div>
             </DropdownMenuSubContent>