diff --git a/apps/www/public/registry/styles/default/comments-popover.json b/apps/www/public/registry/styles/default/comments-popover.json
index de37152307..23259ea590 100644
--- a/apps/www/public/registry/styles/default/comments-popover.json
+++ b/apps/www/public/registry/styles/default/comments-popover.json
@@ -26,7 +26,7 @@
     },
     {
       "name": "comment-more-dropdown.tsx",
-      "content": "'use client';\n\nimport React from 'react';\nimport {\n  useCommentDeleteButton,\n  useCommentDeleteButtonState,\n  useCommentEditButton,\n  useCommentEditButtonState,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\nimport { Button } from '@/registry/default/plate-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/plate-ui/dropdown-menu';\n\nexport function CommentMoreDropdown() {\n  const editButtonState = useCommentEditButtonState();\n  const editProps = useCommentEditButton(editButtonState);\n  const deleteButtonState = useCommentDeleteButtonState();\n  const deleteProps = useCommentDeleteButton(deleteButtonState);\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className={cn('h-6 p-1 text-muted-foreground')}>\n          <Icons.more className=\"h-4 w-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem {...(editProps as any)}>\n          Edit comment\n        </DropdownMenuItem>\n        <DropdownMenuItem {...(deleteProps as any)}>\n          Delete comment\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
+      "content": "'use client';\n\nimport React from 'react';\nimport {\n  useCommentDeleteButton,\n  useCommentDeleteButtonState,\n  useCommentEditButton,\n  useCommentEditButtonState,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\nimport { Button } from '@/registry/default/plate-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/plate-ui/dropdown-menu';\n\nexport function CommentMoreDropdown() {\n  const editButtonState = useCommentEditButtonState();\n  const { props: editProps } = useCommentEditButton(editButtonState);\n  const deleteButtonState = useCommentDeleteButtonState();\n  const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className={cn('h-6 p-1 text-muted-foreground')}>\n          <Icons.more className=\"h-4 w-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem {...editProps}>Edit comment</DropdownMenuItem>\n        <DropdownMenuItem {...deleteProps}>Delete comment</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
     },
     {
       "name": "comment-reply-items.tsx",
@@ -38,7 +38,7 @@
     },
     {
       "name": "comment-value.tsx",
-      "content": "'use client';\n\nimport React from 'react';\nimport {\n  CommentEditActions,\n  CommentEditTextarea,\n  useCommentValue,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { inputVariants } from '@/registry/default/plate-ui/input';\n\nexport function CommentValue() {\n  const { textareaRef } = useCommentValue();\n\n  return (\n    <div className=\"my-2 flex flex-col items-end gap-2\">\n      <CommentEditTextarea\n        ref={textareaRef}\n        className={cn(inputVariants(), 'min-h-[60px]')}\n      />\n\n      <div className=\"flex space-x-2\">\n        <CommentEditActions.CancelButton\n          className={buttonVariants({ variant: 'outline', size: 'xs' })}\n        >\n          Cancel\n        </CommentEditActions.CancelButton>\n\n        <CommentEditActions.SaveButton\n          className={buttonVariants({ variant: 'default', size: 'xs' })}\n        >\n          Save\n        </CommentEditActions.SaveButton>\n      </div>\n    </div>\n  );\n}\n"
+      "content": "'use client';\n\nimport React from 'react';\nimport {\n  CommentEditActions,\n  CommentEditTextarea,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { inputVariants } from '@/registry/default/plate-ui/input';\n\nexport function CommentValue() {\n  return (\n    <div className=\"my-2 flex flex-col items-end gap-2\">\n      <CommentEditTextarea className={cn(inputVariants(), 'min-h-[60px]')} />\n\n      <div className=\"flex space-x-2\">\n        <CommentEditActions.CancelButton\n          className={buttonVariants({ variant: 'outline', size: 'xs' })}\n        >\n          Cancel\n        </CommentEditActions.CancelButton>\n\n        <CommentEditActions.SaveButton\n          className={buttonVariants({ variant: 'default', size: 'xs' })}\n        >\n          Save\n        </CommentEditActions.SaveButton>\n      </div>\n    </div>\n  );\n}\n"
     }
   ],
   "type": "components:plate-ui"
diff --git a/apps/www/public/registry/styles/default/table-cell-element.json b/apps/www/public/registry/styles/default/table-cell-element.json
index 60e93f2774..9175604cb5 100644
--- a/apps/www/public/registry/styles/default/table-cell-element.json
+++ b/apps/www/public/registry/styles/default/table-cell-element.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "table-cell-element.tsx",
-      "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n  TTableCellElement,\n  useTableCellElement,\n  useTableCellElementResizable,\n  useTableCellElementResizableState,\n  useTableCellElementState,\n} from '@udecode/plate-table';\n\nimport { cn } from '@/lib/utils';\n\nimport { ResizeHandle } from './resizable';\n\nexport interface TableCellElementProps\n  extends PlateElementProps<Value, TTableCellElement> {\n  hideBorder?: boolean;\n  isHeader?: boolean;\n}\n\nconst TableCellElement = React.forwardRef<\n  React.ElementRef<typeof PlateElement>,\n  TableCellElementProps\n>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {\n  const { element } = props;\n\n  const {\n    colIndex,\n    rowIndex,\n    readOnly,\n    selected,\n    hovered,\n    hoveredLeft,\n    rowSize,\n    borders,\n    isSelectingCell,\n  } = useTableCellElementState();\n  const { props: cellProps } = useTableCellElement({ element: props.element });\n  const resizableState = useTableCellElementResizableState({\n    colIndex,\n    rowIndex,\n  });\n  const { rightProps, bottomProps, leftProps, hiddenLeft } =\n    useTableCellElementResizable(resizableState);\n\n  const Cell = isHeader ? 'th' : 'td';\n\n  return (\n    <PlateElement\n      asChild\n      ref={ref}\n      className={cn(\n        'relative overflow-visible border-none bg-background p-0',\n        hideBorder && 'before:border-none',\n        element.background ? 'bg-[--cellBackground]' : 'bg-background',\n        !hideBorder &&\n          cn(\n            isHeader && 'text-left [&_>_*]:m-0',\n            'before:h-full before:w-full',\n            selected && 'before:z-10 before:bg-muted',\n            \"before:absolute before:box-border before:select-none before:content-['']\",\n            borders &&\n              cn(\n                borders.bottom?.size &&\n                  `before:border-b before:border-b-border`,\n                borders.right?.size && `before:border-r before:border-r-border`,\n                borders.left?.size && `before:border-l before:border-l-border`,\n                borders.top?.size && `before:border-t before:border-t-border`\n              )\n          ),\n        className\n      )}\n      {...cellProps}\n      {...props}\n      style={\n        {\n          '--cellBackground': element.background,\n          ...style,\n        } as React.CSSProperties\n      }\n    >\n      <Cell>\n        <div\n          className=\"relative z-20 box-border h-full px-3 py-2\"\n          style={{\n            minHeight: rowSize,\n          }}\n        >\n          {children}\n        </div>\n\n        {!isSelectingCell && (\n          <div\n            className=\"group absolute top-0 h-full w-full select-none\"\n            contentEditable={false}\n            suppressContentEditableWarning={true}\n          >\n            {!readOnly && (\n              <>\n                <ResizeHandle\n                  {...rightProps}\n                  className=\"-top-3 right-[-5px] w-[10px]\"\n                />\n                <ResizeHandle\n                  {...bottomProps}\n                  className=\"bottom-[-5px] h-[10px]\"\n                />\n                {!hiddenLeft && (\n                  <ResizeHandle\n                    {...leftProps}\n                    className=\"-top-3 left-[-5px] w-[10px]\"\n                  />\n                )}\n\n                {hovered && (\n                  <div\n                    className={cn(\n                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                      'right-[-1.5px]'\n                    )}\n                  />\n                )}\n                {hoveredLeft && (\n                  <div\n                    className={cn(\n                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                      'left-[-1.5px]'\n                    )}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </Cell>\n    </PlateElement>\n  );\n});\nTableCellElement.displayName = 'TableCellElement';\n\nconst TableCellHeaderElement = React.forwardRef<\n  React.ElementRef<typeof TableCellElement>,\n  TableCellElementProps\n>((props, ref) => {\n  return <TableCellElement ref={ref} {...props} isHeader />;\n});\nTableCellHeaderElement.displayName = 'TableCellHeaderElement';\n\nexport { TableCellElement, TableCellHeaderElement };\n"
+      "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n  TTableCellElement,\n  useTableCellElement,\n  useTableCellElementResizable,\n  useTableCellElementResizableState,\n  useTableCellElementState,\n} from '@udecode/plate-table';\n\nimport { cn } from '@/lib/utils';\n\nimport { ResizeHandle } from './resizable';\n\nexport interface TableCellElementProps\n  extends PlateElementProps<Value, TTableCellElement> {\n  hideBorder?: boolean;\n  isHeader?: boolean;\n}\n\nconst TableCellElement = React.forwardRef<\n  React.ElementRef<typeof PlateElement>,\n  TableCellElementProps\n>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {\n  const { element } = props;\n\n  const {\n    colIndex,\n    rowIndex,\n    readOnly,\n    selected,\n    hovered,\n    hoveredLeft,\n    rowSize,\n    borders,\n    isSelectingCell,\n    colSpan,\n  } = useTableCellElementState();\n  const { props: cellProps } = useTableCellElement({ element: props.element });\n  const resizableState = useTableCellElementResizableState({\n    colIndex,\n    rowIndex,\n    colSpan,\n  });\n\n  const { rightProps, bottomProps, leftProps, hiddenLeft } =\n    useTableCellElementResizable(resizableState);\n\n  const Cell = isHeader ? 'th' : 'td';\n\n  return (\n    <PlateElement\n      asChild\n      ref={ref}\n      className={cn(\n        'relative h-full overflow-visible border-none bg-background p-0',\n        hideBorder && 'before:border-none',\n        element.background ? 'bg-[--cellBackground]' : 'bg-background',\n        !hideBorder &&\n          cn(\n            isHeader && 'text-left [&_>_*]:m-0',\n            'before:h-full before:w-full',\n            selected && 'before:z-10 before:bg-muted',\n            \"before:absolute before:box-border before:select-none before:content-['']\",\n            borders &&\n              cn(\n                borders.bottom?.size &&\n                  `before:border-b before:border-b-border`,\n                borders.right?.size && `before:border-r before:border-r-border`,\n                borders.left?.size && `before:border-l before:border-l-border`,\n                borders.top?.size && `before:border-t before:border-t-border`\n              )\n          ),\n        className\n      )}\n      {...cellProps}\n      {...props}\n      style={\n        {\n          '--cellBackground': element.background,\n          ...style,\n        } as React.CSSProperties\n      }\n    >\n      <Cell>\n        <div\n          className=\"relative z-20 box-border h-full px-3 py-2\"\n          style={{\n            minHeight: rowSize,\n          }}\n        >\n          {children}\n        </div>\n\n        {!isSelectingCell && (\n          <div\n            className=\"group absolute top-0 h-full w-full select-none\"\n            contentEditable={false}\n            suppressContentEditableWarning={true}\n          >\n            {!readOnly && (\n              <>\n                <ResizeHandle\n                  {...rightProps}\n                  className=\"-top-3 right-[-5px] w-[10px]\"\n                />\n                <ResizeHandle\n                  {...bottomProps}\n                  className=\"bottom-[-5px] h-[10px]\"\n                />\n                {!hiddenLeft && (\n                  <ResizeHandle\n                    {...leftProps}\n                    className=\"-top-3 left-[-5px] w-[10px]\"\n                  />\n                )}\n\n                {hovered && (\n                  <div\n                    className={cn(\n                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                      'right-[-1.5px]'\n                    )}\n                  />\n                )}\n                {hoveredLeft && (\n                  <div\n                    className={cn(\n                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                      'left-[-1.5px]'\n                    )}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </Cell>\n    </PlateElement>\n  );\n});\nTableCellElement.displayName = 'TableCellElement';\n\nconst TableCellHeaderElement = React.forwardRef<\n  React.ElementRef<typeof TableCellElement>,\n  TableCellElementProps\n>((props, ref) => {\n  return <TableCellElement ref={ref} {...props} isHeader />;\n});\nTableCellHeaderElement.displayName = 'TableCellHeaderElement';\n\nexport { TableCellElement, TableCellHeaderElement };\n"
     }
   ],
   "type": "components:plate-ui"
diff --git a/apps/www/public/registry/styles/default/table-element.json b/apps/www/public/registry/styles/default/table-element.json
index eaa8db65bc..a119ed97df 100644
--- a/apps/www/public/registry/styles/default/table-element.json
+++ b/apps/www/public/registry/styles/default/table-element.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "table-element.tsx",
-      "content": "import React, { forwardRef } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';\nimport {\n  isCollapsed,\n  PlateElement,\n  PlateElementProps,\n  useEditorState,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n  TTableElement,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icons, 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 { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst TableBordersDropdownMenuContent = forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>((props, ref) => {\n  const {\n    getOnSelectTableBorder,\n    hasOuterBorders,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      className={cn('min-w-[220px]')}\n      side=\"right\"\n      align=\"start\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuCheckboxItem\n        checked={hasBottomBorder}\n        onCheckedChange={getOnSelectTableBorder('bottom')}\n      >\n        <Icons.borderBottom className={iconVariants({ size: 'sm' })} />\n        <div>Bottom Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasTopBorder}\n        onCheckedChange={getOnSelectTableBorder('top')}\n      >\n        <Icons.borderTop className={iconVariants({ size: 'sm' })} />\n        <div>Top Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasLeftBorder}\n        onCheckedChange={getOnSelectTableBorder('left')}\n      >\n        <Icons.borderLeft className={iconVariants({ size: 'sm' })} />\n        <div>Left Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasRightBorder}\n        onCheckedChange={getOnSelectTableBorder('right')}\n      >\n        <Icons.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        <Icons.borderNone className={iconVariants({ size: 'sm' })} />\n        <div>No Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasOuterBorders}\n        onCheckedChange={getOnSelectTableBorder('outer')}\n      >\n        <Icons.borderAll className={iconVariants({ size: 'sm' })} />\n        <div>Outside Borders</div>\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  );\n});\nTableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent';\n\nconst TableFloatingToolbar = React.forwardRef<\n  React.ElementRef<typeof PopoverContent>,\n  PopoverContentProps\n>(({ children, ...props }, ref) => {\n  const element = useElement<TTableElement>();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n  const editor = useEditorState();\n  const open = !readOnly && selected && isCollapsed(editor.selection);\n\n  return (\n    <Popover open={open} modal={false}>\n      <PopoverAnchor asChild>{children}</PopoverAnchor>\n      <PopoverContent\n        ref={ref}\n        className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        {...props}\n      >\n        <DropdownMenu modal={false}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" isMenu>\n              <Icons.borderAll className=\"mr-2 h-4 w-4\" />\n              Borders\n            </Button>\n          </DropdownMenuTrigger>\n\n          <DropdownMenuPortal>\n            <TableBordersDropdownMenuContent />\n          </DropdownMenuPortal>\n        </DropdownMenu>\n\n        <Button contentEditable={false} variant=\"ghost\" isMenu {...buttonProps}>\n          <Icons.delete className=\"mr-2 h-4 w-4\" />\n          Delete\n        </Button>\n      </PopoverContent>\n    </Popover>\n  );\n});\nTableFloatingToolbar.displayName = 'TableFloatingToolbar';\n\nconst TableElement = React.forwardRef<\n  React.ElementRef<typeof PlateElement>,\n  PlateElementProps\n>(({ className, children, ...props }, ref) => {\n  const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n    useTableElementState();\n  const { props: tableProps, colGroupProps } = useTableElement();\n\n  return (\n    <TableFloatingToolbar>\n      <div style={{ paddingLeft: marginLeft }}>\n        <PlateElement\n          asChild\n          ref={ref}\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          <table>\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      </div>\n    </TableFloatingToolbar>\n  );\n});\nTableElement.displayName = 'TableElement';\n\nexport { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent };\n"
+      "content": "import React, { forwardRef } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';\nimport {\n  isCollapsed,\n  PlateElement,\n  PlateElementProps,\n  useEditorState,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n  mergeTableCells,\n  TTableElement,\n  unmergeTableCells,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icons, 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 { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst TableBordersDropdownMenuContent = forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>((props, ref) => {\n  const {\n    getOnSelectTableBorder,\n    hasOuterBorders,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      className={cn('min-w-[220px]')}\n      side=\"right\"\n      align=\"start\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuCheckboxItem\n        checked={hasBottomBorder}\n        onCheckedChange={getOnSelectTableBorder('bottom')}\n      >\n        <Icons.borderBottom className={iconVariants({ size: 'sm' })} />\n        <div>Bottom Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasTopBorder}\n        onCheckedChange={getOnSelectTableBorder('top')}\n      >\n        <Icons.borderTop className={iconVariants({ size: 'sm' })} />\n        <div>Top Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasLeftBorder}\n        onCheckedChange={getOnSelectTableBorder('left')}\n      >\n        <Icons.borderLeft className={iconVariants({ size: 'sm' })} />\n        <div>Left Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasRightBorder}\n        onCheckedChange={getOnSelectTableBorder('right')}\n      >\n        <Icons.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        <Icons.borderNone className={iconVariants({ size: 'sm' })} />\n        <div>No Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasOuterBorders}\n        onCheckedChange={getOnSelectTableBorder('outer')}\n      >\n        <Icons.borderAll className={iconVariants({ size: 'sm' })} />\n        <div>Outside Borders</div>\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  );\n});\nTableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent';\n\nconst TableFloatingToolbar = React.forwardRef<\n  React.ElementRef<typeof PopoverContent>,\n  PopoverContentProps\n>(({ children, ...props }, ref) => {\n  const element = useElement<TTableElement>();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n  const editor = useEditorState();\n\n  const collapsed = !readOnly && selected && isCollapsed(editor.selection);\n  const open = !readOnly && selected;\n\n  const { canMerge, canUnmerge } = useTableMergeState();\n\n  const mergeContent = canMerge && (\n    <Button\n      contentEditable={false}\n      variant=\"ghost\"\n      isMenu\n      onClick={() => mergeTableCells(editor)}\n    >\n      <Icons.combine className=\"mr-2 h-4 w-4\" />\n      Merge\n    </Button>\n  );\n\n  const unmergeButton = canUnmerge && (\n    <Button\n      contentEditable={false}\n      variant=\"ghost\"\n      isMenu\n      onClick={() => unmergeTableCells(editor)}\n    >\n      <Icons.ungroup className=\"mr-2 h-4 w-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            <Icons.borderAll className=\"mr-2 h-4 w-4\" />\n            Borders\n          </Button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuPortal>\n          <TableBordersDropdownMenuContent />\n        </DropdownMenuPortal>\n      </DropdownMenu>\n\n      <Button contentEditable={false} variant=\"ghost\" isMenu {...buttonProps}>\n        <Icons.delete className=\"mr-2 h-4 w-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(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          {...props}\n        >\n          {unmergeButton}\n          {mergeContent}\n          {bordersContent}\n        </PopoverContent>\n      )}\n    </Popover>\n  );\n});\nTableFloatingToolbar.displayName = 'TableFloatingToolbar';\n\nconst TableElement = React.forwardRef<\n  React.ElementRef<typeof PlateElement>,\n  PlateElementProps\n>(({ className, children, ...props }, ref) => {\n  const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n    useTableElementState();\n  const { props: tableProps, colGroupProps } = useTableElement();\n\n  return (\n    <TableFloatingToolbar>\n      <div style={{ paddingLeft: marginLeft }}>\n        <PlateElement\n          asChild\n          ref={ref}\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          <table>\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      </div>\n    </TableFloatingToolbar>\n  );\n});\nTableElement.displayName = 'TableElement';\n\nexport { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent };\n"
     }
   ],
   "type": "components:plate-ui"
diff --git a/apps/www/public/registry/styles/default/toolbar.json b/apps/www/public/registry/styles/default/toolbar.json
index 18aa2435fc..24ce7ade72 100644
--- a/apps/www/public/registry/styles/default/toolbar.json
+++ b/apps/www/public/registry/styles/default/toolbar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "toolbar.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ReactNode } from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { ToggleProps, toggleVariants } from './toggle';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipTrigger,\n} from './tooltip';\n\nconst toolbarVariants = cva(\n  'relative flex select-none items-stretch gap-1 bg-background'\n);\n\nexport const linkVariants = cva('font-medium underline underline-offset-4');\n\nconst ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;\n\nexport interface ToolbarProps\n  extends React.ComponentPropsWithoutRef<typeof Toolbar> {}\n\nconst Toolbar = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> &\n    VariantProps<typeof toolbarVariants>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Root\n    ref={ref}\n    className={cn(toolbarVariants(), className)}\n    {...props}\n  />\n));\nToolbar.displayName = ToolbarPrimitive.Root.displayName;\n\nconst ToolbarLink = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Link>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> &\n    VariantProps<typeof linkVariants>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Link\n    ref={ref}\n    className={cn(linkVariants(), className)}\n    {...props}\n  />\n));\nToolbarLink.displayName = ToolbarPrimitive.Link.displayName;\n\nconst ToolbarSeparator = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Separator\n    ref={ref}\n    className={cn('shrink-0 bg-border', 'my-1 w-[1px]', className)}\n    {...props}\n  />\n));\nToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;\n\nexport interface ToolbarButtonProps\n  extends React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,\n    VariantProps<typeof toggleVariants>,\n    Omit<ToggleProps, 'type'> {\n  buttonType?: 'button' | 'toggle';\n  pressed?: boolean;\n  tooltip?: ReactNode;\n  isDropdown?: boolean;\n}\n\nconst ToolbarButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Button>,\n  ToolbarButtonProps\n>(\n  (\n    {\n      className,\n      variant,\n      size = 'sm',\n      isDropdown,\n      children,\n      pressed,\n      value,\n      tooltip,\n      ...props\n    },\n    ref\n  ) => {\n    const [isLoaded, setIsLoaded] = React.useState(false);\n\n    React.useEffect(() => {\n      setIsLoaded(true);\n    }, []);\n\n    const content =\n      typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          type=\"single\"\n          value={pressed ? 'single' : undefined}\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toggleVariants({\n                variant,\n                size,\n              }),\n              isDropdown && 'my-1 justify-between pr-1',\n              className\n            )}\n            value=\"single\"\n            {...props}\n          >\n            <div className=\"flex flex-1\">{children}</div>\n            <div>\n              {isDropdown && (\n                <Icons.arrowDown className=\"ml-0.5 h-4 w-4\" data-icon />\n              )}\n            </div>\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toggleVariants({\n              variant,\n              size,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n\n    return isLoaded && tooltip ? (\n      <Tooltip>\n        <TooltipTrigger asChild>{content}</TooltipTrigger>\n\n        <TooltipPortal>\n          <TooltipContent>{tooltip}</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    ) : (\n      <>{content}</>\n    );\n  }\n);\nToolbarButton.displayName = ToolbarPrimitive.Button.displayName;\n\nconst ToolbarToggleItem = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <ToolbarPrimitive.ToggleItem\n    ref={ref}\n    className={cn(toggleVariants({ variant, size }), className)}\n    {...props}\n  />\n));\nToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;\n\nconst ToolbarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noSeparator?: boolean }\n>(({ noSeparator, className, children }, ref) => {\n  const childArr = React.Children.map(children, (c) => c);\n  if (!childArr || childArr.length === 0) return null;\n\n  return (\n    <div ref={ref} className={cn('flex', className)}>\n      {!noSeparator && (\n        <div className=\"h-full py-1\">\n          <Separator orientation=\"vertical\" />\n        </div>\n      )}\n\n      <div className=\"mx-1 flex items-center gap-1\">{children}</div>\n    </div>\n  );\n});\nToolbarGroup.displayName = 'ToolbarGroup';\n\nexport {\n  Toolbar,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarSeparator,\n  ToolbarToggleItem,\n  ToolbarButton,\n  ToolbarGroup,\n};\n"
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { ReactNode } from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { ToggleProps, toggleVariants } from './toggle';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipTrigger,\n} from './tooltip';\n\nconst toolbarVariants = cva(\n  'relative flex select-none items-stretch gap-1 bg-background'\n);\n\nexport const linkVariants = cva('font-medium underline underline-offset-4');\n\nconst ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;\n\nexport interface ToolbarProps\n  extends React.ComponentPropsWithoutRef<typeof Toolbar> {}\n\nconst Toolbar = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> &\n    VariantProps<typeof toolbarVariants>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Root\n    ref={ref}\n    className={cn(toolbarVariants(), className)}\n    {...props}\n  />\n));\nToolbar.displayName = ToolbarPrimitive.Root.displayName;\n\nconst ToolbarLink = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Link>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> &\n    VariantProps<typeof linkVariants>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Link\n    ref={ref}\n    className={cn(linkVariants(), className)}\n    {...props}\n  />\n));\nToolbarLink.displayName = ToolbarPrimitive.Link.displayName;\n\nconst ToolbarSeparator = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ToolbarPrimitive.Separator\n    ref={ref}\n    className={cn('shrink-0 bg-border', 'my-1 w-[1px]', className)}\n    {...props}\n  />\n));\nToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;\n\nexport interface ToolbarButtonProps\n  extends React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,\n    VariantProps<typeof toggleVariants>,\n    Omit<ToggleProps, 'type'> {\n  buttonType?: 'button' | 'toggle';\n  pressed?: boolean;\n  tooltip?: ReactNode;\n  isDropdown?: boolean;\n}\n\nconst ToolbarButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.Button>,\n  ToolbarButtonProps\n>(\n  (\n    {\n      className,\n      variant,\n      size = 'sm',\n      isDropdown,\n      children,\n      pressed,\n      value,\n      tooltip,\n      ...props\n    },\n    ref\n  ) => {\n    const [isLoaded, setIsLoaded] = React.useState(false);\n\n    React.useEffect(() => {\n      setIsLoaded(true);\n    }, []);\n\n    const content =\n      typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          type=\"single\"\n          value=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toggleVariants({\n                variant,\n                size,\n              }),\n              isDropdown && 'my-1 justify-between pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            <div className=\"flex flex-1\">{children}</div>\n            <div>\n              {isDropdown && (\n                <Icons.arrowDown className=\"ml-0.5 h-4 w-4\" data-icon />\n              )}\n            </div>\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toggleVariants({\n              variant,\n              size,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n\n    return isLoaded && tooltip ? (\n      <Tooltip>\n        <TooltipTrigger asChild>{content}</TooltipTrigger>\n\n        <TooltipPortal>\n          <TooltipContent>{tooltip}</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    ) : (\n      <>{content}</>\n    );\n  }\n);\nToolbarButton.displayName = ToolbarPrimitive.Button.displayName;\n\nconst ToolbarToggleItem = React.forwardRef<\n  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,\n  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <ToolbarPrimitive.ToggleItem\n    ref={ref}\n    className={cn(toggleVariants({ variant, size }), className)}\n    {...props}\n  />\n));\nToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;\n\nconst ToolbarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noSeparator?: boolean }\n>(({ noSeparator, className, children }, ref) => {\n  const childArr = React.Children.map(children, (c) => c);\n  if (!childArr || childArr.length === 0) return null;\n\n  return (\n    <div ref={ref} className={cn('flex', className)}>\n      {!noSeparator && (\n        <div className=\"h-full py-1\">\n          <Separator orientation=\"vertical\" />\n        </div>\n      )}\n\n      <div className=\"mx-1 flex items-center gap-1\">{children}</div>\n    </div>\n  );\n});\nToolbarGroup.displayName = 'ToolbarGroup';\n\nexport {\n  Toolbar,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarSeparator,\n  ToolbarToggleItem,\n  ToolbarButton,\n  ToolbarGroup,\n};\n"
     }
   ],
   "type": "components:plate-ui"