neuphlo-editor 1.8.2 → 2.0.0

package/dist/headless/index.cjs

@@ -42,17 +42,17 @@ __export(headless_exports, {
   EditorRoot: () => EditorRoot,
   MentionCommand: () => MentionCommand,
   Placeholder: () => import_extension_placeholder.Placeholder,
-  SlashCommand: () => Command2,
+  SlashCommand: () => Command,
   StarterKit: () => import_starter_kit.StarterKit,
   createMentionExtension: () => createMentionExtension,
   createSuggestionItems: () => createSuggestionItems,
   handleCommandNavigation: () => handleCommandNavigation,
   renderMentionSuggestion: () => renderMentionSuggestion,
   renderSlashCommandItems: () => renderItems,
-  useEditor: () => import_react13.useCurrentEditor
+  useEditor: () => import_react12.useCurrentEditor
 });
 module.exports = __toCommonJS(headless_exports);
-var import_react13 = require("@tiptap/react");
+var import_react12 = require("@tiptap/react");
 
 // src/headless/components/editor.tsx
 var import_react = require("@tiptap/react");
@@ -122,109 +122,178 @@ EditorBubbleItem.displayName = "EditorBubbleItem";
 // src/headless/components/editor-command.tsx
 var import_jotai4 = require("jotai");
 var import_react6 = require("react");
-var import_cmdk = require("cmdk");
+var import_react_dom = require("react-dom");
 
 // src/headless/utils/atoms.ts
 var import_jotai3 = require("jotai");
 var queryAtom = (0, import_jotai3.atom)("");
 var rangeAtom = (0, import_jotai3.atom)(null);
+var slashMenuOpenAtom = (0, import_jotai3.atom)(false);
+var slashMenuRectAtom = (0, import_jotai3.atom)(null);
 
 // src/headless/components/editor-command.tsx
-var import_tunnel_rat = __toESM(require("tunnel-rat"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var commandTunnel = (0, import_tunnel_rat.default)();
-var EditorCommandOut = ({
-  query,
-  range
-}) => {
-  const setQuery = (0, import_jotai4.useSetAtom)(queryAtom, { store: novelStore });
-  const setRange = (0, import_jotai4.useSetAtom)(rangeAtom, { store: novelStore });
-  (0, import_react6.useEffect)(() => {
-    setQuery(query);
-  }, [query, setQuery]);
-  (0, import_react6.useEffect)(() => {
-    setRange(range);
-  }, [range, setRange]);
-  (0, import_react6.useEffect)(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-    const onKeyDown = (e) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-        const commandRef = document.querySelector("#slash-command");
-        if (commandRef)
-          commandRef.dispatchEvent(
-            new KeyboardEvent("keydown", {
-              key: e.key,
-              cancelable: true,
-              bubbles: true
-            })
-          );
-        return false;
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(commandTunnel.Out, {});
-};
-var CommandAny = import_cmdk.Command;
+var EditorCommandOut = () => null;
 var EditorCommand = (0, import_react6.forwardRef)(
   ({ children, className, ...rest }, ref) => {
-    const [query, setQuery] = (0, import_jotai4.useAtom)(queryAtom);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(commandTunnel.In, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      CommandAny,
-      {
-        ref,
-        onKeyDown: (e) => {
-          e.stopPropagation();
-        },
-        id: "slash-command",
-        className,
-        ...rest,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            CommandAny.Input,
-            {
-              value: query,
-              onValueChange: setQuery,
-              style: { display: "none" }
-            }
-          ),
-          children
-        ]
+    const isOpen = (0, import_jotai4.useAtomValue)(slashMenuOpenAtom, { store: novelStore });
+    const rect = (0, import_jotai4.useAtomValue)(slashMenuRectAtom, { store: novelStore });
+    const containerRef = (0, import_react6.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
+    const contentRef = (0, import_react6.useRef)(null);
+    const query = (0, import_jotai4.useAtomValue)(queryAtom, { store: novelStore });
+    (0, import_react6.useEffect)(() => {
+      setActiveIndex(0);
+    }, [query]);
+    if (typeof document !== "undefined" && !containerRef.current) {
+      const el = document.createElement("div");
+      el.style.position = "fixed";
+      el.style.zIndex = "9999";
+      el.style.minWidth = "240px";
+      el.style.display = "none";
+      containerRef.current = el;
+    }
+    (0, import_react6.useEffect)(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      document.body.appendChild(el);
+      return () => {
+        el.remove();
+      };
+    }, []);
+    (0, import_react6.useLayoutEffect)(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      if (!isOpen || !rect) {
+        container.style.display = "none";
+        return;
+      }
+      container.style.display = "";
+      const menuHeight = container.offsetHeight || 360;
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let top;
+      if (spaceBelow < menuHeight + 16 && spaceAbove > spaceBelow) {
+        top = Math.round(rect.top - menuHeight - 8);
+        if (top < 8) top = 8;
+      } else {
+        top = Math.round(rect.bottom + 8);
       }
-    ) });
+      let left = Math.round(rect.left);
+      const menuWidth = container.offsetWidth || 280;
+      if (left + menuWidth > window.innerWidth - 8) {
+        left = window.innerWidth - menuWidth - 8;
+      }
+      if (left < 8) left = 8;
+      container.style.top = `${top}px`;
+      container.style.left = `${left}px`;
+    }, [isOpen, rect]);
+    const handleKeyDown = (0, import_react6.useCallback)(
+      (e) => {
+        if (!isOpen || !contentRef.current) return;
+        const items = contentRef.current.querySelectorAll("[role='option']");
+        if (items.length === 0) return;
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = Math.min(prev + 1, items.length - 1);
+            items[next]?.scrollIntoView({ block: "nearest" });
+            return next;
+          });
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = Math.max(prev - 1, 0);
+            items[next]?.scrollIntoView({ block: "nearest" });
+            return next;
+          });
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          const activeItem = items[activeIndex];
+          activeItem?.click();
+        }
+      },
+      [isOpen, activeIndex]
+    );
+    (0, import_react6.useEffect)(() => {
+      if (!isOpen) return;
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, handleKeyDown]);
+    (0, import_react6.useEffect)(() => {
+      if (!contentRef.current) return;
+      const items = contentRef.current.querySelectorAll("[role='option']");
+      items.forEach((item, i) => {
+        if (i === activeIndex) {
+          item.setAttribute("aria-selected", "true");
+        } else {
+          item.removeAttribute("aria-selected");
+        }
+      });
+    });
+    if (!isOpen || !containerRef.current) return null;
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          ref: (el) => {
+            contentRef.current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) ref.current = el;
+          },
+          id: "slash-command",
+          className,
+          ...rest,
+          children
+        }
+      ),
+      containerRef.current
+    );
+  }
+);
+var EditorCommandList = (0, import_react6.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, role: "listbox", ...rest, children });
   }
 );
-var EditorCommandList = import_cmdk.Command.List;
 EditorCommand.displayName = "EditorCommand";
+EditorCommandList.displayName = "EditorCommandList";
 
 // src/headless/components/editor-command-item.tsx
 var import_react7 = require("react");
-var import_cmdk2 = require("cmdk");
 var import_react8 = require("@tiptap/react");
 var import_jotai5 = require("jotai");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var CommandItemAny = import_cmdk2.CommandItem;
-var CommandEmptyAny = import_cmdk2.CommandEmpty;
-var EditorCommandItem = (0, import_react7.forwardRef)(({ children, onCommand, ...rest }, ref) => {
+var EditorCommandItem = (0, import_react7.forwardRef)(({ children, onCommand, value, className, ...rest }, ref) => {
   const { editor } = (0, import_react8.useCurrentEditor)();
-  const range = (0, import_jotai5.useAtomValue)(rangeAtom);
+  const range = (0, import_jotai5.useAtomValue)(rangeAtom, { store: novelStore });
+  const query = (0, import_jotai5.useAtomValue)(queryAtom, { store: novelStore });
   if (!editor || !range) return null;
+  if (query && value) {
+    const searchText = value.toLowerCase();
+    const q = query.toLowerCase();
+    if (!searchText.includes(q)) return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    CommandItemAny,
+    "div",
     {
       ref,
+      role: "option",
+      className,
+      onClick: () => onCommand({ editor, range }),
       ...rest,
-      onSelect: () => onCommand({ editor, range }),
       children
     }
   );
 });
 EditorCommandItem.displayName = "EditorCommandItem";
-var EditorCommandEmpty = CommandEmptyAny;
+var EditorCommandEmpty = (0, import_react7.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, ...rest, children });
+  }
+);
+EditorCommandEmpty.displayName = "EditorCommandEmpty";
 
 // src/headless/extensions/index.ts
 var import_starter_kit = require("@tiptap/starter-kit");
@@ -674,10 +743,9 @@ var renderMentionSuggestion = () => {
 };
 
 // src/headless/extensions/slash-command.tsx
-var import_react12 = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
 var import_core = require("@tiptap/core");
-var Command2 = import_core.Extension.create({
+var Command = import_core.Extension.create({
   name: "slash-command",
   addOptions() {
     return {
@@ -695,7 +763,6 @@ var Command2 = import_core.Extension.create({
       (0, import_suggestion.default)({
         editor: this.editor,
         char: base.char ?? "/",
-        // Only trigger slash command at start of line or after whitespace
         startOfLine: base.startOfLine ?? true,
         items: base.items ?? (() => ["/"]),
         command: (ctx) => {
@@ -703,76 +770,72 @@ var Command2 = import_core.Extension.create({
             ctx.props.command({ editor: ctx.editor, range: ctx.range });
           }
         },
-        ...base
+        ...base,
+        render: () => {
+          return {
+            onStart: (props) => {
+              const { selection } = props.editor.state;
+              const parentNode = selection.$from.node(selection.$from.depth);
+              const blockType = parentNode.type.name;
+              if (blockType === "codeBlock") return false;
+              const { $from } = selection;
+              const marks = $from.marks();
+              if (marks.some((mark) => mark.type.name === "code" || mark.type.name === "link")) {
+                return false;
+              }
+              novelStore.set(queryAtom, props.query ?? "");
+              novelStore.set(rangeAtom, props.range ?? null);
+              novelStore.set(slashMenuOpenAtom, true);
+              const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+              novelStore.set(slashMenuRectAtom, rect);
+            },
+            onUpdate: (props) => {
+              novelStore.set(queryAtom, props.query ?? "");
+              novelStore.set(rangeAtom, props.range ?? null);
+              const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+              novelStore.set(slashMenuRectAtom, rect);
+            },
+            onKeyDown: ({ event }) => {
+              if (event.key === "Escape") {
+                novelStore.set(slashMenuOpenAtom, false);
+                return true;
+              }
+              if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+                const slashCommand = document.querySelector("#slash-command");
+                if (slashCommand) {
+                  slashCommand.dispatchEvent(
+                    new KeyboardEvent("keydown", {
+                      key: event.key,
+                      cancelable: true,
+                      bubbles: true
+                    })
+                  );
+                  return true;
+                }
+              }
+              return false;
+            },
+            onExit: () => {
+              novelStore.set(slashMenuOpenAtom, false);
+              novelStore.set(queryAtom, "");
+              novelStore.set(rangeAtom, null);
+              novelStore.set(slashMenuRectAtom, null);
+            }
+          };
+        }
       })
     ];
   }
 });
-var renderItems = (elementRef) => {
-  let component = null;
-  let container = null;
-  const destroy = () => {
-    component?.destroy();
-    component = null;
-    if (container) {
-      container.remove();
-      container = null;
-    }
-  };
-  const updatePosition = (clientRect) => {
-    if (!container || !clientRect) return;
-    const top = Math.round(clientRect.bottom + 8);
-    const left = Math.round(clientRect.left);
-    container.style.top = `${top}px`;
-    container.style.left = `${left}px`;
-  };
-  return {
-    onStart: (props) => {
-      const { selection } = props.editor.state;
-      const parentNode = selection.$from.node(selection.$from.depth);
-      const blockType = parentNode.type.name;
-      if (blockType === "codeBlock") return false;
-      const { $from } = selection;
-      const marks = $from.marks();
-      if (marks.some((mark) => mark.type.name === "code" || mark.type.name === "link")) {
-        return false;
-      }
-      component = new import_react12.ReactRenderer(EditorCommandOut, {
-        props: {
-          query: props.query ?? "",
-          range: props.range
-        },
-        editor: props.editor
-      });
-      container = document.createElement("div");
-      container.style.position = "fixed";
-      container.style.zIndex = "9999";
-      container.style.minWidth = "240px";
-      (elementRef?.current ?? document.body).appendChild(container);
-      container.appendChild(component.element);
-      const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
-      if (rect) updatePosition(rect);
-    },
-    onUpdate: (props) => {
-      component?.updateProps({
-        query: props.query ?? "",
-        range: props.range
-      });
-      const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
-      if (rect) updatePosition(rect);
-    },
-    onKeyDown: ({ event }) => {
-      if (event.key === "Escape") {
-        destroy();
-        return true;
-      }
-      return false;
-    },
-    onExit: () => {
-      destroy();
-    }
-  };
-};
+var renderItems = () => ({
+  onStart: () => {
+  },
+  onUpdate: () => {
+  },
+  onKeyDown: () => false,
+  onExit: () => {
+  }
+});
 var createSuggestionItems = (items) => items;
 var handleCommandNavigation = (event) => {
   if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {