@pixerate/editor-svelte 0.2.3 → 0.2.5

package/dist/index.js

@@ -99,21 +99,30 @@ function EditableTextNodeEditor($$anchor, $$props) {
 // 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>`);
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+var root2 = $3.from_html(`<div style="visibility: hidden;"><!></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 className = $3.prop($$props, "class", 3, "flex h-fit w-fit items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md"), pluginKey = $3.prop($$props, "pluginKey", 3, "bubbleMenu"), shouldShow = $3.prop($$props, "shouldShow", 3, null), updateDelay = $3.prop($$props, "updateDelay", 3, 250), tippyOptions = $3.prop($$props, "tippyOptions", 19, () => ({}));
   let menuElement = $3.state(void 0);
-  onMount2(() => {
+  $3.user_effect(() => {
     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");
+      const plugin = BubbleMenuPlugin({
+        pluginKey: pluginKey(),
+        editor: $$props.editor,
+        element: $3.get(menuElement),
+        tippyOptions: {
+          duration: 100,
+          appendTo: () => document.body,
+          ...tippyOptions()
+        },
+        shouldShow: shouldShow(),
+        updateDelay: updateDelay()
+      });
+      $$props.editor.registerPlugin(plugin);
+      return () => {
+        $$props.editor.unregisterPlugin(pluginKey());
+      };
     }
   });
   var div = root2();

package/dist/index.js.map

@@ -1 +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"]}
+{"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\";\n\nvar root = $.from_html(`<div style=\"visibility: hidden;\"><!></div>`);\n\nexport default function BubbleMenu($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.prop($$props, 'class', 3, \"flex h-fit w-fit items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md\"),\n\t\tpluginKey = $.prop($$props, 'pluginKey', 3, \"bubbleMenu\"),\n\t\tshouldShow = $.prop($$props, 'shouldShow', 3, null),\n\t\tupdateDelay = $.prop($$props, 'updateDelay', 3, 250),\n\t\ttippyOptions = $.prop($$props, 'tippyOptions', 19, () => ({}));\n\n\tlet menuElement = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif ($$props.editor && $.get(menuElement)) {\n\t\t\tconst plugin = BubbleMenuPlugin({\n\t\t\t\tpluginKey: pluginKey(),\n\t\t\t\teditor: $$props.editor,\n\t\t\t\telement: $.get(menuElement),\n\t\t\t\ttippyOptions: {\n\t\t\t\t\tduration: 100,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\t...tippyOptions()\n\t\t\t\t},\n\t\t\t\tshouldShow: shouldShow(),\n\t\t\t\tupdateDelay: updateDelay()\n\t\t\t});\n\n\t\t\t$$props.editor.registerPlugin(plugin);\n\n\t\t\treturn () => {\n\t\t\t\t$$props.editor.unregisterPlugin(pluginKey());\n\t\t\t};\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","$","root","$$anchor","$","root","root_1","$$anchor","EditableTextNodeEditor","BubbleMenu","TemplateRenderer"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -13,11 +13,11 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "svelte": "./src/index.ts",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./src/index.ts",
+      "svelte": "./dist/index.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
@@ -32,7 +32,7 @@
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.2.3"
+    "@pixerate/editor": "0.3.0"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"

package/src/BubbleMenu.svelte

@@ -1,41 +1,54 @@
 <script lang="ts">
   import type { Editor } from "@tiptap/core";
-  import BubbleMenuPlugin from "@tiptap/extension-bubble-menu";
-  import { onMount, onDestroy } from "svelte";
+  import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
 
   interface Props {
     editor?: Editor;
     class?: string;
+    pluginKey?: any;
+    shouldShow?: ((props: any) => boolean) | null;
+    updateDelay?: number;
+    tippyOptions?: Record<string, any>;
     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",
+    class: className = "flex h-fit w-fit items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md",
+    pluginKey = "bubbleMenu",
+    shouldShow = null,
+    updateDelay = 250,
+    tippyOptions = {},
     children,
   }: Props = $props();
 
   let menuElement = $state<HTMLElement>();
 
-  onMount(() => {
+  $effect(() => {
     if (editor && menuElement) {
-      editor.registerPlugin(
-        BubbleMenuPlugin.configure({
-          element: menuElement,
-          tippyOptions: { duration: 100 },
-        })
-      );
-    }
-  });
+      const plugin = BubbleMenuPlugin({
+        pluginKey,
+        editor,
+        element: menuElement,
+        tippyOptions: {
+          duration: 100,
+          appendTo: () => document.body,
+          ...tippyOptions,
+        },
+        shouldShow,
+        updateDelay,
+      });
+
+      editor.registerPlugin(plugin);
 
-  onDestroy(() => {
-    if (editor) {
-      editor.unregisterPlugin("bubbleMenu");
+      return () => {
+        editor.unregisterPlugin(pluginKey);
+      };
     }
   });
 </script>
 
-<div bind:this={menuElement} class={className}>
+<div bind:this={menuElement} class={className} style="visibility: hidden;">
   {#if children}
     {@render children()}
   {/if}