@openeditor/ui 0.0.34 → 0.0.36

package/dist/index.js

@@ -2,7 +2,8 @@ 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 { HugeiconsIcon } from '@hugeicons/react';
+import { openEditorIcons } from '@openeditor/icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 export { OpenEditorEmojiPicker } from '@openeditor/emoji';
 import { Button } from '@base-ui/react/button';
@@ -11,7 +12,7 @@ import { Input } from '@base-ui/react/input';
 import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
-import { useState, useRef, useEffect, useId, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
+import { useState, useRef, useEffect, useId, useMemo, useCallback } from 'react';
 
 // src/table-menu.tsx
 var runTableCommandOnMouseDown = (event, controller, command) => {
@@ -26,7 +27,7 @@ var TableActionMenu = ({
   controller,
   container,
   label,
-  Icon,
+  icon,
   actions
 }) => {
   const themeStyle = useOpenEditorThemeStyle();
@@ -39,9 +40,9 @@ var TableActionMenu = ({
         onMouseDown: (event) => event.preventDefault(),
         type: "button",
         children: [
-          /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", size: 15, strokeWidth: 2 }),
+          /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon, size: 15, strokeWidth: 2 }),
           /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", size: 12, strokeWidth: 2 })
+          /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.chevronDown, size: 12, strokeWidth: 2 })
         ]
       }
     ),
@@ -63,7 +64,7 @@ var TableActionMenu = ({
             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(HugeiconsIcon, { "aria-hidden": "true", icon: action.icon, size: 15, strokeWidth: 2 }),
               /* @__PURE__ */ jsx("span", { children: action.label })
             ]
           },
@@ -96,14 +97,14 @@ var TableToolbarButton = ({
   }
 );
 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 }
+  { command: "addRowBefore", label: "Insert row above", icon: openEditorIcons.tableRowInsertBefore },
+  { command: "addRowAfter", label: "Insert row below", icon: openEditorIcons.tableRowInsertAfter },
+  { command: "deleteRow", label: "Delete row", icon: openEditorIcons.tableRowDelete, 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 }
+  { command: "addColumnBefore", label: "Insert column left", icon: openEditorIcons.tableColumnInsertBefore },
+  { command: "addColumnAfter", label: "Insert column right", icon: openEditorIcons.tableColumnInsertAfter },
+  { command: "deleteColumn", label: "Delete column", icon: openEditorIcons.tableColumnDelete, danger: true }
 ];
 var TableToolbar = ({
   controller,
@@ -116,7 +117,7 @@ var TableToolbar = ({
       actions: rowActions,
       container,
       controller,
-      Icon: Rows3,
+      icon: openEditorIcons.tableRow,
       label: "Row"
     }
   ),
@@ -126,7 +127,7 @@ var TableToolbar = ({
       actions: columnActions,
       container,
       controller,
-      Icon: Columns3,
+      icon: openEditorIcons.tableColumn,
       label: "Column"
     }
   ),
@@ -138,7 +139,7 @@ var TableToolbar = ({
       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 })
+      children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.tableHeaderRow, size: 15, strokeWidth: 2 })
     }
   ),
   /* @__PURE__ */ jsx(
@@ -148,12 +149,11 @@ var TableToolbar = ({
       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 })
+      children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.tableHeaderColumn, 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 }) })
+  state.canSplitCell ? /* @__PURE__ */ jsx(TableToolbarButton, { command: "splitCell", controller, label: "Split cell", children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.splitCells, size: 15, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(TableToolbarButton, { command: "mergeCells", controller, label: "Merge selected cells", children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.mergeCells, size: 15, strokeWidth: 2 }) }),
+  /* @__PURE__ */ jsx(TableToolbarButton, { command: "deleteTable", controller, danger: true, label: "Delete table", children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.delete, size: 15, strokeWidth: 2 }) })
 ] }) });
 var OpenEditorTableMenu = ({
   controller,
@@ -174,65 +174,81 @@ var OpenEditorTableMenu = ({
   );
 };
 var headingDefinitions = [
-  { level: 1, Icon: Heading1 },
-  { level: 2, Icon: Heading2 },
-  { level: 3, Icon: Heading3 },
-  { level: 4, Icon: Heading4 },
-  { level: 5, Icon: Heading5 },
-  { level: 6, Icon: Heading6 }
+  { level: 1, icon: openEditorIcons.heading1 },
+  { level: 2, icon: openEditorIcons.heading2 },
+  { level: 3, icon: openEditorIcons.heading3 },
+  { level: 4, icon: openEditorIcons.heading4 },
+  { level: 5, icon: openEditorIcons.heading5 },
+  { level: 6, icon: openEditorIcons.heading6 }
 ];
 var blockTransformActions = [
   {
     key: "paragraph",
-    label: "Paragraph",
-    Icon: Pilcrow,
+    label: "Text",
+    icon: openEditorIcons.text,
     isActive: (controller) => controller.isActive("paragraph"),
     run: (controller) => controller.setParagraph()
   },
-  ...headingDefinitions.map(({ level, Icon }) => ({
+  ...headingDefinitions.map(({ level, icon }) => ({
     key: `heading${level}`,
     label: `Heading ${level}`,
-    Icon,
+    icon,
     isActive: (controller) => controller.isActive("heading", { level }),
     run: (controller) => controller.toggleHeading(level)
   })),
   {
     key: "bulletList",
     label: "Bullet List",
-    Icon: List,
+    icon: openEditorIcons.bulletList,
     isActive: (controller) => controller.isActive("bulletList"),
     run: (controller) => controller.toggleBulletList()
   },
   {
     key: "orderedList",
     label: "Numbered List",
-    Icon: ListOrdered,
+    icon: openEditorIcons.orderedList,
     isActive: (controller) => controller.isActive("orderedList"),
     run: (controller) => controller.toggleOrderedList()
   },
   {
     key: "taskList",
     label: "Task List",
-    Icon: ListTodo,
+    icon: openEditorIcons.taskList,
     isActive: (controller) => controller.isActive("taskList"),
     run: (controller) => controller.toggleTaskList()
   },
+  {
+    key: "toggleList",
+    label: "Toggle List",
+    icon: openEditorIcons.toggleList,
+    isActive: (controller) => controller.isActive("toggleList"),
+    run: (controller) => controller.toggleToggleList()
+  },
   {
     key: "blockquote",
     label: "Quote",
-    Icon: Quote,
+    icon: openEditorIcons.blockquote,
     isActive: (controller) => controller.isActive("blockquote"),
     run: (controller) => controller.toggleBlockquote()
   },
+  {
+    key: "callout",
+    label: "Callout",
+    icon: openEditorIcons.callout,
+    isActive: (controller) => controller.isActive("callout"),
+    run: (controller) => controller.toggleCallout()
+  },
   {
     key: "codeBlock",
     label: "Code",
-    Icon: Code,
+    icon: openEditorIcons.codeBlock,
     isActive: (controller) => controller.isActive("codeBlock"),
     run: (controller) => controller.toggleCodeBlock()
   }
 ];
 var getActiveBlockTransform = (controller) => [
+  "callout",
+  "toggleList",
   "taskList",
   "bulletList",
   "orderedList",
@@ -248,26 +264,30 @@ var getActiveBlockTransform = (controller) => [
 ].map((key) => blockTransformActions.find((action) => action.key === key)).find((action) => action?.isActive(controller)) ?? blockTransformActions[0];
 var isHeadingKey = (key) => /^heading[1-6]$/.test(key);
 var slashMenuIcons = {
-  paragraph: Pilcrow,
-  ...Object.fromEntries(headingDefinitions.map(({ level, Icon }) => [`heading${level}`, Icon])),
-  bulletList: List,
-  orderedList: ListOrdered,
-  taskList: ListTodo,
-  blockquote: Quote,
-  codeBlock: Code,
-  divider: Minus,
-  image: Image,
-  columns: Columns2,
-  table: Table,
-  toggleList: ChevronRight,
-  callout: MessageSquare,
-  diagram: GitBranch,
-  page: FileText,
-  attachment: Upload,
-  moveBlockUp: ArrowUp,
-  moveBlockDown: ArrowDown
+  paragraph: openEditorIcons.text,
+  ...Object.fromEntries(headingDefinitions.map(({ level, icon }) => [`heading${level}`, icon])),
+  bulletList: openEditorIcons.bulletList,
+  orderedList: openEditorIcons.orderedList,
+  taskList: openEditorIcons.taskList,
+  blockquote: openEditorIcons.blockquote,
+  codeBlock: openEditorIcons.codeBlock,
+  divider: openEditorIcons.divider,
+  image: openEditorIcons.image,
+  columns: openEditorIcons.columns,
+  table: openEditorIcons.table,
+  toggleList: openEditorIcons.toggleList,
+  callout: openEditorIcons.callout,
+  diagram: openEditorIcons.diagram,
+  page: openEditorIcons.page,
+  attachment: openEditorIcons.attachment
+};
+var isSlashMenuGroup = (item) => "children" in item;
+var getSlashMenuIcon = (item) => slashMenuIcons[item.key] ?? (isSlashMenuGroup(item) ? openEditorIcons.heading1 : openEditorIcons.text);
+var slashItemMatches = (item, query) => {
+  const normalized = query.toLowerCase();
+  const ownText = `${item.label} ${item.group} ${item.keywords?.join(" ") ?? ""}`.toLowerCase();
+  return ownText.includes(normalized) || isSlashMenuGroup(item) && item.children.some((child) => slashItemMatches(child, query));
 };
-var getSlashMenuIcon = (item) => item.icon ?? slashMenuIcons[item.key] ?? Type;
 var pointRect = (left, top) => ({
   left,
   right: left,
@@ -326,7 +346,7 @@ var OpenEditorLinkDialog = ({
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
     /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oe-dialog-backdrop" }),
     /* @__PURE__ */ jsxs(Dialog.Popup, { className: "oe-dialog", initialFocus: false, style: themeStyle, children: [
-      /* @__PURE__ */ jsx(Dialog.Close, { className: "oe-dialog-close", "aria-label": "Close link dialog", children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", size: 15, strokeWidth: 2 }) }),
+      /* @__PURE__ */ jsx(Dialog.Close, { className: "oe-dialog-close", "aria-label": "Close link dialog", children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.close, size: 15, strokeWidth: 2 }) }),
       /* @__PURE__ */ jsxs("form", { className: "oe-link-dialog-form", onSubmit: submitLink, children: [
         /* @__PURE__ */ jsx(Dialog.Title, { className: "oe-dialog-title", children: "Link" }),
         /* @__PURE__ */ jsx(
@@ -370,7 +390,7 @@ var SelectionButton = ({
     className: "oe-toolbar-button",
     "data-active": action.active ? "" : void 0,
     onClick: action.run,
-    children: /* @__PURE__ */ jsx(action.Icon, { "aria-hidden": "true", className: "oe-toolbar-icon", size: 15, strokeWidth: 2 })
+    children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-toolbar-icon", icon: action.icon, size: 15, strokeWidth: 2 })
   }
 );
 var SelectionBlockTransformMenu = ({
@@ -400,9 +420,9 @@ var SelectionBlockTransformMenu = ({
             className: "oe-toolbar-button oe-block-transform-trigger",
             onMouseDown: (event) => event.preventDefault(),
             children: [
-              /* @__PURE__ */ jsx(activeAction.Icon, { "aria-hidden": "true", className: "oe-toolbar-icon", size: 15, strokeWidth: 2 }),
+              /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-toolbar-icon", icon: activeAction.icon, size: 15, strokeWidth: 2 }),
               /* @__PURE__ */ jsx("span", { className: "oe-block-transform-trigger-label", children: activeAction.label }),
-              /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "oe-toolbar-chevron", size: 12, strokeWidth: 2 })
+              /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-toolbar-chevron", icon: openEditorIcons.chevronDown, size: 12, strokeWidth: 2 })
             ]
           }
         ),
@@ -436,9 +456,9 @@ var SelectionBlockTransformMenu = ({
                           onFocus: () => setHeadingPanelOpen(true),
                           onMouseEnter: () => setHeadingPanelOpen(true),
                           children: [
-                            /* @__PURE__ */ jsx(Heading1, { "aria-hidden": "true", className: "oe-block-transform-icon", size: 15, strokeWidth: 2 }),
+                            /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-block-transform-icon", icon: openEditorIcons.heading1, 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(HugeiconsIcon, { "aria-hidden": "true", className: "oe-submenu-chevron", icon: openEditorIcons.chevronRight, size: 13, strokeWidth: 2 })
                           ]
                         },
                         "heading"
@@ -456,7 +476,7 @@ var SelectionBlockTransformMenu = ({
                           if (!active) action.run(controller);
                         },
                         children: [
-                          /* @__PURE__ */ jsx(action.Icon, { "aria-hidden": "true", className: "oe-block-transform-icon", size: 15, strokeWidth: 2 }),
+                          /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-block-transform-icon", icon: action.icon, size: 15, strokeWidth: 2 }),
                           /* @__PURE__ */ jsx("span", { children: action.label })
                         ]
                       },
@@ -478,7 +498,7 @@ var SelectionBlockTransformMenu = ({
                         },
                         role: "menuitem",
                         children: [
-                          /* @__PURE__ */ jsx(headingAction.Icon, { "aria-hidden": "true", className: "oe-block-transform-icon", size: 15, strokeWidth: 2 }),
+                          /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-block-transform-icon", icon: headingAction.icon, size: 15, strokeWidth: 2 }),
                           /* @__PURE__ */ jsx("span", { children: headingAction.label })
                         ]
                       },
@@ -508,35 +528,35 @@ var OpenEditorSelectionBubble = ({
       key: "bold",
       label: "Bold",
       active: controller.isActive("bold"),
-      Icon: Bold,
+      icon: openEditorIcons.bold,
       run: () => controller.toggleBold()
     },
     {
       key: "italic",
       label: "Italic",
       active: controller.isActive("italic"),
-      Icon: Italic,
+      icon: openEditorIcons.italic,
       run: () => controller.toggleItalic()
     },
     {
       key: "underline",
       label: "Underline",
       active: controller.isActive("underline"),
-      Icon: Underline,
+      icon: openEditorIcons.underline,
       run: () => controller.toggleUnderline()
     },
     {
       key: "strike",
       label: "Strikethrough",
       active: controller.isActive("strike"),
-      Icon: Strikethrough,
+      icon: openEditorIcons.strike,
       run: () => controller.toggleStrike()
     },
     {
       key: "code",
       label: "Inline code",
       active: controller.isActive("code"),
-      Icon: Code,
+      icon: openEditorIcons.code,
       run: () => controller.toggleInlineCode()
     }
   ] : [];
@@ -592,7 +612,7 @@ var OpenEditorSelectionBubble = ({
                       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__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-toolbar-icon", icon: openEditorIcons.link, size: 15, strokeWidth: 2 })
                     }
                   )
                 ]
@@ -622,6 +642,7 @@ var OpenEditorSlashMenu = ({
   const slashMenuItems = sortSlashMenuItems(items ?? getDefaultSlashMenuItems(controller));
   const slashState = controller.slashState;
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [openGroupKey, setOpenGroupKey] = useState(null);
   const selectedIndexRef = useRef(0);
   const menuId = useId();
   const menuRef = useRef(null);
@@ -633,19 +654,25 @@ var OpenEditorSlashMenu = ({
     ) : null,
     [controller, slashState]
   );
-  const matchingItems = slashState ? slashMenuItems.filter((item) => {
-    const haystack = `${item.label} ${item.group} ${item.keywords?.join(" ") ?? ""}`.toLowerCase();
-    return haystack.includes(slashState.query.toLowerCase());
-  }) : [];
+  const matchingItems = slashState ? slashMenuItems.filter((item) => slashItemMatches(item, slashState.query)) : [];
+  const openGroup = matchingItems.find(
+    (item) => isSlashMenuGroup(item) && item.key === openGroupKey
+  );
+  const matchingChildren = openGroup ? openGroup.children.filter((item) => slashItemMatches(item, slashState?.query ?? "")) : [];
+  const activeItems = openGroup ? matchingChildren : matchingItems;
   selectedIndexRef.current = selectedIndex;
   useEffect(() => {
     selectedIndexRef.current = 0;
     setSelectedIndex(0);
+    setOpenGroupKey(null);
   }, [slashState?.from, slashState?.query]);
   useEffect(() => {
-    if (selectedIndex < matchingItems.length) return;
-    setSelectedIndex(Math.max(0, matchingItems.length - 1));
-  }, [matchingItems.length, selectedIndex]);
+    if (selectedIndex < activeItems.length) return;
+    setSelectedIndex(Math.max(0, activeItems.length - 1));
+  }, [activeItems.length, selectedIndex]);
+  useEffect(() => {
+    if (slashState && matchingItems.length === 0) controller.dismissSlashMenu();
+  }, [controller, matchingItems.length, slashState]);
   useEffect(() => {
     const editorElement = controller.getRootElement();
     if (!slashState || !editorElement) return;
@@ -654,7 +681,7 @@ var OpenEditorSlashMenu = ({
       expanded: editorElement.getAttribute("aria-expanded"),
       activeDescendant: editorElement.getAttribute("aria-activedescendant")
     };
-    const selectedId = matchingItems[selectedIndex] ? `${menuId}-option-${selectedIndex}` : null;
+    const selectedId = activeItems[selectedIndex] ? `${menuId}-${openGroup ? openGroup.key : "root"}-option-${selectedIndex}` : null;
     editorElement.setAttribute("aria-controls", menuId);
     editorElement.setAttribute("aria-expanded", "true");
     if (selectedId) editorElement.setAttribute("aria-activedescendant", selectedId);
@@ -663,21 +690,43 @@ var OpenEditorSlashMenu = ({
       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 === "ArrowDown") nextIndex = (currentIndex + 1) % Math.max(1, activeItems.length);
+      if (event.key === "ArrowUp") nextIndex = (currentIndex - 1 + Math.max(1, activeItems.length)) % Math.max(1, activeItems.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 (event.key === "End" || event.key === "PageDown") nextIndex = Math.max(0, activeItems.length - 1);
       if (nextIndex !== null) {
         event.preventDefault();
         selectedIndexRef.current = nextIndex;
         setSelectedIndex(nextIndex);
         return true;
       }
+      if ((event.key === "ArrowLeft" || event.key === "Escape") && openGroup) {
+        event.preventDefault();
+        setOpenGroupKey(null);
+        selectedIndexRef.current = 0;
+        setSelectedIndex(0);
+        return true;
+      }
+      if (event.key === "ArrowRight") {
+        const item = activeItems[selectedIndexRef.current];
+        if (!item || !isSlashMenuGroup(item)) return false;
+        event.preventDefault();
+        setOpenGroupKey(item.key);
+        selectedIndexRef.current = 0;
+        setSelectedIndex(0);
+        return true;
+      }
       if (event.key === "Enter") {
-        const item = matchingItems[selectedIndexRef.current];
+        const item = activeItems[selectedIndexRef.current];
         if (!item) return false;
         event.preventDefault();
         event.stopPropagation();
+        if (isSlashMenuGroup(item)) {
+          setOpenGroupKey(item.key);
+          selectedIndexRef.current = 0;
+          setSelectedIndex(0);
+          return true;
+        }
         item.execute({ controller, range: { from: slashState.from, to: slashState.to } });
         return true;
       }
@@ -695,11 +744,11 @@ var OpenEditorSlashMenu = ({
         else editorElement.setAttribute(attribute, value);
       }
     };
-  }, [controller, matchingItems, menuId, selectedIndex, slashState]);
+  }, [activeItems, controller, menuId, openGroup, selectedIndex, slashState]);
   useEffect(() => {
     menuRef.current?.querySelector("[data-highlighted]")?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  if (!slashState) return null;
+  if (!slashState || matchingItems.length === 0) return null;
   return /* @__PURE__ */ jsx(Popover.Root, { open: true, modal: false, children: /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(
     Popover.Positioner,
     {
@@ -711,99 +760,180 @@ var OpenEditorSlashMenu = ({
       sideOffset: 8,
       collisionPadding: 12,
       collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         Popover.Popup,
         {
           className: "oe-cascade-menu",
           finalFocus: false,
           style: themeStyle,
           initialFocus: false,
-          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",
-                    "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 } });
+          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 CustomIcon = item.icon;
+                  const icon = getSlashMenuIcon(item);
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "aria-selected": !openGroup && index === selectedIndex,
+                      type: "button",
+                      className: "oe-slash-menu-item",
+                      "data-highlighted": !openGroup && index === selectedIndex ? "" : void 0,
+                      id: `${menuId}-root-option-${index}`,
+                      onMouseEnter: () => {
+                        selectedIndexRef.current = index;
+                        setSelectedIndex(index);
+                        setOpenGroupKey(isSlashMenuGroup(item) ? item.key : null);
+                      },
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => {
+                        if (isSlashMenuGroup(item)) {
+                          setOpenGroupKey(item.key);
+                          selectedIndexRef.current = 0;
+                          setSelectedIndex(0);
+                        } else {
+                          item.execute({ controller, range: { from: slashState.from, to: slashState.to } });
+                        }
+                      },
+                      role: "option",
+                      children: [
+                        CustomIcon ? /* @__PURE__ */ jsx(CustomIcon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }) : /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-slash-menu-icon", icon, size: 15, strokeWidth: 2 }),
+                        /* @__PURE__ */ jsx("span", { children: item.label }),
+                        isSlashMenuGroup(item) ? /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-submenu-chevron", icon: openEditorIcons.chevronRight, size: 13, strokeWidth: 2 }) : null
+                      ]
                     },
-                    role: "option",
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }),
-                      /* @__PURE__ */ jsx("span", { children: item.label })
-                    ]
-                  },
-                  item.key
-                );
-              }) })
-            }
-          )
+                    item.key
+                  );
+                }) })
+              }
+            ),
+            openGroup ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-label": openGroup.label,
+                className: `${className} oe-cascade-panel oe-block-transform-submenu`,
+                role: "listbox",
+                children: /* @__PURE__ */ jsx("div", { className: "oe-slash-menu-scroll", children: matchingChildren.map((item, index) => {
+                  const CustomIcon = item.icon;
+                  const icon = getSlashMenuIcon(item);
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "aria-selected": index === selectedIndex,
+                      className: "oe-slash-menu-item",
+                      "data-highlighted": index === selectedIndex ? "" : void 0,
+                      id: `${menuId}-${openGroup.key}-option-${index}`,
+                      onClick: () => item.execute({ controller, range: { from: slashState.from, to: slashState.to } }),
+                      onMouseDown: (event) => event.preventDefault(),
+                      onMouseEnter: () => {
+                        selectedIndexRef.current = index;
+                        setSelectedIndex(index);
+                      },
+                      role: "option",
+                      type: "button",
+                      children: [
+                        CustomIcon ? /* @__PURE__ */ jsx(CustomIcon, { "aria-hidden": true, className: "oe-slash-menu-icon", size: 15, strokeWidth: 2 }) : /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-slash-menu-icon", icon, size: 15, strokeWidth: 2 }),
+                        /* @__PURE__ */ jsx("span", { children: item.label })
+                      ]
+                    },
+                    item.key
+                  );
+                }) })
+              }
+            ) : null
+          ]
         }
       )
     }
   ) }) });
 };
-var builtInBlockActions = (controller, block) => [
+var createOpenEditorBuiltInBlockMenuActions = (handlers) => [
   {
     id: "move-up",
     label: "Move up",
     group: "move",
-    Icon: ArrowUp,
-    disabled: () => !controller.canMoveBlock(-1, block),
-    run: () => {
-      controller.moveBlock(-1, block);
-    }
+    icon: openEditorIcons.moveUp,
+    disabled: !handlers.canMove(-1),
+    run: () => handlers.move(-1)
   },
   {
     id: "move-down",
     label: "Move down",
     group: "move",
-    Icon: ArrowDown,
-    disabled: () => !controller.canMoveBlock(1, block),
-    run: () => {
-      controller.moveBlock(1, block);
-    }
+    icon: openEditorIcons.moveDown,
+    disabled: !handlers.canMove(1),
+    run: () => handlers.move(1)
   },
   {
     id: "copy",
     label: "Copy block",
     group: "edit",
-    Icon: Copy,
-    run: () => controller.copyBlock(block)
+    icon: openEditorIcons.copy,
+    run: handlers.copy
   },
   {
     id: "duplicate",
     label: "Duplicate",
     group: "edit",
-    Icon: CopyPlus,
-    run: () => {
-      controller.duplicateBlock(block);
-    }
+    icon: openEditorIcons.duplicate,
+    run: handlers.duplicate
   },
   {
     id: "delete",
     label: "Delete",
     group: "danger",
-    Icon: Trash2,
-    run: () => {
-      controller.deleteBlock(block);
-    }
+    icon: openEditorIcons.delete,
+    run: handlers.delete
   }
 ];
+var OpenEditorBlockMenuPopup = ({
+  actions,
+  anchor,
+  ariaLabel,
+  container,
+  onOpenChange,
+  open,
+  style,
+  trigger
+}) => /* @__PURE__ */ jsxs(Menu.Root, { modal: false, open, onOpenChange, children: [
+  trigger,
+  open ? /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      align: "start",
+      anchor,
+      collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+      collisionPadding: 12,
+      positionMethod: "fixed",
+      side: "bottom",
+      sideOffset: 8,
+      children: /* @__PURE__ */ jsx(Menu.Popup, { "aria-label": ariaLabel, className: "oe-block-menu", style, children: actions.map((action) => /* @__PURE__ */ jsxs(
+        Menu.Item,
+        {
+          className: "oe-block-menu-item",
+          "data-danger": action.group === "danger" ? "" : void 0,
+          disabled: action.disabled,
+          onClick: () => {
+            onOpenChange(false);
+            void action.run();
+          },
+          children: [
+            action.icon ? /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: action.icon, size: 15, strokeWidth: 2 }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-block-menu-icon-placeholder" }),
+            /* @__PURE__ */ jsx("span", { children: action.label })
+          ]
+        },
+        action.id
+      )) })
+    }
+  ) }) : null
+] });
 var OpenEditorBlockMenu = ({
   controller,
   className,
@@ -820,22 +950,15 @@ var OpenEditorBlockMenu = ({
   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)) {
+      if (!lastBlockRef.current) {
         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(
@@ -852,57 +975,47 @@ var OpenEditorBlockMenu = ({
       onDraggingChange: (dragging) => {
         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
+      children: activeBlock ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("oe-block-handle", className), children: /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: openEditorIcons.dragHandle, size: 16, strokeWidth: 2 }) }) : null
     }
   );
-  const actions = activeBlock ? [...builtInBlockActions(controller, activeBlock), ...controller.blockActions] : [];
-  return /* @__PURE__ */ jsxs(Menu.Root, { modal: false, open, onOpenChange: setMenuOpen, children: [
-    handle,
-    open && activeBlock ? /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
-      Menu.Positioner,
-      {
-        align: "start",
-        anchor: handleElementRef,
-        collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
-        collisionPadding: 12,
-        positionMethod: "fixed",
-        side: "bottom",
-        sideOffset: 8,
-        children: /* @__PURE__ */ jsx(
-          Menu.Popup,
-          {
-            "aria-label": activeBlock ? `Actions for ${activeBlock.blockName ?? activeBlock.nodeType} block` : "Block actions",
-            className: "oe-block-menu",
-            style: themeStyle,
-            children: actions.map((action, index) => {
-              const previous = actions[index - 1];
-              const Icon = action.Icon;
-              const context = { controller, block: activeBlock };
-              return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                previous && previous.group !== action.group ? /* @__PURE__ */ jsx(Menu.Separator, { className: "oe-block-menu-separator" }) : null,
-                /* @__PURE__ */ jsxs(
-                  Menu.Item,
-                  {
-                    className: "oe-block-menu-item",
-                    "data-danger": action.group === "danger" ? "" : void 0,
-                    disabled: action.disabled?.(context),
-                    onClick: () => {
-                      setMenuOpen(false);
-                      void action.run(context);
-                    },
-                    children: [
-                      Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", size: 15, strokeWidth: 2 }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-block-menu-icon-placeholder" }),
-                      /* @__PURE__ */ jsx("span", { children: action.label })
-                    ]
-                  }
-                )
-              ] }, action.id);
-            })
-          }
-        )
+  const actions = activeBlock ? [
+    ...createOpenEditorBuiltInBlockMenuActions({
+      canMove: (direction) => controller.canMoveBlock(direction, activeBlock),
+      move: (direction) => {
+        controller.moveBlock(direction, activeBlock);
+      },
+      copy: async () => {
+        await controller.copyBlock(activeBlock);
+      },
+      duplicate: () => {
+        controller.duplicateBlock(activeBlock);
+      },
+      delete: () => {
+        controller.deleteBlock(activeBlock);
       }
-    ) }) : null
-  ] });
+    }),
+    ...controller.blockActions.map((action) => {
+      const context = { controller, block: activeBlock };
+      return {
+        ...action,
+        disabled: action.disabled?.(context),
+        run: () => action.run(context)
+      };
+    })
+  ] : [];
+  return /* @__PURE__ */ jsx(
+    OpenEditorBlockMenuPopup,
+    {
+      actions,
+      anchor: handleElementRef,
+      ariaLabel: activeBlock ? `Actions for ${activeBlock.blockName ?? activeBlock.nodeType} block` : "Block actions",
+      container,
+      onOpenChange: setMenuOpen,
+      open: open && Boolean(activeBlock),
+      style: themeStyle,
+      trigger: handle
+    }
+  );
 };
 var OpenEditor = ({
   className = "oe-editor-surface",
@@ -922,6 +1035,6 @@ var OpenEditor = ({
   return theme ? /* @__PURE__ */ jsx(OpenEditorThemeProvider, { theme, children: editor }) : editor;
 };
 
-export { OpenEditor, OpenEditorBlockMenu, OpenEditorButton, OpenEditorInput, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorTableMenu, OpenEditorToggle, OpenEditorToggleGroup };
+export { OpenEditor, OpenEditorBlockMenu, OpenEditorBlockMenuPopup, OpenEditorButton, OpenEditorInput, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorTableMenu, OpenEditorToggle, OpenEditorToggleGroup, createOpenEditorBuiltInBlockMenuActions };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map