@pixerate/editor-svelte 0.198.1 → 0.199.0

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import type MergePreviewComponent from "./MergePreview.svelte";
 import type StylesGalleryComponent from "./StylesGallery.svelte";
 import type ExportDocxButtonComponent from "./ExportDocxButton.svelte";
 export * from "./editor.svelte.js";
+export * from "./promptEditor.svelte.js";
 export * from "./navigationGuard.js";
 export * from "./createNavigationGuard.svelte.js";
 export * from "./history/index.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./editor.svelte.js";
+export * from "./promptEditor.svelte.js";
 export * from "./navigationGuard.js";
 export * from "./createNavigationGuard.svelte.js";
 export * from "./history/index.js";

package/dist/paint-editor/BrushPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import StickerPicker from './StickerPicker.svelte';
   import { brushLoadColor, brushTakesPaint, downloadBytes, toggleStickerRef, DEFAULT_PAINT_GRADIENT, type PaintEditorController } from '@pixerate/editor/paint-editor';
-  import { addBrushSourceFromFile, brushColourHex, brushPreviewColours, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
+  import { addBrushSourceFromFile, importBrushFile, brushColourHex, brushPreviewColours, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
   import { untrack } from 'svelte';
   import BrushEditor from '../brushes/BrushEditor.svelte';
   import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
@@ -97,7 +97,7 @@
   {/if}
 {/snippet}
 
-<!-- The brush library (BrushLibraryBrowser) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. Images picked for an image tip or grain go into the brush library as sources. -->
+<!-- The brush library (BrushLibraryBrowser) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. Images picked for an image tip or grain go into the brush library as sources; Import also reads brush packs (.abr, .brush, .brushset). -->
 <div class={`${panel} ${className}`} data-testid="brush-panel">
   <BrushLibraryBrowser {entries} activeId={brush.id} onselect={(id) => controller.setBrush({ id })} thumbnail={(id) => thumbs.get(id) ?? null} {thumbnailWidth} {thumbnailHeight} />
   <BrushEditor
@@ -116,14 +116,14 @@
     <input
       bind:this={fileInput}
       type="file"
-      accept=".json,application/json"
+      accept=".json,.abr,.brush,.brushset,application/json"
       aria-label="Import brushes"
       class="hidden"
       onchange={(e) => {
         const input = e.currentTarget;
         const f = input.files?.[0];
         input.value = '';
-        if (f) run(async () => controller.importBrushes(JSON.parse(await f.text())));
+        if (f) run(async () => (/\.json$/i.test(f.name) ? controller.importBrushes(JSON.parse(await f.text())) : importBrushFile(controller.brushLibrary, f)));
       }}
     />
   </div>

package/dist/promptEditor.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Component } from "svelte";
+import { Editor } from "@tiptap/core";
+import { type LoadingNodeViewState, type PromptEditorConfig } from "@pixerate/editor";
+type MaybeGetter<T> = T | (() => T);
+export interface UsePromptEditorProps extends PromptEditorConfig {
+    /** Optional DOM element to mount the editor into (or use `mount()` / `use:prompt.action`). */
+    element?: HTMLElement;
+    /**
+     * Svelte component drawn inside each `loadingNode` placeholder instead of the default SVG spinner,
+     * e.g. your design system's loader. It receives `view` (`id`, `label`). Read when a
+     * placeholder renders, so changing it does not recreate the editor.
+     */
+    loadingIndicator?: Component<{
+        view: LoadingNodeViewState;
+    }>;
+}
+export interface SveltePromptEditor {
+    /** The active TipTap `Editor` instance (reactive). */
+    readonly editor: Editor | null;
+    /** Alias for `editor` (matches `createReactiveEditor`). */
+    readonly current: Editor | null;
+    /** Mounts the editor DOM into `element`. */
+    mount(element: HTMLElement): Editor | null;
+    /** Svelte action (`use:prompt.action`) that mounts the editor DOM into `node`. */
+    action(node: HTMLElement): {
+        destroy(): void;
+    };
+    /** Destroys the editor instance. */
+    destroy(): void;
+}
+/**
+ * Reactive prompt editor for Svelte 5 (the counterpart of React's `usePromptEditor`).
+ * Manages plain-text serialization, animated gradient tokens, `{{template}}` autocomplete,
+ * `/command` slash triggers, milestone tracking (`used_variable`, `used_magic`),
+ * plain-text clipboard handling, and custom `loadingNode` indicators without recreating
+ * the editor when content, editability, placeholder, className, or inline `templateColorMap`
+ * references update.
+ *
+ * Pass a getter `() => ({ content, onContentChange, ... })` to react to prop/state updates.
+ */
+export declare function usePromptEditor(props: MaybeGetter<UsePromptEditorProps>): SveltePromptEditor;
+export declare const createPromptEditor: typeof usePromptEditor;
+export {};

package/dist/promptEditor.svelte.js

@@ -0,0 +1,100 @@
+import { Editor } from "@tiptap/core";
+import { createPromptEditorOptions, promptEditorConfigKey, syncPromptEditor, } from "@pixerate/editor";
+import { createSvelteLoadingNodeView } from "./loading-node/index.js";
+const read = (value) => typeof value === "function" ? value() : value;
+/**
+ * Reactive prompt editor for Svelte 5 (the counterpart of React's `usePromptEditor`).
+ * Manages plain-text serialization, animated gradient tokens, `{{template}}` autocomplete,
+ * `/command` slash triggers, milestone tracking (`used_variable`, `used_magic`),
+ * plain-text clipboard handling, and custom `loadingNode` indicators without recreating
+ * the editor when content, editability, placeholder, className, or inline `templateColorMap`
+ * references update.
+ *
+ * Pass a getter `() => ({ content, onContentChange, ... })` to react to prop/state updates.
+ */
+export function usePromptEditor(props) {
+    let editorState = $state.raw(null);
+    let currentEditor = null;
+    let currentConfigKey = null;
+    let mountedElement;
+    let latestProps = read(props);
+    const reachedMilestones = new Set();
+    // One node view for the editor's lifetime: swapping indicator components does not recreate
+    // the editor. It is only installed while `loadingIndicator` is set (part of the config key).
+    const dynamicLoadingNodeView = (dom, state) => {
+        const Comp = latestProps.loadingIndicator;
+        if (!Comp)
+            return { update() { }, destroy() { } };
+        return createSvelteLoadingNodeView(Comp)(dom, state);
+    };
+    function buildEditor(p) {
+        return new Editor({
+            ...createPromptEditorOptions(() => latestProps, {
+                loadingNodeView: p.loadingIndicator ? dynamicLoadingNodeView : null,
+                reachedMilestones,
+            }),
+            element: p.element ?? mountedElement,
+        });
+    }
+    function syncProps(p) {
+        const previous = latestProps;
+        latestProps = p;
+        const nextKey = promptEditorConfigKey(p, { hasLoadingNodeView: !!p.loadingIndicator });
+        if (!currentEditor || currentEditor.isDestroyed || currentConfigKey !== nextKey) {
+            currentEditor?.destroy();
+            currentConfigKey = nextKey;
+            currentEditor = buildEditor(p);
+            editorState = currentEditor;
+            return;
+        }
+        // Content is applied only when the prop changed, so echoes of `onContentChange` and
+        // unrelated prop updates never reset the document or the cursor.
+        syncPromptEditor(currentEditor, p, previous);
+    }
+    // Initialize synchronously so `prompt.editor` is immediately available, then track updates reactively.
+    syncProps(latestProps);
+    $effect(() => {
+        const next = read(props);
+        syncProps(next);
+    });
+    $effect(() => () => {
+        currentEditor?.destroy();
+        currentEditor = null;
+        currentConfigKey = null;
+    });
+    function mount(element) {
+        mountedElement = element;
+        if (currentEditor && !currentEditor.isDestroyed) {
+            if (currentEditor.view.dom.parentElement !== element) {
+                element.appendChild(currentEditor.view.dom);
+            }
+        }
+        return currentEditor;
+    }
+    return {
+        get editor() {
+            return editorState;
+        },
+        get current() {
+            return editorState;
+        },
+        mount,
+        action(node) {
+            mount(node);
+            return {
+                destroy() {
+                    if (mountedElement === node) {
+                        mountedElement = undefined;
+                    }
+                },
+            };
+        },
+        destroy() {
+            currentEditor?.destroy();
+            currentEditor = null;
+            currentConfigKey = null;
+            editorState = null;
+        },
+    };
+}
+export const createPromptEditor = usePromptEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.198.1",
+  "version": "0.199.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -184,7 +184,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.268.1"
+    "@pixerate/editor": "0.269.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",