@openeditor/ui 0.0.44 → 0.0.46

package/dist/index.js

@@ -12,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 } from 'react';
+import { useState, useRef, useEffect, useId, useMemo, useSyncExternalStore, Fragment as Fragment$1, useCallback } from 'react';
 
 // src/table-menu.tsx
 var runTableCommandOnMouseDown = (event, controller, command) => {
@@ -854,86 +854,181 @@ var OpenEditorSlashMenu = ({
     }
   ) }) });
 };
-var createOpenEditorBuiltInBlockMenuActions = (handlers) => [
-  {
-    id: "move-up",
-    label: "Move up",
-    group: "move",
-    icon: openEditorIcons.moveUp,
-    disabled: !handlers.canMove(-1),
-    run: () => handlers.move(-1)
-  },
-  {
-    id: "move-down",
-    label: "Move down",
-    group: "move",
-    icon: openEditorIcons.moveDown,
-    disabled: !handlers.canMove(1),
-    run: () => handlers.move(1)
-  },
-  {
-    id: "copy",
-    label: "Copy block",
-    group: "edit",
-    icon: openEditorIcons.copy,
-    run: handlers.copy
-  },
-  {
-    id: "duplicate",
-    label: "Duplicate",
-    group: "edit",
-    icon: openEditorIcons.duplicate,
-    run: handlers.duplicate
-  },
+var BlockMenuIcon = ({ item }) => item.icon ? /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", icon: item.icon, size: 15, strokeWidth: 2 }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-block-menu-icon-placeholder" });
+var BlockMenuAction = ({
+  action,
+  session
+}) => {
+  const snapshot = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+  const pending = snapshot.pendingItemId === action.id;
+  return /* @__PURE__ */ jsxs(
+    Menu.Item,
+    {
+      "aria-current": action.active || void 0,
+      "aria-describedby": action.disabledReason ? `${action.id}-reason` : void 0,
+      className: "oe-block-menu-item",
+      "data-active": action.active ? "" : void 0,
+      "data-danger": action.intent === "danger" ? "" : void 0,
+      disabled: action.disabled || Boolean(snapshot.pendingItemId),
+      label: action.label,
+      onClick: () => {
+        void session.run(action);
+      },
+      children: [
+        /* @__PURE__ */ jsx(BlockMenuIcon, { item: action }),
+        /* @__PURE__ */ jsx("span", { children: pending ? `${action.label}\u2026` : action.label }),
+        action.disabledReason ? /* @__PURE__ */ jsx("span", { className: "oe-visually-hidden", id: `${action.id}-reason`, children: action.disabledReason }) : null
+      ]
+    }
+  );
+};
+var BlockMenuPanel = ({
+  container,
+  item,
+  target,
+  session,
+  style
+}) => {
+  const snapshot = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+  const open = snapshot.open && snapshot.surface.type === "panel" && snapshot.surface.id === item.id;
+  const Panel = item.panel;
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      modal: false,
+      onOpenChange: (nextOpen) => {
+        if (nextOpen) session.openPanel(item.id);
+        else if (open) session.closeSurface();
+      },
+      open,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Popover.Trigger,
+          {
+            disabled: item.disabled,
+            nativeButton: false,
+            render: (triggerProps) => /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                ...triggerProps,
+                "aria-describedby": item.disabledReason ? `${item.id}-reason` : void 0,
+                className: "oe-block-menu-item",
+                closeOnClick: false,
+                label: item.label,
+                role: "menuitem"
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsx(BlockMenuIcon, { item }),
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              item.disabledReason ? /* @__PURE__ */ jsx("span", { className: "oe-visually-hidden", id: `${item.id}-reason`, children: item.disabledReason }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(
+          Popover.Positioner,
+          {
+            align: "start",
+            collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+            collisionPadding: 12,
+            positionMethod: "fixed",
+            side: "right",
+            sideOffset: 8,
+            children: /* @__PURE__ */ jsx(Popover.Popup, { "aria-label": item.label, className: "oe-block-menu-panel", role: "dialog", style, children: /* @__PURE__ */ jsx(Panel, { target, close: () => session.closeSurface() }) })
+          }
+        ) })
+      ]
+    }
+  );
+};
+var BlockMenuSubmenu = ({
+  container,
+  item,
+  target,
+  session,
+  style
+}) => /* @__PURE__ */ jsxs(
+  Menu.SubmenuRoot,
   {
-    id: "delete",
-    label: "Delete",
-    group: "danger",
-    icon: openEditorIcons.delete,
-    run: handlers.delete
+    onOpenChange: (open) => {
+      if (open) session.openSubmenu(item.id);
+      else session.closeSurface();
+    },
+    children: [
+      /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, { "aria-describedby": item.disabledReason ? `${item.id}-reason` : void 0, className: "oe-block-menu-item", disabled: item.disabled, label: item.label, children: [
+        /* @__PURE__ */ jsx(BlockMenuIcon, { item }),
+        /* @__PURE__ */ jsx("span", { children: item.label }),
+        item.disabledReason ? /* @__PURE__ */ jsx("span", { className: "oe-visually-hidden", id: `${item.id}-reason`, children: item.disabledReason }) : null,
+        /* @__PURE__ */ jsx(HugeiconsIcon, { "aria-hidden": "true", className: "oe-block-menu-chevron", icon: openEditorIcons.chevronRight, size: 13, strokeWidth: 2 })
+      ] }),
+      /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(Menu.Positioner, { align: "start", collisionPadding: 12, positionMethod: "fixed", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Menu.Popup, { "aria-label": item.label, className: "oe-block-menu", style, children: item.children.map((child) => /* @__PURE__ */ jsx(BlockMenuItem, { container, item: child, session, style, target }, child.id)) }) }) })
+    ]
   }
-];
-var OpenEditorBlockMenuPopup = ({
-  actions,
+);
+var BlockMenuItem = ({
+  container,
+  item,
+  target,
+  session,
+  style
+}) => {
+  if (item.type === "action") return /* @__PURE__ */ jsx(BlockMenuAction, { action: item, session });
+  if (item.type === "panel") return /* @__PURE__ */ jsx(BlockMenuPanel, { container, item, session, style, target });
+  return /* @__PURE__ */ jsx(BlockMenuSubmenu, { container, item, session, style, target });
+};
+var OpenEditorResolvedBlockMenuView = ({
+  resolver,
+  session,
   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,
+}) => {
+  const snapshot = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+  const targetSnapshot = useSyncExternalStore(resolver.target.subscribe, resolver.target.getSnapshot, resolver.target.getSnapshot);
+  const menu = resolver.resolve();
+  useEffect(() => {
+    if (snapshot.open && !targetSnapshot) session.close();
+  }, [session, snapshot.open, targetSnapshot]);
+  return /* @__PURE__ */ jsxs(
+    Menu.Root,
     {
-      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
-      )) })
+      modal: false,
+      onOpenChange: (open) => {
+        if (!open) session.close();
+      },
+      onOpenChangeComplete: (open) => {
+        if (open) return;
+        const anchorElement = anchor instanceof HTMLElement ? anchor : anchor && "current" in anchor ? anchor.current : null;
+        anchorElement?.focus();
+      },
+      open: snapshot.open,
+      children: [
+        trigger,
+        snapshot.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__ */ jsxs(Menu.Popup, { "aria-label": ariaLabel, className: "oe-block-menu", style, children: [
+              menu.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu.Separator, { className: "oe-block-menu-separator" }) : null,
+                section.items.map((item) => /* @__PURE__ */ jsx(BlockMenuItem, { container, item, session, style, target: menu.target }, item.id))
+              ] }, section.id)),
+              snapshot.error ? /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "oe-block-menu-error", role: "status", children: "The action failed. Try again." }) : null
+            ] })
+          }
+        ) }) : null
+      ]
     }
-  ) }) : null
-] });
+  );
+};
 var OpenEditorBlockMenu = ({
   controller,
   className,
@@ -942,24 +1037,36 @@ var OpenEditorBlockMenu = ({
   const interaction = useOpenEditorBlockInteraction(controller);
   const block = interaction.activeBlock;
   const themeStyle = useOpenEditorThemeStyle();
-  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 session = controller.blockMenu.session;
+  const sessionState = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+  const previousOpenRef = useRef(sessionState.open);
+  useEffect(() => {
+    let focusTimer;
+    if (previousOpenRef.current && !sessionState.open) {
+      focusTimer = setTimeout(() => {
+        if (handleElementRef.current?.isConnected) handleElementRef.current.focus();
+      });
+    }
+    previousOpenRef.current = sessionState.open;
+    return () => {
+      if (focusTimer) clearTimeout(focusTimer);
+    };
+  }, [sessionState.open]);
+  if (block && !sessionState.open) lastBlockRef.current = block;
+  const activeBlock = sessionState.target ?? block;
   const setMenuOpen = useCallback((nextOpen) => {
     if (nextOpen) {
       if (!lastBlockRef.current) {
-        setOpen(false);
+        session.close();
         return;
       }
-      setOpen(true);
+      session.open(lastBlockRef.current);
       return;
     }
-    setOpen(false);
-  }, []);
+    session.close();
+  }, [session]);
   if (!controller.editable) return null;
   const handle = /* @__PURE__ */ jsx(
     OpenEditorBlockDragHandle,
@@ -968,9 +1075,9 @@ var OpenEditorBlockMenu = ({
       className: "oe-block-handle-anchor",
       controller,
       elementRef: handleElementRef,
-      expanded: open,
+      expanded: sessionState.open,
       onActivate: () => {
-        setMenuOpen(!open);
+        setMenuOpen(!sessionState.open);
       },
       onDraggingChange: (dragging) => {
         if (dragging) setMenuOpen(false);
@@ -978,44 +1085,21 @@ var OpenEditorBlockMenu = ({
       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 ? [
-    ...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);
+  const resolver = activeBlock ? controller.blockMenu.resolve(activeBlock) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    handle,
+    resolver ? /* @__PURE__ */ jsx(
+      OpenEditorResolvedBlockMenuView,
+      {
+        resolver,
+        session,
+        anchor: handleElementRef,
+        ariaLabel: activeBlock ? `Actions for ${activeBlock.blockName ?? activeBlock.nodeType} block` : "Block actions",
+        container,
+        style: themeStyle
       }
-    }),
-    ...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
-    }
-  );
+    ) : null
+  ] });
 };
 var OpenEditor = ({
   className = "oe-editor-surface",
@@ -1035,6 +1119,6 @@ var OpenEditor = ({
   return theme ? /* @__PURE__ */ jsx(OpenEditorThemeProvider, { theme, children: editor }) : editor;
 };
 
-export { OpenEditor, OpenEditorBlockMenu, OpenEditorBlockMenuPopup, OpenEditorButton, OpenEditorInput, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorTableMenu, OpenEditorToggle, OpenEditorToggleGroup, createOpenEditorBuiltInBlockMenuActions };
+export { OpenEditor, OpenEditorBlockMenu, OpenEditorButton, OpenEditorInput, OpenEditorResolvedBlockMenuView, OpenEditorSelectionBubble, OpenEditorSlashMenu, OpenEditorTableMenu, OpenEditorToggle, OpenEditorToggleGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map