@ecsplico/editor 3.5.0 → 3.5.1

package/dist/features/image-studio/react/store.js

@@ -0,0 +1,46 @@
+import { createImageStudioNodeCore } from "../node-core.js";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/features/image-studio/react/store.ts
+const noUnsubscribe = () => {};
+/**
+* The `ImageStudioReactStore` of one `imageStudio` node (the React wrapper of `createImageStudioNodeCore`): `state`
+* follows the node's `studio` attribute, `update` writes it back as one transaction, the rest goes to
+* `backend.images`. The core lives for as long as the component and the `editor`, `backend` and `documentId` stay the
+* same; the first render returns `undefined` (the core is built in an effect), so render the dialog once there is a store.
+*/
+function useImageStudioNodeStore(options) {
+	const { editor, backend, documentId } = options;
+	const getPos = useRef(options.getPos);
+	getPos.current = options.getPos;
+	const [core, setCore] = useState();
+	useEffect(() => {
+		const own = createImageStudioNodeCore({
+			editor,
+			backend,
+			documentId,
+			getPos: () => getPos.current()
+		});
+		setCore(own);
+		return () => {
+			own.dispose();
+			setCore(void 0);
+		};
+	}, [
+		editor,
+		backend,
+		documentId
+	]);
+	const subscribe = useCallback((listener) => core ? core.subscribe(listener) : noUnsubscribe, [core]);
+	const getSnapshot = useCallback(() => core?.get(), [core]);
+	const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	return useMemo(() => core && snapshot ? {
+		...snapshot,
+		update: core.update,
+		generate: core.generate,
+		upload: core.upload
+	} : void 0, [core, snapshot]);
+}
+//#endregion
+export { useImageStudioNodeStore };
+
+//# sourceMappingURL=store.js.map

package/dist/features/image-studio/react/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../../../src/features/image-studio/react/store.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'\nimport { createImageStudioNodeCore, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions } from '../node-core'\nimport type { ImageStudioImage, ImageStudioPromptBlock, ImageStudioState } from '../state'\n\n/**\n * What the React Bild-Studio dialog drives; a host supplies it. The same contract as the Vue `ImageStudioStore`, with\n * plain values where Vue has refs: the host re-renders the dialog with a new `state` after `update`.\n *\n * The dialog applies the reducers of `../state` and hands the result to `update`; the store only persists it. The\n * store's methods never touch `state` themselves:\n * - `update` must lead to a new `state` (the dialog keeps working on its own latest value until `state` changes).\n * - `generate` produces one image from the block's `state.description`, the active Prompt-Bausteine and the active\n *   images (the host builds the prompt). When it resolves, the dialog calls `update(addGeneration(state, image, turn))`;\n *   when it rejects (and the signal was not aborted) the dialog appends a turn with `imageId: null` and the message as\n *   `problem`. An aborted generation adds nothing.\n * - `upload` stores the file and returns the image; the dialog then calls `update(addReference(state, image))`.\n * - `problem` is a problem of the store itself (the Prompt-Bausteine could not be loaded, say); the dialog shows it as a notice.\n */\nexport interface ImageStudioReactStore {\n  readonly state: ImageStudioState\n  /** The managed list of Prompt-Bausteine, loaded by the host. */\n  readonly promptBlocks: readonly ImageStudioPromptBlock[]\n  /** Called with the state after a reducer; the host persists it. */\n  update: (next: ImageStudioState) => void\n  generate: (instruction: string, signal: AbortSignal) => Promise<ImageStudioImage>\n  upload: (file: File) => Promise<ImageStudioImage>\n  readonly problem: string | undefined\n}\n\nconst noUnsubscribe = () => {}\n\n/**\n * The `ImageStudioReactStore` of one `imageStudio` node (the React wrapper of `createImageStudioNodeCore`): `state`\n * follows the node's `studio` attribute, `update` writes it back as one transaction, the rest goes to\n * `backend.images`. The core lives for as long as the component and the `editor`, `backend` and `documentId` stay the\n * same; the first render returns `undefined` (the core is built in an effect), so render the dialog once there is a store.\n */\nexport function useImageStudioNodeStore(options: ImageStudioNodeCoreOptions): ImageStudioReactStore | undefined {\n  const { editor, backend, documentId } = options\n  const getPos = useRef(options.getPos)\n  getPos.current = options.getPos\n  const [core, setCore] = useState<ImageStudioNodeCore>()\n  useEffect(() => {\n    const own = createImageStudioNodeCore({ editor, backend, documentId, getPos: () => getPos.current() })\n    setCore(own)\n    return () => {\n      own.dispose()\n      setCore(undefined)\n    }\n  }, [editor, backend, documentId])\n  const subscribe = useCallback((listener: () => void) => core ? core.subscribe(listener) : noUnsubscribe, [core])\n  const getSnapshot = useCallback(() => core?.get(), [core])\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n  return useMemo(\n    () => core && snapshot ? { ...snapshot, update: core.update, generate: core.generate, upload: core.upload } : undefined,\n    [core, snapshot],\n  )\n}\n"],"mappings":";;;AA6BA,MAAM,sBAAsB,CAAC;;;;;;;AAQ7B,SAAgB,wBAAwB,SAAwE;CAC9G,MAAM,EAAE,QAAQ,SAAS,eAAe;CACxC,MAAM,SAAS,OAAO,QAAQ,MAAM;CACpC,OAAO,UAAU,QAAQ;CACzB,MAAM,CAAC,MAAM,WAAW,SAA8B;CACtD,gBAAgB;EACd,MAAM,MAAM,0BAA0B;GAAE;GAAQ;GAAS;GAAY,cAAc,OAAO,QAAQ;EAAE,CAAC;EACrG,QAAQ,GAAG;EACX,aAAa;GACX,IAAI,QAAQ;GACZ,QAAQ,KAAA,CAAS;EACnB;CACF,GAAG;EAAC;EAAQ;EAAS;CAAU,CAAC;CAChC,MAAM,YAAY,aAAa,aAAyB,OAAO,KAAK,UAAU,QAAQ,IAAI,eAAe,CAAC,IAAI,CAAC;CAC/G,MAAM,cAAc,kBAAkB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;CACzD,MAAM,WAAW,qBAAqB,WAAW,aAAa,WAAW;CACzE,OAAO,cACC,QAAQ,WAAW;EAAE,GAAG;EAAU,QAAQ,KAAK;EAAQ,UAAU,KAAK;EAAU,QAAQ,KAAK;CAAO,IAAI,KAAA,GAC9G,CAAC,MAAM,QAAQ,CACjB;AACF"}

package/dist/features/image-studio/react.d.ts

@@ -0,0 +1,18 @@
+import { ImageStudioImage, ImageStudioPromptBlock } from "../../core/backend-types.js";
+import { ReactFeature } from "../../react/EditorSurface.js";
+import "../../react/index.js";
+import { EMPTY_IMAGE_STUDIO_STATE, ImageStudioState, ImageStudioTurn, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { ImageStudioNodeCore, ImageStudioNodeCoreOptions, ImageStudioNodeSnapshot, createImageStudioNodeCore } from "./node-core.js";
+import { ImageStudioReactStore, useImageStudioNodeStore } from "./react/store.js";
+import { ImageStudioDialog } from "./react/ImageStudioDialog.js";
+//#region src/features/image-studio/react.d.ts
+/**
+ * The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description
+ * placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry
+ * `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`
+ * capability; without it the view says that generation is not set up.
+ */
+export declare function imageStudioFeature(): ReactFeature;
+//#endregion
+export { EMPTY_IMAGE_STUDIO_STATE, ImageStudioDialog, type ImageStudioImage, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions, type ImageStudioNodeSnapshot, type ImageStudioPromptBlock, type ImageStudioReactStore, type ImageStudioState, type ImageStudioTurn, addGeneration, addReference, createImageStudioNodeCore, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock, useImageStudioNodeStore };
+//# sourceMappingURL=react.d.ts.map

package/dist/features/image-studio/react.js

@@ -0,0 +1,21 @@
+import { EMPTY_IMAGE_STUDIO_STATE, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { imageStudioFeatureCore } from "./feature.js";
+import { ImageStudioDialog } from "./react/ImageStudioDialog.js";
+import { createImageStudioNodeCore } from "./node-core.js";
+import { useImageStudioNodeStore } from "./react/store.js";
+import { ImageStudioView } from "./react/ImageStudioView.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+//#region src/features/image-studio/react.ts
+/**
+* The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description
+* placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry
+* `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`
+* capability; without it the view says that generation is not set up.
+*/
+function imageStudioFeature() {
+	return imageStudioFeatureCore({ nodeView: ReactNodeViewRenderer(ImageStudioView) });
+}
+//#endregion
+export { EMPTY_IMAGE_STUDIO_STATE, ImageStudioDialog, addGeneration, addReference, createImageStudioNodeCore, imageStudioFeature, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock, useImageStudioNodeStore };
+
+//# sourceMappingURL=react.js.map

package/dist/features/image-studio/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../../../src/features/image-studio/react.ts"],"sourcesContent":["import { ReactNodeViewRenderer } from '@tiptap/react'\nimport type { ReactFeature } from '../../react'\nimport { imageStudioFeatureCore } from './feature'\nimport { ImageStudioView } from './react/ImageStudioView'\n\nexport { ImageStudioDialog } from './react/ImageStudioDialog'\nexport { type ImageStudioReactStore, useImageStudioNodeStore } from './react/store'\nexport { createImageStudioNodeCore, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions, type ImageStudioNodeSnapshot } from './node-core'\nexport {\n  addGeneration,\n  addReference,\n  EMPTY_IMAGE_STUDIO_STATE,\n  type ImageStudioImage,\n  type ImageStudioPromptBlock,\n  type ImageStudioState,\n  type ImageStudioTurn,\n  isEmptyImageStudioState,\n  normalizeImageStudioState,\n  removeImage,\n  select,\n  selectedImage,\n  setDescription,\n  toggleImage,\n  togglePromptBlock,\n} from './state'\n\n/**\n * The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description\n * placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry\n * `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`\n * capability; without it the view says that generation is not set up.\n */\nexport function imageStudioFeature(): ReactFeature {\n  return imageStudioFeatureCore({ nodeView: ReactNodeViewRenderer(ImageStudioView) })\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,qBAAmC;CACjD,OAAO,uBAAuB,EAAE,UAAU,sBAAsB,eAAe,EAAE,CAAC;AACpF"}

package/dist/markdown/MarkdownSurface.vue.d.ts

@@ -61,9 +61,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
   onFrontmatter?: ((frontmatter: string | null) => any) | undefined;
   onDiagnostics?: ((diagnostics: MarkdownDiagnostic[]) => any) | undefined;
 }>, {
-  modelValue: string;
   editable: boolean;
   settingsUi: "internal" | "external";
+  modelValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/vue/AdvancedEditor.vue.d.ts

@@ -87,8 +87,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
   onContentError?: ((error: Error) => any) | undefined;
   onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
 }>, {
-  ai: boolean;
   content: ContentLevel | readonly FeatureId[];
+  ai: boolean;
   editable: boolean;
   settingsUi: "internal" | "external";
   interaction: InteractionLevel | readonly FeatureId[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecsplico/editor",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "type": "module",
   "description": "Vue and React editor library on TipTap v3 (Vue: Nuxt UI; React: shadcn/ui): framework-free features with Vue and React bindings, simple and advanced presets, tree-shakeable entries. Built ESM with type declarations.",
   "license": "MIT",
@@ -184,6 +184,11 @@
       "types": "./dist/features/image-studio/vue.d.ts",
       "import": "./dist/features/image-studio/vue.js"
     },
+    "./image-studio/react": {
+      "skaile-source": "./src/features/image-studio/react.ts",
+      "types": "./dist/features/image-studio/react.d.ts",
+      "import": "./dist/features/image-studio/react.js"
+    },
     "./image-studio/schema": {
       "skaile-source": "./src/features/image-studio/schema.ts",
       "types": "./dist/features/image-studio/schema.d.ts",