@threadlabs/looma 0.28.14 → 0.28.15

package/editor/image-delivery.d.ts

@@ -23,12 +23,20 @@ export interface LoomaImageRenditionAttributes {
     decoding?: "async" | "auto" | "sync";
     fetchPriority?: "auto" | "high" | "low";
 }
+/**
+ * Host policy for resolving a browser-only master URL from durable image data.
+ * @ownership The host validates and authorizes the URL; Looma never persists it.
+ * @failure Empty results, `undefined` and exceptions keep the durable source.
+ */
+export type LoomaImageSourceResolver = (image: LoomaImageDescriptor) => string | undefined;
 /**
  * Host policy for deriving transient browser-delivery attributes.
  *
  * @ownership The application owns the resolver and any URL/signing policy it
  * consults; Looma reads its result without persisting it into editor JSON.
- * @failure Throwing or returning `undefined` falls back to the durable source
+ * @contract The descriptor's source is the resolved master URL when a source
+ * resolver is supplied. Image events and serialized content retain durable data.
+ * @failure Throwing or returning `undefined` falls back to the resolved master
  * instead of interrupting rendering or mutating the document.
  */
 export type LoomaImageAttributeResolver = (image: LoomaImageDescriptor) => LoomaImageRenditionAttributes | undefined;
@@ -49,6 +57,7 @@ export interface LoomaImageRenditionErrorDetail extends LoomaImageDescriptor {
     trigger: "programmatic";
 }
 interface LoomaImageDeliveryExtensionOptions {
+    resolveSource?: () => LoomaImageSourceResolver | undefined;
     resolveAttributes: () => LoomaImageAttributeResolver | undefined;
     isEditable: () => boolean;
 }

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -3,7 +3,7 @@ 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 LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
+import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageSourceResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
 import { type LoomaLinkResolve, type LoomaLinkSearch } from "../../editor/link-editing.js";
 /**
  * Host upload result normalized into the editor's durable image descriptor.
@@ -162,6 +162,10 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaImageAttributeResolver | undefined>;
         default: undefined;
     };
+    resolveImageSource: {
+        type: PropType<LoomaImageSourceResolver | undefined>;
+        default: undefined;
+    };
     toolbarMode: {
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
@@ -300,6 +304,10 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaImageAttributeResolver | undefined>;
         default: undefined;
     };
+    resolveImageSource: {
+        type: PropType<LoomaImageSourceResolver | undefined>;
+        default: undefined;
+    };
     toolbarMode: {
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
@@ -369,6 +377,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     linkTargetLabel: string;
     uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
+    resolveImageSource: LoomaImageSourceResolver | undefined;
     toolbarMode: LoomaEditorToolbarMode;
     compactToolbar: boolean;
     selectionActions: LoomaEditorSelectionAction[];

package/vue/editor/index.d.ts

@@ -1,4 +1,4 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
 export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.js";
-export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";
+export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageSourceResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";

package/vue/editor/index.js

@@ -705,20 +705,27 @@ function imageDescriptorFromAttrs(attrs) {
 		...attrs.responsive === true ? { responsive: true } : {}
 	};
 }
-function transientAttributes(resolver, image, editable) {
+function transientAttributes(resolveSource, resolver, image, editable) {
+	let masterSource = image.src;
+	try {
+		masterSource = optionalString(resolveSource?.({ ...image })) ?? masterSource;
+	} catch {}
 	const attributes = {
 		...editable ? {} : {
 			"aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
 			role: "button"
 		},
 		"data-looma-image": "",
-		src: image.src,
+		src: masterSource,
 		tabindex: editable ? "-1" : "0"
 	};
 	if (!image.responsive || !resolver) return attributes;
 	let rendition;
 	try {
-		rendition = resolver(image);
+		rendition = resolver({
+			...image,
+			src: masterSource
+		});
 	} catch {
 		return attributes;
 	}
@@ -740,10 +747,10 @@ function transientAttributes(resolver, image, editable) {
 		"high",
 		"low"
 	].includes(rendition.fetchPriority ?? "")) attributes.fetchpriority = rendition.fetchPriority;
-	if (src && src !== image.src || srcset) attributes["data-looma-rendition"] = "true";
+	if (src && src !== masterSource || srcset) attributes["data-looma-rendition"] = "true";
 	return attributes;
 }
-function createDecorations(doc, resolver, failedRenditions, editable) {
+function createDecorations(doc, resolveSource, resolver, failedRenditions, editable) {
 	const decorations = [];
 	const currentSources = /* @__PURE__ */ new Set();
 	doc.descendants((node, position) => {
@@ -751,7 +758,7 @@ function createDecorations(doc, resolver, failedRenditions, editable) {
 		const image = imageDescriptorFromAttrs(node.attrs);
 		if (!image) return;
 		currentSources.add(image.src);
-		decorations.push(Decoration.node(position, position + node.nodeSize, {}, { loomaImageAttributes: transientAttributes(failedRenditions.has(image.src) ? void 0 : resolver, image, editable) }));
+		decorations.push(Decoration.node(position, position + node.nodeSize, {}, { loomaImageAttributes: transientAttributes(resolveSource, failedRenditions.has(image.src) ? void 0 : resolver, image, editable) }));
 	});
 	for (const src of failedRenditions) if (!currentSources.has(src)) failedRenditions.delete(src);
 	return DecorationSet.create(doc, decorations);
@@ -789,10 +796,10 @@ function createLoomaImageDeliveryController(options) {
 				return [new Plugin({
 					key: pluginKey,
 					state: {
-						init: (_, state) => createDecorations(state.doc, options.resolveAttributes(), failedRenditions, options.isEditable()),
+						init: (_, state) => createDecorations(state.doc, options.resolveSource?.(), options.resolveAttributes(), failedRenditions, options.isEditable()),
 						apply: (transaction, previous) => {
 							if (!transaction.getMeta(pluginKey) && !transactionChangesImages(transaction)) return previous.map(transaction.mapping, transaction.doc);
-							return createDecorations(transaction.doc, options.resolveAttributes(), failedRenditions, options.isEditable());
+							return createDecorations(transaction.doc, options.resolveSource?.(), options.resolveAttributes(), failedRenditions, options.isEditable());
 						}
 					},
 					props: { decorations: (state) => pluginKey.getState(state) }
@@ -2643,7 +2650,7 @@ var imageNodeView = ({ editor, node, getPos, decorations }) => {
 		const attrs = current.value.attrs;
 		const transient = Object.assign({}, ...delivery.value.map((decoration) => decoration.spec.loomaImageAttributes ?? {}));
 		return h(Image, {
-			src: attrs.src,
+			src: transient.src ?? attrs.src,
 			alt: attrs.alt ?? "",
 			width: attrs.width,
 			height: attrs.height,
@@ -2857,6 +2864,10 @@ var LoomaEditor = defineComponent({
 			type: Function,
 			default: void 0
 		},
+		resolveImageSource: {
+			type: Function,
+			default: void 0
+		},
 		toolbarMode: {
 			type: String,
 			default: "bubble"
@@ -3094,6 +3105,7 @@ var LoomaEditor = defineComponent({
 			}
 		});
 		const imageDelivery = createLoomaImageDeliveryController({
+			resolveSource: () => props.resolveImageSource,
 			resolveAttributes: () => props.resolveImageAttributes,
 			isEditable: () => props.editable
 		});
@@ -3142,6 +3154,7 @@ var LoomaEditor = defineComponent({
 				content: props.modelValue,
 				editable: props.editable,
 				editorProps: {
+					nodeViews: { image: () => ({ dom: document.createElement("span") }) },
 					attributes: {
 						role: "textbox",
 						"aria-multiline": "true",
@@ -3193,6 +3206,7 @@ var LoomaEditor = defineComponent({
 					emit("update", value);
 				}
 			}, Editor$1);
+			delete session.editor.options.editorProps.nodeViews;
 			session.subscribe(() => {
 				editorStateVersion.value += 1;
 			});
@@ -3318,7 +3332,7 @@ var LoomaEditor = defineComponent({
 		watch(() => props.editable, (editable) => {
 			formatting?.press.cancel();
 			formatting?.release();
-			editor.value?.setEditable(editable);
+			editor.value?.setEditable(editable, false);
 			if (!editable) formattingPopup?.hide();
 			if (editor.value) imageDelivery.reset(editor.value);
 			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
@@ -3346,7 +3360,7 @@ var LoomaEditor = defineComponent({
 				"aria-label": label
 			} } });
 		});
-		watch(() => props.resolveImageAttributes, () => {
+		watch([() => props.resolveImageAttributes, () => props.resolveImageSource], () => {
 			const instance = editor.value;
 			if (instance) imageDelivery.reset(instance);
 		});