neuphlo-editor 1.4.0 → 1.4.2

package/dist/chunk-GOCX7NUN.js

@@ -0,0 +1,616 @@
+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;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// 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/slash-command.tsx
+import { ReactRenderer } 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 ?? "/",
+        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;
+      component = new 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 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,
+  StarterKit,
+  Placeholder,
+  Command2 as Command,
+  renderItems,
+  createSuggestionItems,
+  handleCommandNavigation,
+  useCurrentEditor4 as useCurrentEditor
+};
+//# sourceMappingURL=chunk-GOCX7NUN.js.map