@pixerate/editor-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jack James
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,323 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BubbleMenu: () => BubbleMenu,
+  EditorContent: () => EditorContent,
+  TemplateRenderer: () => TemplateRenderer,
+  useEditor: () => useEditor2,
+  usePromptEditor: () => usePromptEditor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/usePromptEditor.ts
+var import_react = require("react");
+var import_react2 = require("@tiptap/react");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
+var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
+var import_model = require("@tiptap/pm/model");
+var import_editor = require("@pixerate/editor");
+var DEFAULT_TEMPLATES = [];
+var DEFAULT_COLOR_MAP = /* @__PURE__ */ new Map([
+  ["default", { from: "#f43f5e", to: "#8b5cf6" }]
+]);
+function usePromptEditor({
+  content,
+  onContentChange,
+  templates = DEFAULT_TEMPLATES,
+  templateColorMap: userColorMap,
+  isEditing = true,
+  placeholder = "Write a prompt, use {{template}}, {variable}, or /command...",
+  className,
+  onEscape,
+  onKeyDown,
+  onSelectionChange,
+  onSlashCommandMatch,
+  clearSlashCommand,
+  slashCommandActive = false,
+  onMilestone,
+  containerId = "editor-container",
+  jsonVariables,
+  speed = 2
+}) {
+  const slashCommandActiveRef = (0, import_react.useRef)(slashCommandActive);
+  slashCommandActiveRef.current = slashCommandActive;
+  const clearSlashCommandRef = (0, import_react.useRef)(clearSlashCommand);
+  clearSlashCommandRef.current = clearSlashCommand;
+  const onEscapeRef = (0, import_react.useRef)(onEscape);
+  onEscapeRef.current = onEscape;
+  const onKeyDownRef = (0, import_react.useRef)(onKeyDown);
+  onKeyDownRef.current = onKeyDown;
+  const onSelectionChangeRef = (0, import_react.useRef)(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const onSlashCommandMatchRef = (0, import_react.useRef)(onSlashCommandMatch);
+  onSlashCommandMatchRef.current = onSlashCommandMatch;
+  const onContentChangeRef = (0, import_react.useRef)(onContentChange);
+  onContentChangeRef.current = onContentChange;
+  const onMilestoneRef = (0, import_react.useRef)(onMilestone);
+  onMilestoneRef.current = onMilestone;
+  const containerIdRef = (0, import_react.useRef)(containerId);
+  containerIdRef.current = containerId;
+  const resolvedColorMap = (0, import_react.useMemo)(() => {
+    if (userColorMap) return userColorMap;
+    const map = /* @__PURE__ */ new Map();
+    templates.forEach((t) => {
+      map.set(t.name, { from: "#f43f5e", to: "#8b5cf6" });
+    });
+    return map.size > 0 ? map : DEFAULT_COLOR_MAP;
+  }, [userColorMap, templates]);
+  const editor = (0, import_react2.useEditor)(
+    {
+      immediatelyRender: false,
+      enablePasteRules: false,
+      enableInputRules: false,
+      editable: isEditing,
+      extensions: [
+        import_starter_kit.default.configure({
+          heading: false,
+          codeBlock: false
+        }),
+        import_extension_placeholder.default.configure({ placeholder }),
+        import_editor.GradientText.configure({
+          templateColorMap: resolvedColorMap,
+          speed,
+          jsonVariables
+        }),
+        import_editor.TemplateSuggestions.configure({
+          templates
+        }),
+        import_editor.LoadingNode
+      ],
+      content: (0, import_editor.plainTextToTipTapHtml)(content),
+      onUpdate: ({ editor: ed }) => {
+        const plainText = (0, import_editor.getEditorText)(ed);
+        onContentChangeRef.current?.(plainText);
+        if (onMilestoneRef.current) {
+          if (plainText.match(/(?<!\{)\{([^{}]+)\}(?!\})/g)) {
+            onMilestoneRef.current("used_variable");
+          }
+          if (plainText.match(/__([^_]+)__/g)) {
+            onMilestoneRef.current("used_magic");
+          }
+        }
+        const { state, view } = ed;
+        const { selection } = state;
+        const { $from, from, to } = selection;
+        onSelectionChangeRef.current?.({ from, to });
+        if (onSlashCommandMatchRef.current && clearSlashCommandRef.current) {
+          const textBeforeCursor = $from?.parent?.textBetween ? $from.parent.textBetween(0, $from.parentOffset) : "";
+          const slashMatch = textBeforeCursor.match(
+            /(?:^|\s)\/([a-zA-Z0-9_-]*)$/
+          );
+          if (slashMatch) {
+            const coords = view.coordsAtPos($from.pos);
+            const containerEl = document.getElementById(containerIdRef.current) || document.getElementById("editor-container") || view.dom.closest?.(".relative");
+            const containerCoords = containerEl?.getBoundingClientRect();
+            if (containerCoords) {
+              onSlashCommandMatchRef.current(
+                slashMatch,
+                $from.pos - slashMatch[0].length + (slashMatch[0].startsWith(" ") ? 1 : 0),
+                $from.pos,
+                {
+                  top: coords.bottom - containerCoords.top + 5,
+                  left: coords.left - containerCoords.left
+                }
+              );
+            }
+          } else {
+            clearSlashCommandRef.current();
+          }
+        }
+      },
+      onSelectionUpdate: ({ editor: ed }) => {
+        const { from, to } = ed.state.selection;
+        onSelectionChangeRef.current?.({ from, to });
+      },
+      editorProps: {
+        attributes: {
+          class: className || "w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words"
+        },
+        handleKeyDown: (view, event) => {
+          if (event.key === "Escape" && onEscapeRef.current) {
+            onEscapeRef.current();
+            return true;
+          }
+          if (onKeyDownRef.current) {
+            return onKeyDownRef.current(event);
+          }
+          return false;
+        },
+        clipboardTextParser: (text, context, _plain, view) => {
+          const schema = context?.doc?.type?.schema || context?.schema || view?.state?.schema;
+          if (!schema) return import_model.Slice.empty;
+          const blocks = text.replace(/\r\n?/g, "\n").split("\n");
+          const nodes = [];
+          blocks.forEach((line) => {
+            const nodeJson = { type: "paragraph" };
+            if (line.length > 0) {
+              nodeJson.content = [{ type: "text", text: line }];
+            }
+            try {
+              const node = import_model.Node.fromJSON(schema, nodeJson);
+              nodes.push(node);
+            } catch {
+            }
+          });
+          return import_model.Slice.maxOpen(import_model.Fragment.fromArray(nodes));
+        }
+      }
+    },
+    [templates, resolvedColorMap, isEditing, placeholder, speed]
+  );
+  return editor;
+}
+
+// src/hooks/useEditor.ts
+var import_react3 = require("@tiptap/react");
+var import_editor2 = require("@pixerate/editor");
+function useEditor2(options = {}) {
+  const { richTextOptions, extensions = [], ...editorOptions } = options;
+  const preset = (0, import_editor2.createRichTextPreset)(richTextOptions);
+  const combinedExtensions = [...preset, ...extensions];
+  return (0, import_react3.useEditor)({
+    extensions: combinedExtensions,
+    ...editorOptions
+  });
+}
+
+// src/components/EditorContent.tsx
+var import_react4 = require("@tiptap/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorContent = ({
+  className,
+  editor,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.EditorContent, { editor, ...props }) });
+};
+
+// src/components/BubbleMenu.tsx
+var import_react5 = require("@tiptap/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BubbleMenu = ({
+  editor,
+  className = "flex items-center gap-1 bg-popover text-popover-foreground border shadow-md rounded-md p-1",
+  children
+}) => {
+  if (!editor) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react5.BubbleMenu,
+    {
+      editor,
+      tippyOptions: { duration: 100 },
+      className,
+      children
+    }
+  );
+};
+
+// src/components/TemplateRenderer.tsx
+var import_react6 = require("react");
+var import_editor3 = require("@pixerate/editor");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TemplateRenderer = ({
+  content,
+  templates = [],
+  templateColorMap,
+  resolve = false,
+  className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
+  onTemplateClick,
+  onVariableClick
+}) => {
+  const displayText = (0, import_react6.useMemo)(() => {
+    if (!resolve || templates.length === 0) return content;
+    return (0, import_editor3.resolveTemplates)(content, templates);
+  }, [content, templates, resolve]);
+  const tokens = (0, import_react6.useMemo)(() => {
+    return (0, import_editor3.tokenizePrompt)(displayText);
+  }, [displayText]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: tokens.map((token, index) => {
+    if (token.type === "template") {
+      const colors = templateColorMap?.get(token.value) || {
+        from: "#f43f5e",
+        to: "#8b5cf6"
+      };
+      const style = {
+        "--color-from": colors.from,
+        "--color-to": colors.to
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style,
+          onClick: () => onTemplateClick?.(token.value),
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all",
+          title: `Template: ${token.value}`,
+          children: `{{${token.value}}}`
+        },
+        index
+      );
+    }
+    if (token.type === "variable") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          onClick: () => onVariableClick?.(token.value),
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all",
+          title: `Variable: ${token.value}`,
+          children: `{${token.value}}`
+        },
+        index
+      );
+    }
+    if (token.type === "instruction") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600 dark:text-rose-300",
+          title: `Instruction: ${token.value}`,
+          children: `__${token.value}__`
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: token.value }, index);
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BubbleMenu,
+  EditorContent,
+  TemplateRenderer,
+  useEditor,
+  usePromptEditor
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/usePromptEditor.ts","../src/hooks/useEditor.ts","../src/components/EditorContent.tsx","../src/components/BubbleMenu.tsx","../src/components/TemplateRenderer.tsx"],"sourcesContent":["export * from \"./hooks/usePromptEditor\";\nexport * from \"./hooks/useEditor\";\nexport * from \"./components/EditorContent\";\nexport * from \"./components/BubbleMenu\";\nexport * from \"./components/TemplateRenderer\";\n\n// Re-export core types for easy consumer access\nexport type {\n  Template,\n  TemplateVersion,\n  Token,\n  TokenType,\n  ColorGradient,\n  RichTextPresetOptions,\n} from \"@pixerate/editor\";\n","import { useMemo, useEffect, useRef } from \"react\";\nimport { useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { Slice, Fragment, Node as ProsemirrorNode } from \"@tiptap/pm/model\";\nimport {\n  Template,\n  ColorGradient,\n  GradientText,\n  TemplateSuggestions,\n  LoadingNode,\n  plainTextToTipTapHtml,\n  getEditorText,\n} from \"@pixerate/editor\";\n\nexport interface UsePromptEditorProps {\n  /** The initial or controlled content of the editor as plain text */\n  content: string;\n  /** Callback fired when the editor content changes (returns plain text) */\n  onContentChange: (text: string) => void;\n  /** List of available templates to be suggested and highlighted */\n  templates?: Template[];\n  /** Custom gradient color map for templates */\n  templateColorMap?: Map<string, ColorGradient>;\n  /** Whether the editor is editable */\n  isEditing?: boolean;\n  /** Placeholder text for the editor */\n  placeholder?: string;\n  /** Additional CSS classes for the editor container */\n  className?: string;\n  /** Callback fired when the Escape key is pressed */\n  onEscape?: () => void;\n  /** Custom keydown handler. Return true to prevent default behavior */\n  onKeyDown?: (event: KeyboardEvent) => boolean;\n  /** Callback fired when text selection changes */\n  onSelectionChange?: (selection: { from: number; to: number } | null) => void;\n  /** Callback fired when a slash command (e.g., /template) matches */\n  onSlashCommandMatch?: (\n    match: RegExpMatchArray,\n    from: number,\n    to: number,\n    coords: { top: number; left: number },\n  ) => void;\n  /** Callback to dismiss/clear the active slash command */\n  clearSlashCommand?: () => void;\n  /** Whether a slash command menu is currently active */\n  slashCommandActive?: boolean;\n  /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */\n  onMilestone?: (milestone: string) => void;\n  /** DOM element ID of the container, used for positioning popovers */\n  containerId?: string;\n  /** Variable names originating from structured JSON output steps */\n  jsonVariables?: string[];\n  /** Animation speed for gradient decorations */\n  speed?: number;\n}\n\nconst DEFAULT_TEMPLATES: Template[] = [];\nconst DEFAULT_COLOR_MAP = new Map<string, ColorGradient>([\n  [\"default\", { from: \"#f43f5e\", to: \"#8b5cf6\" }],\n]);\n\nexport function usePromptEditor({\n  content,\n  onContentChange,\n  templates = DEFAULT_TEMPLATES,\n  templateColorMap: userColorMap,\n  isEditing = true,\n  placeholder = \"Write a prompt, use {{template}}, {variable}, or /command...\",\n  className,\n  onEscape,\n  onKeyDown,\n  onSelectionChange,\n  onSlashCommandMatch,\n  clearSlashCommand,\n  slashCommandActive = false,\n  onMilestone,\n  containerId = \"editor-container\",\n  jsonVariables,\n  speed = 2,\n}: UsePromptEditorProps) {\n  const slashCommandActiveRef = useRef(slashCommandActive);\n  slashCommandActiveRef.current = slashCommandActive;\n\n  const clearSlashCommandRef = useRef(clearSlashCommand);\n  clearSlashCommandRef.current = clearSlashCommand;\n\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  const onKeyDownRef = useRef(onKeyDown);\n  onKeyDownRef.current = onKeyDown;\n\n  const onSelectionChangeRef = useRef(onSelectionChange);\n  onSelectionChangeRef.current = onSelectionChange;\n\n  const onSlashCommandMatchRef = useRef(onSlashCommandMatch);\n  onSlashCommandMatchRef.current = onSlashCommandMatch;\n\n  const onContentChangeRef = useRef(onContentChange);\n  onContentChangeRef.current = onContentChange;\n\n  const onMilestoneRef = useRef(onMilestone);\n  onMilestoneRef.current = onMilestone;\n\n  const containerIdRef = useRef(containerId);\n  containerIdRef.current = containerId;\n\n  const resolvedColorMap = useMemo(() => {\n    if (userColorMap) return userColorMap;\n    const map = new Map<string, ColorGradient>();\n    templates.forEach((t) => {\n      map.set(t.name, { from: \"#f43f5e\", to: \"#8b5cf6\" });\n    });\n    return map.size > 0 ? map : DEFAULT_COLOR_MAP;\n  }, [userColorMap, templates]);\n\n  const editor = useEditor(\n    {\n      immediatelyRender: false,\n      enablePasteRules: false,\n      enableInputRules: false,\n      editable: isEditing,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n        }),\n        Placeholder.configure({ placeholder }),\n        GradientText.configure({\n          templateColorMap: resolvedColorMap,\n          speed,\n          jsonVariables,\n        }),\n        TemplateSuggestions.configure({\n          templates,\n        }),\n        LoadingNode,\n      ],\n      content: plainTextToTipTapHtml(content),\n      onUpdate: ({ editor: ed }) => {\n        const plainText = getEditorText(ed);\n        onContentChangeRef.current?.(plainText);\n\n        if (onMilestoneRef.current) {\n          if (plainText.match(/(?<!\\{)\\{([^{}]+)\\}(?!\\})/g)) {\n            onMilestoneRef.current(\"used_variable\");\n          }\n          if (plainText.match(/__([^_]+)__/g)) {\n            onMilestoneRef.current(\"used_magic\");\n          }\n        }\n\n        const { state, view } = ed;\n        const { selection } = state;\n        const { $from, from, to } = selection;\n\n        onSelectionChangeRef.current?.({ from, to });\n\n        if (onSlashCommandMatchRef.current && clearSlashCommandRef.current) {\n          const textBeforeCursor = $from?.parent?.textBetween\n            ? $from.parent.textBetween(0, $from.parentOffset)\n            : \"\";\n          const slashMatch = textBeforeCursor.match(\n            /(?:^|\\s)\\/([a-zA-Z0-9_-]*)$/,\n          );\n\n          if (slashMatch) {\n            const coords = view.coordsAtPos($from.pos);\n            const containerEl =\n              document.getElementById(containerIdRef.current) ||\n              document.getElementById(\"editor-container\") ||\n              (view.dom.closest?.(\".relative\") as HTMLElement | null);\n            const containerCoords = containerEl?.getBoundingClientRect();\n\n            if (containerCoords) {\n              onSlashCommandMatchRef.current(\n                slashMatch,\n                $from.pos -\n                  slashMatch[0].length +\n                  (slashMatch[0].startsWith(\" \") ? 1 : 0),\n                $from.pos,\n                {\n                  top: coords.bottom - containerCoords.top + 5,\n                  left: coords.left - containerCoords.left,\n                },\n              );\n            }\n          } else {\n            clearSlashCommandRef.current();\n          }\n        }\n      },\n      onSelectionUpdate: ({ editor: ed }) => {\n        const { from, to } = ed.state.selection;\n        onSelectionChangeRef.current?.({ from, to });\n      },\n      editorProps: {\n        attributes: {\n          class:\n            className ||\n            \"w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words\",\n        },\n        handleKeyDown: (view, event) => {\n          if (event.key === \"Escape\" && onEscapeRef.current) {\n            onEscapeRef.current();\n            return true;\n          }\n          if (onKeyDownRef.current) {\n            return onKeyDownRef.current(event);\n          }\n          return false;\n        },\n        clipboardTextParser: (text, context, _plain, view) => {\n          const schema =\n            (context as any)?.doc?.type?.schema ||\n            (context as any)?.schema ||\n            view?.state?.schema;\n\n          if (!schema) return Slice.empty;\n\n          const blocks = text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const nodes: ProsemirrorNode[] = [];\n\n          blocks.forEach((line) => {\n            const nodeJson: any = { type: \"paragraph\" };\n            if (line.length > 0) {\n              nodeJson.content = [{ type: \"text\", text: line }];\n            }\n            try {\n              const node = ProsemirrorNode.fromJSON(schema, nodeJson);\n              nodes.push(node);\n            } catch {\n              // Ignore\n            }\n          });\n\n          return Slice.maxOpen(Fragment.fromArray(nodes));\n        },\n      },\n    },\n    [templates, resolvedColorMap, isEditing, placeholder, speed],\n  );\n\n  return editor;\n}\n","import { useEditor as useTipTapEditor, UseEditorOptions } from \"@tiptap/react\";\nimport { createRichTextPreset, RichTextPresetOptions } from \"@pixerate/editor\";\n\nexport interface UseRichEditorProps extends UseEditorOptions {\n  richTextOptions?: RichTextPresetOptions;\n}\n\n/**\n * Hook to initialize a TipTap rich-text editor instance with pre-configured extensions.\n */\nexport function useEditor(options: UseRichEditorProps = {}) {\n  const { richTextOptions, extensions = [], ...editorOptions } = options;\n\n  const preset = createRichTextPreset(richTextOptions);\n  const combinedExtensions = [...preset, ...extensions];\n\n  return useTipTapEditor({\n    extensions: combinedExtensions,\n    ...editorOptions,\n  });\n}\n","import React from \"react\";\nimport {\n  EditorContent as TipTapEditorContent,\n  EditorContentProps as TipTapEditorContentProps,\n} from \"@tiptap/react\";\n\nexport interface EditorContentProps extends TipTapEditorContentProps {\n  className?: string;\n}\n\nexport const EditorContent: React.FC<EditorContentProps> = ({\n  className,\n  editor,\n  ...props\n}) => {\n  return (\n    <div className={className}>\n      <TipTapEditorContent editor={editor} {...props} />\n    </div>\n  );\n};\n","import React from \"react\";\nimport { BubbleMenu as TipTapBubbleMenu } from \"@tiptap/react\";\nimport type { Editor } from \"@tiptap/core\";\n\nexport interface BubbleMenuProps {\n  editor: Editor | null;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const BubbleMenu: React.FC<BubbleMenuProps> = ({\n  editor,\n  className = \"flex items-center gap-1 bg-popover text-popover-foreground border shadow-md rounded-md p-1\",\n  children,\n}) => {\n  if (!editor) return null;\n\n  return (\n    <TipTapBubbleMenu\n      editor={editor}\n      tippyOptions={{ duration: 100 }}\n      className={className}\n    >\n      {children}\n    </TipTapBubbleMenu>\n  );\n};\n","import React, { useMemo } from \"react\";\nimport {\n  tokenizePrompt,\n  resolveTemplates,\n  Template,\n  ColorGradient,\n} from \"@pixerate/editor\";\n\nexport interface TemplateRendererProps {\n  /** Raw prompt or text string to render */\n  content: string;\n  /** Available templates for recursive resolution and custom coloring */\n  templates?: Template[];\n  /** Custom gradient color map for templates */\n  templateColorMap?: Map<string, ColorGradient>;\n  /** Whether to resolve nested templates recursively before displaying */\n  resolve?: boolean;\n  /** Custom class name for the wrapper */\n  className?: string;\n  /** Click callback for template badges */\n  onTemplateClick?: (templateName: string) => void;\n  /** Click callback for variable badges */\n  onVariableClick?: (variableName: string) => void;\n}\n\nexport const TemplateRenderer: React.FC<TemplateRendererProps> = ({\n  content,\n  templates = [],\n  templateColorMap,\n  resolve = false,\n  className = \"font-mono text-sm leading-relaxed whitespace-pre-wrap break-words\",\n  onTemplateClick,\n  onVariableClick,\n}) => {\n  const displayText = useMemo(() => {\n    if (!resolve || templates.length === 0) return content;\n    return resolveTemplates(content, templates);\n  }, [content, templates, resolve]);\n\n  const tokens = useMemo(() => {\n    return tokenizePrompt(displayText);\n  }, [displayText]);\n\n  return (\n    <div className={className}>\n      {tokens.map((token, index) => {\n        if (token.type === \"template\") {\n          const colors = templateColorMap?.get(token.value) || {\n            from: \"#f43f5e\",\n            to: \"#8b5cf6\",\n          };\n          const style = {\n            \"--color-from\": colors.from,\n            \"--color-to\": colors.to,\n          } as React.CSSProperties;\n\n          return (\n            <span\n              key={index}\n              style={style}\n              onClick={() => onTemplateClick?.(token.value)}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all\"\n              title={`Template: ${token.value}`}\n            >\n              {`{{${token.value}}}`}\n            </span>\n          );\n        }\n\n        if (token.type === \"variable\") {\n          return (\n            <span\n              key={index}\n              onClick={() => onVariableClick?.(token.value)}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all\"\n              title={`Variable: ${token.value}`}\n            >\n              {`{${token.value}}`}\n            </span>\n          );\n        }\n\n        if (token.type === \"instruction\") {\n          return (\n            <span\n              key={index}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600 dark:text-rose-300\"\n              title={`Instruction: ${token.value}`}\n            >\n              {`__${token.value}__`}\n            </span>\n          );\n        }\n\n        return <span key={index}>{token.value}</span>;\n      })}\n    </div>\n  );\n};\n"],"mappings":"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","names":["useEditor","import_react","StarterKit","Placeholder","ProsemirrorNode","import_react","import_editor","useEditor","useTipTapEditor","import_react","TipTapEditorContent","import_react","import_jsx_runtime","TipTapBubbleMenu","import_react","import_editor","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,90 @@
+import * as _tiptap_core from '@tiptap/core';
+import { Editor } from '@tiptap/core';
+import { Template, ColorGradient, RichTextPresetOptions } from '@pixerate/editor';
+export { ColorGradient, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType } from '@pixerate/editor';
+import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
+import React from 'react';
+
+interface UsePromptEditorProps {
+    /** The initial or controlled content of the editor as plain text */
+    content: string;
+    /** Callback fired when the editor content changes (returns plain text) */
+    onContentChange: (text: string) => void;
+    /** List of available templates to be suggested and highlighted */
+    templates?: Template[];
+    /** Custom gradient color map for templates */
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Whether the editor is editable */
+    isEditing?: boolean;
+    /** Placeholder text for the editor */
+    placeholder?: string;
+    /** Additional CSS classes for the editor container */
+    className?: string;
+    /** Callback fired when the Escape key is pressed */
+    onEscape?: () => void;
+    /** Custom keydown handler. Return true to prevent default behavior */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /** Callback fired when text selection changes */
+    onSelectionChange?: (selection: {
+        from: number;
+        to: number;
+    } | null) => void;
+    /** Callback fired when a slash command (e.g., /template) matches */
+    onSlashCommandMatch?: (match: RegExpMatchArray, from: number, to: number, coords: {
+        top: number;
+        left: number;
+    }) => void;
+    /** Callback to dismiss/clear the active slash command */
+    clearSlashCommand?: () => void;
+    /** Whether a slash command menu is currently active */
+    slashCommandActive?: boolean;
+    /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */
+    onMilestone?: (milestone: string) => void;
+    /** DOM element ID of the container, used for positioning popovers */
+    containerId?: string;
+    /** Variable names originating from structured JSON output steps */
+    jsonVariables?: string[];
+    /** Animation speed for gradient decorations */
+    speed?: number;
+}
+declare function usePromptEditor({ content, onContentChange, templates, templateColorMap: userColorMap, isEditing, placeholder, className, onEscape, onKeyDown, onSelectionChange, onSlashCommandMatch, clearSlashCommand, slashCommandActive, onMilestone, containerId, jsonVariables, speed, }: UsePromptEditorProps): _tiptap_core.Editor | null;
+
+interface UseRichEditorProps extends UseEditorOptions {
+    richTextOptions?: RichTextPresetOptions;
+}
+/**
+ * Hook to initialize a TipTap rich-text editor instance with pre-configured extensions.
+ */
+declare function useEditor(options?: UseRichEditorProps): _tiptap_core.Editor | null;
+
+interface EditorContentProps extends EditorContentProps$1 {
+    className?: string;
+}
+declare const EditorContent: React.FC<EditorContentProps>;
+
+interface BubbleMenuProps {
+    editor: Editor | null;
+    className?: string;
+    children: React.ReactNode;
+}
+declare const BubbleMenu: React.FC<BubbleMenuProps>;
+
+interface TemplateRendererProps {
+    /** Raw prompt or text string to render */
+    content: string;
+    /** Available templates for recursive resolution and custom coloring */
+    templates?: Template[];
+    /** Custom gradient color map for templates */
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Whether to resolve nested templates recursively before displaying */
+    resolve?: boolean;
+    /** Custom class name for the wrapper */
+    className?: string;
+    /** Click callback for template badges */
+    onTemplateClick?: (templateName: string) => void;
+    /** Click callback for variable badges */
+    onVariableClick?: (variableName: string) => void;
+}
+declare const TemplateRenderer: React.FC<TemplateRendererProps>;
+
+export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor };

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+import * as _tiptap_core from '@tiptap/core';
+import { Editor } from '@tiptap/core';
+import { Template, ColorGradient, RichTextPresetOptions } from '@pixerate/editor';
+export { ColorGradient, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType } from '@pixerate/editor';
+import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
+import React from 'react';
+
+interface UsePromptEditorProps {
+    /** The initial or controlled content of the editor as plain text */
+    content: string;
+    /** Callback fired when the editor content changes (returns plain text) */
+    onContentChange: (text: string) => void;
+    /** List of available templates to be suggested and highlighted */
+    templates?: Template[];
+    /** Custom gradient color map for templates */
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Whether the editor is editable */
+    isEditing?: boolean;
+    /** Placeholder text for the editor */
+    placeholder?: string;
+    /** Additional CSS classes for the editor container */
+    className?: string;
+    /** Callback fired when the Escape key is pressed */
+    onEscape?: () => void;
+    /** Custom keydown handler. Return true to prevent default behavior */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /** Callback fired when text selection changes */
+    onSelectionChange?: (selection: {
+        from: number;
+        to: number;
+    } | null) => void;
+    /** Callback fired when a slash command (e.g., /template) matches */
+    onSlashCommandMatch?: (match: RegExpMatchArray, from: number, to: number, coords: {
+        top: number;
+        left: number;
+    }) => void;
+    /** Callback to dismiss/clear the active slash command */
+    clearSlashCommand?: () => void;
+    /** Whether a slash command menu is currently active */
+    slashCommandActive?: boolean;
+    /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */
+    onMilestone?: (milestone: string) => void;
+    /** DOM element ID of the container, used for positioning popovers */
+    containerId?: string;
+    /** Variable names originating from structured JSON output steps */
+    jsonVariables?: string[];
+    /** Animation speed for gradient decorations */
+    speed?: number;
+}
+declare function usePromptEditor({ content, onContentChange, templates, templateColorMap: userColorMap, isEditing, placeholder, className, onEscape, onKeyDown, onSelectionChange, onSlashCommandMatch, clearSlashCommand, slashCommandActive, onMilestone, containerId, jsonVariables, speed, }: UsePromptEditorProps): _tiptap_core.Editor | null;
+
+interface UseRichEditorProps extends UseEditorOptions {
+    richTextOptions?: RichTextPresetOptions;
+}
+/**
+ * Hook to initialize a TipTap rich-text editor instance with pre-configured extensions.
+ */
+declare function useEditor(options?: UseRichEditorProps): _tiptap_core.Editor | null;
+
+interface EditorContentProps extends EditorContentProps$1 {
+    className?: string;
+}
+declare const EditorContent: React.FC<EditorContentProps>;
+
+interface BubbleMenuProps {
+    editor: Editor | null;
+    className?: string;
+    children: React.ReactNode;
+}
+declare const BubbleMenu: React.FC<BubbleMenuProps>;
+
+interface TemplateRendererProps {
+    /** Raw prompt or text string to render */
+    content: string;
+    /** Available templates for recursive resolution and custom coloring */
+    templates?: Template[];
+    /** Custom gradient color map for templates */
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Whether to resolve nested templates recursively before displaying */
+    resolve?: boolean;
+    /** Custom class name for the wrapper */
+    className?: string;
+    /** Click callback for template badges */
+    onTemplateClick?: (templateName: string) => void;
+    /** Click callback for variable badges */
+    onVariableClick?: (variableName: string) => void;
+}
+declare const TemplateRenderer: React.FC<TemplateRendererProps>;
+
+export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor };

package/dist/index.js

@@ -0,0 +1,293 @@
+// src/hooks/usePromptEditor.ts
+import { useMemo, useRef } from "react";
+import { useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Slice, Fragment, Node as ProsemirrorNode } from "@tiptap/pm/model";
+import {
+  GradientText,
+  TemplateSuggestions,
+  LoadingNode,
+  plainTextToTipTapHtml,
+  getEditorText
+} from "@pixerate/editor";
+var DEFAULT_TEMPLATES = [];
+var DEFAULT_COLOR_MAP = /* @__PURE__ */ new Map([
+  ["default", { from: "#f43f5e", to: "#8b5cf6" }]
+]);
+function usePromptEditor({
+  content,
+  onContentChange,
+  templates = DEFAULT_TEMPLATES,
+  templateColorMap: userColorMap,
+  isEditing = true,
+  placeholder = "Write a prompt, use {{template}}, {variable}, or /command...",
+  className,
+  onEscape,
+  onKeyDown,
+  onSelectionChange,
+  onSlashCommandMatch,
+  clearSlashCommand,
+  slashCommandActive = false,
+  onMilestone,
+  containerId = "editor-container",
+  jsonVariables,
+  speed = 2
+}) {
+  const slashCommandActiveRef = useRef(slashCommandActive);
+  slashCommandActiveRef.current = slashCommandActive;
+  const clearSlashCommandRef = useRef(clearSlashCommand);
+  clearSlashCommandRef.current = clearSlashCommand;
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  const onKeyDownRef = useRef(onKeyDown);
+  onKeyDownRef.current = onKeyDown;
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const onSlashCommandMatchRef = useRef(onSlashCommandMatch);
+  onSlashCommandMatchRef.current = onSlashCommandMatch;
+  const onContentChangeRef = useRef(onContentChange);
+  onContentChangeRef.current = onContentChange;
+  const onMilestoneRef = useRef(onMilestone);
+  onMilestoneRef.current = onMilestone;
+  const containerIdRef = useRef(containerId);
+  containerIdRef.current = containerId;
+  const resolvedColorMap = useMemo(() => {
+    if (userColorMap) return userColorMap;
+    const map = /* @__PURE__ */ new Map();
+    templates.forEach((t) => {
+      map.set(t.name, { from: "#f43f5e", to: "#8b5cf6" });
+    });
+    return map.size > 0 ? map : DEFAULT_COLOR_MAP;
+  }, [userColorMap, templates]);
+  const editor = useEditor(
+    {
+      immediatelyRender: false,
+      enablePasteRules: false,
+      enableInputRules: false,
+      editable: isEditing,
+      extensions: [
+        StarterKit.configure({
+          heading: false,
+          codeBlock: false
+        }),
+        Placeholder.configure({ placeholder }),
+        GradientText.configure({
+          templateColorMap: resolvedColorMap,
+          speed,
+          jsonVariables
+        }),
+        TemplateSuggestions.configure({
+          templates
+        }),
+        LoadingNode
+      ],
+      content: plainTextToTipTapHtml(content),
+      onUpdate: ({ editor: ed }) => {
+        const plainText = getEditorText(ed);
+        onContentChangeRef.current?.(plainText);
+        if (onMilestoneRef.current) {
+          if (plainText.match(/(?<!\{)\{([^{}]+)\}(?!\})/g)) {
+            onMilestoneRef.current("used_variable");
+          }
+          if (plainText.match(/__([^_]+)__/g)) {
+            onMilestoneRef.current("used_magic");
+          }
+        }
+        const { state, view } = ed;
+        const { selection } = state;
+        const { $from, from, to } = selection;
+        onSelectionChangeRef.current?.({ from, to });
+        if (onSlashCommandMatchRef.current && clearSlashCommandRef.current) {
+          const textBeforeCursor = $from?.parent?.textBetween ? $from.parent.textBetween(0, $from.parentOffset) : "";
+          const slashMatch = textBeforeCursor.match(
+            /(?:^|\s)\/([a-zA-Z0-9_-]*)$/
+          );
+          if (slashMatch) {
+            const coords = view.coordsAtPos($from.pos);
+            const containerEl = document.getElementById(containerIdRef.current) || document.getElementById("editor-container") || view.dom.closest?.(".relative");
+            const containerCoords = containerEl?.getBoundingClientRect();
+            if (containerCoords) {
+              onSlashCommandMatchRef.current(
+                slashMatch,
+                $from.pos - slashMatch[0].length + (slashMatch[0].startsWith(" ") ? 1 : 0),
+                $from.pos,
+                {
+                  top: coords.bottom - containerCoords.top + 5,
+                  left: coords.left - containerCoords.left
+                }
+              );
+            }
+          } else {
+            clearSlashCommandRef.current();
+          }
+        }
+      },
+      onSelectionUpdate: ({ editor: ed }) => {
+        const { from, to } = ed.state.selection;
+        onSelectionChangeRef.current?.({ from, to });
+      },
+      editorProps: {
+        attributes: {
+          class: className || "w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words"
+        },
+        handleKeyDown: (view, event) => {
+          if (event.key === "Escape" && onEscapeRef.current) {
+            onEscapeRef.current();
+            return true;
+          }
+          if (onKeyDownRef.current) {
+            return onKeyDownRef.current(event);
+          }
+          return false;
+        },
+        clipboardTextParser: (text, context, _plain, view) => {
+          const schema = context?.doc?.type?.schema || context?.schema || view?.state?.schema;
+          if (!schema) return Slice.empty;
+          const blocks = text.replace(/\r\n?/g, "\n").split("\n");
+          const nodes = [];
+          blocks.forEach((line) => {
+            const nodeJson = { type: "paragraph" };
+            if (line.length > 0) {
+              nodeJson.content = [{ type: "text", text: line }];
+            }
+            try {
+              const node = ProsemirrorNode.fromJSON(schema, nodeJson);
+              nodes.push(node);
+            } catch {
+            }
+          });
+          return Slice.maxOpen(Fragment.fromArray(nodes));
+        }
+      }
+    },
+    [templates, resolvedColorMap, isEditing, placeholder, speed]
+  );
+  return editor;
+}
+
+// src/hooks/useEditor.ts
+import { useEditor as useTipTapEditor } from "@tiptap/react";
+import { createRichTextPreset } from "@pixerate/editor";
+function useEditor2(options = {}) {
+  const { richTextOptions, extensions = [], ...editorOptions } = options;
+  const preset = createRichTextPreset(richTextOptions);
+  const combinedExtensions = [...preset, ...extensions];
+  return useTipTapEditor({
+    extensions: combinedExtensions,
+    ...editorOptions
+  });
+}
+
+// src/components/EditorContent.tsx
+import {
+  EditorContent as TipTapEditorContent
+} from "@tiptap/react";
+import { jsx } from "react/jsx-runtime";
+var EditorContent = ({
+  className,
+  editor,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TipTapEditorContent, { editor, ...props }) });
+};
+
+// src/components/BubbleMenu.tsx
+import { BubbleMenu as TipTapBubbleMenu } from "@tiptap/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BubbleMenu = ({
+  editor,
+  className = "flex items-center gap-1 bg-popover text-popover-foreground border shadow-md rounded-md p-1",
+  children
+}) => {
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx2(
+    TipTapBubbleMenu,
+    {
+      editor,
+      tippyOptions: { duration: 100 },
+      className,
+      children
+    }
+  );
+};
+
+// src/components/TemplateRenderer.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  tokenizePrompt,
+  resolveTemplates
+} from "@pixerate/editor";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TemplateRenderer = ({
+  content,
+  templates = [],
+  templateColorMap,
+  resolve = false,
+  className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
+  onTemplateClick,
+  onVariableClick
+}) => {
+  const displayText = useMemo2(() => {
+    if (!resolve || templates.length === 0) return content;
+    return resolveTemplates(content, templates);
+  }, [content, templates, resolve]);
+  const tokens = useMemo2(() => {
+    return tokenizePrompt(displayText);
+  }, [displayText]);
+  return /* @__PURE__ */ jsx3("div", { className, children: tokens.map((token, index) => {
+    if (token.type === "template") {
+      const colors = templateColorMap?.get(token.value) || {
+        from: "#f43f5e",
+        to: "#8b5cf6"
+      };
+      const style = {
+        "--color-from": colors.from,
+        "--color-to": colors.to
+      };
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          style,
+          onClick: () => onTemplateClick?.(token.value),
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all",
+          title: `Template: ${token.value}`,
+          children: `{{${token.value}}}`
+        },
+        index
+      );
+    }
+    if (token.type === "variable") {
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          onClick: () => onVariableClick?.(token.value),
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all",
+          title: `Variable: ${token.value}`,
+          children: `{${token.value}}`
+        },
+        index
+      );
+    }
+    if (token.type === "instruction") {
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600 dark:text-rose-300",
+          title: `Instruction: ${token.value}`,
+          children: `__${token.value}__`
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsx3("span", { children: token.value }, index);
+  }) });
+};
+export {
+  BubbleMenu,
+  EditorContent,
+  TemplateRenderer,
+  useEditor2 as useEditor,
+  usePromptEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/usePromptEditor.ts","../src/hooks/useEditor.ts","../src/components/EditorContent.tsx","../src/components/BubbleMenu.tsx","../src/components/TemplateRenderer.tsx"],"sourcesContent":["import { useMemo, useEffect, useRef } from \"react\";\nimport { useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { Slice, Fragment, Node as ProsemirrorNode } from \"@tiptap/pm/model\";\nimport {\n  Template,\n  ColorGradient,\n  GradientText,\n  TemplateSuggestions,\n  LoadingNode,\n  plainTextToTipTapHtml,\n  getEditorText,\n} from \"@pixerate/editor\";\n\nexport interface UsePromptEditorProps {\n  /** The initial or controlled content of the editor as plain text */\n  content: string;\n  /** Callback fired when the editor content changes (returns plain text) */\n  onContentChange: (text: string) => void;\n  /** List of available templates to be suggested and highlighted */\n  templates?: Template[];\n  /** Custom gradient color map for templates */\n  templateColorMap?: Map<string, ColorGradient>;\n  /** Whether the editor is editable */\n  isEditing?: boolean;\n  /** Placeholder text for the editor */\n  placeholder?: string;\n  /** Additional CSS classes for the editor container */\n  className?: string;\n  /** Callback fired when the Escape key is pressed */\n  onEscape?: () => void;\n  /** Custom keydown handler. Return true to prevent default behavior */\n  onKeyDown?: (event: KeyboardEvent) => boolean;\n  /** Callback fired when text selection changes */\n  onSelectionChange?: (selection: { from: number; to: number } | null) => void;\n  /** Callback fired when a slash command (e.g., /template) matches */\n  onSlashCommandMatch?: (\n    match: RegExpMatchArray,\n    from: number,\n    to: number,\n    coords: { top: number; left: number },\n  ) => void;\n  /** Callback to dismiss/clear the active slash command */\n  clearSlashCommand?: () => void;\n  /** Whether a slash command menu is currently active */\n  slashCommandActive?: boolean;\n  /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */\n  onMilestone?: (milestone: string) => void;\n  /** DOM element ID of the container, used for positioning popovers */\n  containerId?: string;\n  /** Variable names originating from structured JSON output steps */\n  jsonVariables?: string[];\n  /** Animation speed for gradient decorations */\n  speed?: number;\n}\n\nconst DEFAULT_TEMPLATES: Template[] = [];\nconst DEFAULT_COLOR_MAP = new Map<string, ColorGradient>([\n  [\"default\", { from: \"#f43f5e\", to: \"#8b5cf6\" }],\n]);\n\nexport function usePromptEditor({\n  content,\n  onContentChange,\n  templates = DEFAULT_TEMPLATES,\n  templateColorMap: userColorMap,\n  isEditing = true,\n  placeholder = \"Write a prompt, use {{template}}, {variable}, or /command...\",\n  className,\n  onEscape,\n  onKeyDown,\n  onSelectionChange,\n  onSlashCommandMatch,\n  clearSlashCommand,\n  slashCommandActive = false,\n  onMilestone,\n  containerId = \"editor-container\",\n  jsonVariables,\n  speed = 2,\n}: UsePromptEditorProps) {\n  const slashCommandActiveRef = useRef(slashCommandActive);\n  slashCommandActiveRef.current = slashCommandActive;\n\n  const clearSlashCommandRef = useRef(clearSlashCommand);\n  clearSlashCommandRef.current = clearSlashCommand;\n\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  const onKeyDownRef = useRef(onKeyDown);\n  onKeyDownRef.current = onKeyDown;\n\n  const onSelectionChangeRef = useRef(onSelectionChange);\n  onSelectionChangeRef.current = onSelectionChange;\n\n  const onSlashCommandMatchRef = useRef(onSlashCommandMatch);\n  onSlashCommandMatchRef.current = onSlashCommandMatch;\n\n  const onContentChangeRef = useRef(onContentChange);\n  onContentChangeRef.current = onContentChange;\n\n  const onMilestoneRef = useRef(onMilestone);\n  onMilestoneRef.current = onMilestone;\n\n  const containerIdRef = useRef(containerId);\n  containerIdRef.current = containerId;\n\n  const resolvedColorMap = useMemo(() => {\n    if (userColorMap) return userColorMap;\n    const map = new Map<string, ColorGradient>();\n    templates.forEach((t) => {\n      map.set(t.name, { from: \"#f43f5e\", to: \"#8b5cf6\" });\n    });\n    return map.size > 0 ? map : DEFAULT_COLOR_MAP;\n  }, [userColorMap, templates]);\n\n  const editor = useEditor(\n    {\n      immediatelyRender: false,\n      enablePasteRules: false,\n      enableInputRules: false,\n      editable: isEditing,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n        }),\n        Placeholder.configure({ placeholder }),\n        GradientText.configure({\n          templateColorMap: resolvedColorMap,\n          speed,\n          jsonVariables,\n        }),\n        TemplateSuggestions.configure({\n          templates,\n        }),\n        LoadingNode,\n      ],\n      content: plainTextToTipTapHtml(content),\n      onUpdate: ({ editor: ed }) => {\n        const plainText = getEditorText(ed);\n        onContentChangeRef.current?.(plainText);\n\n        if (onMilestoneRef.current) {\n          if (plainText.match(/(?<!\\{)\\{([^{}]+)\\}(?!\\})/g)) {\n            onMilestoneRef.current(\"used_variable\");\n          }\n          if (plainText.match(/__([^_]+)__/g)) {\n            onMilestoneRef.current(\"used_magic\");\n          }\n        }\n\n        const { state, view } = ed;\n        const { selection } = state;\n        const { $from, from, to } = selection;\n\n        onSelectionChangeRef.current?.({ from, to });\n\n        if (onSlashCommandMatchRef.current && clearSlashCommandRef.current) {\n          const textBeforeCursor = $from?.parent?.textBetween\n            ? $from.parent.textBetween(0, $from.parentOffset)\n            : \"\";\n          const slashMatch = textBeforeCursor.match(\n            /(?:^|\\s)\\/([a-zA-Z0-9_-]*)$/,\n          );\n\n          if (slashMatch) {\n            const coords = view.coordsAtPos($from.pos);\n            const containerEl =\n              document.getElementById(containerIdRef.current) ||\n              document.getElementById(\"editor-container\") ||\n              (view.dom.closest?.(\".relative\") as HTMLElement | null);\n            const containerCoords = containerEl?.getBoundingClientRect();\n\n            if (containerCoords) {\n              onSlashCommandMatchRef.current(\n                slashMatch,\n                $from.pos -\n                  slashMatch[0].length +\n                  (slashMatch[0].startsWith(\" \") ? 1 : 0),\n                $from.pos,\n                {\n                  top: coords.bottom - containerCoords.top + 5,\n                  left: coords.left - containerCoords.left,\n                },\n              );\n            }\n          } else {\n            clearSlashCommandRef.current();\n          }\n        }\n      },\n      onSelectionUpdate: ({ editor: ed }) => {\n        const { from, to } = ed.state.selection;\n        onSelectionChangeRef.current?.({ from, to });\n      },\n      editorProps: {\n        attributes: {\n          class:\n            className ||\n            \"w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words\",\n        },\n        handleKeyDown: (view, event) => {\n          if (event.key === \"Escape\" && onEscapeRef.current) {\n            onEscapeRef.current();\n            return true;\n          }\n          if (onKeyDownRef.current) {\n            return onKeyDownRef.current(event);\n          }\n          return false;\n        },\n        clipboardTextParser: (text, context, _plain, view) => {\n          const schema =\n            (context as any)?.doc?.type?.schema ||\n            (context as any)?.schema ||\n            view?.state?.schema;\n\n          if (!schema) return Slice.empty;\n\n          const blocks = text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const nodes: ProsemirrorNode[] = [];\n\n          blocks.forEach((line) => {\n            const nodeJson: any = { type: \"paragraph\" };\n            if (line.length > 0) {\n              nodeJson.content = [{ type: \"text\", text: line }];\n            }\n            try {\n              const node = ProsemirrorNode.fromJSON(schema, nodeJson);\n              nodes.push(node);\n            } catch {\n              // Ignore\n            }\n          });\n\n          return Slice.maxOpen(Fragment.fromArray(nodes));\n        },\n      },\n    },\n    [templates, resolvedColorMap, isEditing, placeholder, speed],\n  );\n\n  return editor;\n}\n","import { useEditor as useTipTapEditor, UseEditorOptions } from \"@tiptap/react\";\nimport { createRichTextPreset, RichTextPresetOptions } from \"@pixerate/editor\";\n\nexport interface UseRichEditorProps extends UseEditorOptions {\n  richTextOptions?: RichTextPresetOptions;\n}\n\n/**\n * Hook to initialize a TipTap rich-text editor instance with pre-configured extensions.\n */\nexport function useEditor(options: UseRichEditorProps = {}) {\n  const { richTextOptions, extensions = [], ...editorOptions } = options;\n\n  const preset = createRichTextPreset(richTextOptions);\n  const combinedExtensions = [...preset, ...extensions];\n\n  return useTipTapEditor({\n    extensions: combinedExtensions,\n    ...editorOptions,\n  });\n}\n","import React from \"react\";\nimport {\n  EditorContent as TipTapEditorContent,\n  EditorContentProps as TipTapEditorContentProps,\n} from \"@tiptap/react\";\n\nexport interface EditorContentProps extends TipTapEditorContentProps {\n  className?: string;\n}\n\nexport const EditorContent: React.FC<EditorContentProps> = ({\n  className,\n  editor,\n  ...props\n}) => {\n  return (\n    <div className={className}>\n      <TipTapEditorContent editor={editor} {...props} />\n    </div>\n  );\n};\n","import React from \"react\";\nimport { BubbleMenu as TipTapBubbleMenu } from \"@tiptap/react\";\nimport type { Editor } from \"@tiptap/core\";\n\nexport interface BubbleMenuProps {\n  editor: Editor | null;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const BubbleMenu: React.FC<BubbleMenuProps> = ({\n  editor,\n  className = \"flex items-center gap-1 bg-popover text-popover-foreground border shadow-md rounded-md p-1\",\n  children,\n}) => {\n  if (!editor) return null;\n\n  return (\n    <TipTapBubbleMenu\n      editor={editor}\n      tippyOptions={{ duration: 100 }}\n      className={className}\n    >\n      {children}\n    </TipTapBubbleMenu>\n  );\n};\n","import React, { useMemo } from \"react\";\nimport {\n  tokenizePrompt,\n  resolveTemplates,\n  Template,\n  ColorGradient,\n} from \"@pixerate/editor\";\n\nexport interface TemplateRendererProps {\n  /** Raw prompt or text string to render */\n  content: string;\n  /** Available templates for recursive resolution and custom coloring */\n  templates?: Template[];\n  /** Custom gradient color map for templates */\n  templateColorMap?: Map<string, ColorGradient>;\n  /** Whether to resolve nested templates recursively before displaying */\n  resolve?: boolean;\n  /** Custom class name for the wrapper */\n  className?: string;\n  /** Click callback for template badges */\n  onTemplateClick?: (templateName: string) => void;\n  /** Click callback for variable badges */\n  onVariableClick?: (variableName: string) => void;\n}\n\nexport const TemplateRenderer: React.FC<TemplateRendererProps> = ({\n  content,\n  templates = [],\n  templateColorMap,\n  resolve = false,\n  className = \"font-mono text-sm leading-relaxed whitespace-pre-wrap break-words\",\n  onTemplateClick,\n  onVariableClick,\n}) => {\n  const displayText = useMemo(() => {\n    if (!resolve || templates.length === 0) return content;\n    return resolveTemplates(content, templates);\n  }, [content, templates, resolve]);\n\n  const tokens = useMemo(() => {\n    return tokenizePrompt(displayText);\n  }, [displayText]);\n\n  return (\n    <div className={className}>\n      {tokens.map((token, index) => {\n        if (token.type === \"template\") {\n          const colors = templateColorMap?.get(token.value) || {\n            from: \"#f43f5e\",\n            to: \"#8b5cf6\",\n          };\n          const style = {\n            \"--color-from\": colors.from,\n            \"--color-to\": colors.to,\n          } as React.CSSProperties;\n\n          return (\n            <span\n              key={index}\n              style={style}\n              onClick={() => onTemplateClick?.(token.value)}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all\"\n              title={`Template: ${token.value}`}\n            >\n              {`{{${token.value}}}`}\n            </span>\n          );\n        }\n\n        if (token.type === \"variable\") {\n          return (\n            <span\n              key={index}\n              onClick={() => onVariableClick?.(token.value)}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all\"\n              title={`Variable: ${token.value}`}\n            >\n              {`{${token.value}}`}\n            </span>\n          );\n        }\n\n        if (token.type === \"instruction\") {\n          return (\n            <span\n              key={index}\n              className=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600 dark:text-rose-300\"\n              title={`Instruction: ${token.value}`}\n            >\n              {`__${token.value}__`}\n            </span>\n          );\n        }\n\n        return <span key={index}>{token.value}</span>;\n      })}\n    </div>\n  );\n};\n"],"mappings":";AAAA,SAAS,SAAoB,cAAc;AAC3C,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,OAAO,UAAU,QAAQ,uBAAuB;AACzD;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA4CP,IAAM,oBAAgC,CAAC;AACvC,IAAM,oBAAoB,oBAAI,IAA2B;AAAA,EACvD,CAAC,WAAW,EAAE,MAAM,WAAW,IAAI,UAAU,CAAC;AAChD,CAAC;AAEM,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,QAAQ;AACV,GAAyB;AACvB,QAAM,wBAAwB,OAAO,kBAAkB;AACvD,wBAAsB,UAAU;AAEhC,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,QAAM,eAAe,OAAO,SAAS;AACrC,eAAa,UAAU;AAEvB,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,yBAAyB,OAAO,mBAAmB;AACzD,yBAAuB,UAAU;AAEjC,QAAM,qBAAqB,OAAO,eAAe;AACjD,qBAAmB,UAAU;AAE7B,QAAM,iBAAiB,OAAO,WAAW;AACzC,iBAAe,UAAU;AAEzB,QAAM,iBAAiB,OAAO,WAAW;AACzC,iBAAe,UAAU;AAEzB,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,aAAc,QAAO;AACzB,UAAM,MAAM,oBAAI,IAA2B;AAC3C,cAAU,QAAQ,CAAC,MAAM;AACvB,UAAI,IAAI,EAAE,MAAM,EAAE,MAAM,WAAW,IAAI,UAAU,CAAC;AAAA,IACpD,CAAC;AACD,WAAO,IAAI,OAAO,IAAI,MAAM;AAAA,EAC9B,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,UAAU;AAAA,MACV,YAAY;AAAA,QACV,WAAW,UAAU;AAAA,UACnB,SAAS;AAAA,UACT,WAAW;AAAA,QACb,CAAC;AAAA,QACD,YAAY,UAAU,EAAE,YAAY,CAAC;AAAA,QACrC,aAAa,UAAU;AAAA,UACrB,kBAAkB;AAAA,UAClB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD,oBAAoB,UAAU;AAAA,UAC5B;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,SAAS,sBAAsB,OAAO;AAAA,MACtC,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM;AAC5B,cAAM,YAAY,cAAc,EAAE;AAClC,2BAAmB,UAAU,SAAS;AAEtC,YAAI,eAAe,SAAS;AAC1B,cAAI,UAAU,MAAM,4BAA4B,GAAG;AACjD,2BAAe,QAAQ,eAAe;AAAA,UACxC;AACA,cAAI,UAAU,MAAM,cAAc,GAAG;AACnC,2BAAe,QAAQ,YAAY;AAAA,UACrC;AAAA,QACF;AAEA,cAAM,EAAE,OAAO,KAAK,IAAI;AACxB,cAAM,EAAE,UAAU,IAAI;AACtB,cAAM,EAAE,OAAO,MAAM,GAAG,IAAI;AAE5B,6BAAqB,UAAU,EAAE,MAAM,GAAG,CAAC;AAE3C,YAAI,uBAAuB,WAAW,qBAAqB,SAAS;AAClE,gBAAM,mBAAmB,OAAO,QAAQ,cACpC,MAAM,OAAO,YAAY,GAAG,MAAM,YAAY,IAC9C;AACJ,gBAAM,aAAa,iBAAiB;AAAA,YAClC;AAAA,UACF;AAEA,cAAI,YAAY;AACd,kBAAM,SAAS,KAAK,YAAY,MAAM,GAAG;AACzC,kBAAM,cACJ,SAAS,eAAe,eAAe,OAAO,KAC9C,SAAS,eAAe,kBAAkB,KACzC,KAAK,IAAI,UAAU,WAAW;AACjC,kBAAM,kBAAkB,aAAa,sBAAsB;AAE3D,gBAAI,iBAAiB;AACnB,qCAAuB;AAAA,gBACrB;AAAA,gBACA,MAAM,MACJ,WAAW,CAAC,EAAE,UACb,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,IAAI;AAAA,gBACvC,MAAM;AAAA,gBACN;AAAA,kBACE,KAAK,OAAO,SAAS,gBAAgB,MAAM;AAAA,kBAC3C,MAAM,OAAO,OAAO,gBAAgB;AAAA,gBACtC;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,iCAAqB,QAAQ;AAAA,UAC/B;AAAA,QACF;AAAA,MACF;AAAA,MACA,mBAAmB,CAAC,EAAE,QAAQ,GAAG,MAAM;AACrC,cAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,6BAAqB,UAAU,EAAE,MAAM,GAAG,CAAC;AAAA,MAC7C;AAAA,MACA,aAAa;AAAA,QACX,YAAY;AAAA,UACV,OACE,aACA;AAAA,QACJ;AAAA,QACA,eAAe,CAAC,MAAM,UAAU;AAC9B,cAAI,MAAM,QAAQ,YAAY,YAAY,SAAS;AACjD,wBAAY,QAAQ;AACpB,mBAAO;AAAA,UACT;AACA,cAAI,aAAa,SAAS;AACxB,mBAAO,aAAa,QAAQ,KAAK;AAAA,UACnC;AACA,iBAAO;AAAA,QACT;AAAA,QACA,qBAAqB,CAAC,MAAM,SAAS,QAAQ,SAAS;AACpD,gBAAM,SACH,SAAiB,KAAK,MAAM,UAC5B,SAAiB,UAClB,MAAM,OAAO;AAEf,cAAI,CAAC,OAAQ,QAAO,MAAM;AAE1B,gBAAM,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,MAAM,IAAI;AACtD,gBAAM,QAA2B,CAAC;AAElC,iBAAO,QAAQ,CAAC,SAAS;AACvB,kBAAM,WAAgB,EAAE,MAAM,YAAY;AAC1C,gBAAI,KAAK,SAAS,GAAG;AACnB,uBAAS,UAAU,CAAC,EAAE,MAAM,QAAQ,MAAM,KAAK,CAAC;AAAA,YAClD;AACA,gBAAI;AACF,oBAAM,OAAO,gBAAgB,SAAS,QAAQ,QAAQ;AACtD,oBAAM,KAAK,IAAI;AAAA,YACjB,QAAQ;AAAA,YAER;AAAA,UACF,CAAC;AAED,iBAAO,MAAM,QAAQ,SAAS,UAAU,KAAK,CAAC;AAAA,QAChD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,kBAAkB,WAAW,aAAa,KAAK;AAAA,EAC7D;AAEA,SAAO;AACT;;;ACrPA,SAAS,aAAa,uBAAyC;AAC/D,SAAS,4BAAmD;AASrD,SAASA,WAAU,UAA8B,CAAC,GAAG;AAC1D,QAAM,EAAE,iBAAiB,aAAa,CAAC,GAAG,GAAG,cAAc,IAAI;AAE/D,QAAM,SAAS,qBAAqB,eAAe;AACnD,QAAM,qBAAqB,CAAC,GAAG,QAAQ,GAAG,UAAU;AAEpD,SAAO,gBAAgB;AAAA,IACrB,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,CAAC;AACH;;;ACnBA;AAAA,EACE,iBAAiB;AAAA,OAEZ;AAaD;AAPC,IAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,SAAI,WACH,8BAAC,uBAAoB,QAAiB,GAAG,OAAO,GAClD;AAEJ;;;ACnBA,SAAS,cAAc,wBAAwB;AAiB3C,gBAAAC,YAAA;AARG,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,YAAY;AAAA,EACZ;AACF,MAAM;AACJ,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,EAAE,UAAU,IAAI;AAAA,MAC9B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;AC1BA,SAAgB,WAAAC,gBAAe;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAmDK,gBAAAC,YAAA;AAhCL,IAAM,mBAAoD,CAAC;AAAA,EAChE;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,cAAcD,SAAQ,MAAM;AAChC,QAAI,CAAC,WAAW,UAAU,WAAW,EAAG,QAAO;AAC/C,WAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C,GAAG,CAAC,SAAS,WAAW,OAAO,CAAC;AAEhC,QAAM,SAASA,SAAQ,MAAM;AAC3B,WAAO,eAAe,WAAW;AAAA,EACnC,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,gBAAAC,KAAC,SAAI,WACF,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,QAAI,MAAM,SAAS,YAAY;AAC7B,YAAM,SAAS,kBAAkB,IAAI,MAAM,KAAK,KAAK;AAAA,QACnD,MAAM;AAAA,QACN,IAAI;AAAA,MACN;AACA,YAAM,QAAQ;AAAA,QACZ,gBAAgB,OAAO;AAAA,QACvB,cAAc,OAAO;AAAA,MACvB;AAEA,aACE,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,SAAS,MAAM,kBAAkB,MAAM,KAAK;AAAA,UAC5C,WAAU;AAAA,UACV,OAAO,aAAa,MAAM,KAAK;AAAA,UAE9B,eAAK,MAAM,KAAK;AAAA;AAAA,QANZ;AAAA,MAOP;AAAA,IAEJ;AAEA,QAAI,MAAM,SAAS,YAAY;AAC7B,aACE,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,kBAAkB,MAAM,KAAK;AAAA,UAC5C,WAAU;AAAA,UACV,OAAO,aAAa,MAAM,KAAK;AAAA,UAE9B,cAAI,MAAM,KAAK;AAAA;AAAA,QALX;AAAA,MAMP;AAAA,IAEJ;AAEA,QAAI,MAAM,SAAS,eAAe;AAChC,aACE,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UACV,OAAO,gBAAgB,MAAM,KAAK;AAAA,UAEjC,eAAK,MAAM,KAAK;AAAA;AAAA,QAJZ;AAAA,MAKP;AAAA,IAEJ;AAEA,WAAO,gBAAAA,KAAC,UAAkB,gBAAM,SAAd,KAAoB;AAAA,EACxC,CAAC,GACH;AAEJ;","names":["useEditor","jsx","useMemo","jsx"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@pixerate/editor-react",
+  "version": "0.1.0",
+  "description": "React bindings and prompt/rich-text components for @pixerate/editor",
+  "author": "Pixerate",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/extension-bubble-menu": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "@pixerate/editor": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}