@threadlabs/looma 0.28.20 → 0.28.22

package/editor/chunks/extensions.js

@@ -1732,144 +1732,11 @@ var TaskList = Node$1.create({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@tiptap+extension-task-item@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-task-item/dist/index.js
-/**
-* Matches a task item to a - [ ] on input.
-*/
-var inputRegex$4 = /^\s*(\[([( |x])?\])\s$/;
-/**
-* This extension allows you to create task items.
-* @see https://www.tiptap.dev/api/nodes/task-item
-*/
-var TaskItem = Node$1.create({
-	name: "taskItem",
-	addOptions() {
-		return {
-			nested: false,
-			HTMLAttributes: {},
-			taskListTypeName: "taskList",
-			a11y: void 0
-		};
-	},
-	content() {
-		return this.options.nested ? "paragraph block*" : "paragraph+";
-	},
-	defining: true,
-	addAttributes() {
-		return { checked: {
-			default: false,
-			keepOnSplit: false,
-			parseHTML: (element) => {
-				const dataChecked = element.getAttribute("data-checked");
-				return dataChecked === "" || dataChecked === "true";
-			},
-			renderHTML: (attributes) => ({ "data-checked": attributes.checked })
-		} };
-	},
-	parseHTML() {
-		return [{
-			tag: `li[data-type="${this.name}"]`,
-			priority: 51
-		}];
-	},
-	renderHTML({ node, HTMLAttributes }) {
-		return [
-			"li",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
-			[
-				"label",
-				["input", {
-					type: "checkbox",
-					checked: node.attrs.checked ? "checked" : null
-				}],
-				["span"]
-			],
-			["div", 0]
-		];
-	},
-	addKeyboardShortcuts() {
-		const shortcuts = {
-			Enter: () => this.editor.commands.splitListItem(this.name),
-			"Shift-Tab": () => this.editor.commands.liftListItem(this.name)
-		};
-		if (!this.options.nested) return shortcuts;
-		return {
-			...shortcuts,
-			Tab: () => this.editor.commands.sinkListItem(this.name)
-		};
-	},
-	addNodeView() {
-		return ({ node, HTMLAttributes, getPos, editor }) => {
-			const listItem = document.createElement("li");
-			const checkboxWrapper = document.createElement("label");
-			const checkboxStyler = document.createElement("span");
-			const checkbox = document.createElement("input");
-			const content = document.createElement("div");
-			const updateA11Y = () => {
-				var _a, _b;
-				checkbox.ariaLabel = ((_b = (_a = this.options.a11y) === null || _a === void 0 ? void 0 : _a.checkboxLabel) === null || _b === void 0 ? void 0 : _b.call(_a, node, checkbox.checked)) || `Task item checkbox for ${node.textContent || "empty task item"}`;
-			};
-			updateA11Y();
-			checkboxWrapper.contentEditable = "false";
-			checkbox.type = "checkbox";
-			checkbox.addEventListener("mousedown", (event) => event.preventDefault());
-			checkbox.addEventListener("change", (event) => {
-				if (!editor.isEditable && !this.options.onReadOnlyChecked) {
-					checkbox.checked = !checkbox.checked;
-					return;
-				}
-				const { checked } = event.target;
-				if (editor.isEditable && typeof getPos === "function") editor.chain().focus(void 0, { scrollIntoView: false }).command(({ tr }) => {
-					const position = getPos();
-					if (typeof position !== "number") return false;
-					const currentNode = tr.doc.nodeAt(position);
-					tr.setNodeMarkup(position, void 0, {
-						...currentNode === null || currentNode === void 0 ? void 0 : currentNode.attrs,
-						checked
-					});
-					return true;
-				}).run();
-				if (!editor.isEditable && this.options.onReadOnlyChecked) {
-					if (!this.options.onReadOnlyChecked(node, checked)) checkbox.checked = !checkbox.checked;
-				}
-			});
-			Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
-				listItem.setAttribute(key, value);
-			});
-			listItem.dataset.checked = node.attrs.checked;
-			checkbox.checked = node.attrs.checked;
-			checkboxWrapper.append(checkbox, checkboxStyler);
-			listItem.append(checkboxWrapper, content);
-			Object.entries(HTMLAttributes).forEach(([key, value]) => {
-				listItem.setAttribute(key, value);
-			});
-			return {
-				dom: listItem,
-				contentDOM: content,
-				update: (updatedNode) => {
-					if (updatedNode.type !== this.type) return false;
-					listItem.dataset.checked = updatedNode.attrs.checked;
-					checkbox.checked = updatedNode.attrs.checked;
-					updateA11Y();
-					return true;
-				}
-			};
-		};
-	},
-	addInputRules() {
-		return [wrappingInputRule({
-			find: inputRegex$4,
-			type: this.type,
-			getAttributes: (match) => ({ checked: match[match.length - 1] === "x" })
-		})];
-	}
-});
-//#endregion
 //#region ../../node_modules/.pnpm/@tiptap+extension-blockquote@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-blockquote/dist/index.js
 /**
 * Matches a blockquote to a `>` as input.
 */
-var inputRegex$3 = /^\s*>\s$/;
+var inputRegex$4 = /^\s*>\s$/;
 /**
 * This extension allows you to create blockquotes.
 * @see https://tiptap.dev/api/nodes/blockquote
@@ -1910,7 +1777,7 @@ var Blockquote = Node$1.create({
 	},
 	addInputRules() {
 		return [wrappingInputRule({
-			find: inputRegex$3,
+			find: inputRegex$4,
 			type: this.type
 		})];
 	}
@@ -3861,7 +3728,7 @@ var Link = Mark.create({
 /**
 * Matches an image to a ![image](src "title") on input.
 */
-var inputRegex$2 = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+var inputRegex$3 = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
 /**
 * This extension allows you to insert images.
 * @see https://www.tiptap.dev/api/nodes/image
@@ -3905,7 +3772,7 @@ var Image = Node$1.create({
 	},
 	addInputRules() {
 		return [nodeInputRule({
-			find: inputRegex$2,
+			find: inputRegex$3,
 			type: this.type,
 			getAttributes: (match) => {
 				const [, , alt, src, title] = match;
@@ -3962,7 +3829,7 @@ var LoomaImage = Image.extend({ addAttributes() {
 /**
 * Matches a highlight to a ==highlight== on input.
 */
-var inputRegex$1 = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
+var inputRegex$2 = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
 /**
 * Matches a highlight to a ==highlight== on paste.
 */
@@ -4021,7 +3888,7 @@ var Highlight = Mark.create({
 	},
 	addInputRules() {
 		return [markInputRule({
-			find: inputRegex$1,
+			find: inputRegex$2,
 			type: this.type
 		})];
 	},
@@ -4244,7 +4111,7 @@ var Placeholder = Extension.create({
 *  This ensures that any text between backticks is formatted as code,
 *  regardless of the surrounding characters (exception being another backtick).
 */
-var inputRegex = /(^|[^`])`([^`]+)`(?!`)/;
+var inputRegex$1 = /(^|[^`])`([^`]+)`(?!`)/;
 /**
 * Matches inline code while pasting.
 */
@@ -4289,7 +4156,7 @@ var Code = Mark.create({
 	},
 	addInputRules() {
 		return [markInputRule({
-			find: inputRegex,
+			find: inputRegex$1,
 			type: this.type
 		})];
 	},
@@ -6431,6 +6298,196 @@ var LoomaBlockSelection = Extension.create({
 	}
 });
 //#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-task-item@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-task-item/dist/index.js
+/**
+* Matches a task item to a - [ ] on input.
+*/
+var inputRegex = /^\s*(\[([( |x])?\])\s$/;
+/**
+* This extension allows you to create task items.
+* @see https://www.tiptap.dev/api/nodes/task-item
+*/
+var TaskItem = Node$1.create({
+	name: "taskItem",
+	addOptions() {
+		return {
+			nested: false,
+			HTMLAttributes: {},
+			taskListTypeName: "taskList",
+			a11y: void 0
+		};
+	},
+	content() {
+		return this.options.nested ? "paragraph block*" : "paragraph+";
+	},
+	defining: true,
+	addAttributes() {
+		return { checked: {
+			default: false,
+			keepOnSplit: false,
+			parseHTML: (element) => {
+				const dataChecked = element.getAttribute("data-checked");
+				return dataChecked === "" || dataChecked === "true";
+			},
+			renderHTML: (attributes) => ({ "data-checked": attributes.checked })
+		} };
+	},
+	parseHTML() {
+		return [{
+			tag: `li[data-type="${this.name}"]`,
+			priority: 51
+		}];
+	},
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"li",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
+			[
+				"label",
+				["input", {
+					type: "checkbox",
+					checked: node.attrs.checked ? "checked" : null
+				}],
+				["span"]
+			],
+			["div", 0]
+		];
+	},
+	addKeyboardShortcuts() {
+		const shortcuts = {
+			Enter: () => this.editor.commands.splitListItem(this.name),
+			"Shift-Tab": () => this.editor.commands.liftListItem(this.name)
+		};
+		if (!this.options.nested) return shortcuts;
+		return {
+			...shortcuts,
+			Tab: () => this.editor.commands.sinkListItem(this.name)
+		};
+	},
+	addNodeView() {
+		return ({ node, HTMLAttributes, getPos, editor }) => {
+			const listItem = document.createElement("li");
+			const checkboxWrapper = document.createElement("label");
+			const checkboxStyler = document.createElement("span");
+			const checkbox = document.createElement("input");
+			const content = document.createElement("div");
+			const updateA11Y = () => {
+				var _a, _b;
+				checkbox.ariaLabel = ((_b = (_a = this.options.a11y) === null || _a === void 0 ? void 0 : _a.checkboxLabel) === null || _b === void 0 ? void 0 : _b.call(_a, node, checkbox.checked)) || `Task item checkbox for ${node.textContent || "empty task item"}`;
+			};
+			updateA11Y();
+			checkboxWrapper.contentEditable = "false";
+			checkbox.type = "checkbox";
+			checkbox.addEventListener("mousedown", (event) => event.preventDefault());
+			checkbox.addEventListener("change", (event) => {
+				if (!editor.isEditable && !this.options.onReadOnlyChecked) {
+					checkbox.checked = !checkbox.checked;
+					return;
+				}
+				const { checked } = event.target;
+				if (editor.isEditable && typeof getPos === "function") editor.chain().focus(void 0, { scrollIntoView: false }).command(({ tr }) => {
+					const position = getPos();
+					if (typeof position !== "number") return false;
+					const currentNode = tr.doc.nodeAt(position);
+					tr.setNodeMarkup(position, void 0, {
+						...currentNode === null || currentNode === void 0 ? void 0 : currentNode.attrs,
+						checked
+					});
+					return true;
+				}).run();
+				if (!editor.isEditable && this.options.onReadOnlyChecked) {
+					if (!this.options.onReadOnlyChecked(node, checked)) checkbox.checked = !checkbox.checked;
+				}
+			});
+			Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
+				listItem.setAttribute(key, value);
+			});
+			listItem.dataset.checked = node.attrs.checked;
+			checkbox.checked = node.attrs.checked;
+			checkboxWrapper.append(checkbox, checkboxStyler);
+			listItem.append(checkboxWrapper, content);
+			Object.entries(HTMLAttributes).forEach(([key, value]) => {
+				listItem.setAttribute(key, value);
+			});
+			return {
+				dom: listItem,
+				contentDOM: content,
+				update: (updatedNode) => {
+					if (updatedNode.type !== this.type) return false;
+					listItem.dataset.checked = updatedNode.attrs.checked;
+					checkbox.checked = updatedNode.attrs.checked;
+					updateA11Y();
+					return true;
+				}
+			};
+		};
+	},
+	addInputRules() {
+		return [wrappingInputRule({
+			find: inputRegex,
+			type: this.type,
+			getAttributes: (match) => ({ checked: match[match.length - 1] === "x" })
+		})];
+	}
+});
+//#endregion
+//#region src/editor/extensions/task-item.ts
+var taskSequence = 0;
+/** A task item's accessible name: its text, or "Task" while it has none. */
+var taskName = (node) => node.textContent.trim() || "Task";
+/**
+* Tiptap's task item with each checkbox named by its item's text, so a screen reader announces
+* the task rather than an unnamed checkbox. In the editor the checkbox points at the item's own
+* content with `aria-labelledby`, so the name follows every edit; saved HTML has no element to point
+* at, so its checkbox carries the text as `aria-label`.
+*/
+var LoomaTaskItem = TaskItem.extend({
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"li",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
+			[
+				"label",
+				["input", {
+					type: "checkbox",
+					checked: node.attrs.checked ? "checked" : null,
+					"aria-label": taskName(node)
+				}],
+				["span"]
+			],
+			["div", 0]
+		];
+	},
+	addNodeView() {
+		const parent = this.parent();
+		return (props) => {
+			const view = parent(props);
+			const checkbox = view.dom instanceof Element ? view.dom.querySelector("input[type=\"checkbox\"]") : null;
+			const content = view.contentDOM;
+			if (!checkbox || !(content instanceof HTMLElement)) return view;
+			content.id ||= `looma-task-${++taskSequence}`;
+			const name = (node) => {
+				if (node.textContent.trim()) {
+					checkbox.setAttribute("aria-labelledby", content.id);
+					checkbox.removeAttribute("aria-label");
+				} else {
+					checkbox.removeAttribute("aria-labelledby");
+					checkbox.setAttribute("aria-label", "Task");
+				}
+			};
+			name(props.node);
+			return {
+				...view,
+				update: (...args) => {
+					const kept = view.update?.(...args) ?? false;
+					if (kept) name(args[0]);
+					return kept;
+				}
+			};
+		};
+	}
+});
+//#endregion
 //#region src/editor/extensions/list-behavior.ts
 /**
 * Looma list behavior extension:
@@ -10900,7 +10957,7 @@ function getDefaultEditorExtensions(options = {}) {
 		OrderedList,
 		ListItem,
 		TaskList,
-		TaskItem.configure({ nested: false }),
+		LoomaTaskItem.configure({ nested: false }),
 		Blockquote,
 		calloutNodeView ? LoomaCallout.extend({ addNodeView: () => calloutNodeView }) : LoomaCallout,
 		LoomaChip,

package/editor/extensions/task-item.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tiptap's task item with each checkbox named by its item's text, so a screen reader announces
+ * the task rather than an unnamed checkbox. In the editor the checkbox points at the item's own
+ * content with `aria-labelledby`, so the name follows every edit; saved HTML has no element to point
+ * at, so its checkbox carries the text as `aria-label`.
+ */
+export declare const LoomaTaskItem: import("@tiptap/core").Node<import("@tiptap/extension-task-item").TaskItemOptions, any>;

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.20",
+  "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"