@threadlabs/looma 0.28.21 → 0.28.22

package/editor/image-uploads.d.ts

@@ -0,0 +1,49 @@
+import type { Editor } from "@tiptap/core";
+import { type LoomaImageDescriptor } from "./image-delivery.js";
+/**
+ * Host upload result normalized into the editor's durable image descriptor.
+ * `url` becomes the stored `src`; optional dimensions preserve layout before
+ * the image loads and `responsive` opts into host-provided rendition policy.
+ */
+export interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"> {
+    url: string;
+}
+/**
+ * Application-owned upload boundary used by paste, drop, and file selection.
+ *
+ * @ownership The application owns network requests, persistence, and returned
+ * URLs. Looma owns only editor insertion after the promise fulfills.
+ * @failure Rejection leaves the document unchanged and is surfaced through the
+ * editor's `uploadError` event so the host chooses retry and user messaging.
+ */
+export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
+export interface LoomaImageUploadsState {
+    readonly uploading: boolean;
+    /** The file whose upload failed last, which `retry()` sends again. */
+    readonly failed: File | null;
+}
+export interface LoomaImageUploadsOptions {
+    editor: Editor;
+    /** Read on each upload, so a host can change it while the editor runs. */
+    upload: () => LoomaImageUploader | null | undefined;
+    onError: (error: unknown, file: File) => void;
+}
+/**
+ * The editor's image uploads: each file goes to the host's uploader in turn, and the image it
+ * returns is inserted at the selection.
+ *
+ * @ownership The host owns the upload and its URL; this owns the uploading state, the failed file,
+ * and inserting the result.
+ * @failure A rejected upload leaves the document unchanged, records the file for `retry()`, and is
+ * reported through `onError`.
+ */
+export interface LoomaImageUploads {
+    readonly state: LoomaImageUploadsState;
+    /** Calls `listener` after every state change; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /** Uploads each file in turn and inserts its image; does nothing without an uploader. */
+    insert(files: Iterable<File>): Promise<void>;
+    /** Sends the failed file again. */
+    retry(): Promise<void>;
+}
+export declare function createImageUploads(options: LoomaImageUploadsOptions): LoomaImageUploads;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.21",
+  "version": "0.28.22",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -3,25 +3,10 @@ import "./looma-editor.css";
 import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
 import { type PropType, type VNode } from "vue";
 import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaMentionProvider, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
-import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageSourceResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
+import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageSourceResolver, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
+import { type LoomaImageUploader } from "../../editor/image-uploads.js";
 import { type LoomaLinkResolve, type LoomaLinkSearch } from "../../editor/link-editing.js";
-/**
- * Host upload result normalized into the editor's durable image descriptor.
- * `url` becomes the stored `src`; optional dimensions preserve layout before
- * the image loads and `responsive` opts into host-provided rendition policy.
- */
-export interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"> {
-    url: string;
-}
-/**
- * Application-owned upload boundary used by paste, drop, and file selection.
- *
- * @ownership The application owns network requests, persistence, and returned
- * URLs. Looma owns only editor insertion after the promise fulfills.
- * @failure Rejection leaves the document unchanged and is surfaced through the
- * editor's `uploadError` event so the host chooses retry and user messaging.
- */
-export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
+export type { LoomaImageUploader, LoomaImageUploadResult } from "../../editor/image-uploads.js";
 /**
  * Chooses whether formatting controls follow a selection, occupy persistent
  * editor chrome, or open from an app-owned button (`popover`, with a text-only

package/vue/editor/index.js

@@ -1138,6 +1138,64 @@ function runBlockAction(editor, action) {
 	return true;
 }
 //#endregion
+//#region src/editor/image-uploads.ts
+function createImageUploads(options) {
+	const { editor } = options;
+	const listeners = /* @__PURE__ */ new Set();
+	let state = {
+		uploading: false,
+		failed: null
+	};
+	const set = (patch) => {
+		state = {
+			...state,
+			...patch
+		};
+		listeners.forEach((listener) => listener());
+	};
+	const insertOne = async (file) => {
+		const upload = options.upload();
+		if (!upload || editor.isDestroyed) return;
+		set({ uploading: true });
+		try {
+			const result = await upload(file);
+			const image = typeof result === "string" ? { url: result } : result;
+			const width = normalizeImageDimension(image.width);
+			const height = normalizeImageDimension(image.height);
+			if (!editor.isDestroyed) editor.chain().focus().insertContent(imageUploadContent({
+				src: image.url,
+				alt: image.alt ?? file.name,
+				...width ? { width } : {},
+				...height ? { height } : {},
+				...image.responsive === true ? { responsive: true } : {}
+			})).run();
+			set({ failed: null });
+		} catch (error) {
+			set({ failed: file });
+			options.onError(error, file);
+		} finally {
+			set({ uploading: false });
+		}
+	};
+	return {
+		get state() {
+			return state;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		async insert(files) {
+			for (const file of files) await insertOne(file);
+		},
+		async retry() {
+			if (state.failed) await insertOne(state.failed);
+		}
+	};
+}
+//#endregion
 //#region src/editor/formatting-selection.ts
 var HOLD_MS = 500;
 var HOLD_SLOP_PX = 8;
@@ -3025,8 +3083,11 @@ var LoomaEditor = defineComponent({
 		const mobileToolbarShell = ref(null);
 		const codeLanguageShell = ref(null);
 		const dragOver = ref(false);
-		const uploading = ref(false);
-		const failedUpload = ref(null);
+		let uploads;
+		const uploadState = shallowRef({
+			uploading: false,
+			failed: null
+		});
 		const tablePickerOpen = ref(false);
 		const mobileToolbarStyle = ref({});
 		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
@@ -3263,6 +3324,15 @@ var LoomaEditor = defineComponent({
 				linkState.value = engine.state;
 			});
 			linkEditing = engine;
+			const imageUploads = createImageUploads({
+				editor: session.editor,
+				upload: () => props.uploadImage,
+				onError: (error, file) => emit("uploadError", error, file)
+			});
+			imageUploads.subscribe(() => {
+				uploadState.value = imageUploads.state;
+			});
+			uploads = imageUploads;
 			const instance = session.editor;
 			formatting = createFormattingSelection({
 				editor: instance,
@@ -3867,41 +3937,18 @@ var LoomaEditor = defineComponent({
 			if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
 			if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
 		});
-		const insertImage = async (file) => {
-			if (!props.uploadImage || !editor.value) return;
-			uploading.value = true;
-			try {
-				const result = await props.uploadImage(file);
-				const image = typeof result === "string" ? { url: result } : result;
-				const width = normalizeImageDimension(image.width);
-				const height = normalizeImageDimension(image.height);
-				editor.value.chain().focus().insertContent(imageUploadContent({
-					src: image.url,
-					alt: image.alt ?? file.name,
-					...width ? { width } : {},
-					...height ? { height } : {},
-					...image.responsive === true ? { responsive: true } : {}
-				})).run();
-				failedUpload.value = null;
-			} catch (error) {
-				failedUpload.value = { file };
-				emit("uploadError", error, file);
-			} finally {
-				uploading.value = false;
-			}
-		};
 		const onFileChange = async (event) => {
 			const input = event.target;
 			const files = Array.from(input.files ?? []);
 			input.value = "";
-			for (const file of files) await insertImage(file);
+			await uploads?.insert(files);
 		};
 		const onDrop = async (event) => {
 			event.preventDefault();
 			dragOver.value = false;
 			if (!props.editable) return;
 			const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => file.type.startsWith("image/"));
-			for (const file of files) await insertImage(file);
+			await uploads?.insert(files);
 		};
 		const onContextMenu = (event) => {
 			const instance = editor.value;
@@ -4158,7 +4205,7 @@ var LoomaEditor = defineComponent({
 					variant: tablePickerOpen.value ? "solid" : "ghost",
 					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
-				commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
+				commandButton(uploadState.value.uploading ? "Uploading image" : "Insert image", "image", false, uploadState.value.uploading || !props.uploadImage, () => fileInput.value?.click()),
 				h("span", {
 					class: "divider",
 					"aria-hidden": "true"
@@ -4349,17 +4396,16 @@ var LoomaEditor = defineComponent({
 					"aria-hidden": "true",
 					onChange: onFileChange
 				}),
-				failedUpload.value ? h("div", {
+				uploadState.value.failed ? h("div", {
 					class: "looma-editor__upload-error",
 					role: "alert"
 				}, [h("span", "Couldn’t upload image."), h("button", {
 					type: "button",
-					disabled: uploading.value,
+					disabled: uploadState.value.uploading,
 					onClick: () => {
-						const attempt = failedUpload.value;
-						if (attempt) insertImage(attempt.file);
+						uploads?.retry();
 					}
-				}, uploading.value ? "Retrying…" : "Retry")]) : null,
+				}, uploadState.value.uploading ? "Retrying…" : "Retry")]) : null,
 				dragOver.value ? h("div", {
 					class: "looma-editor__drop-overlay",
 					"aria-hidden": "true"