@openeditor/react 0.0.21 → 0.0.23

package/README.md

@@ -66,6 +66,7 @@ Keep the extension array referentially stable. Defining extensions at module
 scope, as below, is the simplest option.
 
 ```tsx
+import { PackageOpen } from "lucide-react";
 import {
   defineOpenEditorReactNode,
   NodeViewWrapper,
@@ -113,7 +114,11 @@ const productCard = defineOpenEditorReactNode({
     ],
   },
   component: ProductCardNode,
-  slashMenu: { keywords: ["product", "commerce", "card"] },
+  slashMenu: {
+    icon: PackageOpen,
+    keywords: ["product", "commerce", "card"],
+    order: 250,
+  },
   viewer: ({ node }) => <article>{String(node.attrs?.title ?? "")}</article>,
   exporters: {
     html: {
@@ -138,6 +143,14 @@ Pass the same extension array to `OpenEditorViewer`. The controller automaticall
 uses registered exporters for `controller.exports` and registered blocks appear
 in `getDefaultSlashMenuItems`, which powers `@openeditor/ui`.
 
+Slash-menu entries accept an optional React `icon` component and numeric `order`.
+OpenEditor assigns built-in entries orders in increments of 100, so consumer
+blocks can be placed between them (for example, `order: 250` appears between
+Heading 1 and Heading 2). Entries with the same order retain their declaration
+order, and entries without an order appear after ordered entries. The same fields
+are available on direct `slashMenuItems`; a menu's explicit `items` prop is also
+sorted by this rule.
+
 Block `name` is the stable public identifier. Namespace consumer blocks to avoid
 collisions. `nodeType` is the serialized ProseMirror node type and defaults to
 `name`; use an identifier without punctuation when interoperability requires it.

package/dist/index.d.ts

@@ -142,11 +142,20 @@ type SelectionBubbleState = {
     top: number;
     anchorRect?: OpenEditorOverlayRect;
 };
+type OpenEditorSlashMenuIconProps = {
+    "aria-hidden"?: boolean;
+    className?: string;
+    size?: number;
+    strokeWidth?: number;
+};
+type OpenEditorSlashMenuIcon = (props: OpenEditorSlashMenuIconProps) => ReactNode;
 type OpenEditorSlashMenuItem = {
     key: string;
     label: string;
     group: string;
+    icon?: OpenEditorSlashMenuIcon;
     keywords?: readonly string[];
+    order?: number;
     execute: (context: {
         controller: OpenEditorController;
         range: InsertRange;
@@ -159,7 +168,9 @@ type OpenEditorViewerRenderer = (context: {
 type OpenEditorExtensionMenu = {
     label?: string;
     group?: string;
+    icon?: OpenEditorSlashMenuIcon;
     keywords?: readonly string[];
+    order?: number;
 };
 /**
  * Complete web integration for a consumer-owned block. The portable `block`
@@ -197,9 +208,10 @@ declare module "@tiptap/core" {
 }
 declare const formatAttachmentSize: (size: number | null) => string;
 declare const useOpenEditorController: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
+declare const sortSlashMenuItems: (items: readonly OpenEditorSlashMenuItem[]) => OpenEditorSlashMenuItem[];
 declare const getDefaultSlashMenuItems: (controller: OpenEditorController) => OpenEditorSlashMenuItem[];
 declare const OpenEditorContent: ({ controller, className, }: OpenEditorContentProps) => react.JSX.Element;
 declare const OpenEditorViewer: ({ document, className, renderers, extensions, pageRuntime, attachmentRuntime, }: OpenEditorViewerProps) => react.JSX.Element;
 declare const useOpenEditor: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
 
-export { type InsertRange, type OpenEditorBlockAction, type OpenEditorBlockActionContext, type OpenEditorBlockTarget, OpenEditorContent, type OpenEditorContentProps, type OpenEditorController, type OpenEditorExtensionMenu, type OpenEditorOverlayRect, type OpenEditorPageRuntime, type OpenEditorPageSnapshot, type OpenEditorReactConfig, type OpenEditorReactExtension, type OpenEditorReactNodeExtension, type OpenEditorReactProps, type OpenEditorSlashMenuItem, type OpenEditorTheme, OpenEditorThemeProvider, type OpenEditorThemeStyle, type OpenEditorThemeToken, OpenEditorViewer, type OpenEditorViewerProps, type OpenEditorViewerRenderer, type SelectionBubbleState, type SlashState, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultSlashMenuItems, openEditorThemeTokenNames, useOpenEditor, useOpenEditorController, useOpenEditorThemeStyle };
+export { type InsertRange, type OpenEditorBlockAction, type OpenEditorBlockActionContext, type OpenEditorBlockTarget, OpenEditorContent, type OpenEditorContentProps, type OpenEditorController, type OpenEditorExtensionMenu, type OpenEditorOverlayRect, type OpenEditorPageRuntime, type OpenEditorPageSnapshot, type OpenEditorReactConfig, type OpenEditorReactExtension, type OpenEditorReactNodeExtension, type OpenEditorReactProps, type OpenEditorSlashMenuIcon, type OpenEditorSlashMenuIconProps, type OpenEditorSlashMenuItem, type OpenEditorTheme, OpenEditorThemeProvider, type OpenEditorThemeStyle, type OpenEditorThemeToken, OpenEditorViewer, type OpenEditorViewerProps, type OpenEditorViewerRenderer, type SelectionBubbleState, type SlashState, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultSlashMenuItems, openEditorThemeTokenNames, sortSlashMenuItems, useOpenEditor, useOpenEditorController, useOpenEditorThemeStyle };

package/dist/index.js

@@ -32904,15 +32904,34 @@ var pageSnapshotFromNode = (node) => {
     href: typeof node.attrs?.href === "string" ? node.attrs.href : null
   };
 };
+var useResolvedPageSnapshot = (cached, runtime) => {
+  const [resolved, setResolved] = useState(null);
+  useEffect(() => {
+    let active = true;
+    setResolved(null);
+    if (cached?.pageId && runtime?.resolvePage) {
+      void runtime.resolvePage(cached.pageId).then((page) => {
+        if (active && page) setResolved(page);
+      }).catch(() => {
+        if (active) setResolved(null);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [cached?.pageId, runtime]);
+  return [resolved ?? cached, setResolved];
+};
 var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes2 }) => {
   const runtime = use(OpenEditorPageRuntimeContext);
   const themeStyle = useOpenEditorThemeStyle();
   const [creating, setCreating] = useState(false);
   const [error, setError] = useState(null);
-  const snapshot = pageSnapshotFromNode(node);
-  const icon = normalizeEmoji(node.attrs.icon, DEFAULT_PAGE_EMOJI);
+  const cached = pageSnapshotFromNode(node);
+  const [page, setResolvedPage] = useResolvedPageSnapshot(cached, runtime);
+  const icon = normalizeEmoji(page?.icon, DEFAULT_PAGE_EMOJI);
   const openPage = () => {
-    if (snapshot) void runtime?.openPage?.(snapshot);
+    if (page) void runtime?.openPage?.(page);
   };
   const createPage = async () => {
     if (!runtime?.createPage || creating) return;
@@ -32929,10 +32948,11 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
   };
   const updateIcon = async (nextIcon) => {
     updateAttributes2({ icon: nextIcon });
-    if (!snapshot?.pageId || !runtime?.updatePageIcon) return;
+    if (!page?.pageId || !runtime?.updatePageIcon) return;
+    setResolvedPage({ ...page, icon: nextIcon });
     setError(null);
     try {
-      await runtime.updatePageIcon(snapshot.pageId, nextIcon);
+      await runtime.updatePageIcon(page.pageId, nextIcon);
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "Could not update the page icon.");
     }
@@ -32940,22 +32960,22 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
   return /* @__PURE__ */ jsxs(
     NodeViewWrapper,
     {
-      "aria-label": snapshot ? `Open ${snapshot.title}` : void 0,
+      "aria-label": page ? `Open ${page.title}` : void 0,
       className: "oe-page",
-      "data-page-id": snapshot?.pageId ?? "",
+      "data-page-id": page?.pageId ?? "",
       onClick: (event) => {
         if (event.target.closest(".oe-emoji-trigger, .oe-emoji-popover")) return;
         openPage();
       },
       onKeyDown: (event) => {
         if (event.target.closest(".oe-emoji-trigger, .oe-emoji-popover")) return;
-        if (snapshot && (event.key === "Enter" || event.key === " ")) {
+        if (page && (event.key === "Enter" || event.key === " ")) {
           event.preventDefault();
           openPage();
         }
       },
-      role: snapshot ? "button" : void 0,
-      tabIndex: snapshot ? 0 : void 0,
+      role: page ? "button" : void 0,
+      tabIndex: page ? 0 : void 0,
       children: [
         /* @__PURE__ */ jsx("span", { contentEditable: false, children: /* @__PURE__ */ jsx(
           OpenEditorEmojiPicker,
@@ -32968,7 +32988,7 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
             onEmojiSelect: (nextIcon) => void updateIcon(nextIcon)
           }
         ) }),
-        /* @__PURE__ */ jsx(
+        page && page !== cached ? /* @__PURE__ */ jsx("div", { className: "oe-page-title", contentEditable: false, children: page.title }) : /* @__PURE__ */ jsx(
           NodeViewContent,
           {
             as: "div",
@@ -32976,7 +32996,7 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
             contentEditable: false
           }
         ),
-        !snapshot && runtime?.createPage && editor.isEditable ? /* @__PURE__ */ jsx(
+        !page && runtime?.createPage && editor.isEditable ? /* @__PURE__ */ jsx(
           "button",
           {
             className: "oe-page-action",
@@ -33015,20 +33035,7 @@ var Page = Node3.create({
 var OpenEditorPageViewer = ({ node }) => {
   const runtime = use(OpenEditorPageRuntimeContext);
   const cached = pageSnapshotFromNode(node);
-  const [resolved, setResolved] = useState(null);
-  useEffect(() => {
-    let active = true;
-    setResolved(null);
-    if (cached?.pageId && runtime?.resolvePage) {
-      void runtime.resolvePage(cached.pageId).then((page2) => {
-        if (active && page2) setResolved(page2);
-      });
-    }
-    return () => {
-      active = false;
-    };
-  }, [cached?.pageId, runtime]);
-  const page = resolved ?? cached;
+  const [page] = useResolvedPageSnapshot(cached, runtime);
   const title = page?.title ?? (getNodeText(node) || "Untitled");
   const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("span", { className: "oe-page-icon", "aria-hidden": "true", children: normalizeEmoji(page?.icon, DEFAULT_PAGE_EMOJI) }),
@@ -33131,7 +33138,7 @@ var createEditorExtensions = (placeholder, customExtensions) => [
   index_default6,
   index_default5,
   index_default10.configure({ types: ["heading", "paragraph"] }),
-  index_default4.configure({ placeholder }),
+  index_default4.configure({ placeholder, showOnlyCurrent: true }),
   Columns,
   Column,
   ToggleList,
@@ -33257,7 +33264,7 @@ var escapeClipboardHtml = (value) => value.replaceAll("&", "&").replaceAll("
 var useOpenEditorController = ({
   initialDocument = seedDocument,
   editable = true,
-  placeholder = "Start writing...",
+  placeholder = "Type '/' for commands",
   onChange,
   onFilePasteDrop,
   pageRuntime,
@@ -33651,20 +33658,28 @@ var useOpenEditorController = ({
   };
   return controller;
 };
+var sortSlashMenuItems = (items) => [...items].sort((left, right) => {
+  const leftOrder = typeof left.order === "number" && Number.isFinite(left.order) ? left.order : Number.POSITIVE_INFINITY;
+  const rightOrder = typeof right.order === "number" && Number.isFinite(right.order) ? right.order : Number.POSITIVE_INFINITY;
+  if (leftOrder === rightOrder) return 0;
+  return leftOrder - rightOrder;
+});
 var getDefaultSlashMenuItems = (controller) => {
   const internalController = controller;
-  return [
-    ...openEditorInsertPresets.map((preset) => ({
+  return sortSlashMenuItems([
+    ...openEditorInsertPresets.map((preset, index) => ({
       key: preset.key,
       label: preset.label,
       group: preset.group,
       keywords: [preset.key],
+      order: (index + 1) * 100,
       execute: ({ controller: current, range }) => current.insertBlock(preset.key, range)
     })),
     {
       key: "moveBlockUp",
       label: "Move Block Up",
       group: "block",
+      order: (openEditorInsertPresets.length + 1) * 100,
       execute: ({ range }) => {
         if (!internalController.editor) return false;
         internalController.editor.chain().focus().deleteRange(range).run();
@@ -33676,6 +33691,7 @@ var getDefaultSlashMenuItems = (controller) => {
       key: "moveBlockDown",
       label: "Move Block Down",
       group: "block",
+      order: (openEditorInsertPresets.length + 2) * 100,
       execute: ({ range }) => {
         if (!internalController.editor) return false;
         internalController.editor.chain().focus().deleteRange(range).run();
@@ -33689,12 +33705,14 @@ var getDefaultSlashMenuItems = (controller) => {
         key: extension.block.name,
         label: menu?.label ?? extension.block.label,
         group: menu?.group ?? extension.block.group,
+        icon: menu?.icon,
         keywords: menu?.keywords ?? [extension.block.name],
+        order: menu?.order,
         execute: ({ controller: current, range }) => current.insertBlock(extension.block.name, range)
       };
     }),
     ...controller.slashMenuItems
-  ];
+  ]);
 };
 var renderTextWithMarks = (text, marks = [], key) => marks.reduceRight((children, mark, index) => {
   const nodeKey = `${key}-${mark.type}-${index}`;
@@ -33836,6 +33854,6 @@ var OpenEditorViewer = ({
 };
 var useOpenEditor = useOpenEditorController;
 
-export { NodeViewContent, NodeViewWrapper, OpenEditorContent, DragHandle2 as OpenEditorDragHandle, OpenEditorThemeProvider, OpenEditorViewer, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultSlashMenuItems, openEditorThemeTokenNames, useOpenEditor, useOpenEditorController, useOpenEditorThemeStyle };
+export { NodeViewContent, NodeViewWrapper, OpenEditorContent, DragHandle2 as OpenEditorDragHandle, OpenEditorThemeProvider, OpenEditorViewer, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultSlashMenuItems, openEditorThemeTokenNames, sortSlashMenuItems, useOpenEditor, useOpenEditorController, useOpenEditorThemeStyle };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map