@openeditor/ui 0.0.28 → 0.0.30

package/dist/index.js

@@ -1,19 +1,178 @@
-import { useOpenEditorThemeStyle, sortSlashMenuItems, getDefaultSlashMenuItems, useOpenEditorBlockInteraction, OpenEditorBlockDragHandle, useOpenEditorController, OpenEditorThemeProvider, OpenEditorContent } from '@openeditor/react';
+import { Menu } from '@base-ui/react/menu';
+import { Toolbar } from '@base-ui/react/toolbar';
+import { useOpenEditorThemeStyle, OpenEditorTableBubbleMenu, OpenEditorBubbleMenu, sortSlashMenuItems, getDefaultSlashMenuItems, useOpenEditorBlockInteraction, OpenEditorBlockDragHandle, useOpenEditorController, OpenEditorThemeProvider, OpenEditorContent } from '@openeditor/react';
 export { OpenEditorContent, OpenEditorThemeProvider, createOpenEditorThemeStyle, openEditorThemeTokenNames, useOpenEditorController } from '@openeditor/react';
+import { Pilcrow, List, ListOrdered, ListTodo, Quote, Code, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Bold, Italic, Underline, Strikethrough, Link, GripVertical, Rows3, BetweenHorizontalStart, BetweenHorizontalEnd, Trash2, Columns3, BetweenVerticalStart, BetweenVerticalEnd, PanelTop, PanelLeft, TableCellsSplit, TableCellsMerge, ChevronDown, ChevronRight, X, ArrowDown, ArrowUp, Upload, FileText, GitBranch, MessageSquare, Table, Columns2, Image, Minus, Type, Copy, CopyPlus } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 export { OpenEditorEmojiPicker } from '@openeditor/emoji';
 import { Button } from '@base-ui/react/button';
 import { Dialog } from '@base-ui/react/dialog';
 import { Input } from '@base-ui/react/input';
-import { Menu } from '@base-ui/react/menu';
 import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
-import { Toolbar } from '@base-ui/react/toolbar';
-import { Pilcrow, List, ListOrdered, ListTodo, Quote, Code, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Bold, Italic, Underline, Strikethrough, Link, ChevronRight, GripVertical, ChevronDown, X, ArrowDown, ArrowUp, Upload, FileText, GitBranch, MessageSquare, Table, Columns2, Image, Minus, Type, Copy, CopyPlus, Trash2 } from 'lucide-react';
-import { useState, useRef, useMemo, useEffect, Fragment as Fragment$1 } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useId, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 
-// src/index.tsx
+// src/table-menu.tsx
+var runTableCommandOnMouseDown = (event, controller, command) => {
+  if (event.button !== 0) return;
+  event.preventDefault();
+  controller.table.run(command);
+};
+var runTableCommandOnKeyboardClick = (event, controller, command) => {
+  if (event.detail === 0) controller.table.run(command);
+};
+var TableActionMenu = ({
+  controller,
+  container,
+  label,
+  Icon,
+  actions
+}) => {
+  const themeStyle = useOpenEditorThemeStyle();
+  return /* @__PURE__ */ jsxs(Menu.Root, { modal: false, children: [
+    /* @__PURE__ */ jsxs(
+      Menu.Trigger,
+      {
+        "aria-label": `${label} actions`,
+        className: "oe-table-toolbar-trigger",
+        onMouseDown: (event) => event.preventDefault(),
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", size: 15, strokeWidth: 2 }),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", size: 12, strokeWidth: 2 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        align: "start",
+        collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+        collisionPadding: 12,
+        positionMethod: "fixed",
+        side: "bottom",
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsx(Menu.Popup, { "aria-label": `${label} actions`, className: "oe-table-action-menu", style: themeStyle, children: actions.map((action) => /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "oe-table-action-item",
+            "data-danger": action.danger ? "" : void 0,
+            disabled: !controller.table.can(action.command),
+            onClick: (event) => runTableCommandOnKeyboardClick(event, controller, action.command),
+            onMouseDown: (event) => runTableCommandOnMouseDown(event, controller, action.command),
+            children: [
+              /* @__PURE__ */ jsx(action.Icon, { "aria-hidden": "true", size: 15, strokeWidth: 2 }),
+              /* @__PURE__ */ jsx("span", { children: action.label })
+            ]
+          },
+          action.command
+        )) })
+      }
+    ) })
+  ] });
+};
+var TableToolbarButton = ({
+  active,
+  children,
+  controller,
+  command,
+  label,
+  danger
+}) => /* @__PURE__ */ jsx(
+  Toolbar.Button,
+  {
+    "aria-label": label,
+    className: "oe-table-toolbar-button",
+    "data-active": active ? "" : void 0,
+    "data-danger": danger ? "" : void 0,
+    disabled: !controller.table.can(command),
+    onClick: (event) => runTableCommandOnKeyboardClick(event, controller, command),
+    onMouseDown: (event) => runTableCommandOnMouseDown(event, controller, command),
+    title: label,
+    type: "button",
+    children
+  }
+);
+var rowActions = [
+  { command: "addRowBefore", label: "Insert row above", Icon: BetweenHorizontalStart },
+  { command: "addRowAfter", label: "Insert row below", Icon: BetweenHorizontalEnd },
+  { command: "deleteRow", label: "Delete row", Icon: Trash2, danger: true }
+];
+var columnActions = [
+  { command: "addColumnBefore", label: "Insert column left", Icon: BetweenVerticalStart },
+  { command: "addColumnAfter", label: "Insert column right", Icon: BetweenVerticalEnd },
+  { command: "deleteColumn", label: "Delete column", Icon: Trash2, danger: true }
+];
+var TableToolbar = ({
+  controller,
+  container,
+  state
+}) => /* @__PURE__ */ jsx("div", { onMouseDown: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs(Toolbar.Root, { "aria-label": "Table editing", className: "oe-table-toolbar", children: [
+  /* @__PURE__ */ jsx(
+    TableActionMenu,
+    {
+      actions: rowActions,
+      container,
+      controller,
+      Icon: Rows3,
+      label: "Row"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    TableActionMenu,
+    {
+      actions: columnActions,
+      container,
+      controller,
+      Icon: Columns3,
+      label: "Column"
+    }
+  ),
+  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-table-toolbar-separator" }),
+  /* @__PURE__ */ jsx(
+    TableToolbarButton,
+    {
+      active: state.headerRow,
+      command: "toggleHeaderRow",
+      controller,
+      label: state.headerRow ? "Remove header row" : "Make first row a header",
+      children: /* @__PURE__ */ jsx(PanelTop, { "aria-hidden": "true", size: 15, strokeWidth: 2 })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    TableToolbarButton,
+    {
+      active: state.headerColumn,
+      command: "toggleHeaderColumn",
+      controller,
+      label: state.headerColumn ? "Remove header column" : "Make first column a header",
+      children: /* @__PURE__ */ jsx(PanelLeft, { "aria-hidden": "true", size: 15, strokeWidth: 2 })
+    }
+  ),
+  state.canSplitCell ? /* @__PURE__ */ jsx(TableToolbarButton, { command: "splitCell", controller, label: "Split cell", children: /* @__PURE__ */ jsx(TableCellsSplit, { "aria-hidden": "true", size: 15, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(TableToolbarButton, { command: "mergeCells", controller, label: "Merge selected cells", children: /* @__PURE__ */ jsx(TableCellsMerge, { "aria-hidden": "true", size: 15, strokeWidth: 2 }) }),
+  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-table-toolbar-separator" }),
+  /* @__PURE__ */ jsx(TableToolbarButton, { command: "deleteTable", controller, danger: true, label: "Delete table", children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true", size: 15, strokeWidth: 2 }) })
+] }) });
+var OpenEditorTableMenu = ({
+  controller,
+  className = "oe-table-menu",
+  container
+}) => {
+  const themeStyle = useOpenEditorThemeStyle();
+  if (!controller.ready) return null;
+  return /* @__PURE__ */ jsx(
+    OpenEditorTableBubbleMenu,
+    {
+      className,
+      container,
+      controller,
+      style: themeStyle,
+      children: (state) => /* @__PURE__ */ jsx(TableToolbar, { container, controller, state })
+    }
+  );
+};
 var headingDefinitions = [
   { level: 1, Icon: Heading1 },
   { level: 2, Icon: Heading2 },
@@ -118,10 +277,10 @@ var pointRect = (left, top) => ({
   height: 0
 });
 var getAnchorRect = (state) => state.anchorRect ?? pointRect(state.left, state.top);
-var toVirtualAnchor = (state, contextElement) => ({
+var toVirtualAnchor = (state, contextElement, resolveRect) => ({
   contextElement: contextElement ?? void 0,
   getBoundingClientRect: () => {
-    const rect = getAnchorRect(state);
+    const rect = resolveRect?.() ?? getAnchorRect(state);
     return {
       ...rect,
       x: rect.left,
@@ -341,20 +500,9 @@ var OpenEditorSelectionBubble = ({
   container
 }) => {
   const themeStyle = useOpenEditorThemeStyle();
-  const { selectionBubbleState } = controller;
   const rootElement = controller.getRootElement();
   const [linkDialogOpen, setLinkDialogOpen] = useState(false);
-  const lastAnchorRef = useRef(null);
-  if (selectionBubbleState) {
-    lastAnchorRef.current = selectionBubbleState;
-  }
-  const anchor = useMemo(
-    () => {
-      const anchorState = selectionBubbleState ?? lastAnchorRef.current;
-      return anchorState ? toVirtualAnchor(anchorState, rootElement) : null;
-    },
-    [rootElement, selectionBubbleState]
-  );
+  const toolbarRef = useRef(null);
   const actions = controller.ready ? [
     {
       key: "bold",
@@ -392,45 +540,68 @@ var OpenEditorSelectionBubble = ({
       run: () => controller.toggleInlineCode()
     }
   ] : [];
-  if (!controller.ready || !selectionBubbleState && !linkDialogOpen) {
-    return null;
-  }
+  useEffect(() => {
+    if (!rootElement) return;
+    const focusToolbar = (event) => {
+      if (!(event.altKey && event.key === "F10")) return;
+      const toolbar = toolbarRef.current;
+      const menu = toolbar?.parentElement?.parentElement;
+      if (!toolbar || !menu || getComputedStyle(menu).visibility === "hidden") return;
+      const firstControl = toolbarRef.current?.querySelector(
+        "button:not(:disabled), [href], [tabindex]:not([tabindex='-1'])"
+      );
+      if (!firstControl) return;
+      event.preventDefault();
+      firstControl.focus();
+    };
+    rootElement.addEventListener("keydown", focusToolbar, true);
+    return () => rootElement.removeEventListener("keydown", focusToolbar, true);
+  }, [rootElement]);
+  if (!controller.ready) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Popover.Root, { open: Boolean(selectionBubbleState), modal: false, children: /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(
-      Popover.Positioner,
+    /* @__PURE__ */ jsx(
+      OpenEditorBubbleMenu,
       {
-        anchor,
-        positionMethod: "fixed",
-        side: "top",
-        align: "center",
-        sideOffset: 10,
-        collisionPadding: 12,
-        collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+        className,
+        container,
+        controller,
+        style: themeStyle,
         children: /* @__PURE__ */ jsx(
-          Popover.Popup,
+          "div",
           {
-            className,
-            style: themeStyle,
+            onKeyDown: (event) => {
+              if (event.key !== "Escape") return;
+              event.preventDefault();
+              controller.focus();
+            },
             onMouseDown: (event) => event.preventDefault(),
-            children: /* @__PURE__ */ jsxs(Toolbar.Root, { className: "oe-selection-toolbar", "aria-label": "Selection formatting", children: [
-              /* @__PURE__ */ jsx(SelectionBlockTransformMenu, { controller, container }),
-              actions.map((action) => /* @__PURE__ */ jsx(SelectionButton, { action }, action.key)),
-              /* @__PURE__ */ jsx(
-                Toolbar.Button,
-                {
-                  type: "button",
-                  "aria-label": "Link",
-                  className: "oe-toolbar-button",
-                  "data-active": controller.isActive("link") ? "" : void 0,
-                  onClick: () => setLinkDialogOpen(true),
-                  children: /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: "oe-toolbar-icon", size: 15, strokeWidth: 2 })
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              Toolbar.Root,
+              {
+                className: "oe-selection-toolbar",
+                "aria-label": "Selection formatting",
+                ref: toolbarRef,
+                children: [
+                  /* @__PURE__ */ jsx(SelectionBlockTransformMenu, { controller, container }),
+                  actions.map((action) => /* @__PURE__ */ jsx(SelectionButton, { action }, action.key)),
+                  /* @__PURE__ */ jsx(
+                    Toolbar.Button,
+                    {
+                      type: "button",
+                      "aria-label": "Link",
+                      className: "oe-toolbar-button",
+                      "data-active": controller.isActive("link") ? "" : void 0,
+                      onClick: () => setLinkDialogOpen(true),
+                      children: /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: "oe-toolbar-icon", size: 15, strokeWidth: 2 })
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsx(
       OpenEditorLinkDialog,
       {
@@ -450,103 +621,137 @@ var OpenEditorSlashMenu = ({
   const themeStyle = useOpenEditorThemeStyle();
   const slashMenuItems = sortSlashMenuItems(items ?? getDefaultSlashMenuItems(controller));
   const slashState = controller.slashState;
-  const [headingPanelOpen, setHeadingPanelOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const selectedIndexRef = useRef(0);
+  const menuId = useId();
+  const menuRef = useRef(null);
   const anchor = useMemo(
     () => slashState ? toVirtualAnchor(
       slashState,
-      controller.getRootElement()
+      controller.getRootElement(),
+      () => controller.getPositionRect(slashState.to)
     ) : null,
     [controller, slashState]
   );
-  useEffect(() => setHeadingPanelOpen(false), [slashState?.query]);
-  if (!slashState) {
-    return null;
-  }
-  const matchingItems = slashMenuItems.filter((item) => {
+  const matchingItems = slashState ? slashMenuItems.filter((item) => {
     const haystack = `${item.label} ${item.group} ${item.keywords?.join(" ") ?? ""}`.toLowerCase();
     return haystack.includes(slashState.query.toLowerCase());
-  });
-  const firstHeadingKey = matchingItems.find((item) => isHeadingKey(item.key))?.key;
+  }) : [];
+  selectedIndexRef.current = selectedIndex;
+  useEffect(() => {
+    selectedIndexRef.current = 0;
+    setSelectedIndex(0);
+  }, [slashState?.from, slashState?.query]);
+  useEffect(() => {
+    if (selectedIndex < matchingItems.length) return;
+    setSelectedIndex(Math.max(0, matchingItems.length - 1));
+  }, [matchingItems.length, selectedIndex]);
+  useEffect(() => {
+    const editorElement = controller.getRootElement();
+    if (!slashState || !editorElement) return;
+    const previous = {
+      controls: editorElement.getAttribute("aria-controls"),
+      expanded: editorElement.getAttribute("aria-expanded"),
+      activeDescendant: editorElement.getAttribute("aria-activedescendant")
+    };
+    const selectedId = matchingItems[selectedIndex] ? `${menuId}-option-${selectedIndex}` : null;
+    editorElement.setAttribute("aria-controls", menuId);
+    editorElement.setAttribute("aria-expanded", "true");
+    if (selectedId) editorElement.setAttribute("aria-activedescendant", selectedId);
+    else editorElement.removeAttribute("aria-activedescendant");
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return false;
+      let nextIndex = null;
+      const currentIndex = selectedIndexRef.current;
+      if (event.key === "ArrowDown") nextIndex = (currentIndex + 1) % Math.max(1, matchingItems.length);
+      if (event.key === "ArrowUp") nextIndex = (currentIndex - 1 + Math.max(1, matchingItems.length)) % Math.max(1, matchingItems.length);
+      if (event.key === "Home" || event.key === "PageUp") nextIndex = 0;
+      if (event.key === "End" || event.key === "PageDown") nextIndex = Math.max(0, matchingItems.length - 1);
+      if (nextIndex !== null) {
+        event.preventDefault();
+        selectedIndexRef.current = nextIndex;
+        setSelectedIndex(nextIndex);
+        return true;
+      }
+      if (event.key === "Enter") {
+        const item = matchingItems[selectedIndexRef.current];
+        if (!item) return false;
+        event.preventDefault();
+        event.stopPropagation();
+        item.execute({ controller, range: { from: slashState.from, to: slashState.to } });
+        return true;
+      }
+      return false;
+    };
+    const unregisterKeyboardHandler = controller.registerSlashMenuKeyboardHandler(handleKeyDown);
+    return () => {
+      unregisterKeyboardHandler();
+      for (const [attribute, value] of [
+        ["aria-controls", previous.controls],
+        ["aria-expanded", previous.expanded],
+        ["aria-activedescendant", previous.activeDescendant]
+      ]) {
+        if (value === null) editorElement.removeAttribute(attribute);
+        else editorElement.setAttribute(attribute, value);
+      }
+    };
+  }, [controller, matchingItems, menuId, selectedIndex, slashState]);
+  useEffect(() => {
+    menuRef.current?.querySelector("[data-highlighted]")?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  if (!slashState) return null;
   return /* @__PURE__ */ jsx(Popover.Root, { open: true, modal: false, children: /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(
     Popover.Positioner,
     {
       anchor,
+      className: "oe-anchored-overlay-positioner",
       positionMethod: "fixed",
       side: "bottom",
       align: "start",
       sideOffset: 8,
       collisionPadding: 12,
       collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Popover.Popup,
         {
           className: "oe-cascade-menu",
-          style: themeStyle,
           finalFocus: false,
+          style: themeStyle,
           initialFocus: false,
-          onMouseLeave: () => setHeadingPanelOpen(false),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: `${className} oe-cascade-panel`, children: /* @__PURE__ */ jsx("div", { className: "oe-slash-menu-scroll", children: matchingItems.map((item) => {
-              if (isHeadingKey(item.key)) {
-                if (item.key !== firstHeadingKey) return null;
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": "Insert block",
+              className: `${className} oe-cascade-panel`,
+              id: menuId,
+              ref: menuRef,
+              role: "listbox",
+              children: /* @__PURE__ */ jsx("div", { className: "oe-slash-menu-scroll", children: matchingItems.map((item, index) => {
+                const Icon = getSlashMenuIcon(item);
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
+                    "aria-selected": index === selectedIndex,
                     type: "button",
                     className: "oe-slash-menu-item",
-                    onClick: () => setHeadingPanelOpen(true),
-                    onFocus: () => setHeadingPanelOpen(true),
-                    onMouseEnter: () => setHeadingPanelOpen(true),
+                    "data-highlighted": index === selectedIndex ? "" : void 0,
+                    id: `${menuId}-option-${index}`,
+                    onMouseEnter: () => setSelectedIndex(index),
                     onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => {
+                      item.execute({ controller, range: { from: slashState.from, to: slashState.to } });
+                    },
+                    role: "option",
                     children: [
-                      /* @__PURE__ */ jsx(Heading1, { "aria-hidden": "true", className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }),
-                      /* @__PURE__ */ jsx("span", { children: "Heading" }),
-                      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "oe-submenu-chevron", size: 13, strokeWidth: 2 })
+                      /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }),
+                      /* @__PURE__ */ jsx("span", { children: item.label })
                     ]
                   },
-                  "heading"
+                  item.key
                 );
-              }
-              const Icon = getSlashMenuIcon(item);
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "oe-slash-menu-item",
-                  onMouseEnter: () => setHeadingPanelOpen(false),
-                  onMouseDown: (event) => event.preventDefault(),
-                  onClick: () => {
-                    item.execute({ controller, range: { from: slashState.from, to: slashState.to } });
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }),
-                    /* @__PURE__ */ jsx("span", { children: item.label })
-                  ]
-                },
-                item.key
-              );
-            }) }) }),
-            headingPanelOpen ? /* @__PURE__ */ jsx("div", { className: "oe-slash-menu oe-slash-submenu oe-cascade-panel", children: matchingItems.filter((item) => isHeadingKey(item.key)).map((headingItem) => {
-              const HeadingIcon = getSlashMenuIcon(headingItem);
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "oe-slash-menu-item",
-                  onMouseDown: (event) => event.preventDefault(),
-                  onClick: () => {
-                    headingItem.execute({ controller, range: { from: slashState.from, to: slashState.to } });
-                  },
-                  role: "menuitem",
-                  children: [
-                    /* @__PURE__ */ jsx(HeadingIcon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }),
-                    /* @__PURE__ */ jsx("span", { children: headingItem.label })
-                  ]
-                },
-                headingItem.key
-              );
-            }) }) : null
-          ]
+              }) })
+            }
+          )
         }
       )
     }
@@ -610,8 +815,28 @@ var OpenEditorBlockMenu = ({
   const [open, setOpen] = useState(false);
   const handleElementRef = useRef(null);
   const lastBlockRef = useRef(null);
+  const controllerRef = useRef(controller);
+  controllerRef.current = controller;
   if (block) lastBlockRef.current = block;
   const activeBlock = block ?? (open ? lastBlockRef.current : null);
+  const setMenuOpen = useCallback((nextOpen) => {
+    const selected = lastBlockRef.current;
+    if (nextOpen) {
+      if (!selected || !controllerRef.current.selectBlock(selected)) {
+        setOpen(false);
+        controllerRef.current.setBlockHandleLocked(false);
+        return;
+      }
+      controllerRef.current.setBlockHandleLocked(true);
+      setOpen(true);
+      return;
+    }
+    setOpen(false);
+    controllerRef.current.setBlockHandleLocked(false);
+  }, []);
+  useEffect(() => () => {
+    controllerRef.current.setBlockHandleLocked(false);
+  }, []);
   if (!controller.editable) return null;
   const handle = /* @__PURE__ */ jsx(
     OpenEditorBlockDragHandle,
@@ -622,25 +847,18 @@ var OpenEditorBlockMenu = ({
       elementRef: handleElementRef,
       expanded: open,
       onActivate: () => {
-        const nextOpen = !open;
-        setOpen(nextOpen);
-        controller.setBlockHandleLocked(nextOpen);
-        if (nextOpen && activeBlock) controller.selectBlock(activeBlock);
+        setMenuOpen(!open);
       },
       onDraggingChange: (dragging) => {
-        if (dragging) setOpen(false);
+        if (dragging) setMenuOpen(false);
       },
       children: activeBlock ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("oe-block-handle", className), children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true", size: 16, strokeWidth: 2 }) }) : null
     }
   );
   const actions = activeBlock ? [...builtInBlockActions(controller, activeBlock), ...controller.blockActions] : [];
-  return /* @__PURE__ */ jsxs(Menu.Root, { modal: false, open, onOpenChange: (nextOpen) => {
-    setOpen(nextOpen);
-    controller.setBlockHandleLocked(nextOpen);
-    if (nextOpen && activeBlock) controller.selectBlock(activeBlock);
-  }, children: [
+  return /* @__PURE__ */ jsxs(Menu.Root, { modal: false, open, onOpenChange: setMenuOpen, children: [
     handle,
-    activeBlock ? /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
+    open && activeBlock ? /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
       Menu.Positioner,
       {
         align: "start",
@@ -669,6 +887,7 @@ var OpenEditorBlockMenu = ({
                     "data-danger": action.group === "danger" ? "" : void 0,
                     disabled: action.disabled?.(context),
                     onClick: () => {
+                      setMenuOpen(false);
                       void action.run(context);
                     },
                     children: [
@@ -697,11 +916,12 @@ var OpenEditor = ({
     /* @__PURE__ */ jsx(OpenEditorContent, { controller, className: contentClassName }),
     /* @__PURE__ */ jsx(OpenEditorBlockMenu, { controller, container: overlayContainer }),
     /* @__PURE__ */ jsx(OpenEditorSelectionBubble, { controller, container: overlayContainer }),
+    /* @__PURE__ */ jsx(OpenEditorTableMenu, { controller, container: overlayContainer }),
     /* @__PURE__ */ jsx(OpenEditorSlashMenu, { controller, container: overlayContainer })
   ] });
   return theme ? /* @__PURE__ */ jsx(OpenEditorThemeProvider, { theme, children: editor }) : editor;
 };
 
-export { OpenEditor, OpenEditorBlockMenu, OpenEditorButton, OpenEditorInput, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorToggle, OpenEditorToggleGroup };
+export { OpenEditor, OpenEditorBlockMenu, OpenEditorButton, OpenEditorInput, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorTableMenu, OpenEditorToggle, OpenEditorToggleGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map