neuphlo-editor 1.6.1 → 1.6.3

package/dist/chunk-I3CL5OVL.js

@@ -0,0 +1,977 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all2) => {
+  for (var name in all2)
+    __defProp(target, name, { get: all2[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+// src/headless/index.ts
+import { useCurrentEditor as useCurrentEditor4 } from "@tiptap/react";
+
+// src/headless/components/editor.tsx
+import { EditorProvider } from "@tiptap/react";
+import { forwardRef } from "react";
+import { Provider } from "jotai";
+
+// src/headless/utils/store.ts
+var store_exports = {};
+__export(store_exports, {
+  novelStore: () => novelStore
+});
+__reExport(store_exports, jotai_star);
+import { createStore } from "jotai";
+import * as jotai_star from "jotai";
+var novelStore = createStore();
+
+// src/headless/components/editor.tsx
+import { jsx } from "react/jsx-runtime";
+var EditorRoot = ({ children }) => {
+  return /* @__PURE__ */ jsx(Provider, { store: novelStore, children });
+};
+var EditorContent = forwardRef(
+  ({ className, children, initialContent, content, ...rest }, ref) => {
+    const effectiveContent = content ?? initialContent;
+    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(EditorProvider, { ...rest, content: effectiveContent, children }) });
+  }
+);
+EditorContent.displayName = "EditorContent";
+
+// src/headless/components/editor-bubble.tsx
+import { useCurrentEditor } from "@tiptap/react";
+import { BubbleMenu as BubbleMenuReact } from "@tiptap/react/menus";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EditorBubble({ className, children, ...rest }) {
+  const { editor } = useCurrentEditor();
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx2(BubbleMenuReact, { editor, ...rest, children: /* @__PURE__ */ jsx2("div", { className, children }) });
+}
+
+// src/headless/components/editor-bubble-item.tsx
+import { forwardRef as forwardRef2, isValidElement, cloneElement } from "react";
+import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var EditorBubbleItem = forwardRef2(({ children, asChild, onSelect, ...rest }, ref) => {
+  const { editor } = useCurrentEditor2();
+  if (!editor) return null;
+  const handleClick = (e) => {
+    e.preventDefault();
+    onSelect?.(editor);
+  };
+  if (asChild && isValidElement(children)) {
+    const child = children;
+    const childOnClick = child.props?.onClick;
+    const mergedOnClick = (e) => {
+      childOnClick?.(e);
+      if (!e?.defaultPrevented) onSelect?.(editor);
+    };
+    return cloneElement(child, {
+      ...rest,
+      ref: child.ref ?? ref,
+      onClick: mergedOnClick
+    });
+  }
+  return /* @__PURE__ */ jsx3("div", { ref, ...rest, onClick: handleClick, children });
+});
+EditorBubbleItem.displayName = "EditorBubbleItem";
+
+// src/headless/components/editor-command.tsx
+import { useAtom, useSetAtom } from "jotai";
+import { useEffect, forwardRef as forwardRef3 } from "react";
+import { Command } from "cmdk";
+
+// src/headless/utils/atoms.ts
+import { atom } from "jotai";
+var queryAtom = atom("");
+var rangeAtom = atom(null);
+
+// src/headless/components/editor-command.tsx
+import tunnel from "tunnel-rat";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var commandTunnel = tunnel();
+var EditorCommandOut = ({
+  query,
+  range
+}) => {
+  const setQuery = useSetAtom(queryAtom, { store: novelStore });
+  const setRange = useSetAtom(rangeAtom, { store: novelStore });
+  useEffect(() => {
+    setQuery(query);
+  }, [query, setQuery]);
+  useEffect(() => {
+    setRange(range);
+  }, [range, setRange]);
+  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__ */ jsx4(commandTunnel.Out, {});
+};
+var CommandAny = Command;
+var EditorCommand = forwardRef3(
+  ({ children, className, ...rest }, ref) => {
+    const [query, setQuery] = useAtom(queryAtom);
+    return /* @__PURE__ */ jsx4(commandTunnel.In, { children: /* @__PURE__ */ jsxs(
+      CommandAny,
+      {
+        ref,
+        onKeyDown: (e) => {
+          e.stopPropagation();
+        },
+        id: "slash-command",
+        className,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx4(
+            CommandAny.Input,
+            {
+              value: query,
+              onValueChange: setQuery,
+              style: { display: "none" }
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+var EditorCommandList = Command.List;
+EditorCommand.displayName = "EditorCommand";
+
+// src/headless/components/editor-command-item.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { CommandEmpty, CommandItem } from "cmdk";
+import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
+import { useAtomValue } from "jotai";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CommandItemAny = CommandItem;
+var CommandEmptyAny = CommandEmpty;
+var EditorCommandItem = forwardRef4(({ children, onCommand, ...rest }, ref) => {
+  const { editor } = useCurrentEditor3();
+  const range = useAtomValue(rangeAtom);
+  if (!editor || !range) return null;
+  return /* @__PURE__ */ jsx5(
+    CommandItemAny,
+    {
+      ref,
+      ...rest,
+      onSelect: () => onCommand({ editor, range }),
+      children
+    }
+  );
+});
+EditorCommandItem.displayName = "EditorCommandItem";
+var EditorCommandEmpty = CommandEmptyAny;
+
+// src/headless/extensions/index.ts
+import { StarterKit } from "@tiptap/starter-kit";
+import { Placeholder } from "@tiptap/extension-placeholder";
+
+// src/headless/extensions/CodeBlock/CodeBlock.ts
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+import { all, createLowlight } from "lowlight";
+var lowlight = createLowlight(all);
+var CodeBlock = CodeBlockLowlight.configure({
+  lowlight
+});
+
+// src/headless/extensions/Link/Link.ts
+import { mergeAttributes } from "@tiptap/core";
+import TiptapLink from "@tiptap/extension-link";
+import { Plugin } from "@tiptap/pm/state";
+var Link = TiptapLink.extend({
+  inclusive: false,
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: "link"
+      }),
+      0
+    ];
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    return [
+      ...this.parent?.() || [],
+      new Plugin({
+        props: {
+          handleKeyDown: (view, event) => {
+            const { selection } = editor.state;
+            if (event.key === "Escape" && selection.empty !== true) {
+              editor.commands.focus(selection.to, { scrollIntoView: false });
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+}).configure({
+  openOnClick: false,
+  autolink: true,
+  enableClickSelection: true
+});
+
+// src/headless/extensions/ImageBlock/ImageBlock.ts
+import { mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+import { Image as TiptapImage } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { Plugin as Plugin2, PluginKey } from "@tiptap/pm/state";
+var ImageBlock = TiptapImage.extend({
+  name: "imageBlock",
+  group: "block",
+  defining: true,
+  isolating: true,
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      uploadImage: void 0,
+      inline: false
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("src"),
+        renderHTML: (attributes) => ({
+          src: attributes.src
+        })
+      },
+      width: {
+        default: "100%",
+        parseHTML: (element) => element.getAttribute("data-width"),
+        renderHTML: (attributes) => ({
+          "data-width": attributes.width
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (element) => element.getAttribute("data-align"),
+        renderHTML: (attributes) => ({
+          "data-align": attributes.align
+        })
+      },
+      alt: {
+        default: void 0,
+        parseHTML: (element) => element.getAttribute("alt"),
+        renderHTML: (attributes) => ({
+          alt: attributes.alt
+        })
+      },
+      loading: {
+        default: false,
+        parseHTML: () => false,
+        renderHTML: () => ({})
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]:not([src^="data:"])',
+        getAttrs: (element) => {
+          const el = element;
+          return {
+            src: el.getAttribute("src"),
+            alt: el.getAttribute("alt"),
+            width: el.getAttribute("data-width") || "100%",
+            align: el.getAttribute("data-align") || "center"
+          };
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["img", mergeAttributes2(HTMLAttributes)];
+  },
+  addCommands() {
+    return {
+      setImageBlock: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: "imageBlock",
+          attrs: { src: attrs.src }
+        });
+      },
+      setImageBlockAt: (attrs) => ({ commands }) => {
+        return commands.insertContentAt(attrs.pos, {
+          type: "imageBlock",
+          attrs: { src: attrs.src }
+        });
+      },
+      setImageBlockAlign: (align) => ({ commands }) => commands.updateAttributes("imageBlock", { align }),
+      setImageBlockWidth: (width) => ({ commands }) => commands.updateAttributes("imageBlock", {
+        width: `${Math.max(0, Math.min(100, width))}%`
+      })
+    };
+  },
+  addNodeView() {
+    if (this.options.nodeView) {
+      return ReactNodeViewRenderer(this.options.nodeView);
+    }
+    return null;
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin2({
+        key: new PluginKey("imageBlockDrop"),
+        props: {
+          handleDOMEvents: {
+            drop: (view, event) => {
+              const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;
+              if (!hasFiles) {
+                return false;
+              }
+              const images = Array.from(event.dataTransfer.files).filter(
+                (file) => /image/i.test(file.type)
+              );
+              if (images.length === 0) {
+                return false;
+              }
+              event.preventDefault();
+              const { schema } = view.state;
+              const coordinates = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY
+              });
+              if (!coordinates) return false;
+              images.forEach(async (image) => {
+                if (this.options.uploadImage) {
+                  try {
+                    const placeholderNode = schema.nodes.imageBlock.create({
+                      src: "",
+                      loading: true
+                    });
+                    const placeholderTr = view.state.tr.insert(
+                      coordinates.pos,
+                      placeholderNode
+                    );
+                    view.dispatch(placeholderTr);
+                    const url = await this.options.uploadImage(image);
+                    const node = schema.nodes.imageBlock.create({ src: url });
+                    const currentState = view.state;
+                    let foundPos = -1;
+                    currentState.doc.descendants((node2, pos) => {
+                      if (node2.type.name === "imageBlock" && node2.attrs.loading) {
+                        foundPos = pos;
+                        return false;
+                      }
+                    });
+                    if (foundPos !== -1) {
+                      const transaction = view.state.tr.replaceWith(
+                        foundPos,
+                        foundPos + 1,
+                        node
+                      );
+                      view.dispatch(transaction);
+                    }
+                  } catch (error) {
+                    console.error("Failed to upload image:", error);
+                    const currentState = view.state;
+                    let foundPos = -1;
+                    currentState.doc.descendants((node, pos) => {
+                      if (node.type.name === "imageBlock" && node.attrs.loading) {
+                        foundPos = pos;
+                        return false;
+                      }
+                    });
+                    if (foundPos !== -1) {
+                      const transaction = view.state.tr.delete(
+                        foundPos,
+                        foundPos + 1
+                      );
+                      view.dispatch(transaction);
+                    }
+                  }
+                }
+              });
+              return true;
+            },
+            paste: (view, event) => {
+              const hasFiles = event.clipboardData && event.clipboardData.files && event.clipboardData.files.length;
+              if (!hasFiles) {
+                return false;
+              }
+              const images = Array.from(event.clipboardData.files).filter(
+                (file) => /image/i.test(file.type)
+              );
+              if (images.length === 0) {
+                return false;
+              }
+              event.preventDefault();
+              images.forEach(async (image) => {
+                if (this.options.uploadImage) {
+                  try {
+                    const placeholderNode = view.state.schema.nodes.imageBlock.create({
+                      src: "",
+                      loading: true
+                    });
+                    view.dispatch(
+                      view.state.tr.replaceSelectionWith(placeholderNode)
+                    );
+                    const url = await this.options.uploadImage(image);
+                    const node = view.state.schema.nodes.imageBlock.create({
+                      src: url
+                    });
+                    const currentState = view.state;
+                    let foundPos = -1;
+                    currentState.doc.descendants((node2, pos) => {
+                      if (node2.type.name === "imageBlock" && node2.attrs.loading) {
+                        foundPos = pos;
+                        return false;
+                      }
+                    });
+                    if (foundPos !== -1) {
+                      const transaction = view.state.tr.replaceWith(
+                        foundPos,
+                        foundPos + 1,
+                        node
+                      );
+                      view.dispatch(transaction);
+                    }
+                  } catch (error) {
+                    console.error("Failed to upload image:", error);
+                    const currentState = view.state;
+                    let foundPos = -1;
+                    currentState.doc.descendants((node, pos) => {
+                      if (node.type.name === "imageBlock" && node.attrs.loading) {
+                        foundPos = pos;
+                        return false;
+                      }
+                    });
+                    if (foundPos !== -1) {
+                      const transaction = view.state.tr.delete(
+                        foundPos,
+                        foundPos + 1
+                      );
+                      view.dispatch(transaction);
+                    }
+                  }
+                }
+              });
+              return true;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/headless/extensions/Mention/mention.tsx
+import { ReactRenderer, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+import Mention from "@tiptap/extension-mention";
+
+// src/headless/extensions/Mention/mention-command.tsx
+import { forwardRef as forwardRef5, useEffect as useEffect2, useImperativeHandle, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function Avatar({ src, fallback }) {
+  return /* @__PURE__ */ jsx6("div", { style: {
+    position: "relative",
+    display: "flex",
+    height: "24px",
+    width: "24px",
+    flexShrink: 0,
+    overflow: "hidden",
+    borderRadius: "9999px"
+  }, children: src ? /* @__PURE__ */ jsx6(
+    "img",
+    {
+      style: {
+        aspectRatio: "1",
+        height: "100%",
+        width: "100%"
+      },
+      src,
+      alt: fallback
+    }
+  ) : /* @__PURE__ */ jsx6("div", { style: {
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "9999px",
+    backgroundColor: "var(--muted)",
+    color: "var(--muted-foreground)",
+    fontSize: "10px",
+    fontWeight: 600
+  }, children: fallback }) });
+}
+var MentionCommand = forwardRef5((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const selectItem = (index) => {
+    const item = props.items[index];
+    if (item) {
+      props.command(item);
+    }
+  };
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+  useEffect2(() => setSelectedIndex(0), [props.items]);
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        upHandler();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        downHandler();
+        return true;
+      }
+      if (event.key === "Enter") {
+        enterHandler();
+        return true;
+      }
+      return false;
+    }
+  }));
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      id: "mention-list",
+      style: {
+        backgroundColor: "var(--popover)",
+        color: "var(--foreground)",
+        maxHeight: "300px",
+        minWidth: "280px",
+        overflow: "hidden",
+        overflowY: "auto",
+        borderRadius: "12px",
+        border: "1px solid var(--border)",
+        padding: "4px",
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+      },
+      children: props.items.length ? props.items.map((item, index) => /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => selectItem(index),
+          onMouseEnter: () => setSelectedIndex(index),
+          style: {
+            position: "relative",
+            display: "flex",
+            width: "100%",
+            cursor: "default",
+            userSelect: "none",
+            alignItems: "center",
+            gap: "8px",
+            borderRadius: "4px",
+            padding: "10px 8px",
+            fontSize: "14px",
+            outline: "none",
+            backgroundColor: index === selectedIndex ? "var(--accent)" : "transparent",
+            color: index === selectedIndex ? "var(--accent-foreground)" : "inherit",
+            border: "none",
+            textAlign: "left"
+          },
+          children: [
+            /* @__PURE__ */ jsx6(
+              Avatar,
+              {
+                src: item.avatar,
+                fallback: item.label.slice(0, 2).toUpperCase()
+              }
+            ),
+            /* @__PURE__ */ jsx6("span", { style: {
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }, children: item.label })
+          ]
+        },
+        item.id
+      )) : /* @__PURE__ */ jsx6("div", { style: {
+        padding: "24px 0",
+        textAlign: "center",
+        fontSize: "14px",
+        color: "var(--muted-foreground)"
+      }, children: "No users found" })
+    }
+  );
+});
+MentionCommand.displayName = "MentionCommand";
+
+// src/headless/extensions/Mention/mention-node-view.tsx
+import { NodeViewWrapper } from "@tiptap/react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var MentionNodeView = (props) => {
+  const { node } = props;
+  const { id, label, avatar } = node.attrs;
+  return /* @__PURE__ */ jsxs3(
+    NodeViewWrapper,
+    {
+      as: "span",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        backgroundColor: "var(--accent)",
+        color: "var(--accent-foreground)",
+        padding: "2px 8px 2px 2px",
+        borderRadius: "12px",
+        fontSize: "14px",
+        fontWeight: 500,
+        verticalAlign: "middle"
+      },
+      children: [
+        avatar && /* @__PURE__ */ jsx7(
+          "img",
+          {
+            src: avatar,
+            alt: label || id,
+            style: {
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              flexShrink: 0
+            }
+          }
+        ),
+        !avatar && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              backgroundColor: "var(--muted)",
+              color: "var(--muted-foreground)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: 600,
+              flexShrink: 0
+            },
+            children: (label || id).slice(0, 2).toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { children: label || id })
+      ]
+    }
+  );
+};
+
+// src/headless/extensions/Mention/mention.tsx
+var createMentionExtension = (options) => {
+  return Mention.extend({
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-id"),
+          renderHTML: (attributes) => {
+            if (!attributes.id) {
+              return {};
+            }
+            return {
+              "data-id": attributes.id
+            };
+          }
+        },
+        label: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label) {
+              return {};
+            }
+            return {
+              "data-label": attributes.label
+            };
+          }
+        },
+        avatar: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-avatar"),
+          renderHTML: (attributes) => {
+            if (!attributes.avatar) {
+              return {};
+            }
+            return {
+              "data-avatar": attributes.avatar
+            };
+          }
+        }
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer2(MentionNodeView);
+    }
+  }).configure({
+    HTMLAttributes: {
+      class: "mention"
+    },
+    suggestion: {
+      char: options?.char ?? "@",
+      items: async ({ query }) => {
+        if (!options?.items) return [];
+        const items = await options.items(query);
+        return items;
+      },
+      command: ({ editor, range, props: item }) => {
+        editor.chain().focus().insertContentAt(range, [
+          {
+            type: "mention",
+            attrs: {
+              id: item.id,
+              label: item.label,
+              avatar: item.avatar
+            }
+          }
+        ]).run();
+      },
+      render: renderMentionSuggestion
+    },
+    renderLabel: options?.renderLabel ?? ((props) => {
+      return `@${props.node.attrs.label ?? props.node.attrs.id}`;
+    })
+  });
+};
+var renderMentionSuggestion = () => {
+  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) => {
+      component = new ReactRenderer(MentionCommand, {
+        props: {
+          items: props.items ?? [],
+          command: props.command ?? (() => {
+          }),
+          query: props.query ?? ""
+        },
+        editor: props.editor
+      });
+      container = document.createElement("div");
+      container.style.position = "fixed";
+      container.style.zIndex = "9999";
+      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({
+        items: props.items ?? [],
+        command: props.command ?? (() => {
+        }),
+        query: props.query ?? ""
+      });
+      const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+      if (rect) updatePosition(rect);
+    },
+    onKeyDown: ({ event }) => {
+      if (!component) return false;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        destroy();
+        return true;
+      }
+      if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return component.ref?.onKeyDown?.({ event }) ?? false;
+      }
+      return false;
+    },
+    onExit: () => {
+      destroy();
+    }
+  };
+};
+
+// src/headless/extensions/slash-command.tsx
+import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+import { Extension } from "@tiptap/core";
+var Command2 = Extension.create({
+  name: "slash-command",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: (ctx) => {
+          ctx.props.command({ editor: ctx.editor, range: ctx.range });
+        }
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const base = this.options.suggestion ?? {};
+    return [
+      Suggestion({
+        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) => {
+          if (typeof ctx?.props?.command === "function") {
+            ctx.props.command({ editor: ctx.editor, range: ctx.range });
+          }
+        },
+        ...base
+      })
+    ];
+  }
+});
+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 ReactRenderer2(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 createSuggestionItems = (items) => items;
+var handleCommandNavigation = (event) => {
+  if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+    const slashCommand = document.querySelector("#slash-command");
+    if (slashCommand) return true;
+  }
+};
+
+export {
+  EditorRoot,
+  EditorContent,
+  EditorBubble,
+  EditorBubbleItem,
+  EditorCommandOut,
+  EditorCommand,
+  EditorCommandList,
+  EditorCommandItem,
+  EditorCommandEmpty,
+  CodeBlock,
+  Link,
+  ImageBlock,
+  MentionCommand,
+  createMentionExtension,
+  renderMentionSuggestion,
+  StarterKit,
+  Placeholder,
+  Command2 as Command,
+  renderItems,
+  createSuggestionItems,
+  handleCommandNavigation,
+  useCurrentEditor4 as useCurrentEditor
+};
+//# sourceMappingURL=chunk-I3CL5OVL.js.map