From 1c149a1333f85eeaf57e1ba734a6cfa3504fa02e Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@users.noreply.github.com>
Date: Thu, 31 Oct 2024 12:23:39 +0000
Subject: [PATCH] docs

---
 apps/www/public/r/styles/default/align-dropdown-menu.json     | 2 +-
 apps/www/public/r/styles/default/column-group-element.json    | 2 +-
 apps/www/public/r/styles/default/insert-dropdown-menu.json    | 2 +-
 apps/www/public/r/styles/default/mode-toggle.json             | 2 +-
 apps/www/public/r/styles/default/slash-input-element.json     | 2 +-
 apps/www/public/r/styles/default/table-dropdown-menu.json     | 2 +-
 apps/www/public/r/styles/default/table-element.json           | 2 +-
 apps/www/public/r/styles/default/turn-into-dropdown-menu.json | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/www/public/r/styles/default/align-dropdown-menu.json b/apps/www/public/r/styles/default/align-dropdown-menu.json
index 25ae28afaf..0b754a8c72 100644
--- a/apps/www/public/r/styles/default/align-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/align-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 {\n  useAlignDropdownMenu,\n  useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    icon: Icons.alignLeft,\n    value: 'left',\n  },\n  {\n    icon: Icons.alignCenter,\n    value: 'center',\n  },\n  {\n    icon: Icons.alignRight,\n    value: 'right',\n  },\n  {\n    icon: Icons.alignJustify,\n    value: 'justify',\n  },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n  const state = useAlignDropdownMenuState();\n  const { radioGroupProps } = useAlignDropdownMenu(state);\n\n  const openState = useOpenState();\n  const IconValue =\n    items.find((item) => item.value === radioGroupProps.value)?.icon ??\n    Icons.alignLeft;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n          <IconValue />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {items.map(({ icon: Icon, value: itemValue }) => (\n            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n              <Icon className={iconVariants({ variant: 'toolbar' })} />\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useAlignDropdownMenu,\n  useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\nimport {\n  AlignCenterIcon,\n  AlignJustifyIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    icon: AlignLeftIcon,\n    value: 'left',\n  },\n  {\n    icon: AlignCenterIcon,\n    value: 'center',\n  },\n  {\n    icon: AlignRightIcon,\n    value: 'right',\n  },\n  {\n    icon: AlignJustifyIcon,\n    value: 'justify',\n  },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n  const state = useAlignDropdownMenuState();\n  const { radioGroupProps } = useAlignDropdownMenu(state);\n\n  const openState = useOpenState();\n  const IconValue =\n    items.find((item) => item.value === radioGroupProps.value)?.icon ??\n    AlignLeftIcon;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n          <IconValue />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {items.map(({ icon: Icon, value: itemValue }) => (\n            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n              <Icon className=\"size-5\" />\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/align-dropdown-menu.tsx",
       "target": "components/plate-ui/align-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/column-group-element.json b/apps/www/public/r/styles/default/column-group-element.json
index 08a5f5a608..73813790f7 100644
--- a/apps/www/public/r/styles/default/column-group-element.json
+++ b/apps/www/public/r/styles/default/column-group-element.json
@@ -19,7 +19,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n  ColumnItemPlugin,\n  useColumnState,\n  useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { Delete } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport {\n  DoubleColumnOutlined,\n  DoubleSideDoubleColumnOutlined,\n  LeftSideDoubleColumnOutlined,\n  RightSideDoubleColumnOutlined,\n  ThreeColumnOutlined,\n} from '@/components/icons';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement ref={ref} className={cn(className, 'my-2')} {...props}>\n        <ColumnFloatingToolbar>\n          <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n        </ColumnFloatingToolbar>\n      </PlateElement>\n    );\n  }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n  const readOnly = useReadOnly();\n\n  const {\n    setDoubleColumn,\n    setDoubleSideDoubleColumn,\n    setLeftSideDoubleColumn,\n    setRightSideDoubleColumn,\n    setThreeColumn,\n  } = useColumnState();\n\n  const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const isOpen = useDebouncePopoverOpen();\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        align=\"center\"\n        side=\"top\"\n        sideOffset={10}\n      >\n        <div className=\"box-content flex h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n          <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n            <DoubleColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n            <ThreeColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n            <RightSideDoubleColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n            <LeftSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"sms\"\n            variant=\"ghost\"\n            onClick={setDoubleSideDoubleColumn}\n          >\n            <DoubleSideDoubleColumnOutlined />\n          </Button>\n\n          <Separator orientation=\"vertical\" className=\"my-1\" />\n          <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n            <Delete />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n  ColumnItemPlugin,\n  useColumnState,\n  useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { type LucideProps, Delete } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement ref={ref} className={cn(className, 'my-2')} {...props}>\n        <ColumnFloatingToolbar>\n          <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n        </ColumnFloatingToolbar>\n      </PlateElement>\n    );\n  }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n  const readOnly = useReadOnly();\n\n  const {\n    setDoubleColumn,\n    setDoubleSideDoubleColumn,\n    setLeftSideDoubleColumn,\n    setRightSideDoubleColumn,\n    setThreeColumn,\n  } = useColumnState();\n\n  const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const isOpen = useDebouncePopoverOpen();\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        align=\"center\"\n        side=\"top\"\n        sideOffset={10}\n      >\n        <div className=\"box-content flex h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n          <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n            <DoubleColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n            <ThreeColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n            <RightSideDoubleColumnOutlined />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n            <LeftSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"sms\"\n            variant=\"ghost\"\n            onClick={setDoubleSideDoubleColumn}\n          >\n            <DoubleSideDoubleColumnOutlined />\n          </Button>\n\n          <Separator orientation=\"vertical\" className=\"my-1\" />\n          <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n            <Delete />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n      fill=\"#4C5161\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n",
       "path": "plate-ui/column-group-element.tsx",
       "target": "components/plate-ui/column-group-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json
index 77df5cecd9..30e699df8e 100644
--- a/apps/www/public/r/styles/default/insert-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json
@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { Plus } from 'lucide-react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    items: [\n      {\n        description: 'Paragraph',\n        icon: Icons.paragraph,\n        label: 'Paragraph',\n        value: ParagraphPlugin.key,\n      },\n      {\n        description: 'Heading 1',\n        icon: Icons.h1,\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        description: 'Heading 2',\n        icon: Icons.h2,\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        description: 'Heading 3',\n        icon: Icons.h3,\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        description: 'Quote (⌘+⇧+.)',\n        icon: Icons.blockquote,\n        label: 'Quote',\n        value: BlockquotePlugin.key,\n      },\n      // {\n      //   value: TablePlugin.key,\n      //   label: 'Table',\n      //   description: 'Table',\n      //   icon: Icons.table,\n      // },\n      // {\n      //   value: 'ul',\n      //   label: 'Bulleted list',\n      //   description: 'Bulleted list',\n      //   icon: Icons.ul,\n      // },\n      // {\n      //   value: 'ol',\n      //   label: 'Numbered list',\n      //   description: 'Numbered list',\n      //   icon: Icons.ol,\n      // },\n      // {\n      //   value: HorizontalRulePlugin.key,\n      //   label: 'Divider',\n      //   description: 'Divider (---)',\n      //   icon: Icons.hr,\n      // },\n    ],\n    label: 'Basic blocks',\n  },\n  // {\n  //   label: 'Media',\n  //   items: [\n  //     {\n  //       value: CodeBlockPlugin.key,\n  //       label: 'Code',\n  //       description: 'Code (```)',\n  //       icon: Icons.codeblock,\n  //     },\n  //     {\n  //       value: ImagePlugin.key,\n  //       label: 'Image',\n  //       description: 'Image',\n  //       icon: Icons.image,\n  //     },\n  //     {\n  //       value: MediaEmbedPlugin.key,\n  //       label: 'Embed',\n  //       description: 'Embed',\n  //       icon: Icons.embed,\n  //     },\n  //     {\n  //       value: ExcalidrawPlugin.key,\n  //       label: 'Excalidraw',\n  //       description: 'Excalidraw',\n  //       icon: Icons.excalidraw,\n  //     },\n  //   ],\n  // },\n  // {\n  //   label: 'Inline',\n  //   items: [\n  //     {\n  //       value: LinkPlugin.key,\n  //       label: 'Link',\n  //       description: 'Link',\n  //       icon: Icons.link,\n  //     },\n  //   ],\n  // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\" isDropdown>\n          <Plus />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto\"\n        align=\"start\"\n      >\n        {items.map(({ items: nestedItems, label }, index) => (\n          <React.Fragment key={label}>\n            {index !== 0 && <DropdownMenuSeparator />}\n\n            <DropdownMenuLabel>{label}</DropdownMenuLabel>\n            {nestedItems.map(\n              ({ icon: Icon, label: itemLabel, value: type }) => (\n                <DropdownMenuItem\n                  key={type}\n                  className=\"min-w-[180px]\"\n                  onSelect={() => {\n                    switch (type) {\n                      // case CodeBlockPlugin.key: {\n                      //   insertEmptyCodeBlock(editor);\n                      //\n                      //   break;\n                      // }\n                      // case ImagePlugin.key: {\n                      //   await insertMedia(editor, { type: ImagePlugin.key });\n                      //\n                      //   break;\n                      // }\n                      // case MediaEmbedPlugin.key: {\n                      //   await insertMedia(editor, {\n                      //     type: MediaEmbedPlugin.key,\n                      //   });\n                      //\n                      //   break;\n                      // }\n                      // case 'ul':\n                      // case 'ol': {\n                      //   insertEmptyElement(editor, ParagraphPlugin.key, {\n                      //     select: true,\n                      //     nextBlock: true,\n                      //   });\n                      //\n                      //   if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n                      //     toggleIndentList(editor, {\n                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',\n                      //     });\n                      //   } else if (settingsStore.get.checkedId('list')) {\n                      //     toggleList(editor, { type });\n                      //   }\n                      //\n                      //   break;\n                      // }\n                      // case TablePlugin.key: {\n                      //   insertTable(editor);\n                      //\n                      //   break;\n                      // }\n                      // case LinkPlugin.key: {\n                      //   triggerFloatingLink(editor, { focused: true });\n                      //\n                      //   break;\n                      // }\n                      default: {\n                        insertEmptyElement(editor, type, {\n                          nextBlock: true,\n                          select: true,\n                        });\n                      }\n                    }\n\n                    focusEditor(editor);\n                  }}\n                >\n                  <Icon className=\"mr-2 size-5\" />\n                  {itemLabel}\n                </DropdownMenuItem>\n              )\n            )}\n          </React.Fragment>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport {\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  PilcrowIcon,\n  Plus,\n  QuoteIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    items: [\n      {\n        description: 'Paragraph',\n        icon: PilcrowIcon,\n        label: 'Paragraph',\n        value: ParagraphPlugin.key,\n      },\n      {\n        description: 'Heading 1',\n        icon: Heading1Icon,\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        description: 'Heading 2',\n        icon: Heading2Icon,\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        description: 'Heading 3',\n        icon: Heading3Icon,\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        description: 'Quote (⌘+⇧+.)',\n        icon: QuoteIcon,\n        label: 'Quote',\n        value: BlockquotePlugin.key,\n      },\n      // {\n      //   value: TablePlugin.key,\n      //   label: 'Table',\n      //   description: 'Table',\n      //   icon: Icons.table,\n      // },\n      // {\n      //   value: 'ul',\n      //   label: 'Bulleted list',\n      //   description: 'Bulleted list',\n      //   icon: Icons.ul,\n      // },\n      // {\n      //   value: 'ol',\n      //   label: 'Numbered list',\n      //   description: 'Numbered list',\n      //   icon: Icons.ol,\n      // },\n      // {\n      //   value: HorizontalRulePlugin.key,\n      //   label: 'Divider',\n      //   description: 'Divider (---)',\n      //   icon: Icons.hr,\n      // },\n    ],\n    label: 'Basic blocks',\n  },\n  // {\n  //   label: 'Media',\n  //   items: [\n  //     {\n  //       value: CodeBlockPlugin.key,\n  //       label: 'Code',\n  //       description: 'Code (```)',\n  //       icon: Icons.codeblock,\n  //     },\n  //     {\n  //       value: ImagePlugin.key,\n  //       label: 'Image',\n  //       description: 'Image',\n  //       icon: Icons.image,\n  //     },\n  //     {\n  //       value: MediaEmbedPlugin.key,\n  //       label: 'Embed',\n  //       description: 'Embed',\n  //       icon: Icons.embed,\n  //     },\n  //     {\n  //       value: ExcalidrawPlugin.key,\n  //       label: 'Excalidraw',\n  //       description: 'Excalidraw',\n  //       icon: Icons.excalidraw,\n  //     },\n  //   ],\n  // },\n  // {\n  //   label: 'Inline',\n  //   items: [\n  //     {\n  //       value: LinkPlugin.key,\n  //       label: 'Link',\n  //       description: 'Link',\n  //       icon: Icons.link,\n  //     },\n  //   ],\n  // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\" isDropdown>\n          <Plus />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto\"\n        align=\"start\"\n      >\n        {items.map(({ items: nestedItems, label }, index) => (\n          <React.Fragment key={label}>\n            {index !== 0 && <DropdownMenuSeparator />}\n\n            <DropdownMenuLabel>{label}</DropdownMenuLabel>\n            {nestedItems.map(\n              ({ icon: Icon, label: itemLabel, value: type }) => (\n                <DropdownMenuItem\n                  key={type}\n                  className=\"min-w-[180px]\"\n                  onSelect={() => {\n                    switch (type) {\n                      // case CodeBlockPlugin.key: {\n                      //   insertEmptyCodeBlock(editor);\n                      //\n                      //   break;\n                      // }\n                      // case ImagePlugin.key: {\n                      //   await insertMedia(editor, { type: ImagePlugin.key });\n                      //\n                      //   break;\n                      // }\n                      // case MediaEmbedPlugin.key: {\n                      //   await insertMedia(editor, {\n                      //     type: MediaEmbedPlugin.key,\n                      //   });\n                      //\n                      //   break;\n                      // }\n                      // case 'ul':\n                      // case 'ol': {\n                      //   insertEmptyElement(editor, ParagraphPlugin.key, {\n                      //     select: true,\n                      //     nextBlock: true,\n                      //   });\n                      //\n                      //   if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n                      //     toggleIndentList(editor, {\n                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',\n                      //     });\n                      //   } else if (settingsStore.get.checkedId('list')) {\n                      //     toggleList(editor, { type });\n                      //   }\n                      //\n                      //   break;\n                      // }\n                      // case TablePlugin.key: {\n                      //   insertTable(editor);\n                      //\n                      //   break;\n                      // }\n                      // case LinkPlugin.key: {\n                      //   triggerFloatingLink(editor, { focused: true });\n                      //\n                      //   break;\n                      // }\n                      default: {\n                        insertEmptyElement(editor, type, {\n                          nextBlock: true,\n                          select: true,\n                        });\n                      }\n                    }\n\n                    focusEditor(editor);\n                  }}\n                >\n                  <Icon className=\"mr-2 size-5\" />\n                  {itemLabel}\n                </DropdownMenuItem>\n              )\n            )}\n          </React.Fragment>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/insert-dropdown-menu.tsx",
       "target": "components/plate-ui/insert-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/mode-toggle.json b/apps/www/public/r/styles/default/mode-toggle.json
index ea46db482e..a73e7d9523 100644
--- a/apps/www/public/r/styles/default/mode-toggle.json
+++ b/apps/www/public/r/styles/default/mode-toggle.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { useTheme } from 'next-themes';\n\nimport { Icons } from '@/components/icons';\nimport { useMounted } from '@/hooks/use-mounted';\nimport { Button } from '@/components/plate-ui/button';\n\nexport default function ModeToggle() {\n  const { setTheme, theme } = useTheme();\n\n  const mounted = useMounted();\n\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"ghost\"\n      className=\"size-8 px-0\"\n      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}\n    >\n      {mounted && theme === 'dark' ? (\n        <Icons.moon className=\"size-[1.2rem]\" />\n      ) : (\n        <Icons.sun className=\"size-[1.2rem]\" />\n      )}\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { MoonIcon, SunIcon } from 'lucide-react';\nimport { useTheme } from 'next-themes';\n\nimport { useMounted } from '@/hooks/use-mounted';\nimport { Button } from '@/components/plate-ui/button';\n\nexport default function ModeToggle() {\n  const { setTheme, theme } = useTheme();\n\n  const mounted = useMounted();\n\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"ghost\"\n      className=\"size-8 px-0\"\n      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}\n    >\n      {mounted && theme === 'dark' ? (\n        <MoonIcon className=\"size-[1.2rem]\" />\n      ) : (\n        <SunIcon className=\"size-[1.2rem]\" />\n      )}\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n",
       "path": "example/mode-toggle.tsx",
       "target": "components/mode-toggle.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json
index e00aad25c5..52e80c1f39 100644
--- a/apps/www/public/r/styles/default/slash-input-element.json
+++ b/apps/www/public/r/styles/default/slash-input-element.json
@@ -36,7 +36,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { type ComponentType, type SVGProps } from 'react';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ninterface SlashCommandRule {\n  icon: ComponentType<SVGProps<SVGSVGElement>>;\n  onSelect: (editor: PlateEditor) => void;\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n  {\n    focusEditor: false,\n    icon: Icons.ai,\n    value: 'AI',\n    onSelect: (editor) => {\n      editor.getApi(AIChatPlugin).aiChat.show();\n    },\n  },\n  {\n    icon: Icons.h1,\n    value: 'Heading 1',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n    },\n  },\n  {\n    icon: Icons.h2,\n    value: 'Heading 2',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n    },\n  },\n  {\n    icon: Icons.h3,\n    value: 'Heading 3',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n    },\n  },\n  {\n    icon: Icons.ul,\n    keywords: ['ul', 'unordered list'],\n    value: 'Bulleted list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Disc,\n      });\n    },\n  },\n  {\n    icon: Icons.ol,\n    keywords: ['ol', 'ordered list'],\n    value: 'Numbered list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Decimal,\n      });\n    },\n  },\n  {\n    icon: Icons.add,\n    keywords: ['inline', 'date'],\n    value: 'Date',\n    onSelect: (editor) => {\n      editor.getTransforms(DatePlugin).insert.date();\n    },\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>\n              No matching commands found\n            </InlineComboboxEmpty>\n\n            {rules.map(\n              ({ focusEditor, icon: Icon, keywords, value, onSelect }) => (\n                <InlineComboboxItem\n                  key={value}\n                  value={value}\n                  onClick={() => onSelect(editor)}\n                  focusEditor={focusEditor}\n                  keywords={keywords}\n                >\n                  <Icon className=\"mr-2 size-4\" aria-hidden />\n                  {value}\n                </InlineComboboxItem>\n              )\n            )}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React, { type ComponentType, type SVGProps } from 'react';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\nimport {\n  CalendarIcon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrderedIcon,\n  SparklesIcon,\n} from 'lucide-react';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ninterface SlashCommandRule {\n  icon: ComponentType<SVGProps<SVGSVGElement>>;\n  onSelect: (editor: PlateEditor) => void;\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n  {\n    focusEditor: false,\n    icon: SparklesIcon,\n    value: 'AI',\n    onSelect: (editor) => {\n      editor.getApi(AIChatPlugin).aiChat.show();\n    },\n  },\n  {\n    icon: Heading1Icon,\n    value: 'Heading 1',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n    },\n  },\n  {\n    icon: Heading2Icon,\n    value: 'Heading 2',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n    },\n  },\n  {\n    icon: Heading3Icon,\n    value: 'Heading 3',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n    },\n  },\n  {\n    icon: ListIcon,\n    keywords: ['ul', 'unordered list'],\n    value: 'Bulleted list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Disc,\n      });\n    },\n  },\n  {\n    icon: ListOrderedIcon,\n    keywords: ['ol', 'ordered list'],\n    value: 'Numbered list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Decimal,\n      });\n    },\n  },\n  {\n    icon: CalendarIcon,\n    keywords: ['inline', 'date'],\n    value: 'Date',\n    onSelect: (editor) => {\n      editor.getTransforms(DatePlugin).insert.date();\n    },\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>\n              No matching commands found\n            </InlineComboboxEmpty>\n\n            {rules.map(\n              ({ focusEditor, icon: Icon, keywords, value, onSelect }) => (\n                <InlineComboboxItem\n                  key={value}\n                  value={value}\n                  onClick={() => onSelect(editor)}\n                  focusEditor={focusEditor}\n                  keywords={keywords}\n                >\n                  <Icon className=\"mr-2 size-4\" aria-hidden />\n                  {value}\n                </InlineComboboxItem>\n              )\n            )}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/slash-input-element.tsx",
       "target": "components/plate-ui/slash-input-element.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 5836774324..3158aab966 100644
--- a/apps/www/public/r/styles/default/table-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/table-dropdown-menu.json
@@ -17,7 +17,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 { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n  TablePlugin,\n  deleteColumn,\n  deleteRow,\n  insertTable,\n} from '@udecode/plate-table/react';\nimport {\n  Minus,\n  Plus,\n  RectangleHorizontal,\n  RectangleVertical,\n  Table,\n  Trash,\n} from 'lucide-react';\n\nimport { iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\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 gap-0.5\"\n        align=\"start\"\n      >\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <Table className={iconVariants({ variant: 'menuItem' })} />\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 className={iconVariants({ variant: 'menuItem' })} />\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 className={iconVariants({ variant: 'menuItem' })} />\n              Delete table\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <RectangleVertical\n              className={iconVariants({ variant: 'menuItem' })}\n            />\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 className={iconVariants({ variant: 'menuItem' })} />\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 className={iconVariants({ variant: 'menuItem' })} />\n              Delete column\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <RectangleHorizontal\n              className={iconVariants({ variant: 'menuItem' })}\n            />\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 className={iconVariants({ variant: 'menuItem' })} />\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 className={iconVariants({ variant: 'menuItem' })} />\n              Delete row\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "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 { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n  TablePlugin,\n  deleteColumn,\n  deleteRow,\n  insertTable,\n} 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  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 gap-0.5\"\n        align=\"start\"\n      >\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <Table className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\n              Delete table\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <RectangleVertical className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\n              Delete column\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <RectangleHorizontal className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\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 className=\"mr-2 size-5\" />\n              Delete row\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\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 ab83e84bb8..bec696ff1c 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';\nimport type { TTableElement } from '@udecode/plate-table';\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  TableProvider,\n  mergeTableCells,\n  unmergeTableCells,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Delete, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\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      <DropdownMenuCheckboxItem\n        checked={hasBottomBorder}\n        onCheckedChange={getOnSelectTableBorder('bottom')}\n      >\n        <BorderBottom className={iconVariants({ size: 'sm' })} />\n        <div>Bottom Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasTopBorder}\n        onCheckedChange={getOnSelectTableBorder('top')}\n      >\n        <BorderTop className={iconVariants({ size: 'sm' })} />\n        <div>Top Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasLeftBorder}\n        onCheckedChange={getOnSelectTableBorder('left')}\n      >\n        <BorderLeft className={iconVariants({ size: 'sm' })} />\n        <div>Left Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasRightBorder}\n        onCheckedChange={getOnSelectTableBorder('right')}\n      >\n        <BorderRight className={iconVariants({ size: 'sm' })} />\n        <div>Right Border</div>\n      </DropdownMenuCheckboxItem>\n\n      <Separator />\n\n      <DropdownMenuCheckboxItem\n        checked={hasNoBorders}\n        onCheckedChange={getOnSelectTableBorder('none')}\n      >\n        <BorderNone className={iconVariants({ size: 'sm' })} />\n        <div>No Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasOuterBorders}\n        onCheckedChange={getOnSelectTableBorder('outer')}\n      >\n        <BorderAll className={iconVariants({ size: 'sm' })} />\n        <div>Outside Borders</div>\n      </DropdownMenuCheckboxItem>\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 className=\"mr-2 size-4\" />\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 className=\"mr-2 size-4\" />\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 className=\"mr-2 size-4\" />\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          <Delete className=\"mr-2 size-4\" />\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(\n              popoverVariants(),\n              'flex w-[220px] flex-col gap-1 p-1'\n            )}\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        <div style={{ paddingLeft: marginLeft }}>\n          <PlateElement\n            ref={ref}\n            as=\"table\"\n            className={cn(\n              'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',\n              isSelectingCell && '[&_*::selection]:bg-none',\n              className\n            )}\n            {...tableProps}\n            {...props}\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          </PlateElement>\n        </div>\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';\nimport type { TTableElement } from '@udecode/plate-table';\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  TableProvider,\n  mergeTableCells,\n  unmergeTableCells,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Delete, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\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      <DropdownMenuCheckboxItem\n        checked={hasBottomBorder}\n        onCheckedChange={getOnSelectTableBorder('bottom')}\n      >\n        <BorderBottom className=\"mr-2 size-4\" />\n        <div>Bottom Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasTopBorder}\n        onCheckedChange={getOnSelectTableBorder('top')}\n      >\n        <BorderTop className=\"mr-2 size-4\" />\n        <div>Top Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasLeftBorder}\n        onCheckedChange={getOnSelectTableBorder('left')}\n      >\n        <BorderLeft className=\"mr-2 size-4\" />\n        <div>Left Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasRightBorder}\n        onCheckedChange={getOnSelectTableBorder('right')}\n      >\n        <BorderRight className=\"mr-2 size-4\" />\n        <div>Right Border</div>\n      </DropdownMenuCheckboxItem>\n\n      <Separator />\n\n      <DropdownMenuCheckboxItem\n        checked={hasNoBorders}\n        onCheckedChange={getOnSelectTableBorder('none')}\n      >\n        <BorderNone className=\"mr-2 size-4\" />\n        <div>No Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasOuterBorders}\n        onCheckedChange={getOnSelectTableBorder('outer')}\n      >\n        <BorderAll className=\"mr-2 size-4\" />\n        <div>Outside Borders</div>\n      </DropdownMenuCheckboxItem>\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 className=\"mr-2 size-4\" />\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 className=\"mr-2 size-4\" />\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 className=\"mr-2 size-4\" />\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          <Delete className=\"mr-2 size-4\" />\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(\n              popoverVariants(),\n              'flex w-[220px] flex-col gap-1 p-1'\n            )}\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        <div style={{ paddingLeft: marginLeft }}>\n          <PlateElement\n            ref={ref}\n            as=\"table\"\n            className={cn(\n              'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',\n              isSelectingCell && '[&_*::selection]:bg-none',\n              className\n            )}\n            {...tableProps}\n            {...props}\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          </PlateElement>\n        </div>\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/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
index 3484a1d709..d576bfa2de 100644
--- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
@@ -27,7 +27,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { getNodeEntries, isBlock } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    description: 'Paragraph',\n    icon: Icons.paragraph,\n    label: 'Paragraph',\n    value: ParagraphPlugin.key,\n  },\n  {\n    description: 'Heading 1',\n    icon: Icons.h1,\n    label: 'Heading 1',\n    value: HEADING_KEYS.h1,\n  },\n  {\n    description: 'Heading 2',\n    icon: Icons.h2,\n    label: 'Heading 2',\n    value: HEADING_KEYS.h2,\n  },\n  {\n    description: 'Heading 3',\n    icon: Icons.h3,\n    label: 'Heading 3',\n    value: HEADING_KEYS.h3,\n  },\n  {\n    description: 'Quote (⌘+⇧+.)',\n    icon: Icons.blockquote,\n    label: 'Quote',\n    value: BlockquotePlugin.key,\n  },\n  {\n    description: 'Bulleted list',\n    icon: Icons.ul,\n    label: 'Bulleted list',\n    value: ListStyleType.Disc,\n  },\n  {\n    description: 'Numbered list',\n    icon: Icons.ol,\n    label: 'Numbered list',\n    value: ListStyleType.Decimal,\n  },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n  const value: string = useEditorSelector((editor) => {\n    let initialNodeType: string = ParagraphPlugin.key;\n    let allNodesMatchInitialNodeType = false;\n    const codeBlockEntries = getNodeEntries(editor, {\n      match: (n) => isBlock(editor, n),\n      mode: 'highest',\n    });\n    const nodes = Array.from(codeBlockEntries);\n\n    if (nodes.length > 0) {\n      initialNodeType = nodes[0][0].type as string;\n      allNodesMatchInitialNodeType = nodes.every(([node]) => {\n        const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n        return type === initialNodeType;\n      });\n    }\n\n    return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n  }, []);\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const selectedItem =\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n    items.find((item) => item.value === value) ?? defaultItem;\n  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Turn into\" isDropdown>\n          <SelectedItemIcon className=\"size-5 lg:hidden\" />\n          <span className=\"max-lg:hidden\">{selectedItemLabel}</span>\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar min-w-0\"\n        align=\"start\"\n      >\n        <DropdownMenuLabel>Turn into</DropdownMenuLabel>\n\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          value={value}\n          onValueChange={(type: any) => {\n            if (type === ListStyleType.Disc || type === ListStyleType.Decimal) {\n              toggleIndentList(editor, {\n                listStyleType: type,\n              });\n            }\n\n            editor.tf.toggle.block({ type });\n\n            focusEditor(editor);\n          }}\n        >\n          {items.map(({ icon: Icon, label, value: itemValue }) => (\n            <DropdownMenuRadioItem\n              key={itemValue}\n              className=\"min-w-[180px]\"\n              value={itemValue}\n            >\n              <Icon className=\"mr-2 size-5\" />\n              {label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { getNodeEntries, isBlock } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\nimport {\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrderedIcon,\n  PilcrowIcon,\n  QuoteIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    description: 'Paragraph',\n    icon: PilcrowIcon,\n    label: 'Paragraph',\n    value: ParagraphPlugin.key,\n  },\n  {\n    description: 'Heading 1',\n    icon: Heading1Icon,\n    label: 'Heading 1',\n    value: HEADING_KEYS.h1,\n  },\n  {\n    description: 'Heading 2',\n    icon: Heading2Icon,\n    label: 'Heading 2',\n    value: HEADING_KEYS.h2,\n  },\n  {\n    description: 'Heading 3',\n    icon: Heading3Icon,\n    label: 'Heading 3',\n    value: HEADING_KEYS.h3,\n  },\n  {\n    description: 'Quote (⌘+⇧+.)',\n    icon: QuoteIcon,\n    label: 'Quote',\n    value: BlockquotePlugin.key,\n  },\n  {\n    description: 'Bulleted list',\n    icon: ListIcon,\n    label: 'Bulleted list',\n    value: ListStyleType.Disc,\n  },\n  {\n    description: 'Numbered list',\n    icon: ListOrderedIcon,\n    label: 'Numbered list',\n    value: ListStyleType.Decimal,\n  },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n  const value: string = useEditorSelector((editor) => {\n    let initialNodeType: string = ParagraphPlugin.key;\n    let allNodesMatchInitialNodeType = false;\n    const codeBlockEntries = getNodeEntries(editor, {\n      match: (n) => isBlock(editor, n),\n      mode: 'highest',\n    });\n    const nodes = Array.from(codeBlockEntries);\n\n    if (nodes.length > 0) {\n      initialNodeType = nodes[0][0].type as string;\n      allNodesMatchInitialNodeType = nodes.every(([node]) => {\n        const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n        return type === initialNodeType;\n      });\n    }\n\n    return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n  }, []);\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const selectedItem =\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n    items.find((item) => item.value === value) ?? defaultItem;\n  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Turn into\" isDropdown>\n          <SelectedItemIcon className=\"size-5 lg:hidden\" />\n          <span className=\"max-lg:hidden\">{selectedItemLabel}</span>\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar min-w-0\"\n        align=\"start\"\n      >\n        <DropdownMenuLabel>Turn into</DropdownMenuLabel>\n\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          value={value}\n          onValueChange={(type: any) => {\n            if (type === ListStyleType.Disc || type === ListStyleType.Decimal) {\n              toggleIndentList(editor, {\n                listStyleType: type,\n              });\n            }\n\n            editor.tf.toggle.block({ type });\n\n            focusEditor(editor);\n          }}\n        >\n          {items.map(({ icon: Icon, label, value: itemValue }) => (\n            <DropdownMenuRadioItem\n              key={itemValue}\n              className=\"min-w-[180px]\"\n              value={itemValue}\n            >\n              <Icon className=\"mr-2 size-5\" />\n              {label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/turn-into-dropdown-menu.tsx",
       "target": "components/plate-ui/turn-into-dropdown-menu.tsx",
       "type": "registry:ui"