@threadlabs/looma 0.22.11 → 0.22.12

package/package.json

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

package/vue/components.css

@@ -9070,18 +9070,26 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__link-context-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
 }
 
 .looma-editor__link-context-url {
   min-width: 0;
-  max-width: 10rem;
-  overflow: hidden;
+  flex: 1 1 100%;
   padding-inline: var(--ui-space-2);
   color: var(--ui-text-secondary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__link-context-url :is(strong, small) {
+  display: block;
+}
+
+.looma-editor__link-context-url strong {
+  color: var(--ui-text-primary);
 }
 
 .looma-editor__link-context-actions :is(button, a) {
@@ -9198,6 +9206,57 @@ html[data-ui-input-modality="touch"]
   align-items: center;
 }
 
+.looma-editor__link-modes {
+  display: flex;
+  gap: var(--ui-space-1);
+}
+
+.looma-editor__link-modes button,
+.looma-editor__link-results button {
+  min-height: var(--ui-control-min-block-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-control-border);
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface);
+  color: var(--ui-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.looma-editor__link-modes button[aria-pressed="true"] {
+  border-color: var(--ui-accent);
+  color: var(--ui-accent);
+}
+
+.looma-editor__link-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.looma-editor__link-results p {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__link-results button {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.looma-editor__link-results button:is(:hover, :focus-visible) {
+  background: var(--ui-surface-subtle);
+}
+
+.looma-editor__link-results button small {
+  color: var(--ui-text-secondary);
+}
+
 .looma-editor__link-error {
   margin: 0;
   color: var(--ui-field-danger, var(--ui-danger));

package/vue/editor/LoomaEditor.d.ts

@@ -26,6 +26,25 @@ export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUplo
  * bubble for selections); it does not alter document commands or stored content.
  */
 export type LoomaEditorToolbarMode = "bubble" | "sticky" | "popover";
+/** A destination supplied by the host application, such as a page or record. */
+export interface LoomaLinkTarget {
+    id: string;
+    label: string;
+    detail?: string;
+    href: string;
+}
+/**
+ * Finds host records for a link without teaching the editor how they are stored.
+ * @ownership The host checks access and returns durable, openable href values.
+ * @failure A rejection leaves the existing document untouched and shows a retryable search error.
+ */
+export type LoomaLinkSearch = (query: string) => Promise<LoomaLinkTarget[]>;
+/**
+ * Describes a saved host link so a renamed record can show its current label.
+ * @ownership The host resolves identity and access; Looma keeps the saved href as is.
+ * @failure A rejection leaves the original href visible and editable.
+ */
+export type LoomaLinkResolve = (href: string) => Promise<LoomaLinkTarget | null>;
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.
@@ -88,6 +107,19 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: NumberConstructor;
         default: number;
     };
+    /** Host-owned search and identity lookup for links to application records. */
+    linkSearch: {
+        type: PropType<LoomaLinkSearch | undefined>;
+        default: undefined;
+    };
+    linkResolve: {
+        type: PropType<LoomaLinkResolve | undefined>;
+        default: undefined;
+    };
+    linkTargetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     uploadImage: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -181,6 +213,19 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: NumberConstructor;
         default: number;
     };
+    /** Host-owned search and identity lookup for links to application records. */
+    linkSearch: {
+        type: PropType<LoomaLinkSearch | undefined>;
+        default: undefined;
+    };
+    linkResolve: {
+        type: PropType<LoomaLinkResolve | undefined>;
+        default: undefined;
+    };
+    linkTargetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     uploadImage: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -233,6 +278,9 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     mentionItems: LoomaMentionItem[];
     mentionProvider: LoomaMentionProvider | undefined;
     mentionLimit: number;
+    linkSearch: LoomaLinkSearch | undefined;
+    linkResolve: LoomaLinkResolve | undefined;
+    linkTargetLabel: string;
     uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
     toolbarMode: LoomaEditorToolbarMode;

package/vue/editor/index.d.ts

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

package/vue/editor/index.js

@@ -562,6 +562,19 @@ var LoomaEditor = defineComponent({
 			type: Number,
 			default: DEFAULT_MENTION_RESULT_LIMIT
 		},
+		/** Host-owned search and identity lookup for links to application records. */
+		linkSearch: {
+			type: Function,
+			default: void 0
+		},
+		linkResolve: {
+			type: Function,
+			default: void 0
+		},
+		linkTargetLabel: {
+			type: String,
+			default: "Item"
+		},
 		uploadImage: {
 			type: Function,
 			default: void 0
@@ -613,12 +626,22 @@ var LoomaEditor = defineComponent({
 		let blockActionTarget = null;
 		const linkAnchorId = `looma-editor-link-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const linkUrlInput = ref(null);
+		const linkFormRoot = ref(null);
 		const linkOpen = ref(false);
 		const linkContextEditing = ref(false);
 		const linkHref = ref("");
 		const linkText = ref("");
 		const linkNewTab = ref(true);
 		const linkError = ref("");
+		const linkMode = ref("url");
+		const linkQuery = ref("");
+		const linkResults = ref([]);
+		const linkSearching = ref(false);
+		const linkSelectedTarget = ref(null);
+		const linkContextTarget = ref(null);
+		const linkTargetCache = /* @__PURE__ */ new Map();
+		let linkSearchSequence = 0;
+		let linkResolveSequence = 0;
 		const chipAnchorId = `looma-editor-chip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const chipInput = ref(null);
 		const chipOpen = ref(false);
@@ -862,6 +885,63 @@ var LoomaEditor = defineComponent({
 				emit("update", value);
 			}
 		});
+		watch(() => {
+			editorStateVersion.value;
+			return editor.value?.isActive("link") ? editor.value.getAttributes("link").href : null;
+		}, async (href) => {
+			const sequence = ++linkResolveSequence;
+			linkContextTarget.value = null;
+			if (!href || !props.linkResolve) return;
+			if (linkTargetCache.has(href)) {
+				linkContextTarget.value = linkTargetCache.get(href) ?? null;
+				return;
+			}
+			try {
+				const target = await props.linkResolve(href);
+				linkTargetCache.set(href, target);
+				if (sequence === linkResolveSequence) linkContextTarget.value = target;
+			} catch {}
+		});
+		watch([
+			linkQuery,
+			linkMode,
+			linkOpen,
+			linkContextEditing
+		], async ([query, mode, open, contextEditing]) => {
+			const sequence = ++linkSearchSequence;
+			linkResults.value = [];
+			linkSearching.value = false;
+			if (!props.linkSearch || mode !== "target" || !open && !contextEditing || query.trim().length < 2 || linkSelectedTarget.value && query === linkSelectedTarget.value.label) return;
+			linkSearching.value = true;
+			try {
+				const results = await props.linkSearch(query.trim());
+				if (sequence === linkSearchSequence) linkResults.value = results.filter((target) => validLinkHref(target.href));
+			} catch {
+				if (sequence === linkSearchSequence) linkError.value = "Search is unavailable. Try again.";
+			} finally {
+				if (sequence === linkSearchSequence) linkSearching.value = false;
+			}
+		});
+		const selectLinkTarget = (target) => {
+			linkSelectedTarget.value = target;
+			linkTargetCache.set(target.href, target);
+			linkHref.value = target.href;
+			linkQuery.value = target.label;
+			linkResults.value = [];
+			linkNewTab.value = false;
+			linkError.value = "";
+		};
+		const moveLinkResultFocus = (event, offset) => {
+			const buttons = [...linkFormRoot.value?.querySelectorAll("[data-link-result]") ?? []];
+			const next = buttons[buttons.indexOf(event.target) + offset];
+			if (next) {
+				event.preventDefault();
+				next.focus();
+			} else if (offset < 0) {
+				event.preventDefault();
+				linkFormRoot.value?.querySelector("[data-link-search]")?.focus();
+			}
+		};
 		const openLinkEditor = (context = false) => {
 			const instance = editor.value;
 			if (!instance || !props.editable) return;
@@ -883,17 +963,36 @@ var LoomaEditor = defineComponent({
 			linkNewTab.value = attrs.target !== "_self";
 			linkText.value = empty && !existing ? "" : instance.state.doc.textBetween(from, to);
 			linkError.value = "";
+			linkSelectedTarget.value = linkTargetCache.get(linkHref.value) ?? null;
+			linkMode.value = props.linkSearch && (!existing || linkSelectedTarget.value) ? "target" : "url";
+			linkQuery.value = linkSelectedTarget.value?.label ?? "";
 			linkContextEditing.value = context;
 			linkOpen.value = !context;
-			nextTick(() => linkUrlInput.value?.focus());
+			if (existing && props.linkResolve && !linkTargetCache.has(linkHref.value)) {
+				const href = linkHref.value;
+				props.linkResolve(href).then((target) => {
+					linkTargetCache.set(href, target);
+					if (linkHref.value === href && target) {
+						linkSelectedTarget.value = target;
+						linkMode.value = "target";
+						linkQuery.value = target.label;
+					}
+				}).catch(() => {});
+			}
+			nextTick(() => (linkMode.value === "url" ? linkUrlInput.value : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus());
 		};
 		const saveLink = () => {
 			const instance = editor.value;
 			const selection = linkSelection;
 			if (!instance || !selection) return;
-			const href = validLinkHref(linkHref.value);
+			const href = linkMode.value === "target" ? validLinkHref(linkSelectedTarget.value?.href ?? "") : validLinkHref(linkHref.value);
 			if (!href) {
-				linkError.value = "Enter an http, https, mailto, tel, or relative URL.";
+				linkError.value = linkMode.value === "target" ? "Choose a destination from the results." : "Enter an http, https, mailto, tel, or relative URL.";
+				(linkMode.value === "url" ? linkUrlInput.value : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
+				return;
+			}
+			if (linkMode.value === "url" && props.linkSearch && !selection.existing && !/^(https?:|mailto:|tel:)/i.test(href)) {
+				linkError.value = "Enter a full website, email, or phone URL, or choose a destination.";
 				linkUrlInput.value?.focus();
 				return;
 			}
@@ -945,6 +1044,7 @@ var LoomaEditor = defineComponent({
 			linkContextEditing.value = false;
 		};
 		const renderLinkForm = () => h("form", {
+			ref: linkFormRoot,
 			class: "looma-editor__link-form",
 			"aria-label": "Edit link",
 			onSubmit: (event) => {
@@ -959,7 +1059,47 @@ var LoomaEditor = defineComponent({
 					linkError.value = "";
 				}
 			})]) : null,
-			h("label", [h("span", "URL"), h("input", {
+			props.linkSearch ? h("div", {
+				class: "looma-editor__link-modes",
+				role: "group",
+				"aria-label": "Link destination"
+			}, [h("button", {
+				type: "button",
+				"aria-pressed": linkMode.value === "target",
+				onClick: () => {
+					linkMode.value = "target";
+					linkHref.value = "";
+					linkSelectedTarget.value = null;
+					linkQuery.value = "";
+					linkError.value = "";
+					nextTick(() => linkFormRoot.value?.querySelector("[data-link-search]")?.focus());
+				}
+			}, props.linkTargetLabel), h("button", {
+				type: "button",
+				"aria-pressed": linkMode.value === "url",
+				onClick: () => {
+					linkMode.value = "url";
+					linkHref.value = "";
+					linkSelectedTarget.value = null;
+					linkError.value = "";
+					nextTick(() => linkUrlInput.value?.focus());
+				}
+			}, "URL")]) : null,
+			linkMode.value === "target" && props.linkSearch ? h("label", [h("span", `Find a ${props.linkTargetLabel.toLowerCase()}`), h("input", {
+				"data-link-search": "",
+				type: "search",
+				value: linkQuery.value,
+				autocomplete: "off",
+				"aria-invalid": linkError.value ? "true" : void 0,
+				onInput: (event) => {
+					linkQuery.value = event.target.value;
+					linkSelectedTarget.value = null;
+					linkError.value = "";
+				},
+				onKeydown: (event) => {
+					if (event.key === "ArrowDown") moveLinkResultFocus(event, 1);
+				}
+			})]) : h("label", [h("span", "URL"), h("input", {
 				ref: linkUrlInput,
 				type: "text",
 				inputmode: "url",
@@ -970,7 +1110,25 @@ var LoomaEditor = defineComponent({
 					linkError.value = "";
 				}
 			})]),
-			h("label", { class: "looma-editor__link-new-tab" }, [h("input", {
+			linkMode.value === "target" && props.linkSearch ? h("div", {
+				class: "looma-editor__link-results",
+				"aria-label": "Destination search results"
+			}, [
+				linkSearching.value ? h("p", { role: "status" }, "Searching…") : null,
+				linkSelectedTarget.value ? h("p", { class: "looma-editor__link-selected" }, `Selected: ${linkSelectedTarget.value.label}${linkSelectedTarget.value.detail ? ` · ${linkSelectedTarget.value.detail}` : ""}`) : null,
+				!linkSearching.value && !linkSelectedTarget.value && linkQuery.value.trim().length < 2 ? h("p", "Type at least two letters to search.") : null,
+				!linkSearching.value && !linkSelectedTarget.value && linkQuery.value.trim().length >= 2 && !linkResults.value.length && !linkError.value ? h("p", "No results found.") : null,
+				...linkResults.value.map((target) => h("button", {
+					key: target.id,
+					type: "button",
+					"data-link-result": "",
+					onClick: () => selectLinkTarget(target),
+					onKeydown: (event) => {
+						if (event.key === "ArrowDown") moveLinkResultFocus(event, 1);
+						if (event.key === "ArrowUp") moveLinkResultFocus(event, -1);
+					}
+				}, [h("strong", target.label), target.detail ? h("small", target.detail) : null]))
+			]) : h("label", { class: "looma-editor__link-new-tab" }, [h("input", {
 				type: "checkbox",
 				checked: linkNewTab.value,
 				onChange: (event) => {
@@ -981,7 +1139,7 @@ var LoomaEditor = defineComponent({
 				class: "looma-editor__link-error",
 				role: "alert"
 			}, linkError.value) : null,
-			validLinkHref(linkHref.value) ? h("a", {
+			linkMode.value === "url" && validLinkHref(linkHref.value) ? h("a", {
 				class: "looma-editor__link-preview",
 				href: validLinkHref(linkHref.value),
 				target: "_blank",
@@ -1005,7 +1163,7 @@ var LoomaEditor = defineComponent({
 				h("span", {
 					class: "looma-editor__link-context-url",
 					title: href
-				}, href),
+				}, linkContextTarget.value ? [h("strong", linkContextTarget.value.label), linkContextTarget.value.detail ? h("small", linkContextTarget.value.detail) : null] : href),
 				h("button", {
 					type: "button",
 					onPointerdown: (event) => event.preventDefault(),