@threadlabs/looma 0.26.23 → 0.26.25

package/package.json

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

package/vue/editor/index.js

@@ -1760,6 +1760,7 @@ var LoomaEditor = defineComponent({
 		const linkContextEditing = ref(false);
 		const linkHref = ref("");
 		const linkText = ref("");
+		const linkTextEditable = ref(false);
 		const linkNewTab = ref(true);
 		const linkError = ref("");
 		const linkMode = ref("url");
@@ -2129,6 +2130,8 @@ var LoomaEditor = defineComponent({
 			linkResults.value = [];
 			linkNewTab.value = false;
 			linkError.value = "";
+			if (linkTextEditable.value && !linkText.value.trim()) linkText.value = target.label;
+			applyLink();
 		};
 		const moveLinkResultFocus = (event, offset) => {
 			const buttons = [...linkFormRoot.value?.querySelectorAll("[data-link-result]") ?? []];
@@ -2157,6 +2160,7 @@ var LoomaEditor = defineComponent({
 				to,
 				existing
 			};
+			linkTextEditable.value = empty && !existing;
 			const attrs = existing ? instance.getAttributes("link") : {};
 			linkHref.value = typeof attrs.href === "string" ? attrs.href : "";
 			linkNewTab.value = attrs.target !== "_self";
@@ -2178,38 +2182,45 @@ var LoomaEditor = defineComponent({
 					}
 				}).catch(() => {});
 			}
-			nextTick(() => (linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus());
+			nextTick(() => {
+				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to) });
+				(linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
+			});
 		};
-		const saveLink = () => {
+		const applyLink = (reportError = false) => {
 			const instance = editor.value;
 			const selection = linkSelection;
-			if (!instance || !selection) return;
+			if (!instance || !selection) return false;
 			const href = linkMode.value === "target" ? validLinkHref(linkSelectedTarget.value?.href ?? "") : validLinkHref(linkHref.value);
 			if (!href) {
-				linkError.value = linkMode.value === "target" ? "Choose a destination from the results." : "Enter an http, https, mailto, tel, or relative URL.";
-				(linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
-				return;
+				if (reportError) linkError.value = linkMode.value === "target" ? "Choose a destination from the results." : "Enter an http, https, mailto, tel, or relative URL.";
+				return false;
 			}
 			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.";
-				linkDestinationInput()?.focus();
-				return;
+				if (reportError) linkError.value = "Enter a full website, email, or phone URL, or choose a destination.";
+				return false;
 			}
 			const attrs = {
 				href: props.linkBaseUrl ? siteRelativeHref(href, props.linkBaseUrl) : href,
 				target: linkNewTab.value ? "_blank" : "_self",
 				rel: linkNewTab.value ? "noopener noreferrer" : null
 			};
-			const chain = instance.chain().focus().setTextSelection({
+			const current = instance.state.selection;
+			const chain = instance.chain().setTextSelection({
 				from: selection.from,
 				to: selection.to
 			});
-			if (selection.from === selection.to && !selection.existing) {
+			if (linkTextEditable.value) {
 				const text = linkText.value.trim();
 				if (!text) {
-					linkError.value = "Enter link text.";
-					return;
+					if (reportError) linkError.value = "Enter link text.";
+					return false;
 				}
+				linkSelection = {
+					from: selection.from,
+					to: selection.from + text.length,
+					existing: true
+				};
 				chain.insertContent({
 					type: "text",
 					text,
@@ -2217,24 +2228,17 @@ var LoomaEditor = defineComponent({
 						type: "link",
 						attrs
 					}]
-				}).run();
+				}).setTextSelection(selection.from).run();
 			} else {
 				if (selection.existing && selection.from === selection.to) chain.extendMarkRange("link");
-				chain.setLink(attrs).setTextSelection(selection.to).run();
+				chain.setLink(attrs).setTextSelection({
+					from: current.from,
+					to: current.to
+				}).run();
+				selection.existing = true;
 			}
-			linkOpen.value = false;
-			linkContextEditing.value = false;
-		};
-		const removeLink = () => {
-			const instance = editor.value;
-			const selection = linkSelection;
-			if (!instance || !selection?.existing) return;
-			instance.chain().focus().setTextSelection({
-				from: selection.from,
-				to: selection.to
-			}).extendMarkRange("link").unsetLink().setTextSelection(selection.to).run();
-			linkOpen.value = false;
-			linkContextEditing.value = false;
+			linkError.value = "";
+			return true;
 		};
 		const removeCurrentLink = () => {
 			const instance = editor.value;
@@ -2242,11 +2246,14 @@ var LoomaEditor = defineComponent({
 			instance.chain().focus().extendMarkRange("link").unsetLink().run();
 			linkContextEditing.value = false;
 		};
-		const cancelLink = () => {
+		const dismissLink = (restoreFocus = true) => {
 			linkOpen.value = false;
 			linkContextEditing.value = false;
 			const selection = linkSelection;
-			if (selection) editor.value?.chain().focus().setTextSelection(selection.to).run();
+			if (restoreFocus && selection) editor.value?.chain().focus().setTextSelection(selection.to).run();
+			dismissedFormattingSelection = editor.value?.state.selection ?? null;
+			linkPopup?.hide();
+			formattingPopup?.hide();
 		};
 		const renderLinkDestination = (mode) => [h(FormField, { invalid: Boolean(linkError.value) }, {
 			label: () => h("label", props.linkSearch ? "Link destination" : "URL"),
@@ -2275,6 +2282,7 @@ var LoomaEditor = defineComponent({
 						}
 						linkHref.value = value;
 						linkError.value = "";
+						applyLink();
 					},
 					onKeydown: (event) => {
 						if (mode === "target" && event.key === "ArrowDown") moveLinkResultFocus(event, 1);
@@ -2348,6 +2356,7 @@ var LoomaEditor = defineComponent({
 			checked: linkNewTab.value,
 			onChange: (event) => {
 				linkNewTab.value = event.detail.checked;
+				applyLink();
 			}
 		}, () => "Open in new tab")];
 		const renderLinkForm = () => h("form", {
@@ -2356,7 +2365,18 @@ var LoomaEditor = defineComponent({
 			"aria-label": "Edit link",
 			onSubmit: (event) => {
 				event.preventDefault();
-				saveLink();
+				if (applyLink(true)) dismissLink();
+			},
+			onKeydown: (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					event.stopPropagation();
+					dismissLink();
+				} else if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+					event.preventDefault();
+					event.stopPropagation();
+					if (applyLink(true)) dismissLink();
+				}
 			}
 		}, [h(Stack, { gap: "s" }, () => [
 			h(Text, {
@@ -2365,7 +2385,7 @@ var LoomaEditor = defineComponent({
 				weight: "semibold"
 			}, () => linkSelection?.existing ? "Edit link" : "Add link"),
 			h(Stack, { gap: "s" }, () => renderLinkDestination(linkMode.value)),
-			linkSelection?.from === linkSelection?.to && !linkSelection?.existing ? h(FormField, {}, {
+			linkTextEditable.value ? h(FormField, {}, {
 				label: () => h("label", "Text"),
 				default: () => h(Input, {
 					size: "sm",
@@ -2373,6 +2393,7 @@ var LoomaEditor = defineComponent({
 					onInput: (event) => {
 						linkText.value = event.target.value;
 						linkError.value = "";
+						applyLink();
 					}
 				})
 			}) : null,
@@ -2380,42 +2401,7 @@ var LoomaEditor = defineComponent({
 				size: "sm",
 				tone: "danger",
 				role: "alert"
-			}, () => linkError.value) : null,
-			h(Separator),
-			h(Cluster, {
-				gap: "xs",
-				justify: "between",
-				wrap: "nowrap"
-			}, () => [linkSelection?.existing ? h(Button, {
-				type: "button",
-				variant: "ghost",
-				tone: "danger",
-				size: "sm",
-				onClick: removeLink
-			}, () => "Remove link") : null, validLinkHref(linkHref.value) ? h(Button, {
-				as: "a",
-				variant: "outline",
-				tone: "accent",
-				size: "sm",
-				href: validLinkHref(linkHref.value),
-				target: "_blank",
-				rel: "noopener noreferrer"
-			}, () => "Open link") : null]),
-			h(Cluster, {
-				gap: "xs",
-				justify: "end",
-				wrap: "nowrap"
-			}, () => [h(Button, {
-				type: "button",
-				variant: "outline",
-				tone: "accent",
-				size: "sm",
-				onClick: cancelLink
-			}, () => "Cancel"), h(Button, {
-				type: "submit",
-				variant: "solid",
-				size: "sm"
-			}, () => "Save link")])
+			}, () => linkError.value) : null
 		])]);
 		const renderLinkContext = (instance) => {
 			if (linkContextEditing.value) return renderLinkForm();
@@ -2787,6 +2773,7 @@ var LoomaEditor = defineComponent({
 		const onDocumentPointerDown = (event) => {
 			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
 			const inElement = (element) => Boolean(element && (path.includes(element) || event.target instanceof Node && element.contains(event.target)));
+			if ((linkOpen.value || linkContextEditing.value) && !inElement(linkFormRoot.value)) dismissLink(false);
 			const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value) || inElement(mobileToolbarShell.value);
 			tableInteractionActive = inTableUi;
 			if (inTableUi) setTimeout(() => {
@@ -3378,7 +3365,10 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
+				h(Stack, {
+					key: "looma-formatting-popup-host",
+					gap: "none"
+				}, () => [instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
 					updateDelay: 0,
@@ -3407,8 +3397,11 @@ var LoomaEditor = defineComponent({
 							}
 						}] } } : {}
 					}
-				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
-				instance && props.editable ? h(BubbleMenu, {
+				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null]),
+				h(Stack, {
+					key: "looma-link-popup-host",
+					gap: "none"
+				}, () => [instance && props.editable ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-link-context-menu",
 					updateDelay: 0,
@@ -3426,7 +3419,7 @@ var LoomaEditor = defineComponent({
 						maxWidth: Math.min(480, window.innerWidth - 24),
 						placement: "top"
 					}
-				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null,
+				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null]),
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -3576,7 +3569,7 @@ var LoomaEditor = defineComponent({
 						const current = editor.value?.state.selection;
 						if (current && !current.empty && linkSelection && current.from === linkSelection.from && current.to === linkSelection.to) editor.value?.commands.setTextSelection(current.to);
 					}
-				}, renderLinkForm),
+				}, () => linkOpen.value ? renderLinkForm() : null),
 				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
 					class: "looma-editor__compact-formatting",
 					for: formatAnchorId,