neuphlo-editor 2.1.0 → 2.2.0

package/dist/chunk-G5E32MLB.js

@@ -0,0 +1,1352 @@
+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 { useAtomValue } from "jotai";
+import { forwardRef as forwardRef3, useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+
+// src/headless/utils/atoms.ts
+import { atom } from "jotai";
+var queryAtom = atom("");
+var rangeAtom = atom(null);
+var slashMenuOpenAtom = atom(false);
+var slashMenuRectAtom = atom(null);
+
+// src/headless/components/editor-command.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var EditorCommandOut = () => null;
+var EditorCommand = forwardRef3(
+  ({ children, className, ...rest }, ref) => {
+    const isOpen = useAtomValue(slashMenuOpenAtom, { store: novelStore });
+    const rect = useAtomValue(slashMenuRectAtom, { store: novelStore });
+    const containerRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const contentRef = useRef(null);
+    const query = useAtomValue(queryAtom, { store: novelStore });
+    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;
+    }
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      document.body.appendChild(el);
+      return () => {
+        el.remove();
+      };
+    }, []);
+    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 = 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]
+    );
+    useEffect(() => {
+      if (!isOpen) return;
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, handleKeyDown]);
+    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 createPortal(
+      /* @__PURE__ */ jsx4(
+        "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 = forwardRef3(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx4("div", { ref, role: "listbox", ...rest, children });
+  }
+);
+EditorCommand.displayName = "EditorCommand";
+EditorCommandList.displayName = "EditorCommandList";
+
+// src/headless/components/editor-command-item.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
+import { useAtomValue as useAtomValue2 } from "jotai";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var EditorCommandItem = forwardRef4(({ children, onCommand, value, className, ...rest }, ref) => {
+  const { editor } = useCurrentEditor3();
+  const range = useAtomValue2(rangeAtom, { store: novelStore });
+  const query = useAtomValue2(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__ */ jsx5(
+    "div",
+    {
+      ref,
+      role: "option",
+      className,
+      onClick: () => onCommand({ editor, range }),
+      ...rest,
+      children
+    }
+  );
+});
+EditorCommandItem.displayName = "EditorCommandItem";
+var EditorCommandEmpty = forwardRef4(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx5("div", { ref, ...rest, children });
+  }
+);
+EditorCommandEmpty.displayName = "EditorCommandEmpty";
+
+// 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: null,
+      browseAssets: null,
+      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 as useState2 } from "react";
+import { jsx as jsx6, jsxs } 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 }) });
+}
+function ReferenceIcon({ type }) {
+  if (type === "node") {
+    return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx6("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 12l8-4.5" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 12v9" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 12l-8-4.5" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx6("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+    /* @__PURE__ */ jsx6("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 9l1 0" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 13l6 0" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 17l6 0" })
+  ] });
+}
+var MentionCommand = forwardRef5((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState2(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__ */ jsxs(
+        "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: [
+            item.type ? /* @__PURE__ */ jsx6(ReferenceIcon, { type: item.type }) : /* @__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 results found" })
+    }
+  );
+});
+MentionCommand.displayName = "MentionCommand";
+
+// src/headless/extensions/Mention/mention-node-view.tsx
+import { NodeViewWrapper } from "@tiptap/react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function NodeIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx7("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }),
+    /* @__PURE__ */ jsx7("path", { d: "M12 12l8-4.5" }),
+    /* @__PURE__ */ jsx7("path", { d: "M12 12v9" }),
+    /* @__PURE__ */ jsx7("path", { d: "M12 12l-8-4.5" })
+  ] });
+}
+function ArticleIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx7("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+    /* @__PURE__ */ jsx7("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }),
+    /* @__PURE__ */ jsx7("path", { d: "M9 9l1 0" }),
+    /* @__PURE__ */ jsx7("path", { d: "M9 13l6 0" }),
+    /* @__PURE__ */ jsx7("path", { d: "M9 17l6 0" })
+  ] });
+}
+var MentionNodeView = (props) => {
+  const { node } = props;
+  const { id, label, avatar, type } = node.attrs;
+  const isNode = type === "node";
+  const isArticle = type === "article";
+  const isReference = isNode || isArticle;
+  const backgroundColor = isArticle ? "rgba(249, 115, 22, 0.15)" : isNode ? "rgba(107, 114, 128, 0.15)" : "var(--accent)";
+  const color = isArticle ? "rgb(234, 88, 12)" : isNode ? "rgb(75, 85, 99)" : "var(--accent-foreground)";
+  const border = isArticle ? "1px solid rgba(249, 115, 22, 0.3)" : isNode ? "1px solid rgba(107, 114, 128, 0.3)" : "none";
+  return /* @__PURE__ */ jsxs2(
+    NodeViewWrapper,
+    {
+      as: "span",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "3px",
+        backgroundColor,
+        color,
+        border,
+        padding: isReference ? "1px 6px" : "1px 6px 1px 1px",
+        borderRadius: "12px",
+        fontSize: "13px",
+        fontWeight: 500,
+        verticalAlign: "middle"
+      },
+      children: [
+        isNode && /* @__PURE__ */ jsx7(NodeIcon, {}),
+        isArticle && /* @__PURE__ */ jsx7(ArticleIcon, {}),
+        !isReference && avatar && /* @__PURE__ */ jsx7(
+          "img",
+          {
+            src: avatar,
+            alt: label || id,
+            style: {
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              flexShrink: 0
+            }
+          }
+        ),
+        !isReference && !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) => {
+  const extensionName = options?.name ?? "mention";
+  return Mention.extend({
+    name: extensionName,
+    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
+            };
+          }
+        },
+        type: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-ref-type"),
+          renderHTML: (attributes) => {
+            if (!attributes.type) {
+              return {};
+            }
+            return {
+              "data-ref-type": attributes.type
+            };
+          }
+        },
+        nodeId: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-node-id"),
+          renderHTML: (attributes) => {
+            if (!attributes.nodeId) {
+              return {};
+            }
+            return {
+              "data-node-id": attributes.nodeId
+            };
+          }
+        },
+        slug: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-slug"),
+          renderHTML: (attributes) => {
+            if (!attributes.slug) {
+              return {};
+            }
+            return {
+              "data-slug": attributes.slug
+            };
+          }
+        }
+      };
+    },
+    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: extensionName,
+            attrs: {
+              id: item.id,
+              label: item.label,
+              avatar: item.avatar,
+              type: item.type,
+              nodeId: item.nodeId,
+              slug: item.slug
+            }
+          }
+        ]).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 gap = 8;
+    const maxDropdownHeight = 300;
+    const spaceBelow = window.innerHeight - clientRect.bottom;
+    const spaceAbove = clientRect.top;
+    const shouldPositionAbove = spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow;
+    const left = Math.round(clientRect.left);
+    if (shouldPositionAbove) {
+      const bottom = Math.round(window.innerHeight - clientRect.top + gap);
+      container.style.bottom = `${bottom}px`;
+      container.style.top = "auto";
+    } else {
+      const top = Math.round(clientRect.bottom + gap);
+      container.style.top = `${top}px`;
+      container.style.bottom = "auto";
+    }
+    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/DragHandle/DragHandle.ts
+import BaseDragHandle from "@tiptap/extension-drag-handle";
+var currentCallbacks = {};
+var currentNode = null;
+var currentEditor = null;
+function setDragHandleCallbacks(callbacks) {
+  currentCallbacks = callbacks;
+}
+function createDragHandleElement() {
+  const container = document.createElement("div");
+  container.className = "nph-drag-handle";
+  const plusBtn = document.createElement("button");
+  plusBtn.className = "nph-drag-handle__btn";
+  plusBtn.type = "button";
+  plusBtn.setAttribute("aria-label", "Add block");
+  plusBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`;
+  plusBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (currentEditor) {
+      currentCallbacks.onAddBlock?.(currentEditor, currentNode);
+    }
+  });
+  const gripBtn = document.createElement("button");
+  gripBtn.className = "nph-drag-handle__btn nph-drag-handle__grip";
+  gripBtn.type = "button";
+  gripBtn.setAttribute("aria-label", "Drag to reorder");
+  gripBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>`;
+  gripBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (currentEditor) {
+      currentCallbacks.onGripClick?.(currentEditor, currentNode, container);
+    }
+  });
+  container.appendChild(plusBtn);
+  container.appendChild(gripBtn);
+  return container;
+}
+var DragHandle = BaseDragHandle.configure({
+  render: createDragHandleElement,
+  nested: true,
+  onNodeChange: ({ node, editor }) => {
+    currentNode = node;
+    currentEditor = editor;
+  }
+});
+
+// src/headless/extensions/Table/index.ts
+import { TableKit } from "@tiptap/extension-table";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+
+// src/headless/extensions/MarkdownPaste.ts
+import { Extension } from "@tiptap/core";
+import { Plugin as Plugin3, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { MarkdownParser, defaultMarkdownParser } from "@tiptap/pm/markdown";
+var markdownPastePluginKey = new PluginKey2("markdownPaste");
+function looksLikeMarkdown(text) {
+  const patterns = [
+    /^#{1,6}\s/m,
+    // headings
+    /^\s*[-*+]\s/m,
+    // unordered list
+    /^\s*\d+\.\s/m,
+    // ordered list
+    /^\s*>\s/m,
+    // blockquote
+    /\|.+\|/m,
+    // table
+    /^```/m,
+    // fenced code block
+    /\*\*.+\*\*/,
+    // bold
+    /\*.+\*/,
+    // italic
+    /~~.+~~/,
+    // strikethrough
+    /`[^`]+`/,
+    // inline code
+    /^\s*---\s*$/m,
+    // horizontal rule
+    /^\s*\*\*\*\s*$/m,
+    // horizontal rule alt
+    /\[.+\]\(.+\)/,
+    // links
+    /!\[.*\]\(.+\)/
+    // images
+  ];
+  const hasMarkdown = patterns.some((p) => p.test(text));
+  const isHtml = /^<[a-z][\s\S]*>/i.test(text.trim());
+  return hasMarkdown && !isHtml;
+}
+function buildParser(schema) {
+  const md = defaultMarkdownParser.tokenizer;
+  const tokens = {};
+  if (schema.nodes.paragraph) tokens.paragraph = { block: "paragraph" };
+  if (schema.nodes.heading) {
+    tokens.heading = {
+      block: "heading",
+      getAttrs: (tok) => ({ level: Number(tok.tag.slice(1)) })
+    };
+  }
+  if (schema.nodes.blockquote) tokens.blockquote = { block: "blockquote" };
+  if (schema.nodes.bulletList) tokens.bullet_list = { block: "bulletList" };
+  if (schema.nodes.orderedList) {
+    tokens.ordered_list = {
+      block: "orderedList",
+      getAttrs: (tok) => ({ start: Number(tok.attrGet("start") || 1) })
+    };
+  }
+  if (schema.nodes.listItem) tokens.list_item = { block: "listItem" };
+  if (schema.nodes.codeBlock) {
+    tokens.code_block = { block: "codeBlock", noCloseToken: true };
+    tokens.fence = {
+      block: "codeBlock",
+      getAttrs: (tok) => ({ language: tok.info || "" }),
+      noCloseToken: true
+    };
+  }
+  if (schema.nodes.horizontalRule) {
+    tokens.hr = { node: "horizontalRule" };
+  }
+  if (schema.nodes.hardBreak) {
+    tokens.hardbreak = { node: "hardBreak" };
+  }
+  if (schema.nodes.image) {
+    tokens.image = {
+      node: "image",
+      getAttrs: (tok) => ({
+        src: tok.attrGet("src"),
+        title: tok.attrGet("title") || null,
+        alt: tok.children?.[0]?.content || null
+      })
+    };
+  }
+  if (schema.nodes.table) {
+    tokens.table = { block: "table" };
+    tokens.thead = { ignore: true };
+    tokens.tbody = { ignore: true };
+    tokens.tr = { block: "tableRow" };
+    tokens.th = { block: "tableHeader" };
+    tokens.td = { block: "tableCell" };
+  }
+  if (schema.marks.bold || schema.marks.strong) {
+    tokens.strong = { mark: schema.marks.bold ? "bold" : "strong" };
+  }
+  if (schema.marks.italic || schema.marks.em) {
+    tokens.em = { mark: schema.marks.italic ? "italic" : "em" };
+  }
+  if (schema.marks.code) {
+    tokens.code_inline = { mark: "code", noCloseToken: true };
+  }
+  if (schema.marks.link) {
+    tokens.link = {
+      mark: "link",
+      getAttrs: (tok) => ({
+        href: tok.attrGet("href"),
+        title: tok.attrGet("title") || null
+      })
+    };
+  }
+  if (schema.marks.strike || schema.marks.strikethrough) {
+    tokens.s = { mark: schema.marks.strike ? "strike" : "strikethrough" };
+  }
+  try {
+    return new MarkdownParser(schema, md, tokens);
+  } catch {
+    return null;
+  }
+}
+var MarkdownPaste = Extension.create({
+  name: "markdownPaste",
+  addProseMirrorPlugins() {
+    const schema = this.editor.schema;
+    let parser = null;
+    return [
+      new Plugin3({
+        key: markdownPastePluginKey,
+        props: {
+          handlePaste(view, event) {
+            const clipboardData = event.clipboardData;
+            if (!clipboardData) return false;
+            const html = clipboardData.getData("text/html");
+            if (html && html.trim().length > 0) return false;
+            const text = clipboardData.getData("text/plain");
+            if (!text || !looksLikeMarkdown(text)) return false;
+            if (!parser) {
+              parser = buildParser(schema);
+            }
+            if (!parser) return false;
+            try {
+              const doc = parser.parse(text);
+              if (!doc || doc.content.size === 0) return false;
+              const { tr } = view.state;
+              const slice = doc.slice(0, doc.content.size);
+              tr.replaceSelection(slice);
+              view.dispatch(tr);
+              return true;
+            } catch {
+              return false;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/headless/extensions/slash-command.tsx
+import Suggestion from "@tiptap/suggestion";
+import { Extension as Extension2 } from "@tiptap/core";
+var Command = Extension2.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 ?? "/",
+        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,
+        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 = () => ({
+  onStart: () => {
+  },
+  onUpdate: () => {
+  },
+  onKeyDown: () => false,
+  onExit: () => {
+  }
+});
+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 {
+  novelStore,
+  store_exports,
+  EditorRoot,
+  EditorContent,
+  EditorBubble,
+  EditorBubbleItem,
+  queryAtom,
+  EditorCommandOut,
+  EditorCommand,
+  EditorCommandList,
+  EditorCommandItem,
+  EditorCommandEmpty,
+  CodeBlock,
+  Link,
+  ImageBlock,
+  MentionCommand,
+  createMentionExtension,
+  renderMentionSuggestion,
+  setDragHandleCallbacks,
+  DragHandle,
+  TableKit,
+  MarkdownPaste,
+  StarterKit,
+  Placeholder,
+  Command,
+  renderItems,
+  createSuggestionItems,
+  handleCommandNavigation,
+  useCurrentEditor4 as useCurrentEditor
+};
+//# sourceMappingURL=chunk-G5E32MLB.js.map