@threadlabs/looma 0.26.24 → 0.26.26

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";
@@ -2183,36 +2187,40 @@ var LoomaEditor = defineComponent({
 				(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,
@@ -2220,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;
@@ -2245,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"),
@@ -2278,6 +2282,7 @@ var LoomaEditor = defineComponent({
 						}
 						linkHref.value = value;
 						linkError.value = "";
+						applyLink();
 					},
 					onKeydown: (event) => {
 						if (mode === "target" && event.key === "ArrowDown") moveLinkResultFocus(event, 1);
@@ -2351,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", {
@@ -2359,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, {
@@ -2368,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",
@@ -2376,6 +2393,7 @@ var LoomaEditor = defineComponent({
 					onInput: (event) => {
 						linkText.value = event.target.value;
 						linkError.value = "";
+						applyLink();
 					}
 				})
 			}) : null,
@@ -2383,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();
@@ -2790,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(() => {