tinacms 0.0.0-bf22bf8-20241004045704 → 0.0.0-c5dad82-20241009225242

package/dist/index.mjs

@@ -8,11 +8,11 @@ import { z } from "zod";
 import * as React from "react";
 import React__default, { useState, useCallback, createContext, forwardRef, useContext, useEffect, useMemo, startTransition, useRef, createElement, Component } from "react";
 import { createPortal, findDOMNode } from "react-dom";
-import { toggleList, ELEMENT_UL, ELEMENT_OL, ELEMENT_H1 as ELEMENT_H1$1, ELEMENT_H2 as ELEMENT_H2$1, ELEMENT_H3 as ELEMENT_H3$1, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_PARAGRAPH, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK, ELEMENT_CODE_LINE, ELEMENT_CODE_SYNTAX, ELEMENT_LI, ELEMENT_LINK, MARK_CODE, MARK_UNDERLINE, MARK_STRIKETHROUGH, MARK_ITALIC, MARK_BOLD, ELEMENT_HR, unwrapList, ELEMENT_TODO_LI, createTrailingBlockPlugin, createAutoformatPlugin, createExitBreakPlugin, KEYS_HEADING, createResetNodePlugin, createHeadingPlugin, createParagraphPlugin, createBlockquotePlugin, createBoldPlugin, createItalicPlugin, createUnderlinePlugin, createCodePlugin, createListPlugin, createIndentPlugin, createIndentListPlugin, createHorizontalRulePlugin, createNodeIdPlugin, getListItemEntry, useListToolbarButtonState, useListToolbarButton } from "@udecode/plate";
-import { useSelected, ReactEditor } from "slate-react";
+import { toggleList, ELEMENT_UL, ELEMENT_OL, ELEMENT_H1 as ELEMENT_H1$1, ELEMENT_H2 as ELEMENT_H2$1, ELEMENT_H3 as ELEMENT_H3$1, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_PARAGRAPH, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK, ELEMENT_CODE_LINE, ELEMENT_CODE_SYNTAX, ELEMENT_LI, ELEMENT_LINK, MARK_CODE, MARK_UNDERLINE, MARK_STRIKETHROUGH, MARK_ITALIC, MARK_BOLD, ELEMENT_HR, ELEMENT_TABLE, ELEMENT_TR, ELEMENT_TD, ELEMENT_TH, unwrapList, ELEMENT_TODO_LI, createTrailingBlockPlugin, createAutoformatPlugin, createExitBreakPlugin, KEYS_HEADING, createResetNodePlugin, createHeadingPlugin, createParagraphPlugin, createBlockquotePlugin, createBoldPlugin, createItalicPlugin, createUnderlinePlugin, createCodePlugin, createListPlugin, createIndentListPlugin, createHorizontalRulePlugin, createNodeIdPlugin, createTablePlugin, getListItemEntry, useListToolbarButtonState, useListToolbarButton } from "@udecode/plate";
+import { useSelected, useReadOnly, ReactEditor } from "slate-react";
 import { ELEMENT_SLASH_INPUT, createSlashPlugin } from "@udecode/plate-slash-command";
-import { cn as cn$1, withRef, withVariants, withProps, withCn, createPrimitiveElement } from "@udecode/cn";
-import { useComposedRef, useEditorRef, findNodePath, getPointBefore, createPointRef, insertText, moveSelection, PlateElement, toggleNodeType, PlateLeaf, isCollapsed, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, setNodes, isElement, createPluginFactory, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, useMarkToolbarButtonState, useMarkToolbarButton, useEditorState, useEditorSelector, getNodeEntries, collapseSelection, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
+import { cn as cn$1, withRef, withVariants, withCn, withProps, createPrimitiveElement } from "@udecode/cn";
+import { useComposedRef, useEditorRef, findNodePath, getPointBefore, createPointRef, insertText, moveSelection, PlateElement, toggleNodeType, PlateLeaf, isCollapsed, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, setNodes, isElement, useElement, useRemoveNodeButton, useEditorSelector, isSelectionExpanded, withHOC, createPluginFactory, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, useMarkToolbarButtonState, useMarkToolbarButton, useEditorState, getNodeEntries, collapseSelection, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
 import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4 as ELEMENT_H4$1, ELEMENT_H5 as ELEMENT_H5$1, ELEMENT_H6 as ELEMENT_H6$1 } from "@udecode/plate-heading";
 import { cva } from "class-variance-authority";
 import { Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Eye, Moon, SunMedium, Twitter } from "lucide-react";
@@ -20,18 +20,23 @@ import { useComboboxContext, Combobox, useComboboxStore, ComboboxProvider, Porta
 import { useHTMLInputCursorState, useComboboxInput, filterWords } from "@udecode/plate-combobox";
 import { useCodeSyntaxLeaf, useCodeBlockElementState, ELEMENT_CODE_BLOCK as ELEMENT_CODE_BLOCK$1 } from "@udecode/plate-code-block";
 import MonacoEditor, { loader, useMonaco } from "@monaco-editor/react";
-import { Combobox as Combobox$1, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$2, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+import { Combobox as Combobox$1, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$3, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useTableBordersDropdownMenuContentState, useTableMergeState, TableProvider, useTableElementState, useTableElement, mergeTableCells, unmergeTableCells, useTableCellElementState, useTableCellElement, useTableCellElementResizableState, useTableCellElementResizable, ELEMENT_TABLE as ELEMENT_TABLE$1, getTableColumnCount, insertTable, deleteTable, insertTableColumn, deleteColumn, insertTableRow, deleteRow } from "@udecode/plate-table";
+import { Slot } from "@radix-ui/react-slot";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { ResizeHandle as ResizeHandle$1 } from "@udecode/plate-resizable";
 import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
 import { FORM_ERROR, createForm, getIn } from "final-form";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
 import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as pkg$1 from "react-color";
 import * as pkg from "color-string";
 import * as dropzone from "react-dropzone";
-import { Slot } from "@radix-ui/react-slot";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Command as Command$1 } from "cmdk";
@@ -42,10 +47,8 @@ import moment from "moment";
 import { formatDistanceToNow } from "date-fns";
 import { useLinkToolbarButtonState, useLinkToolbarButton, useFloatingLinkInsertState, useFloatingLinkInsert, useFloatingLinkEditState, useFloatingLinkEdit, FloatingLinkUrlInput, LinkOpenButton, createLinkPlugin } from "@udecode/plate-link";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { ELEMENT_PARAGRAPH as ELEMENT_PARAGRAPH$1 } from "@udecode/plate-paragraph";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { ELEMENT_BLOCKQUOTE as ELEMENT_BLOCKQUOTE$1 } from "@udecode/plate-block-quote";
 import { useFloatingToolbarState, offset, flip, useFloatingToolbar } from "@udecode/plate-floating";
 import { useWindowWidth } from "@react-hook/window-size";
@@ -1016,7 +1019,7 @@ const borderTop = (props) => /* @__PURE__ */ React__default.createElement(
   },
   /* @__PURE__ */ React__default.createElement("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" })
 );
-cva("", {
+const iconVariants = cva("", {
   variants: {
     variant: {
       toolbar: "size-5",
@@ -2159,25 +2162,501 @@ const CodeBlock = ({
         onChange: (value2) => {
           setNodes(editor, { value: value2, lang: language });
         }
-      }
-    )))
+      }
+    )))
+  );
+};
+const CodeBlockElement = withRef(
+  ({ className, ...props }, ref) => {
+    const { element } = props;
+    const state = useCodeBlockElementState({ element });
+    return /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        className: cn$1("relative py-1", state.className, className),
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement(CodeBlock, { ...props })
+    );
+  }
+);
+const buttonVariants$1 = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
+    variants: {
+      isMenu: {
+        true: "h-auto w-full cursor-pointer justify-start"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        icon: "size-10",
+        lg: "h-11 rounded-md px-8",
+        none: "",
+        sm: "h-9 rounded-md px-3",
+        sms: "size-9 rounded-md px-0",
+        xs: "h-8 rounded-md px-3"
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        inlineLink: "text-base text-primary underline underline-offset-4",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+      }
+    }
+  }
+);
+const Button$2 = withRef(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ React.createElement(
+    Comp,
+    {
+      className: cn$1(buttonVariants$1({ className, isMenu, size, variant })),
+      ref,
+      ...props
+    }
+  );
+});
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = withRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    className: cn$1(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props
+  },
+  children,
+  /* @__PURE__ */ React__default.createElement(Icons.chevronRight, { className: "ml-auto size-4" })
+));
+const DropdownMenuSubContent = withCn(
+  DropdownMenuPrimitive.SubContent,
+  "z-[99999] min-w-32 overflow-hidden rounded-md border bg-white p-1 text-black shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+);
+const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
+  className: cn$1(
+    "z-[99999] min-w-32 overflow-hidden rounded-md border bg-white p-1 text-black shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+  ),
+  sideOffset: 4
+});
+const DropdownMenuContent = withRef(({ ...props }, ref) => /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(DropdownMenuContentVariants, { ref, ...props })));
+const menuItemVariants = cva(
+  cn$1(
+    "relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+    "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  ),
+  {
+    variants: {
+      inset: {
+        true: "pl-8"
+      }
+    }
+  }
+);
+const DropdownMenuItem = withVariants(
+  DropdownMenuPrimitive.Item,
+  menuItemVariants,
+  ["inset"]
+);
+const DropdownMenuCheckboxItem = withRef(({ children, className, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    className: cn$1(
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-pointer",
+      className
+    ),
+    ref,
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("span", { className: "absolute left-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React__default.createElement(Icons.check, { className: "size-4" }))),
+  children
+));
+const DropdownMenuRadioItem = withRef(({ children, className, hideIcon, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    className: cn$1(
+      "relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
+      className
+    ),
+    ref,
+    ...props
+  },
+  !hideIcon && /* @__PURE__ */ React__default.createElement("span", { className: "absolute right-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React__default.createElement(Icons.check, { className: "size-4" }))),
+  children
+));
+const dropdownMenuLabelVariants = cva(
+  cn$1("select-none px-2 py-1.5 text-sm font-semibold"),
+  {
+    variants: {
+      inset: {
+        true: "pl-8"
+      }
+    }
+  }
+);
+const DropdownMenuLabel = withVariants(
+  DropdownMenuPrimitive.Label,
+  dropdownMenuLabelVariants,
+  ["inset"]
+);
+const DropdownMenuSeparator = withCn(
+  DropdownMenuPrimitive.Separator,
+  "-mx-1 my-1 h-px bg-muted"
+);
+withCn(
+  createPrimitiveElement("span"),
+  "ml-auto text-xs tracking-widest opacity-60"
+);
+const useOpenState = () => {
+  const [open2, setOpen] = useState(false);
+  const onOpenChange = useCallback(
+    (_value = !open2) => {
+      setOpen(_value);
+    },
+    [open2]
+  );
+  return {
+    onOpenChange,
+    open: open2
+  };
+};
+const Popover$2 = PopoverPrimitive.Root;
+const popoverVariants = cva(
+  "w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden"
+);
+const PopoverContent$1 = withRef(
+  ({ align = "center", className, sideOffset = 4, style, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+    PopoverPrimitive.Content,
+    {
+      align,
+      className: cn$1(popoverVariants(), className),
+      ref,
+      sideOffset,
+      style: { zIndex: 1e3, ...style },
+      ...props
+    }
+  ))
+);
+const separatorVariants = cva("shrink-0 bg-border", {
+  defaultVariants: {
+    orientation: "horizontal"
+  },
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px"
+    }
+  }
+});
+const Separator = withVariants(
+  withProps(SeparatorPrimitive.Root, {
+    decorative: true,
+    orientation: "horizontal"
+  }),
+  separatorVariants
+);
+const TableBordersDropdownMenuContent = withRef((props, ref) => {
+  const {
+    getOnSelectTableBorder,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasOuterBorders,
+    hasRightBorder,
+    hasTopBorder
+  } = useTableBordersDropdownMenuContentState();
+  return /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent,
+    {
+      align: "start",
+      className: cn$1("min-w-[220px]"),
+      ref,
+      side: "right",
+      sideOffset: 0,
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasBottomBorder,
+        onCheckedChange: getOnSelectTableBorder("bottom")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderBottom, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "Bottom Border")
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasTopBorder,
+        onCheckedChange: getOnSelectTableBorder("top")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderTop, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "Top Border")
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasLeftBorder,
+        onCheckedChange: getOnSelectTableBorder("left")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderLeft, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "Left Border")
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasRightBorder,
+        onCheckedChange: getOnSelectTableBorder("right")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderRight, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "Right Border")
+    ),
+    /* @__PURE__ */ React__default.createElement(Separator, null),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasNoBorders,
+        onCheckedChange: getOnSelectTableBorder("none")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderNone, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "No Border")
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasOuterBorders,
+        onCheckedChange: getOnSelectTableBorder("outer")
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.borderAll, { className: iconVariants({ size: "sm" }) }),
+      /* @__PURE__ */ React__default.createElement("div", null, "Outside Borders")
+    )
+  );
+});
+const TableFloatingToolbar = withRef(
+  ({ children, ...props }, ref) => {
+    const element = useElement();
+    const { props: buttonProps } = useRemoveNodeButton({ element });
+    const selectionCollapsed = useEditorSelector(
+      (editor2) => !isSelectionExpanded(editor2),
+      []
+    );
+    const readOnly = useReadOnly();
+    const selected = useSelected();
+    const editor = useEditorRef();
+    const collapsed = !readOnly && selected && selectionCollapsed;
+    const open2 = !readOnly && selected;
+    const { canMerge, canUnmerge } = useTableMergeState();
+    const mergeContent = canMerge && /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        contentEditable: false,
+        isMenu: true,
+        onClick: () => mergeTableCells(editor),
+        variant: "ghost"
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.combine, { className: "mr-2 size-4" }),
+      "Merge"
+    );
+    const unmergeButton = canUnmerge && /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        contentEditable: false,
+        isMenu: true,
+        onClick: () => unmergeTableCells(editor),
+        variant: "ghost"
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.ungroup, { className: "mr-2 size-4" }),
+      "Unmerge"
+    );
+    const bordersContent = collapsed && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DropdownMenu, { modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button$2, { isMenu: true, variant: "ghost" }, /* @__PURE__ */ React__default.createElement(Icons.borderAll, { className: "mr-2 size-4" }), "Borders")), /* @__PURE__ */ React__default.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React__default.createElement(TableBordersDropdownMenuContent, null))), /* @__PURE__ */ React__default.createElement(Button$2, { contentEditable: false, isMenu: true, variant: "ghost", ...buttonProps }, /* @__PURE__ */ React__default.createElement(Icons.delete, { className: "mr-2 size-4" }), "Delete"));
+    return /* @__PURE__ */ React__default.createElement(Popover$2, { modal: false, open: open2 }, /* @__PURE__ */ React__default.createElement(PopoverAnchor, { asChild: true }, children), (canMerge || canUnmerge || collapsed) && /* @__PURE__ */ React__default.createElement(
+      PopoverContent$1,
+      {
+        className: cn$1(
+          popoverVariants(),
+          "flex w-[220px] flex-col gap-1 p-1"
+        ),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        ref,
+        ...props
+      },
+      unmergeButton,
+      mergeContent,
+      bordersContent
+    ));
+  }
+);
+const TableElement = withHOC(
+  TableProvider,
+  withRef(({ children, className, ...props }, ref) => {
+    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } = useTableElementState();
+    const { colGroupProps, props: tableProps } = useTableElement();
+    return /* @__PURE__ */ React__default.createElement(TableFloatingToolbar, null, /* @__PURE__ */ React__default.createElement("div", { style: { paddingLeft: marginLeft } }, /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        asChild: true,
+        className: cn$1(
+          "my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse",
+          isSelectingCell && "[&_*::selection]:bg-none",
+          className
+        ),
+        ref,
+        ...tableProps,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("colgroup", { ...colGroupProps }, colSizes.map((width, index) => /* @__PURE__ */ React__default.createElement(
+        "col",
+        {
+          key: index,
+          style: {
+            minWidth: minColumnWidth,
+            width: width || void 0
+          }
+        }
+      ))), /* @__PURE__ */ React__default.createElement("tbody", { className: "min-w-full" }, children))
+    )));
+  })
+);
+const TableRowElement = withRef(({ children, hideBorder, ...props }, ref) => {
+  return /* @__PURE__ */ React__default.createElement(
+    PlateElement,
+    {
+      asChild: true,
+      className: cn$1("h-full", hideBorder && "border-none"),
+      ref,
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement("tr", null, children)
+  );
+});
+const TableCellElement = withRef(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {
+  var _a, _b, _c, _d;
+  const { element } = props;
+  const {
+    borders,
+    colIndex,
+    colSpan,
+    hovered,
+    hoveredLeft,
+    isSelectingCell,
+    readOnly,
+    rowIndex,
+    rowSize,
+    selected
+  } = useTableCellElementState();
+  const { props: cellProps } = useTableCellElement({ element: props.element });
+  const resizableState = useTableCellElementResizableState({
+    colIndex,
+    colSpan,
+    rowIndex
+  });
+  const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable(resizableState);
+  const Cell = isHeader ? "th" : "td";
+  return /* @__PURE__ */ React__default.createElement(
+    PlateElement,
+    {
+      asChild: true,
+      className: cn$1(
+        "relative h-full overflow-visible border-none bg-background p-0",
+        hideBorder && "before:border-none",
+        element.background ? "bg-[--cellBackground]" : "bg-background",
+        !hideBorder && cn$1(
+          isHeader && "text-left [&_>_*]:m-0",
+          "before:size-full",
+          selected && "before:z-10 before:bg-muted",
+          "before:absolute before:box-border before:select-none before:content-['']",
+          borders && cn$1(
+            ((_a = borders.bottom) == null ? void 0 : _a.size) && `before:border-b before:border-b-border`,
+            ((_b = borders.right) == null ? void 0 : _b.size) && `before:border-r before:border-r-border`,
+            ((_c = borders.left) == null ? void 0 : _c.size) && `before:border-l before:border-l-border`,
+            ((_d = borders.top) == null ? void 0 : _d.size) && `before:border-t before:border-t-border`
+          )
+        ),
+        className
+      ),
+      ref,
+      ...cellProps,
+      ...props,
+      style: {
+        "--cellBackground": element.background,
+        ...style
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Cell, null, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "relative z-20 box-border h-full px-3 py-2",
+        style: {
+          minHeight: rowSize
+        }
+      },
+      children
+    ), !isSelectingCell && /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "group absolute top-0 size-full select-none",
+        contentEditable: false,
+        suppressContentEditableWarning: true
+      },
+      !readOnly && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...rightProps,
+          className: "-top-3 right-[-5px] w-[10px]"
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...bottomProps,
+          className: "bottom-[-5px] h-[10px]"
+        }
+      ), !hiddenLeft && /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...leftProps,
+          className: "-top-3 left-[-5px] w-[10px]"
+        }
+      ), hovered && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: cn$1(
+            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+            "right-[-1.5px]"
+          )
+        }
+      ), hoveredLeft && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: cn$1(
+            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+            "left-[-1.5px]"
+          )
+        }
+      ))
+    ))
   );
-};
-const CodeBlockElement = withRef(
-  ({ className, ...props }, ref) => {
-    const { element } = props;
-    const state = useCodeBlockElementState({ element });
-    return /* @__PURE__ */ React__default.createElement(
-      PlateElement,
-      {
-        className: cn$1("relative py-1", state.className, className),
-        ref,
-        ...props
-      },
-      /* @__PURE__ */ React__default.createElement(CodeBlock, { ...props })
-    );
-  }
-);
+});
+TableCellElement.displayName = "TableCellElement";
+const TableCellHeaderElement = withProps(TableCellElement, {
+  isHeader: true
+});
 const blockClasses = "mt-0.5";
 const headerClasses = "font-normal";
 const Components = () => {
@@ -2363,7 +2842,11 @@ const Components = () => {
         children,
         selected && /* @__PURE__ */ React__default.createElement("span", { className: "absolute h-4 -top-2 inset-0 ring-2 ring-blue-100 ring-inset rounded-md z-10 pointer-events-none" })
       );
-    }
+    },
+    [ELEMENT_TABLE]: TableElement,
+    [ELEMENT_TR]: TableRowElement,
+    [ELEMENT_TD]: TableCellElement,
+    [ELEMENT_TH]: TableCellHeaderElement
   };
 };
 const createCodeBlockPlugin = createPluginFactory({
@@ -4433,7 +4916,7 @@ const ImageLoadingIndicator = () => /* @__PURE__ */ React.createElement("div", {
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const buttonVariants$1 = cva(
+const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -4459,7 +4942,7 @@ const Button = React.forwardRef(
     return /* @__PURE__ */ React.createElement(
       Comp,
       {
-        className: cn(buttonVariants$1({ variant, size, className })),
+        className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }
@@ -5158,7 +5641,7 @@ const BlockSelector = ({
       return template.label ? template.label.toLowerCase().includes(filter.toLowerCase()) || name.toLowerCase().includes(filter.toLowerCase()) : name.toLowerCase().includes(filter.toLowerCase());
     });
   }, [filter]);
-  return /* @__PURE__ */ React.createElement(Popover$2, null, ({ open: open2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PopoverButton, { as: "span" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Popover$3, null, ({ open: open2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PopoverButton, { as: "span" }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       variant: open2 ? "secondary" : "primary",
@@ -9723,7 +10206,7 @@ const SyncStatus = ({ cms, setEventsOpen }) => {
     "Event Log"
   ));
 };
-const version = "2.2.8";
+const version = "2.2.9";
 const Nav = ({
   isLocalMode,
   className = "",
@@ -12790,7 +13273,7 @@ const EmbedNestedForm = ({
   );
 };
 const DotMenu = ({ onOpen, onRemove }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover$2, { as: "span", className: "-ml-px relative block" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Popover$3, { as: "span", className: "-ml-px relative block" }, /* @__PURE__ */ React__default.createElement(
     PopoverButton,
     {
       as: "span",
@@ -13230,13 +13713,25 @@ const plugins = [
   createUnderlinePlugin(),
   createCodePlugin(),
   createListPlugin(),
-  createIndentPlugin(),
   createIndentListPlugin(),
   createHorizontalRulePlugin(),
   // Allows us to do things like copy/paste, remembering the state of the element (like mdx)
   createNodeIdPlugin(),
-  createSlashPlugin()
+  createSlashPlugin(),
+  createTablePlugin()
 ];
+const unsupportedItemsInTable = /* @__PURE__ */ new Set([
+  "Code Block",
+  "Unordered List",
+  "Ordered List",
+  "Quote",
+  "Heading 1",
+  "Heading 2",
+  "Heading 3",
+  "Heading 4",
+  "Heading 5",
+  "Heading 6"
+]);
 const isNodeActive = (editor, type) => {
   const pluginType = getPluginType(editor, type);
   return !!(editor == null ? void 0 : editor.selection) && someNode(editor, { match: { type: pluginType } });
@@ -13421,24 +13916,6 @@ const Editor = React__default.forwardRef(
   }
 );
 Editor.displayName = "Editor";
-const separatorVariants = cva("shrink-0 bg-border", {
-  defaultVariants: {
-    orientation: "horizontal"
-  },
-  variants: {
-    orientation: {
-      horizontal: "h-px w-full",
-      vertical: "h-full w-px"
-    }
-  }
-});
-const Separator = withVariants(
-  withProps(SeparatorPrimitive.Root, {
-    decorative: true,
-    orientation: "horizontal"
-  }),
-  separatorVariants
-);
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
@@ -13597,117 +14074,6 @@ const IndentListToolbarButton = withRef(({ nodeType = ELEMENT_UL }, ref) => {
     nodeType === ELEMENT_UL ? /* @__PURE__ */ React__default.createElement(Icons.ul, null) : /* @__PURE__ */ React__default.createElement(Icons.ol, null)
   );
 });
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-withRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    className: cn$1(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ref,
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React__default.createElement(Icons.chevronRight, { className: "ml-auto size-4" })
-));
-withCn(
-  DropdownMenuPrimitive.SubContent,
-  "z-[99999] min-w-32 overflow-hidden rounded-md border bg-white p-1 text-black shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-);
-const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
-  className: cn$1(
-    "z-[99999] min-w-32 overflow-hidden rounded-md border bg-white p-1 text-black shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-  ),
-  sideOffset: 4
-});
-const DropdownMenuContent = withRef(({ ...props }, ref) => /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(DropdownMenuContentVariants, { ref, ...props })));
-const menuItemVariants = cva(
-  cn$1(
-    "relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
-    "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-  ),
-  {
-    variants: {
-      inset: {
-        true: "pl-8"
-      }
-    }
-  }
-);
-const DropdownMenuItem = withVariants(
-  DropdownMenuPrimitive.Item,
-  menuItemVariants,
-  ["inset"]
-);
-withRef(({ children, className, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    className: cn$1(
-      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "cursor-pointer",
-      className
-    ),
-    ref,
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("span", { className: "absolute left-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React__default.createElement(Icons.check, { className: "size-4" }))),
-  children
-));
-const DropdownMenuRadioItem = withRef(({ children, className, hideIcon, ...props }, ref) => /* @__PURE__ */ React__default.createElement(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    className: cn$1(
-      "relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
-      className
-    ),
-    ref,
-    ...props
-  },
-  !hideIcon && /* @__PURE__ */ React__default.createElement("span", { className: "absolute right-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React__default.createElement(Icons.check, { className: "size-4" }))),
-  children
-));
-const dropdownMenuLabelVariants = cva(
-  cn$1("select-none px-2 py-1.5 text-sm font-semibold"),
-  {
-    variants: {
-      inset: {
-        true: "pl-8"
-      }
-    }
-  }
-);
-const DropdownMenuLabel = withVariants(
-  DropdownMenuPrimitive.Label,
-  dropdownMenuLabelVariants,
-  ["inset"]
-);
-const DropdownMenuSeparator = withCn(
-  DropdownMenuPrimitive.Separator,
-  "-mx-1 my-1 h-px bg-muted"
-);
-withCn(
-  createPrimitiveElement("span"),
-  "ml-auto text-xs tracking-widest opacity-60"
-);
-const useOpenState = () => {
-  const [open2, setOpen] = useState(false);
-  const onOpenChange = useCallback(
-    (_value = !open2) => {
-      setOpen(_value);
-    },
-    [open2]
-  );
-  return {
-    onOpenChange,
-    open: open2
-  };
-};
 const items$1 = [
   {
     description: "Paragraph",
@@ -13772,7 +14138,9 @@ function HeadingsMenu(props) {
     return allNodesMatchInitialNodeType ? initialNodeType : ELEMENT_PARAGRAPH$1;
   }, []);
   const editor = useEditorRef();
+  const editorState = useEditorState();
   const openState = useOpenState();
+  const userInTable = helpers.isNodeActive(editorState, ELEMENT_TABLE$1);
   const selectedItem = items$1.find((item) => item.value === value) ?? defaultItem$1;
   const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
   return /* @__PURE__ */ React__default.createElement(DropdownMenu, { modal: false, ...openState, ...props }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
@@ -13784,7 +14152,7 @@ function HeadingsMenu(props) {
       tooltip: "Headings"
     },
     /* @__PURE__ */ React__default.createElement(SelectedItemIcon, { className: "size-5" }),
-    /* @__PURE__ */ React__default.createElement("span", { className: "@md/toolbar:flex hidden" }, selectedItemLabel)
+    /* @__PURE__ */ React__default.createElement("span", { className: "hidden 2xl:flex" }, selectedItemLabel)
   )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "min-w-0" }, /* @__PURE__ */ React__default.createElement(
     DropdownMenuRadioGroup,
     {
@@ -13796,7 +14164,12 @@ function HeadingsMenu(props) {
       },
       value
     },
-    items$1.map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React__default.createElement(
+    items$1.filter((item) => {
+      if (userInTable) {
+        return !unsupportedItemsInTable.has(item.label);
+      }
+      return true;
+    }).map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React__default.createElement(
       DropdownMenuRadioItem,
       {
         className: "min-w-[180px]",
@@ -13986,7 +14359,6 @@ const EmbedButton = ({ editor, templates }) => {
 };
 const ICON_WIDTH = 32;
 const EMBED_ICON_WIDTH = 78;
-const MD_BREAKPOINT = 768;
 const useResize = (ref, callback) => {
   React__default.useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -14017,6 +14389,108 @@ function OverflowMenu({
     /* @__PURE__ */ React__default.createElement(Icons.overflow, { className: "size-5" })
   )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "min-w-0 flex flex-grow" }, children));
 }
+function TableDropdownMenu(props) {
+  const tableSelected = useEditorSelector(
+    (editor2) => someNode(editor2, { match: { type: ELEMENT_TABLE$1 } }),
+    []
+  );
+  const [enableDeleteColumn, enableDeleteRow] = useEditorSelector((editor2) => {
+    const tableNodeEntry = findNode(editor2, { match: { type: ELEMENT_TABLE$1 } });
+    if (!tableNodeEntry)
+      return [false, false];
+    const [tableNode] = tableNodeEntry;
+    if (!isElement(tableNode))
+      return [false, false];
+    const columnCount = getTableColumnCount(tableNode);
+    const rowCount = tableNode.children.length;
+    return [columnCount > 1, rowCount > 1];
+  }, []);
+  const editor = useEditorRef();
+  const openState = useOpenState();
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu, { modal: false, ...openState, ...props }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { isDropdown: true, pressed: openState.open, tooltip: "Table" }, /* @__PURE__ */ React__default.createElement(Icons.table, null))), /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent,
+    {
+      align: "start",
+      className: "flex w-[180px] min-w-0 flex-col gap-0.5"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: tableSelected,
+        onSelect: () => {
+          insertTable(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.add, { className: iconVariants({ variant: "menuItem" }) }),
+      "Insert table"
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: !tableSelected,
+        onSelect: () => {
+          deleteTable(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.minus, { className: iconVariants({ variant: "menuItem" }) }),
+      "Delete table"
+    ),
+    /* @__PURE__ */ React__default.createElement(DropdownMenuSub, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSubTrigger, { disabled: !tableSelected }, /* @__PURE__ */ React__default.createElement(Icons.column, { className: iconVariants({ variant: "menuItem" }) }), /* @__PURE__ */ React__default.createElement("span", null, "Column")), /* @__PURE__ */ React__default.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: !tableSelected,
+        onSelect: () => {
+          insertTableColumn(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.add, { className: iconVariants({ variant: "menuItem" }) }),
+      "Insert column after"
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: !enableDeleteColumn,
+        onSelect: () => {
+          deleteColumn(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.minus, { className: iconVariants({ variant: "menuItem" }) }),
+      "Delete column"
+    ))),
+    /* @__PURE__ */ React__default.createElement(DropdownMenuSub, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSubTrigger, { disabled: !tableSelected }, /* @__PURE__ */ React__default.createElement(Icons.row, { className: iconVariants({ variant: "menuItem" }) }), /* @__PURE__ */ React__default.createElement("span", null, "Row")), /* @__PURE__ */ React__default.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: !tableSelected,
+        onSelect: () => {
+          insertTableRow(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.add, { className: iconVariants({ variant: "menuItem" }) }),
+      "Insert row after"
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        className: "min-w-[180px]",
+        disabled: !enableDeleteRow,
+        onSelect: () => {
+          deleteRow(editor);
+          focusEditor(editor);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Icons.minus, { className: iconVariants({ variant: "menuItem" }) }),
+      "Delete row"
+    )))
+  ));
+}
 const toolbarItems = {
   heading: {
     label: "Headings",
@@ -14058,6 +14532,10 @@ const toolbarItems = {
     label: "Code Block",
     Component: /* @__PURE__ */ React__default.createElement(CodeBlockToolbarButton, null)
   },
+  table: {
+    label: "Table",
+    Component: /* @__PURE__ */ React__default.createElement(TableDropdownMenu, null)
+  },
   raw: {
     label: "Raw Markdown",
     Component: /* @__PURE__ */ React__default.createElement(RawMarkdownToolbarButton, null)
@@ -14073,12 +14551,18 @@ function FixedToolbarButtons() {
   const { overrides } = useToolbarContext();
   useResize(toolbarRef, (entry) => {
     const width = entry.target.getBoundingClientRect().width;
-    const paragraphIconWidth = width < MD_BREAKPOINT ? 58 : 128;
-    const itemsShown2 = (width - EMBED_ICON_WIDTH - paragraphIconWidth) / ICON_WIDTH;
+    const itemsShown2 = (width - EMBED_ICON_WIDTH) / ICON_WIDTH;
     setItemsShown(Math.floor(itemsShown2));
   });
-  const toolbarItemsArray = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-hidden @container/toolbar", ref: toolbarRef }, /* @__PURE__ */ React__default.createElement(
+  let toolbarItemsArray = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+  const editorState = useEditorState();
+  const userInTable = helpers.isNodeActive(editorState, ELEMENT_TABLE$1);
+  if (userInTable) {
+    toolbarItemsArray = toolbarItemsArray.filter(
+      (item) => !unsupportedItemsInTable.has(item.label)
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-hidden", ref: toolbarRef }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: "flex",
@@ -14086,7 +14570,7 @@ function FixedToolbarButtons() {
         transform: "translateX(calc(-1px))"
       }
     },
-    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItemsArray.slice(0, itemsShown).map((item, index) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: item.label }, item.Component)), toolbarItemsArray.length > itemsShown && /* @__PURE__ */ React__default.createElement(OverflowMenu, null, toolbarItemsArray.slice(itemsShown).flatMap((c) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: c.label }, c.Component))))
+    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItemsArray.slice(0, itemsShown).map((item, _) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: item.label }, item.Component)), toolbarItemsArray.length > itemsShown && /* @__PURE__ */ React__default.createElement(OverflowMenu, null, toolbarItemsArray.slice(itemsShown).flatMap((c) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: c.label }, c.Component))))
   ));
 }
 const FloatingToolbar = withRef(({ children, state, ...props }, componentRef) => {
@@ -14201,6 +14685,10 @@ function TurnIntoDropdownMenu(props) {
   const openState = useOpenState();
   const selectedItem = items.find((item) => item.value === value) ?? defaultItem;
   const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
+  const editorState = useEditorState();
+  const userInTable = helpers.isNodeActive(editorState, ELEMENT_TABLE$1);
+  if (userInTable)
+    return null;
   return /* @__PURE__ */ React__default.createElement(DropdownMenu, { modal: false, ...openState, ...props }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
@@ -14242,49 +14730,6 @@ function TurnIntoDropdownMenu(props) {
 function FloatingToolbarButtons() {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TurnIntoDropdownMenu, null));
 }
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default"
-    },
-    variants: {
-      isMenu: {
-        true: "h-auto w-full cursor-pointer justify-start"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        icon: "size-10",
-        lg: "h-11 rounded-md px-8",
-        none: "",
-        sm: "h-9 rounded-md px-3",
-        sms: "size-9 rounded-md px-0",
-        xs: "h-8 rounded-md px-3"
-      },
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        inlineLink: "text-base text-primary underline underline-offset-4",
-        link: "text-primary underline-offset-4 hover:underline",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
-      }
-    }
-  }
-);
-withRef(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ React.createElement(
-    Comp,
-    {
-      className: cn$1(buttonVariants({ className, isMenu, size, variant })),
-      ref,
-      ...props
-    }
-  );
-});
 const inputVariants = cva(
   "flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
@@ -14305,22 +14750,6 @@ const inputVariants = cva(
   }
 );
 withVariants("input", inputVariants, ["variant", "h"]);
-const popoverVariants = cva(
-  "w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden"
-);
-withRef(
-  ({ align = "center", className, sideOffset = 4, style, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-    PopoverPrimitive.Content,
-    {
-      align,
-      className: cn$1(popoverVariants(), className),
-      ref,
-      sideOffset,
-      style: { zIndex: 1e3, ...style },
-      ...props
-    }
-  ))
-);
 const floatingOptions = {
   middleware: [
     offset(12),
@@ -14380,7 +14809,7 @@ function LinkFloatingToolbar({ state }) {
   const editContent = editState.isEditing ? input : /* @__PURE__ */ React__default.createElement("div", { className: "box-content flex h-9 items-center gap-1" }, /* @__PURE__ */ React__default.createElement(
     "button",
     {
-      className: buttonVariants({ size: "sm", variant: "ghost" }),
+      className: buttonVariants$1({ size: "sm", variant: "ghost" }),
       type: "button",
       ...editButtonProps
     },
@@ -14388,7 +14817,7 @@ function LinkFloatingToolbar({ state }) {
   ), /* @__PURE__ */ React__default.createElement(Separator, { orientation: "vertical" }), /* @__PURE__ */ React__default.createElement(
     LinkOpenButton,
     {
-      className: buttonVariants({
+      className: buttonVariants$1({
         size: "sms",
         variant: "ghost"
       })
@@ -14397,7 +14826,7 @@ function LinkFloatingToolbar({ state }) {
   ), /* @__PURE__ */ React__default.createElement(Separator, { orientation: "vertical" }), /* @__PURE__ */ React__default.createElement(
     "button",
     {
-      className: buttonVariants({
+      className: buttonVariants$1({
         size: "sms",
         variant: "ghost"
       }),