@openeditor/react 0.0.20 → 0.0.22

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

@@ -32944,10 +32944,11 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
       className: "oe-page",
       "data-page-id": snapshot?.pageId ?? "",
       onClick: (event) => {
-        if (event.target.closest(".oe-emoji-trigger")) return;
+        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 === " ")) {
           event.preventDefault();
           openPage();
@@ -33130,7 +33131,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,
@@ -33256,7 +33257,7 @@ var escapeClipboardHtml = (value) => value.replaceAll("&", "&").replaceAll("
 var useOpenEditorController = ({
   initialDocument = seedDocument,
   editable = true,
-  placeholder = "Start writing...",
+  placeholder = "Type '/' for commands",
   onChange,
   onFilePasteDrop,
   pageRuntime,
@@ -33650,20 +33651,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();
@@ -33675,6 +33684,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();
@@ -33688,12 +33698,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}`;
@@ -33835,6 +33847,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