neuphlo-editor 0.3.13 → 0.4.2

package/README.md

@@ -1,27 +1,20 @@
-# Neuphlo Editor
+Neuphlo Editor
+===============
 
-This repo is the `neuphlo-editor` package (TipTap preset + React wrapper).
+Lightweight React wrapper around Tiptap with sensible defaults.
 
-## Prerequisites
+CSS integration
+----------------
 
-- Node 18+ (recommended) and npm 8+
-- React 19+ in your app
+- Import global CSS once near your app root:
+  import 'neuphlo-editor/styles.css';
 
-## Install & Run (local dev)
+Highlight.js theme (optional)
+-----------------------------
+- We no longer inject a theme by default. If you want a default theme, also import:
+  import 'neuphlo-editor/highlight.css';
+- Or import any other `highlight.js` theme you prefer.
 
-- Install dependencies: `npm install`
-- Start local dev (watch): `npm run dev`
-  - The package builds in watch mode via `tsup`.
-
-## Where Things Live
-
-- Source: `src`
-  - Build output: `dist`
-  - Exports: JS (ESM/CJS), types, and `styles.css`
-
-## Using In Your App
-
-- Install the package in your app, then import:
-  - `import { Editor } from 'neuphlo-editor/react'`
-  - `import 'neuphlo-editor/styles.css'`
-  - Or bring your own styles and set `className` on the component.
+Notes
+-----
+- All styles are namespaced (e.g., `.nph-editor`) to avoid colliding with your app.

package/dist/chunk-M6GRNJJ6.js

@@ -0,0 +1,366 @@
+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, options }) {
+  const { editor } = useCurrentEditor();
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx2(BubbleMenuReact, { editor, options, 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 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";
+
+// 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/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,
+  CodeBlock,
+  Link,
+  StarterKit,
+  Placeholder,
+  Command2 as Command,
+  renderItems,
+  createSuggestionItems,
+  handleCommandNavigation,
+  useCurrentEditor4 as useCurrentEditor
+};
+//# sourceMappingURL=chunk-M6GRNJJ6.js.map

package/dist/chunk-M6GRNJJ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/headless/index.ts","../src/headless/components/editor.tsx","../src/headless/utils/store.ts","../src/headless/components/editor-bubble.tsx","../src/headless/components/editor-bubble-item.tsx","../src/headless/components/editor-command.tsx","../src/headless/utils/atoms.ts","../src/headless/components/editor-command-item.tsx","../src/headless/extensions/index.ts","../src/headless/extensions/CodeBlock/CodeBlock.ts","../src/headless/extensions/Link/Link.ts","../src/headless/extensions/slash-command.tsx"],"sourcesContent":["export { useCurrentEditor as useEditor } from \"@tiptap/react\"\n\nexport {\n  EditorRoot,\n  EditorContent,\n  type EditorContentProps,\n} from \"./components/editor\"\n\nexport { EditorBubble } from \"./components/editor-bubble\"\nexport { EditorBubbleItem } from \"./components/editor-bubble-item\"\nexport {\n  EditorCommand,\n  EditorCommandList,\n  EditorCommandOut,\n} from \"./components/editor-command\"\nexport { EditorCommandItem } from \"./components/editor-command-item\"\n\nexport { Placeholder, StarterKit } from \"./extensions\"\nexport {\n  Command as SlashCommand,\n  renderItems as renderSlashCommandItems,\n  createSuggestionItems,\n  handleCommandNavigation,\n} from \"./extensions/slash-command\"\n// Path without extension to satisfy TS/tsup\n// (the file is at ./extensions/slash-command.tsx)\n// eslint-disable-next-line\n","import { EditorProvider } from \"@tiptap/react\"\nimport type { EditorProviderProps } from \"@tiptap/react\"\nimport { forwardRef } from \"react\"\nimport type { FC, ReactNode } from \"react\"\nimport { Provider } from \"jotai\"\nimport { novelStore } from \"../utils/store\"\n\nexport interface EditorRootProps {\n  readonly children: ReactNode\n}\n\nexport const EditorRoot: FC<EditorRootProps> = ({ children }) => {\n  return (\n    <Provider store={novelStore as any}>\n      {children as any}\n    </Provider>\n  )\n}\n\nexport type EditorContentProps = EditorProviderProps & {\n  readonly children?: ReactNode\n  readonly className?: string\n  readonly initialContent?: any\n}\n\nexport const EditorContent = forwardRef<HTMLDivElement, EditorContentProps>(\n  ({ className, children, initialContent, content, ...rest }, ref) => {\n    const effectiveContent = content ?? initialContent\n    return (\n      <div ref={ref} className={className}>\n        <EditorProvider {...rest} content={effectiveContent}>\n          {children}\n        </EditorProvider>\n      </div>\n    )\n  }\n)\n\nEditorContent.displayName = \"EditorContent\"\n","import { createStore } from \"jotai\";\n\n// biome-ignore lint/suspicious/noExplicitAny: store is opaque to consumers\nexport const novelStore: any = createStore();\nexport * from \"jotai\";\n\n","import { useCurrentEditor } from \"@tiptap/react\";\nimport { BubbleMenu as BubbleMenuReact } from \"@tiptap/react/menus\";\nimport type { ReactNode } from \"react\";\n\nexport interface EditorBubbleProps {\n  readonly className?: string;\n  readonly children: ReactNode;\n  readonly options?: Record<string, unknown>;\n}\n\nexport function EditorBubble({ className, children, options }: EditorBubbleProps) {\n  const { editor } = useCurrentEditor();\n  if (!editor) return null;\n\n  return (\n    <BubbleMenuReact editor={editor} options={options}>\n      <div className={className}>{children}</div>\n    </BubbleMenuReact>\n  );\n}\n","import { forwardRef, isValidElement, cloneElement } from \"react\"\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\"\nimport { useCurrentEditor } from \"@tiptap/react\"\nimport type { Editor as TiptapEditor } from \"@tiptap/react\"\n\ninterface EditorBubbleItemProps {\n  readonly children: ReactNode\n  readonly asChild?: boolean\n  readonly onSelect?: (editor: TiptapEditor) => void\n}\n\nexport const EditorBubbleItem = forwardRef<\n  HTMLDivElement,\n  EditorBubbleItemProps & Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\">\n>(({ children, asChild, onSelect, ...rest }, ref) => {\n  const { editor } = useCurrentEditor()\n\n  if (!editor) return null\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.preventDefault()\n    onSelect?.(editor)\n  }\n\n  if (asChild && isValidElement(children)) {\n    const child = children as ReactElement<any>\n    const childOnClick = (child.props as any)?.onClick as\n      | ((e: any) => void)\n      | undefined\n    const mergedOnClick = (e: any) => {\n      childOnClick?.(e)\n      if (!e?.defaultPrevented) onSelect?.(editor)\n    }\n\n    return cloneElement(child, {\n      ...rest,\n      ref: (child as any).ref ?? ref,\n      onClick: mergedOnClick,\n    })\n  }\n\n  return (\n    <div ref={ref} {...rest} onClick={handleClick}>\n      {children}\n    </div>\n  )\n})\n\nEditorBubbleItem.displayName = \"EditorBubbleItem\"\n\nexport default EditorBubbleItem\n","import { useAtom, useSetAtom } from \"jotai\"\nimport { useEffect, forwardRef } from \"react\"\nimport { Command } from \"cmdk\"\nimport { queryAtom, rangeAtom } from \"../utils/atoms\"\nimport { novelStore } from \"../utils/store\"\nimport type { FC } from \"react\"\nimport type { Range } from \"@tiptap/core\"\nimport tunnel from \"tunnel-rat\"\n\nconst commandTunnel: any = (tunnel as any)()\n\ninterface EditorCommandOutProps {\n  readonly query: string\n  readonly range: Range\n}\n\nexport const EditorCommandOut: FC<EditorCommandOutProps> = ({\n  query,\n  range,\n}) => {\n  const setQuery = useSetAtom(queryAtom, { store: novelStore })\n  const setRange = useSetAtom(rangeAtom, { store: novelStore })\n\n  useEffect(() => {\n    setQuery(query)\n  }, [query, setQuery])\n\n  useEffect(() => {\n    setRange(range)\n  }, [range, setRange])\n\n  useEffect(() => {\n    const navigationKeys = [\"ArrowUp\", \"ArrowDown\", \"Enter\"]\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (navigationKeys.includes(e.key)) {\n        e.preventDefault()\n        const commandRef = document.querySelector(\"#slash-command\")\n\n        if (commandRef)\n          commandRef.dispatchEvent(\n            new KeyboardEvent(\"keydown\", {\n              key: e.key,\n              cancelable: true,\n              bubbles: true,\n            })\n          )\n\n        return false\n      }\n    }\n    document.addEventListener(\"keydown\", onKeyDown)\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown)\n    }\n  }, [])\n\n  return <commandTunnel.Out />\n}\n\nconst CommandAny: any = Command\nexport const EditorCommand = forwardRef<HTMLDivElement, any>(\n  ({ children, className, ...rest }, ref) => {\n    const [query, setQuery] = useAtom(queryAtom)\n\n    return (\n      <commandTunnel.In>\n        <CommandAny\n          ref={ref}\n          onKeyDown={(e: any) => {\n            e.stopPropagation()\n          }}\n          id=\"slash-command\"\n          className={className}\n          {...rest}\n        >\n          <CommandAny.Input\n            value={query}\n            onValueChange={setQuery}\n            style={{ display: \"none\" }}\n          />\n          {children}\n        </CommandAny>\n      </commandTunnel.In>\n    )\n  }\n)\nexport const EditorCommandList: any = Command.List\n\nEditorCommand.displayName = \"EditorCommand\"\n","import { atom } from \"jotai\"\nimport type { Range } from \"@tiptap/core\"\n\nexport const queryAtom = atom(\"\")\nexport const rangeAtom = atom<Range | null>(null)\n\n","import { forwardRef } from \"react\"\nimport { CommandEmpty, CommandItem } from \"cmdk\"\nimport { useCurrentEditor } from \"@tiptap/react\"\nimport { useAtomValue } from \"jotai\"\nimport { rangeAtom } from \"../utils/atoms\"\nimport type { Editor, Range } from \"@tiptap/core\"\n\ninterface EditorCommandItemProps {\n  readonly onCommand: ({\n    editor,\n    range,\n  }: {\n    editor: Editor\n    range: Range\n  }) => void\n}\n\nconst CommandItemAny: any = CommandItem\nconst CommandEmptyAny: any = CommandEmpty\n\nexport const EditorCommandItem = forwardRef<\n  HTMLDivElement,\n  EditorCommandItemProps & any\n>(({ children, onCommand, ...rest }, ref) => {\n  const { editor } = useCurrentEditor()\n  const range = useAtomValue(rangeAtom)\n\n  if (!editor || !range) return null\n\n  return (\n    <CommandItemAny\n      ref={ref}\n      {...(rest as any)}\n      onSelect={() => onCommand({ editor, range })}\n    >\n      {children}\n    </CommandItemAny>\n  )\n})\n\nEditorCommandItem.displayName = \"EditorCommandItem\"\n\nexport const EditorCommandEmpty: any = CommandEmptyAny\n\nexport default EditorCommandItem\n","export { StarterKit } from \"@tiptap/starter-kit\"\nexport { Placeholder } from \"@tiptap/extension-placeholder\"\n\n// Custom\nexport { CodeBlock } from \"./CodeBlock\"\nexport { Link } from \"./Link\"\n","import { CodeBlockLowlight } from \"@tiptap/extension-code-block-lowlight\"\nimport { all, createLowlight } from \"lowlight\"\n\nconst lowlight = createLowlight(all)\n\nexport const CodeBlock = CodeBlockLowlight.configure({\n  lowlight,\n})\n","import { mergeAttributes } from \"@tiptap/core\"\nimport TiptapLink from \"@tiptap/extension-link\"\nimport { Plugin } from \"@tiptap/pm/state\"\nimport { EditorView } from \"@tiptap/pm/view\"\n\nexport const Link = TiptapLink.extend({\n  inclusive: false,\n\n  parseHTML() {\n    return [\n      {\n        tag: 'a[href]:not([data-type=\"button\"]):not([href *= \"javascript:\" i])',\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }: any) {\n    return [\n      \"a\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {\n        class: \"link\",\n      }),\n      0,\n    ]\n  },\n\n  addProseMirrorPlugins() {\n    const { editor } = this\n\n    return [\n      ...(((this as any).parent?.() as any[]) || []),\n      new Plugin({\n        props: {\n          handleKeyDown: (view: EditorView, event: KeyboardEvent) => {\n            const { selection } = editor.state\n\n            if (event.key === \"Escape\" && selection.empty !== true) {\n              editor.commands.focus(selection.to, { scrollIntoView: false })\n            }\n\n            return false\n          },\n        },\n      }),\n    ]\n  },\n})\n\nexport default Link\n","import { ReactRenderer } from \"@tiptap/react\"\nimport Suggestion from \"@tiptap/suggestion\"\nimport { Extension } from \"@tiptap/core\"\nimport type { RefObject, ReactNode } from \"react\"\nimport { EditorCommandOut } from \"../components/editor-command\"\n\nexport const Command = Extension.create({\n  name: \"slash-command\",\n  addOptions() {\n    return {\n      suggestion: {\n        char: \"/\",\n        command: (ctx: any) => {\n          ctx.props.command({ editor: ctx.editor, range: ctx.range })\n        },\n      } as any,\n    }\n  },\n  addProseMirrorPlugins() {\n    const base: any = this.options.suggestion ?? {}\n    return [\n      Suggestion({\n        editor: this.editor,\n        char: base.char ?? \"/\",\n        items: base.items ?? (() => [\"/\"] as any),\n        command: (ctx: any) => {\n          if (typeof ctx?.props?.command === \"function\") {\n            ctx.props.command({ editor: ctx.editor, range: ctx.range })\n          }\n        },\n        ...base,\n      }),\n    ]\n  },\n})\n\nexport const renderItems = (elementRef?: RefObject<Element> | null) => {\n  let component: ReactRenderer | null = null\n  let container: HTMLElement | null = null\n\n  const destroy = () => {\n    component?.destroy()\n    component = null\n    if (container) {\n      container.remove()\n      container = null\n    }\n  }\n\n  const updatePosition = (clientRect?: DOMRect | null) => {\n    if (!container || !clientRect) return\n    const top = Math.round(clientRect.bottom + 8)\n    const left = Math.round(clientRect.left)\n    container.style.top = `${top}px`\n    container.style.left = `${left}px`\n  }\n\n  return {\n    onStart: (props: {\n      editor: any\n      clientRect: (() => DOMRect | null) | null\n      query?: string\n      range?: any\n    }) => {\n      const { selection } = props.editor.state\n      const parentNode = selection.$from.node(selection.$from.depth)\n      const blockType = parentNode.type.name\n      if (blockType === \"codeBlock\") return false\n\n      component = new ReactRenderer(EditorCommandOut, {\n        props: {\n          query: (props as any).query ?? \"\",\n          range: (props as any).range,\n        },\n        editor: props.editor,\n      })\n\n      container = document.createElement(\"div\")\n      container.style.position = \"fixed\"\n      container.style.zIndex = \"9999\"\n      container.style.minWidth = \"240px\"\n      ;(elementRef?.current ?? document.body).appendChild(container)\n      container.appendChild(component.element)\n\n      const rect =\n        typeof props.clientRect === \"function\" ? props.clientRect() : null\n      if (rect) updatePosition(rect)\n    },\n    onUpdate: (props: {\n      editor: any\n      clientRect: (() => DOMRect | null) | null\n      query?: string\n      range?: any\n    }) => {\n      component?.updateProps({\n        query: (props as any).query ?? \"\",\n        range: (props as any).range,\n      })\n      const rect =\n        typeof props.clientRect === \"function\" ? props.clientRect() : null\n      if (rect) updatePosition(rect)\n    },\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"Escape\") {\n        destroy()\n        return true\n      }\n      return false\n    },\n    onExit: () => {\n      destroy()\n    },\n  }\n}\n\nexport interface SuggestionItem {\n  title: string\n  description: string\n  icon: ReactNode\n  searchTerms?: string[]\n  command?: (props: {\n    editor: any\n    range: { from: number; to: number }\n  }) => void\n}\n\nexport const createSuggestionItems = (items: SuggestionItem[]) => items\n\nexport const handleCommandNavigation = (event: KeyboardEvent) => {\n  if ([\"ArrowUp\", \"ArrowDown\", \"Enter\"].includes(event.key)) {\n    const slashCommand = document.querySelector(\"#slash-command\")\n    if (slashCommand) return true\n  }\n}\n"],"mappings":"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","names":["useCurrentEditor","jsx","forwardRef","useCurrentEditor","jsx","forwardRef","jsx","forwardRef","forwardRef","useCurrentEditor","jsx","forwardRef","useCurrentEditor","jsx","Command"]}

package/dist/editor-DI3_SEDt.d.cts

@@ -0,0 +1,29 @@
+import * as _tiptap_core from '@tiptap/core';
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+
+interface EditorRootProps {
+    readonly children: ReactNode;
+}
+declare const EditorRoot: FC<EditorRootProps>;
+type EditorContentProps = EditorProviderProps & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+};
+declare const EditorContent: react.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    slotBefore?: ReactNode;
+    slotAfter?: ReactNode;
+    editorContainerProps?: react.HTMLAttributes<HTMLDivElement>;
+} & Partial<_tiptap_core.EditorOptions> & {
+    immediatelyRender?: boolean;
+    shouldRerenderOnTransaction?: boolean;
+} & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { EditorRoot as E, EditorContent as a, type EditorContentProps as b };

package/dist/editor-DI3_SEDt.d.ts

@@ -0,0 +1,29 @@
+import * as _tiptap_core from '@tiptap/core';
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+
+interface EditorRootProps {
+    readonly children: ReactNode;
+}
+declare const EditorRoot: FC<EditorRootProps>;
+type EditorContentProps = EditorProviderProps & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+};
+declare const EditorContent: react.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    slotBefore?: ReactNode;
+    slotAfter?: ReactNode;
+    editorContainerProps?: react.HTMLAttributes<HTMLDivElement>;
+} & Partial<_tiptap_core.EditorOptions> & {
+    immediatelyRender?: boolean;
+    shouldRerenderOnTransaction?: boolean;
+} & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { EditorRoot as E, EditorContent as a, type EditorContentProps as b };