@threadlabs/looma 0.28.13 → 0.28.15

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);
 		});

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -349,6 +349,20 @@ export interface Readable<T> {
   readonly value: T
 }
 
+/** Vue refs a component invocation as its public instance; the ref is the root element it lowered to. */
+function refElement(ref: any): Element {
+  return ref == null || ref.nodeType === 1 ? ref : ref.$el
+}
+
+/** The root ref as an element: a delegating component's root ref holds the invoked component. */
+function rootElement<T extends Element>(root: Readable<T | null>): Readable<T | null> {
+  return {
+    get value() {
+      return refElement(root.value) as T | null
+    },
+  }
+}
+
 type DocumentMutationSubscriber = (mutations: readonly MutationRecord[]) => void
 interface DocumentMutationHub {
   readonly observer: MutationObserver
@@ -391,10 +405,11 @@ function observeConnection(element: Element, check: () => void): () => void {
  * reinserted outside Vue.
  */
 export function useLifecycle(
-  root: Readable<Element | null>,
+  componentRoot: Readable<Element | null>,
   connect?: () => void,
   disconnect?: () => void,
 ): void {
+  const root = rootElement(componentRoot)
   let connected = false
   let stop: (() => void) | undefined
   const synchronize = (): void => {
@@ -416,7 +431,8 @@ export function useLifecycle(
 }
 
 /** Keep native focus on the corresponding control when a root-level $match replaces its element. */
-export function preserveRootFocus(root: Readable<Element | null>): void {
+export function preserveRootFocus(componentRoot: Readable<Element | null>): void {
+  const root = rootElement(componentRoot)
   const focusable =
     'a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]'
   let previous: Element | null = null
@@ -496,8 +512,8 @@ export function useComponentHost(
   controllerLoader: () => Promise<unknown>,
   options: ComponentHostOptions,
 ) {
+  const root = rootElement(options.root)
   const {
-    root,
     dispatch,
     props,
     propInputs = () => null,
@@ -634,7 +650,10 @@ export function useComponentHost(
       Object.fromEntries(
         Object.entries(refs).map(([name, ref]) => [name, {
           enumerable: true,
-          get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : (ref.value as Element),
+          get: () =>
+            Array.isArray(ref.value)
+              ? inDocumentOrder(ref.value.map(refElement))
+              : refElement(ref.value),
         }]),
       ),
     ) as Readonly<Record<string, Element | readonly Element[]>>,
@@ -819,10 +838,11 @@ export function runFilteredEvent(
 
 /** Reports declared CustomEvents to Vue and dispatches them through the DOM. */
 export function createDispatch(
-  root: Readable<HTMLElement | null>,
+  componentRoot: Readable<HTMLElement | null>,
   emit?: (name: string, detail: unknown) => void,
   options: DispatchOptions = {},
 ): (name: string, detail?: unknown, targets?: unknown) => boolean {
+  const root = rootElement(componentRoot)
   const { declared = {}, checks = {}, modeled = [] } = options
   // One change can be reported by more than one event — a choice is both a select and a change —
   // and each carries the new value. The prop updates once per change: a value already reported in