@pixerate/editor-svelte 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.css

@@ -0,0 +1,9 @@
+/* svelte-css:src/EditableTextNodeEditor.svelte.css */
+.pixerate-editor-content .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #9ca3af;
+  pointer-events: none;
+  height: 0;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["svelte-css:src/EditableTextNodeEditor.svelte.css"],"sourcesContent":["\n  .pixerate-editor-content .is-empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    color: #9ca3af;\n    pointer-events: none;\n    height: 0;\n  }\n\n"],"mappings":";AACE,CAAC,wBAAwB,CAAC,QAAQ;AAChC,WAAS,KAAK;AACd,SAAO;AACP,SAAO;AACP,kBAAgB;AAChB,UAAQ;AACV;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import type { Component } from "svelte";
+import type { Editor, Content, Extensions, EditorOptions } from "@tiptap/core";
+import type {
+  Template,
+  TemplateVersion,
+  Token,
+  TokenType,
+  ColorGradient,
+  RichTextPresetOptions,
+} from "@pixerate/editor";
+
+export interface SvelteInitiateEditorOptions extends Partial<EditorOptions> {
+  richTextOptions?: RichTextPresetOptions;
+}
+
+export declare const initiateEditor: (
+  element?: HTMLElement,
+  content?: Content,
+  extensions?: Extensions,
+  options?: SvelteInitiateEditorOptions,
+) => Editor;
+
+export interface ReactiveEditorState {
+  editor: Editor | undefined;
+  content: string;
+  isEditable: boolean;
+}
+
+export declare function createReactiveEditor(
+  initialContent?: string,
+  extensions?: Extensions,
+  options?: Partial<EditorOptions>,
+): {
+  readonly current: Editor | undefined;
+  mount(element: HTMLElement): Editor;
+  destroy(): void;
+};
+
+export interface EditableTextNodeEditorProps {
+  class?: string;
+  content?: Content;
+  showMenu?: boolean;
+  editable?: boolean;
+  editor?: Editor;
+  extensions?: Extensions;
+  onUpdate?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onCreate?: () => void;
+  placeholder?: string;
+}
+
+export interface BubbleMenuProps {
+  editor?: Editor;
+  class?: string;
+  children?: any;
+}
+
+export interface TemplateRendererProps {
+  content: string;
+  templates?: Template[];
+  templateColorMap?: Map<string, ColorGradient>;
+  resolve?: boolean;
+  class?: string;
+  onTemplateClick?: (templateName: string) => void;
+  onVariableClick?: (variableName: string) => void;
+}
+
+export declare const EditableTextNodeEditor: Component<EditableTextNodeEditorProps>;
+export declare const BubbleMenu: Component<BubbleMenuProps>;
+export declare const TemplateRenderer: Component<TemplateRendererProps>;
+
+export type {
+  Template,
+  TemplateVersion,
+  Token,
+  TokenType,
+  ColorGradient,
+  RichTextPresetOptions,
+};

package/dist/index.js

@@ -0,0 +1,222 @@
+// src/EditableTextNodeEditor.svelte
+import "svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+import { onDestroy, onMount } from "svelte";
+import Placeholder from "@tiptap/extension-placeholder";
+
+// src/editor.svelte.ts
+import * as $ from "svelte/internal/client";
+import { Editor } from "@tiptap/core";
+import { createRichTextPreset } from "@pixerate/editor";
+var initiateEditor = (element, content, extensions, options) => {
+  const { richTextOptions, ...editorOptions } = options || {};
+  const defaultPreset = createRichTextPreset(richTextOptions);
+  const editor = new Editor({
+    element,
+    content,
+    extensions: [...defaultPreset, ...extensions ?? []],
+    autofocus: true,
+    ...editorOptions
+  });
+  return editor;
+};
+function createReactiveEditor(initialContent = "", extensions = [], options = {}) {
+  let editorInstance;
+  return {
+    get current() {
+      return editorInstance;
+    },
+    mount(element) {
+      editorInstance = initiateEditor(element, initialContent, extensions, options);
+      return editorInstance;
+    },
+    destroy() {
+      if (editorInstance) {
+        editorInstance.destroy();
+        editorInstance = void 0;
+      }
+    }
+  };
+}
+
+// src/EditableTextNodeEditor.svelte
+var root = $2.from_html(`<div class="flex items-center justify-center p-4 text-sm text-gray-500">Loading editor...</div>`);
+var root_1 = $2.from_html(`<div draggable="false"><!> <div class="pixerate-editor-content prose w-full max-w-none focus:outline-none"></div></div>`);
+function EditableTextNodeEditor($$anchor, $$props) {
+  $2.push($$props, true);
+  let className = $2.prop($$props, "class", 3, ""), content = $2.prop($$props, "content", 3, void 0), showMenu = $2.prop($$props, "showMenu", 3, true), editable = $2.prop($$props, "editable", 3, true), editor = $2.prop($$props, "editor", 15), extensions = $2.prop($$props, "extensions", 19, () => []), placeholder = $2.prop($$props, "placeholder", 3, "");
+  let element = $2.state(void 0);
+  $2.user_effect(() => {
+    if (editor() && editor().isEditable !== editable()) {
+      editor().setEditable(editable());
+    }
+  });
+  onMount(() => {
+    editor(initiateEditor(
+      $2.get(element),
+      content(),
+      [
+        Placeholder.configure({ placeholder: placeholder() }),
+        ...extensions()
+      ],
+      {
+        editable: editable(),
+        onCreate: $$props.onCreate,
+        onUpdate: $$props.onUpdate,
+        onFocus() {
+          if ($$props.onFocus) $$props.onFocus();
+        },
+        onBlur() {
+          if ($$props.onBlur) $$props.onBlur();
+        }
+      }
+    ));
+  });
+  onDestroy(() => {
+    if (editor()) {
+      editor().destroy();
+    }
+  });
+  var div = root_1();
+  var node = $2.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root();
+      $2.append($$anchor2, div_1);
+    };
+    $2.if(node, ($$render) => {
+      if (!editor()) $$render(consequent);
+    });
+  }
+  var div_2 = $2.sibling(node, 2);
+  $2.bind_this(div_2, ($$value) => $2.set(element, $$value), () => $2.get(element));
+  $2.reset(div);
+  $2.template_effect(() => $2.set_class(div, 1, `pixerate-editor-container ${className()}`));
+  $2.append($$anchor, div);
+  $2.pop();
+}
+
+// src/BubbleMenu.svelte
+import "svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+import BubbleMenuPlugin from "@tiptap/extension-bubble-menu";
+import { onMount as onMount2, onDestroy as onDestroy2 } from "svelte";
+var root2 = $3.from_html(`<div><!></div>`);
+function BubbleMenu($$anchor, $$props) {
+  $3.push($$props, true);
+  let className = $3.prop($$props, "class", 3, "flex items-center gap-1 bg-white border border-gray-200 shadow-md rounded-md p-1");
+  let menuElement = $3.state(void 0);
+  onMount2(() => {
+    if ($$props.editor && $3.get(menuElement)) {
+      $$props.editor.registerPlugin(BubbleMenuPlugin.configure({ element: $3.get(menuElement), tippyOptions: { duration: 100 } }));
+    }
+  });
+  onDestroy2(() => {
+    if ($$props.editor) {
+      $$props.editor.unregisterPlugin("bubbleMenu");
+    }
+  });
+  var div = root2();
+  var node = $3.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $3.comment();
+      var node_1 = $3.first_child(fragment);
+      $3.snippet(node_1, () => $$props.children);
+      $3.append($$anchor2, fragment);
+    };
+    $3.if(node, ($$render) => {
+      if ($$props.children) $$render(consequent);
+    });
+  }
+  $3.reset(div);
+  $3.bind_this(div, ($$value) => $3.set(menuElement, $$value), () => $3.get(menuElement));
+  $3.template_effect(() => $3.set_class(div, 1, $3.clsx(className())));
+  $3.append($$anchor, div);
+  $3.pop();
+}
+
+// src/TemplateRenderer.svelte
+import "svelte/internal/disclose-version";
+import * as $4 from "svelte/internal/client";
+import { tokenizePrompt, resolveTemplates } from "@pixerate/editor";
+var root3 = $4.from_html(`<span class="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"> </span>`);
+var root_12 = $4.from_html(`<span class="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 hover:brightness-110 cursor-pointer transition-all"> </span>`);
+var root_2 = $4.from_html(`<span class="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"> </span>`);
+var root_3 = $4.from_html(`<span> </span>`);
+var root_4 = $4.from_html(`<div></div>`);
+function TemplateRenderer($$anchor, $$props) {
+  $4.push($$props, true);
+  let templates = $4.prop($$props, "templates", 19, () => []), resolve = $4.prop($$props, "resolve", 3, false), className = $4.prop($$props, "class", 3, "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words");
+  let displayText = $4.derived(() => resolve() && templates().length > 0 ? resolveTemplates($$props.content, templates()) : $$props.content);
+  let tokens = $4.derived(() => tokenizePrompt($4.get(displayText)));
+  var div = root_4();
+  $4.each(div, 21, () => $4.get(tokens), $4.index, ($$anchor2, token) => {
+    var fragment = $4.comment();
+    var node = $4.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        const colors = $4.derived(() => $$props.templateColorMap?.get($4.get(token).value) || { from: "#f43f5e", to: "#8b5cf6" });
+        var span = root3();
+        var text = $4.only_child(span, true);
+        $4.template_effect(() => {
+          $4.set_style(span, `--color-from: ${$4.get(colors).from}; --color-to: ${$4.get(colors).to};`);
+          $4.set_attribute(span, "title", `Template: ${$4.get(token).value}`);
+          $4.set_text(text, `{{${$4.get(token).value}}}`);
+        });
+        $4.delegated("click", span, () => $$props.onTemplateClick?.($4.get(token).value));
+        $4.append($$anchor3, span);
+      };
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_12();
+        var text_1 = $4.only_child(span_1, true);
+        $4.template_effect(() => {
+          $4.set_attribute(span_1, "title", `Variable: ${$4.get(token).value}`);
+          $4.set_text(text_1, `{${$4.get(token).value}}`);
+        });
+        $4.delegated("click", span_1, () => $$props.onVariableClick?.($4.get(token).value));
+        $4.append($$anchor3, span_1);
+      };
+      var consequent_2 = ($$anchor3) => {
+        var span_2 = root_2();
+        var text_2 = $4.only_child(span_2, true);
+        $4.template_effect(() => {
+          $4.set_attribute(span_2, "title", `Instruction: ${$4.get(token).value}`);
+          $4.set_text(text_2, `__${$4.get(token).value}__`);
+        });
+        $4.append($$anchor3, span_2);
+      };
+      var alternate = ($$anchor3) => {
+        var span_3 = root_3();
+        var text_3 = $4.only_child(span_3, true);
+        $4.template_effect(() => $4.set_text(text_3, $4.get(token).value));
+        $4.append($$anchor3, span_3);
+      };
+      $4.if(node, ($$render) => {
+        if ($4.get(token).type === "template") $$render(consequent);
+        else if ($4.get(token).type === "variable") $$render(consequent_1, 1);
+        else if ($4.get(token).type === "instruction") $$render(consequent_2, 2);
+        else $$render(alternate, -1);
+      });
+    }
+    $4.append($$anchor2, fragment);
+  });
+  $4.reset(div);
+  $4.template_effect(() => $4.set_class(div, 1, $4.clsx(className())));
+  $4.append($$anchor, div);
+  $4.pop();
+}
+$4.delegate(["click"]);
+
+// src/index.ts
+var EditableTextNodeEditor2 = EditableTextNodeEditor;
+var BubbleMenu2 = BubbleMenu;
+var TemplateRenderer2 = TemplateRenderer;
+export {
+  BubbleMenu2 as BubbleMenu,
+  EditableTextNodeEditor2 as EditableTextNodeEditor,
+  TemplateRenderer2 as TemplateRenderer,
+  createReactiveEditor,
+  initiateEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/EditableTextNodeEditor.svelte","../src/editor.svelte.ts","../src/BubbleMenu.svelte","../src/TemplateRenderer.svelte","../src/index.ts"],"sourcesContent":["import 'EditableTextNodeEditor.svelte.css';import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { onDestroy, onMount } from \"svelte\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { initiateEditor } from \"./editor.svelte\";\n\nvar root = $.from_html(`<div class=\"flex items-center justify-center p-4 text-sm text-gray-500\">Loading editor...</div>`);\nvar root_1 = $.from_html(`<div draggable=\"false\"><!> <div class=\"pixerate-editor-content prose w-full max-w-none focus:outline-none\"></div></div>`);\n\nexport default function EditableTextNodeEditor($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.prop($$props, 'class', 3, \"\"),\n\t\tcontent = $.prop($$props, 'content', 3, undefined),\n\t\tshowMenu = $.prop($$props, 'showMenu', 3, true),\n\t\teditable = $.prop($$props, 'editable', 3, true),\n\t\teditor = $.prop($$props, 'editor', 15),\n\t\textensions = $.prop($$props, 'extensions', 19, () => []),\n\t\tplaceholder = $.prop($$props, 'placeholder', 3, \"\");\n\n\tlet element = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif (editor() && editor().isEditable !== editable()) {\n\t\t\teditor().setEditable(editable());\n\t\t}\n\t});\n\n\tonMount(() => {\n\t\teditor(initiateEditor(\n\t\t\t$.get(element),\n\t\t\tcontent(),\n\t\t\t[\n\t\t\t\tPlaceholder.configure({ placeholder: placeholder() }),\n\t\t\t\t...extensions()\n\t\t\t],\n\t\t\t{\n\t\t\t\teditable: editable(),\n\t\t\t\tonCreate: $$props.onCreate,\n\t\t\t\tonUpdate: $$props.onUpdate,\n\t\t\t\tonFocus() {\n\t\t\t\t\tif ($$props.onFocus) $$props.onFocus();\n\t\t\t\t},\n\n\t\t\t\tonBlur() {\n\t\t\t\t\tif ($$props.onBlur) $$props.onBlur();\n\t\t\t\t}\n\t\t\t}\n\t\t));\n\t});\n\n\tonDestroy(() => {\n\t\tif (editor()) {\n\t\t\teditor().destroy();\n\t\t}\n\t});\n\n\tvar div = root_1();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar div_1 = root();\n\n\t\t\t$.append($$anchor, div_1);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif (!editor()) $$render(consequent);\n\t\t});\n\t}\n\n\tvar div_2 = $.sibling(node, 2);\n\n\t$.bind_this(div_2, ($$value) => $.set(element, $$value), () => $.get(element));\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, `pixerate-editor-container ${className()}`));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import { Editor } from \"@tiptap/core\";\nimport { createRichTextPreset } from \"@pixerate/editor\";\nexport const initiateEditor = (element, content, extensions, options) => {\n  const { richTextOptions, ...editorOptions } = options || {};\n  const defaultPreset = createRichTextPreset(richTextOptions);\n  const editor = new Editor({\n    element,\n    content,\n    extensions: [\n      ...defaultPreset,\n      ...extensions ?? []\n    ],\n    autofocus: true,\n    ...editorOptions\n  });\n  return editor;\n};\nexport function createReactiveEditor(initialContent = \"\", extensions = [], options = {}) {\n  let editorInstance;\n  return {\n    get current() {\n      return editorInstance;\n    },\n    mount(element) {\n      editorInstance = initiateEditor(element, initialContent, extensions, options);\n      return editorInstance;\n    },\n    destroy() {\n      if (editorInstance) {\n        editorInstance.destroy();\n        editorInstance = void 0;\n      }\n    }\n  };\n}\n","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport BubbleMenuPlugin from \"@tiptap/extension-bubble-menu\";\nimport { onMount, onDestroy } from \"svelte\";\n\nvar root = $.from_html(`<div><!></div>`);\n\nexport default function BubbleMenu($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.prop($$props, 'class', 3, \"flex items-center gap-1 bg-white border border-gray-200 shadow-md rounded-md p-1\");\n\tlet menuElement = $.state(void 0);\n\n\tonMount(() => {\n\t\tif ($$props.editor && $.get(menuElement)) {\n\t\t\t$$props.editor.registerPlugin(BubbleMenuPlugin.configure({ element: $.get(menuElement), tippyOptions: { duration: 100 } }));\n\t\t}\n\t});\n\n\tonDestroy(() => {\n\t\tif ($$props.editor) {\n\t\t\t$$props.editor.unregisterPlugin(\"bubbleMenu\");\n\t\t}\n\t});\n\n\tvar div = root();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar fragment = $.comment();\n\t\t\tvar node_1 = $.first_child(fragment);\n\n\t\t\t$.snippet(node_1, () => $$props.children);\n\t\t\t$.append($$anchor, fragment);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif ($$props.children) $$render(consequent);\n\t\t});\n\t}\n\n\t$.reset(div);\n\t$.bind_this(div, ($$value) => $.set(menuElement, $$value), () => $.get(menuElement));\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { tokenizePrompt, resolveTemplates } from \"@pixerate/editor\";\n\nvar root = $.from_html(`<span class=\"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\"> </span>`);\nvar root_1 = $.from_html(`<span class=\"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 hover:brightness-110 cursor-pointer transition-all\"> </span>`);\nvar root_2 = $.from_html(`<span class=\"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\"> </span>`);\nvar root_3 = $.from_html(`<span> </span>`);\nvar root_4 = $.from_html(`<div></div>`);\n\nexport default function TemplateRenderer($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet templates = $.prop($$props, 'templates', 19, () => []),\n\t\tresolve = $.prop($$props, 'resolve', 3, false),\n\t\tclassName = $.prop($$props, 'class', 3, \"font-mono text-sm leading-relaxed whitespace-pre-wrap break-words\");\n\n\tlet displayText = $.derived(() => resolve() && templates().length > 0\n\t\t? resolveTemplates($$props.content, templates())\n\t\t: $$props.content);\n\n\tlet tokens = $.derived(() => tokenizePrompt($.get(displayText)));\n\tvar div = root_4();\n\n\t$.each(div, 21, () => $.get(tokens), $.index, ($$anchor, token) => {\n\t\tvar fragment = $.comment();\n\t\tvar node = $.first_child(fragment);\n\n\t\t{\n\t\t\tvar consequent = ($$anchor) => {\n\t\t\t\tconst colors = $.derived(() => $$props.templateColorMap?.get($.get(token).value) || { from: \"#f43f5e\", to: \"#8b5cf6\" });\n\t\t\t\tvar span = root();\n\t\t\t\tvar text = $.only_child(span, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_style(span, `--color-from: ${$.get(colors).from}; --color-to: ${$.get(colors).to};`);\n\t\t\t\t\t$.set_attribute(span, 'title', `Template: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text, `{{${$.get(token).value}}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span, () => $$props.onTemplateClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span);\n\t\t\t};\n\n\t\t\tvar consequent_1 = ($$anchor) => {\n\t\t\t\tvar span_1 = root_1();\n\t\t\t\tvar text_1 = $.only_child(span_1, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_1, 'title', `Variable: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_1, `{${$.get(token).value}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span_1, () => $$props.onVariableClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span_1);\n\t\t\t};\n\n\t\t\tvar consequent_2 = ($$anchor) => {\n\t\t\t\tvar span_2 = root_2();\n\t\t\t\tvar text_2 = $.only_child(span_2, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_2, 'title', `Instruction: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_2, `__${$.get(token).value}__`);\n\t\t\t\t});\n\n\t\t\t\t$.append($$anchor, span_2);\n\t\t\t};\n\n\t\t\tvar alternate = ($$anchor) => {\n\t\t\t\tvar span_3 = root_3();\n\t\t\t\tvar text_3 = $.only_child(span_3, true);\n\n\t\t\t\t$.template_effect(() => $.set_text(text_3, $.get(token).value));\n\t\t\t\t$.append($$anchor, span_3);\n\t\t\t};\n\n\t\t\t$.if(node, ($$render) => {\n\t\t\t\tif ($.get(token).type === \"template\") $$render(consequent); else if ($.get(token).type === \"variable\") $$render(consequent_1, 1); else if ($.get(token).type === \"instruction\") $$render(consequent_2, 2); else $$render(alternate, -1);\n\t\t\t});\n\t\t}\n\n\t\t$.append($$anchor, fragment);\n\t});\n\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}\n\n$.delegate(['click']);","import type { Component } from \"svelte\";\nimport type { Editor, Content, Extensions } from \"@tiptap/core\";\nimport type { Template, ColorGradient } from \"@pixerate/editor\";\n\nimport EditableTextNodeEditorComponent from \"./EditableTextNodeEditor.svelte\";\nimport BubbleMenuComponent from \"./BubbleMenu.svelte\";\nimport TemplateRendererComponent from \"./TemplateRenderer.svelte\";\n\nexport * from \"./editor.svelte\";\n\nexport interface EditableTextNodeEditorProps {\n  class?: string;\n  content?: Content;\n  showMenu?: boolean;\n  editable?: boolean;\n  editor?: Editor;\n  extensions?: Extensions;\n  onUpdate?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onCreate?: () => void;\n  placeholder?: string;\n}\n\nexport interface BubbleMenuProps {\n  editor?: Editor;\n  class?: string;\n  children?: any;\n}\n\nexport interface TemplateRendererProps {\n  content: string;\n  templates?: Template[];\n  templateColorMap?: Map<string, ColorGradient>;\n  resolve?: boolean;\n  class?: string;\n  onTemplateClick?: (templateName: string) => void;\n  onVariableClick?: (variableName: string) => void;\n}\n\nexport const EditableTextNodeEditor = EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;\nexport const BubbleMenu = BubbleMenuComponent as unknown as Component<BubbleMenuProps>;\nexport const TemplateRenderer = TemplateRendererComponent as unknown as Component<TemplateRendererProps>;\n\nexport type {\n  Template,\n  TemplateVersion,\n  Token,\n  TokenType,\n  ColorGradient,\n  RichTextPresetOptions,\n} from \"@pixerate/editor\";\n"],"mappings":"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","names":["$","$$anchor","$","onMount","onDestroy","root","$$anchor","$","root","root_1","$$anchor","EditableTextNodeEditor","BubbleMenu","TemplateRenderer"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@pixerate/editor-svelte",
+  "version": "0.1.0",
+  "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
+  "author": "Pixerate",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "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/starter-kit": "^2.11.5",
+    "@pixerate/editor": "0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "esbuild-svelte": "^0.9.5",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.5",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/BubbleMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import BubbleMenuPlugin from "@tiptap/extension-bubble-menu";
+  import { onMount, onDestroy } from "svelte";
+
+  interface Props {
+    editor?: Editor;
+    class?: string;
+    children?: import("svelte").Snippet;
+  }
+
+  let {
+    editor,
+    class: className = "flex items-center gap-1 bg-white border border-gray-200 shadow-md rounded-md p-1",
+    children,
+  }: Props = $props();
+
+  let menuElement = $state<HTMLElement>();
+
+  onMount(() => {
+    if (editor && menuElement) {
+      editor.registerPlugin(
+        BubbleMenuPlugin.configure({
+          element: menuElement,
+          tippyOptions: { duration: 100 },
+        })
+      );
+    }
+  });
+
+  onDestroy(() => {
+    if (editor) {
+      editor.unregisterPlugin("bubbleMenu");
+    }
+  });
+</script>
+
+<div bind:this={menuElement} class={className}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/src/EditableTextNodeEditor.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { Editor, Content, Extensions } from "@tiptap/core";
+  import { onDestroy, onMount } from "svelte";
+  import Placeholder from "@tiptap/extension-placeholder";
+  import { initiateEditor } from "./editor.svelte";
+
+  interface EditorProps {
+    class?: string;
+    content?: Content;
+    showMenu?: boolean;
+    editable?: boolean;
+    editor?: Editor;
+    extensions?: Extensions;
+    onUpdate?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onCreate?: () => void;
+    placeholder?: string;
+  }
+
+  let {
+    class: className = "",
+    content = undefined,
+    showMenu = true,
+    editable = true,
+    editor = $bindable<Editor | undefined>(),
+    extensions = [],
+    onUpdate,
+    onFocus,
+    onBlur,
+    onCreate,
+    placeholder = "",
+  }: EditorProps = $props();
+
+  let element = $state<HTMLElement>();
+
+  $effect(() => {
+    if (editor && editor.isEditable !== editable) {
+      editor.setEditable(editable);
+    }
+  });
+
+  onMount(() => {
+    editor = initiateEditor(
+      element,
+      content,
+      [
+        Placeholder.configure({
+          placeholder,
+        }),
+        ...extensions,
+      ],
+      {
+        editable,
+        onCreate,
+        onUpdate,
+        onFocus() {
+          if (onFocus) onFocus();
+        },
+        onBlur() {
+          if (onBlur) onBlur();
+        },
+      }
+    );
+  });
+
+  onDestroy(() => {
+    if (editor) {
+      editor.destroy();
+    }
+  });
+</script>
+
+<div class={`pixerate-editor-container ${className}`} draggable="false">
+  {#if !editor}
+    <div class="flex items-center justify-center p-4 text-sm text-gray-500">
+      Loading editor...
+    </div>
+  {/if}
+  <div
+    bind:this={element}
+    class="pixerate-editor-content prose w-full max-w-none focus:outline-none"
+  ></div>
+</div>
+
+<style>
+  :global(.pixerate-editor-content .is-empty::before) {
+    content: attr(data-placeholder);
+    float: left;
+    color: #9ca3af;
+    pointer-events: none;
+    height: 0;
+  }
+</style>

package/src/TemplateRenderer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import {
+    tokenizePrompt,
+    resolveTemplates,
+    type Template,
+    type ColorGradient,
+  } from "@pixerate/editor";
+
+  interface Props {
+    content: string;
+    templates?: Template[];
+    templateColorMap?: Map<string, ColorGradient>;
+    resolve?: boolean;
+    class?: string;
+    onTemplateClick?: (templateName: string) => void;
+    onVariableClick?: (variableName: string) => void;
+  }
+
+  let {
+    content,
+    templates = [],
+    templateColorMap,
+    resolve = false,
+    class: className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
+    onTemplateClick,
+    onVariableClick,
+  }: Props = $props();
+
+  let displayText = $derived(
+    resolve && templates.length > 0
+      ? resolveTemplates(content, templates)
+      : content
+  );
+
+  let tokens = $derived(tokenizePrompt(displayText));
+</script>
+
+<div class={className}>
+  {#each tokens as token}
+    {#if token.type === "template"}
+      {@const colors = templateColorMap?.get(token.value) || { from: "#f43f5e", to: "#8b5cf6" }}
+      <span
+        style={`--color-from: ${colors.from}; --color-to: ${colors.to};`}
+        onclick={() => onTemplateClick?.(token.value)}
+        class="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}`}
+      >
+        {`{{${token.value}}}`}
+      </span>
+    {:else if token.type === "variable"}
+      <span
+        onclick={() => onVariableClick?.(token.value)}
+        class="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 hover:brightness-110 cursor-pointer transition-all"
+        title={`Variable: ${token.value}`}
+      >
+        {`{${token.value}}`}
+      </span>
+    {:else if token.type === "instruction"}
+      <span
+        class="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"
+        title={`Instruction: ${token.value}`}
+      >
+        {`__${token.value}__`}
+      </span>
+    {:else}
+      <span>{token.value}</span>
+    {/if}
+  {/each}
+</div>

package/src/editor.svelte.ts

@@ -0,0 +1,65 @@
+import { Editor, type Content, type EditorOptions, type Extensions } from "@tiptap/core";
+import { createRichTextPreset, type RichTextPresetOptions } from "@pixerate/editor";
+
+export interface SvelteInitiateEditorOptions extends Partial<EditorOptions> {
+  richTextOptions?: RichTextPresetOptions;
+}
+
+/**
+ * Initializes a TipTap editor instance preconfigured with rich text extensions.
+ */
+export const initiateEditor = (
+  element?: HTMLElement,
+  content?: Content,
+  extensions?: Extensions,
+  options?: SvelteInitiateEditorOptions,
+): Editor => {
+  const { richTextOptions, ...editorOptions } = options || {};
+  const defaultPreset = createRichTextPreset(richTextOptions);
+
+  const editor = new Editor({
+    element,
+    content,
+    extensions: [
+      ...defaultPreset,
+      ...(extensions ?? []),
+    ],
+    autofocus: true,
+    ...editorOptions,
+  });
+
+  return editor;
+};
+
+export interface ReactiveEditorState {
+  editor: Editor | undefined;
+  content: string;
+  isEditable: boolean;
+}
+
+/**
+ * Creates a reactive editor state manager for Svelte 5.
+ */
+export function createReactiveEditor(
+  initialContent: string = "",
+  extensions: Extensions = [],
+  options: Partial<EditorOptions> = {},
+) {
+  let editorInstance: Editor | undefined;
+
+  return {
+    get current() {
+      return editorInstance;
+    },
+    mount(element: HTMLElement) {
+      editorInstance = initiateEditor(element, initialContent, extensions, options);
+      return editorInstance;
+    },
+    destroy() {
+      if (editorInstance) {
+        editorInstance.destroy();
+        editorInstance = undefined;
+      }
+    },
+  };
+}

package/src/index.d.ts

@@ -0,0 +1,80 @@
+import type { Component } from "svelte";
+import type { Editor, Content, Extensions, EditorOptions } from "@tiptap/core";
+import type {
+  Template,
+  TemplateVersion,
+  Token,
+  TokenType,
+  ColorGradient,
+  RichTextPresetOptions,
+} from "@pixerate/editor";
+
+export interface SvelteInitiateEditorOptions extends Partial<EditorOptions> {
+  richTextOptions?: RichTextPresetOptions;
+}
+
+export declare const initiateEditor: (
+  element?: HTMLElement,
+  content?: Content,
+  extensions?: Extensions,
+  options?: SvelteInitiateEditorOptions,
+) => Editor;
+
+export interface ReactiveEditorState {
+  editor: Editor | undefined;
+  content: string;
+  isEditable: boolean;
+}
+
+export declare function createReactiveEditor(
+  initialContent?: string,
+  extensions?: Extensions,
+  options?: Partial<EditorOptions>,
+): {
+  readonly current: Editor | undefined;
+  mount(element: HTMLElement): Editor;
+  destroy(): void;
+};
+
+export interface EditableTextNodeEditorProps {
+  class?: string;
+  content?: Content;
+  showMenu?: boolean;
+  editable?: boolean;
+  editor?: Editor;
+  extensions?: Extensions;
+  onUpdate?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onCreate?: () => void;
+  placeholder?: string;
+}
+
+export interface BubbleMenuProps {
+  editor?: Editor;
+  class?: string;
+  children?: any;
+}
+
+export interface TemplateRendererProps {
+  content: string;
+  templates?: Template[];
+  templateColorMap?: Map<string, ColorGradient>;
+  resolve?: boolean;
+  class?: string;
+  onTemplateClick?: (templateName: string) => void;
+  onVariableClick?: (variableName: string) => void;
+}
+
+export declare const EditableTextNodeEditor: Component<EditableTextNodeEditorProps>;
+export declare const BubbleMenu: Component<BubbleMenuProps>;
+export declare const TemplateRenderer: Component<TemplateRendererProps>;
+
+export type {
+  Template,
+  TemplateVersion,
+  Token,
+  TokenType,
+  ColorGradient,
+  RichTextPresetOptions,
+};

package/src/index.ts

@@ -0,0 +1,52 @@
+import type { Component } from "svelte";
+import type { Editor, Content, Extensions } from "@tiptap/core";
+import type { Template, ColorGradient } from "@pixerate/editor";
+
+import EditableTextNodeEditorComponent from "./EditableTextNodeEditor.svelte";
+import BubbleMenuComponent from "./BubbleMenu.svelte";
+import TemplateRendererComponent from "./TemplateRenderer.svelte";
+
+export * from "./editor.svelte";
+
+export interface EditableTextNodeEditorProps {
+  class?: string;
+  content?: Content;
+  showMenu?: boolean;
+  editable?: boolean;
+  editor?: Editor;
+  extensions?: Extensions;
+  onUpdate?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onCreate?: () => void;
+  placeholder?: string;
+}
+
+export interface BubbleMenuProps {
+  editor?: Editor;
+  class?: string;
+  children?: any;
+}
+
+export interface TemplateRendererProps {
+  content: string;
+  templates?: Template[];
+  templateColorMap?: Map<string, ColorGradient>;
+  resolve?: boolean;
+  class?: string;
+  onTemplateClick?: (templateName: string) => void;
+  onVariableClick?: (variableName: string) => void;
+}
+
+export const EditableTextNodeEditor = EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;
+export const BubbleMenu = BubbleMenuComponent as unknown as Component<BubbleMenuProps>;
+export const TemplateRenderer = TemplateRendererComponent as unknown as Component<TemplateRendererProps>;
+
+export type {
+  Template,
+  TemplateVersion,
+  Token,
+  TokenType,
+  ColorGradient,
+  RichTextPresetOptions,
+} from "@pixerate/editor";

package/src/svelte.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svelte" {
+  import type { Component } from "svelte";
+  const component: Component<any, any, any>;
+  export default component;
+}