@threadlabs/looma 0.28.8 → 0.28.10

package/vue/editor/index.js

@@ -1,12 +1,13 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, siteRelativeHref } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt } from "@threadlabs/looma/editor";
+import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
+import "@tiptap/pm/transform";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
@@ -25,7 +26,8 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorImageToolbar: "ui-editor-image-toolbar",
 	EditorLinkCard: "ui-editor-link-card",
 	EditorLinkForm: "ui-editor-link-form",
-	EditorBlockActions: "ui-editor-block-actions"
+	EditorBlockActions: "ui-editor-block-actions",
+	EditorCodeLanguage: "ui-editor-code-language"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -1120,6 +1122,273 @@ function validLinkHref(value) {
 	}
 }
 //#endregion
+//#region src/editor/extensions/relative-links.ts
+/** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
+function siteRelativeHref(href, baseUrl) {
+	if (!/^(https?:\/\/|\/\/)/i.test(href.trim())) return href;
+	try {
+		const base = new URL(baseUrl);
+		const url = new URL(href, base);
+		if (!/^https?:$/.test(base.protocol) || url.origin !== base.origin || url.username || url.password) return href;
+		return `${url.pathname}${url.search}${url.hash}`;
+	} catch {
+		return href;
+	}
+}
+//#endregion
+//#region src/editor/link-editing.ts
+/** The status line above search results: progress, a hint, or an empty result. */
+function linkFormStatus(state) {
+	if (state.searching) return "Searching…";
+	if (state.selected) return "";
+	if (state.query.trim().length < 2) return "Type at least two letters to search.";
+	return state.results.length || state.error ? "" : "No results found.";
+}
+var LOOMA_LINK_EDITING_IDLE = Object.freeze({
+	surface: "none",
+	range: null,
+	mode: "url",
+	query: "",
+	href: "",
+	text: "",
+	textEditable: false,
+	newTab: true,
+	error: "",
+	results: [],
+	searching: false,
+	selected: null,
+	current: null
+});
+function createLinkEditing(options) {
+	const { editor } = options;
+	const listeners = /* @__PURE__ */ new Set();
+	const cache = /* @__PURE__ */ new Map();
+	let state = LOOMA_LINK_EDITING_IDLE;
+	let searchSequence = 0;
+	let resolveSequence = 0;
+	let currentHref = null;
+	let destroyed = false;
+	const set = (patch) => {
+		const previous = state;
+		state = {
+			...state,
+			...patch
+		};
+		if (state.query !== previous.query || state.mode !== previous.mode || state.surface !== previous.surface) search();
+		listeners.forEach((listener) => listener());
+	};
+	const search = async () => {
+		const sequence = ++searchSequence;
+		const { query, mode, surface, selected } = state;
+		state = {
+			...state,
+			results: [],
+			searching: false
+		};
+		const find = options.search();
+		if (!find || mode !== "target" || surface === "none" || query.trim().length < 2 || selected && query === selected.label) return;
+		state = {
+			...state,
+			searching: true
+		};
+		try {
+			const results = await find(query.trim());
+			if (sequence === searchSequence && !destroyed) set({ results: results.filter((target) => validLinkHref(target.href)) });
+		} catch {
+			if (sequence === searchSequence && !destroyed) set({ error: "Search is unavailable. Try again." });
+		} finally {
+			if (sequence === searchSequence && !destroyed) set({ searching: false });
+		}
+	};
+	const resolveCurrent = async (href) => {
+		const sequence = ++resolveSequence;
+		if (state.current) set({ current: null });
+		const resolve = options.resolve();
+		if (!href || !resolve) return;
+		if (cache.has(href)) {
+			set({ current: cache.get(href) ?? null });
+			return;
+		}
+		try {
+			const target = await resolve(href);
+			cache.set(href, target);
+			if (sequence === resolveSequence && !destroyed) set({ current: target });
+		} catch {}
+	};
+	const onTransaction = () => {
+		const href = editor.isActive("link") ? String(editor.getAttributes("link").href ?? "") : null;
+		if (href !== currentHref) {
+			currentHref = href;
+			resolveCurrent(href);
+		}
+		if (state.surface === "context" && editor.state.selection.from !== state.range?.from) set({ surface: "none" });
+	};
+	editor.on("transaction", onTransaction);
+	const apply = (reportError = false) => {
+		const range = state.range;
+		if (editor.isDestroyed || !range) return false;
+		const fail = (error) => {
+			if (reportError) set({ error });
+			return false;
+		};
+		const href = state.mode === "target" ? validLinkHref(state.selected?.href ?? "") : validLinkHref(state.href);
+		if (!href) return fail(state.mode === "target" ? "Choose a destination from the results." : "Enter an http, https, mailto, tel, or relative URL.");
+		if (state.mode === "url" && options.search() && !range.existing && !/^(https?:|mailto:|tel:)/i.test(href)) return fail("Enter a full website, email, or phone URL, or choose a destination.");
+		const baseUrl = options.baseUrl();
+		const attrs = {
+			href: baseUrl ? siteRelativeHref(href, baseUrl) : href,
+			target: state.newTab ? "_blank" : "_self",
+			rel: state.newTab ? "noopener noreferrer" : null
+		};
+		const current = editor.state.selection;
+		const chain = editor.chain().setTextSelection({
+			from: range.from,
+			to: range.to
+		});
+		if (state.textEditable) {
+			const text = state.text.trim();
+			if (!text) return fail("Enter link text.");
+			chain.insertContent({
+				type: "text",
+				text,
+				marks: [{
+					type: "link",
+					attrs
+				}]
+			}).setTextSelection(range.from).run();
+			set({
+				range: {
+					from: range.from,
+					to: range.from + text.length,
+					existing: true
+				},
+				error: ""
+			});
+		} else {
+			if (range.existing && range.from === range.to) chain.extendMarkRange("link");
+			chain.setLink(attrs).setTextSelection({
+				from: current.from,
+				to: current.to
+			}).run();
+			set({
+				range: {
+					...range,
+					existing: true
+				},
+				error: ""
+			});
+		}
+		return true;
+	};
+	return {
+		get state() {
+			return state;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		open(from, to, surface) {
+			const empty = from === to;
+			const existing = editor.isActive("link");
+			const attrs = existing ? editor.getAttributes("link") : {};
+			const href = typeof attrs.href === "string" ? attrs.href : "";
+			const selected = cache.get(href) ?? null;
+			set({
+				surface,
+				range: {
+					from,
+					to,
+					existing
+				},
+				textEditable: empty && !existing,
+				href,
+				newTab: attrs.target !== "_self",
+				text: empty && !existing ? "" : editor.state.doc.textBetween(from, to),
+				error: "",
+				selected,
+				mode: options.search() && (!existing || selected) ? "target" : "url",
+				query: selected?.label ?? href
+			});
+			const resolve = options.resolve();
+			if (existing && resolve && !cache.has(href)) resolve(href).then((target) => {
+				cache.set(href, target);
+				if (!destroyed && state.href === href && target) set({
+					selected: target,
+					mode: "target",
+					query: target.label
+				});
+			}).catch(() => {});
+		},
+		setDestination(value) {
+			if (options.search()) {
+				const trimmed = value.trim();
+				const url = /^(https?:\/\/|mailto:|tel:)/i.test(trimmed) || Boolean(state.range?.existing && /^(\/|\.\.?\/|#|\?)/.test(trimmed));
+				set({
+					query: value,
+					mode: url ? "url" : "target",
+					selected: null,
+					href: value,
+					error: ""
+				});
+			} else set({
+				href: value,
+				error: ""
+			});
+			apply();
+		},
+		clear() {
+			set({
+				query: "",
+				href: "",
+				mode: "target",
+				selected: null,
+				error: ""
+			});
+		},
+		choose(target) {
+			cache.set(target.href, target);
+			set({
+				selected: target,
+				href: target.href,
+				query: target.label,
+				results: [],
+				newTab: false,
+				error: "",
+				...state.textEditable && !state.text.trim() ? { text: target.label } : {}
+			});
+			apply();
+		},
+		setNewTab(newTab) {
+			set({ newTab });
+			apply();
+		},
+		setText(text) {
+			set({
+				text,
+				error: ""
+			});
+			apply();
+		},
+		apply,
+		close() {
+			if (state.surface !== "none") set({ surface: "none" });
+		},
+		remove() {
+			if (!editor.isActive("link")) return;
+			editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			if (state.surface === "context") set({ surface: "none" });
+		},
+		destroy() {
+			destroyed = true;
+			listeners.clear();
+			editor.off("transaction", onTransaction);
+		}
+	};
+}
+//#endregion
 //#region src/editor/selection-geometry.ts
 /** A plain copy of a client rectangle, the anchor shape the slash and mention menus accept as a prop. */
 function menuAnchorRect(rect) {
@@ -2492,28 +2761,13 @@ var LoomaEditor = defineComponent({
 			const element = instance?.$el;
 			linkFormRoot.value = element instanceof HTMLElement ? element : null;
 		};
-		const linkOpen = ref(false);
-		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");
-		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;
+		let linkEditing;
+		const linkState = shallowRef(LOOMA_LINK_EDITING_IDLE);
 		const chipAnchorId = `looma-editor-chip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const chipInput = ref(null);
 		const chipOpen = ref(false);
 		const chipLabel = ref("");
 		const chipColor = ref("neutral");
-		let linkSelection = null;
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
 		const tooltipLabel = ref("");
@@ -2564,7 +2818,7 @@ var LoomaEditor = defineComponent({
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
-		const formattingPickerOpen = () => linkOpen.value || tablePickerOpen.value || formatOpen.value;
+		const formattingPickerOpen = () => linkState.value.surface === "popover" || tablePickerOpen.value || formatOpen.value;
 		const cancelHeldPress = () => {
 			clearTimeout(heldPressTimer);
 			heldPressTimer = void 0;
@@ -2753,7 +3007,7 @@ var LoomaEditor = defineComponent({
 							if (view.isDestroyed) return;
 							editorStateVersion.value += 1;
 							const instance = editor.value;
-							if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
+							if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && linkState.value.surface !== "popover") {
 								linkPopup?.setAnchor(() => link.getBoundingClientRect());
 								linkPopup?.show();
 							}
@@ -2776,7 +3030,6 @@ var LoomaEditor = defineComponent({
 						if (!heldFormattingSelection?.eq(selection)) heldFormattingSelection = null;
 						if (!formattingSelectionActive(instance)) formattingPopup?.hide();
 					}
-					if (linkContextEditing.value && instance.state.selection.from !== linkSelection?.from) linkContextEditing.value = false;
 				},
 				onUpdate: ({ editor: instance }) => {
 					const value = instance.getJSON();
@@ -2788,6 +3041,16 @@ var LoomaEditor = defineComponent({
 				editorStateVersion.value += 1;
 			});
 			editor.value = session.editor;
+			const engine = createLinkEditing({
+				editor: session.editor,
+				search: () => props.linkSearch,
+				resolve: () => props.linkResolve,
+				baseUrl: () => props.linkBaseUrl
+			});
+			engine.subscribe(() => {
+				linkState.value = engine.state;
+			});
+			linkEditing = engine;
 		});
 		const attachDocument = (element) => {
 			if (element instanceof HTMLElement) session?.attach(element);
@@ -2795,56 +3058,9 @@ var LoomaEditor = defineComponent({
 		onBeforeUnmount(() => {
 			const element = session?.editor.options.element;
 			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			linkEditing?.destroy();
 			session?.destroy();
 		});
-		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 = "";
-			if (linkTextEditable.value && !linkText.value.trim()) linkText.value = target.label;
-			applyLink();
-		};
 		const openLinkEditor = (context = false) => {
 			const instance = editor.value;
 			if (!instance || !props.editable) return;
@@ -2854,130 +3070,37 @@ var LoomaEditor = defineComponent({
 			linkPressedSelection = null;
 			const from = selection?.from ?? current.from;
 			const to = selection?.to ?? current.to;
-			const empty = from === to;
-			const existing = instance.isActive("link");
-			linkSelection = {
-				from,
-				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";
-			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 ?? linkHref.value;
-			linkContextEditing.value = context;
-			linkOpen.value = !context;
-			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(() => {});
-			}
+			linkEditing?.open(from, to, context ? "context" : "popover");
 			nextTick(() => {
 				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setAnchor(() => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to));
-				(linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
+				(linkState.value.mode === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
 			});
 		};
-		const applyLink = (reportError = false) => {
-			const instance = editor.value;
-			const selection = linkSelection;
-			if (!instance || !selection) return false;
-			const href = linkMode.value === "target" ? validLinkHref(linkSelectedTarget.value?.href ?? "") : validLinkHref(linkHref.value);
-			if (!href) {
-				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)) {
-				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 current = instance.state.selection;
-			const chain = instance.chain().setTextSelection({
-				from: selection.from,
-				to: selection.to
-			});
-			if (linkTextEditable.value) {
-				const text = linkText.value.trim();
-				if (!text) {
-					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,
-					marks: [{
-						type: "link",
-						attrs
-					}]
-				}).setTextSelection(selection.from).run();
-			} else {
-				if (selection.existing && selection.from === selection.to) chain.extendMarkRange("link");
-				chain.setLink(attrs).setTextSelection({
-					from: current.from,
-					to: current.to
-				}).run();
-				selection.existing = true;
-			}
-			linkError.value = "";
-			return true;
-		};
-		const removeCurrentLink = () => {
-			const instance = editor.value;
-			if (!instance?.isActive("link")) return;
-			instance.chain().focus().extendMarkRange("link").unsetLink().run();
-			linkContextEditing.value = false;
-		};
 		const dismissLink = (restoreFocus = true) => {
-			linkOpen.value = false;
-			linkContextEditing.value = false;
-			const selection = linkSelection;
-			if (restoreFocus && selection) editor.value?.chain().focus().setTextSelection(selection.to).run();
+			linkEditing?.close();
+			const range = linkState.value.range;
+			if (restoreFocus && range) editor.value?.chain().focus().setTextSelection(range.to).run();
 			dismissedFormattingSelection = editor.value?.state.selection ?? null;
 			heldFormattingSelection = null;
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
-		const linkStatus = () => {
-			if (linkSearching.value) return "Searching…";
-			if (linkSelectedTarget.value) return "";
-			if (linkQuery.value.trim().length < 2) return "Type at least two letters to search.";
-			return linkResults.value.length || linkError.value ? "" : "No results found.";
-		};
 		const renderLinkForm = () => {
-			const shown = linkSelectedTarget.value ? [linkSelectedTarget.value] : linkResults.value;
+			const state = linkState.value;
+			const shown = state.selected ? [state.selected] : state.results;
 			return h(EditorLinkForm, {
 				ref: setLinkFormRoot,
 				class: "looma-editor__link-form",
-				existing: Boolean(linkSelection?.existing),
+				existing: Boolean(state.range?.existing),
 				searchable: Boolean(props.linkSearch),
-				mode: linkMode.value,
-				value: props.linkSearch ? linkQuery.value : linkHref.value,
+				mode: state.mode,
+				value: props.linkSearch ? state.query : state.href,
 				placeholder: props.linkSearch ? `Search ${props.linkTargetLabel.toLowerCase()}s or paste a URL…` : "https://example.com",
-				newTab: linkNewTab.value,
-				textEditable: linkTextEditable.value,
-				text: linkText.value,
-				error: linkError.value,
-				status: linkStatus(),
+				newTab: state.newTab,
+				textEditable: state.textEditable,
+				text: state.text,
+				error: state.error,
+				status: linkFormStatus(state),
 				results: shown.map(({ id, label, detail }) => detail ? {
 					id,
 					label,
@@ -2986,46 +3109,23 @@ var LoomaEditor = defineComponent({
 					id,
 					label
 				}),
-				selected: linkSelectedTarget.value?.id ?? "",
-				onDestination: (event) => {
-					const { value } = event.detail;
-					if (props.linkSearch) {
-						linkQuery.value = value;
-						linkMode.value = /^(https?:\/\/|mailto:|tel:)/i.test(value.trim()) || linkSelection?.existing && /^(\/|\.\.?\/|#|\?)/.test(value.trim()) ? "url" : "target";
-						linkSelectedTarget.value = null;
-					}
-					linkHref.value = value;
-					linkError.value = "";
-					applyLink();
-				},
-				onClear: () => {
-					linkQuery.value = "";
-					linkHref.value = "";
-					linkMode.value = "target";
-					linkSelectedTarget.value = null;
-					linkError.value = "";
-				},
+				selected: state.selected?.id ?? "",
+				onDestination: (event) => linkEditing?.setDestination(event.detail.value),
+				onClear: () => linkEditing?.clear(),
 				onChoose: (event) => {
 					const target = shown.find(({ id }) => id === event.detail.id);
-					if (target) selectLinkTarget(target);
-				},
-				onNewTab: (event) => {
-					linkNewTab.value = event.detail.newTab;
-					applyLink();
-				},
-				onText: (event) => {
-					linkText.value = event.detail.text;
-					linkError.value = "";
-					applyLink();
+					if (target) linkEditing?.choose(target);
 				},
+				onNewTab: (event) => linkEditing?.setNewTab(event.detail.newTab),
+				onText: (event) => linkEditing?.setText(event.detail.text),
 				onSave: () => {
-					if (applyLink(true)) dismissLink();
+					if (linkEditing?.apply(true)) dismissLink();
 				},
 				onDismiss: () => dismissLink()
 			});
 		};
 		const renderLinkContextCard = (instance) => {
-			if (linkContextEditing.value) return h(Card, {
+			if (linkState.value.surface === "context") return h(Card, {
 				variant: "elevated",
 				padding: "sm",
 				size: "sm",
@@ -3033,7 +3133,7 @@ var LoomaEditor = defineComponent({
 			}, () => [renderLinkForm()]);
 			const rawHref = instance.getAttributes("link").href;
 			const href = typeof rawHref === "string" ? rawHref : "";
-			const target = linkContextTarget.value;
+			const target = linkState.value.current;
 			return h(EditorLinkCard, {
 				class: "looma-editor__link-context",
 				href,
@@ -3042,7 +3142,7 @@ var LoomaEditor = defineComponent({
 				detail: target?.detail ?? "",
 				targetLabel: props.linkTargetLabel,
 				onEdit: () => openLinkEditor(true),
-				onRemove: removeCurrentLink
+				onRemove: () => linkEditing?.remove()
 			});
 		};
 		const runBlockAction = (value) => {
@@ -3087,11 +3187,11 @@ var LoomaEditor = defineComponent({
 			if (!editable) chipOpen.value = false;
 		});
 		watch([
-			linkOpen,
+			() => linkState.value.surface === "popover",
 			tablePickerOpen,
 			formatOpen
-		], ([link, table, format]) => {
-			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
+		], ([linking, table, format]) => {
+			if (linking || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 		});
@@ -3194,10 +3294,10 @@ var LoomaEditor = defineComponent({
 				}))
 			];
 		});
-		const chooseCodeLanguage = (detail) => {
+		const chooseCodeLanguage = (value) => {
 			const instance = editor.value;
-			if (!instance || detail.kind !== "selection" || !detail.value) return;
-			const language = detail.value === "auto" ? null : detail.value;
+			if (!instance) return;
+			const language = value === "auto" ? null : value;
 			if (language !== null && !codeLanguageNames.includes(language)) return;
 			const node = instance.state.doc.nodeAt(codeUi.pos);
 			if (node?.type.name !== "codeBlock") return;
@@ -3336,7 +3436,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);
+			if (linkState.value.surface !== "none" && !inElement(linkFormRoot.value)) dismissLink(false);
 			const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value) || inElement(mobileToolbarShell.value);
 			tableInteractionActive = inTableUi;
 			if (inTableUi) setTimeout(() => {
@@ -3402,7 +3502,7 @@ var LoomaEditor = defineComponent({
 			editor: instance,
 			element,
 			pluginKey: "looma-text-formatting-menu",
-			shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.element.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
+			shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.element.contains(document.activeElement) || linkState.value.surface === "context" || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
 			boundary: () => props.toolbarMode === "contextual" ? root.value : null,
 			related: editorRoot,
 			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
@@ -3414,7 +3514,7 @@ var LoomaEditor = defineComponent({
 			editor: instance,
 			element,
 			pluginKey: "looma-link-context-menu",
-			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkContextEditing.value || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
+			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && linkState.value.surface !== "popover" && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
 			maxWidth: () => Math.min(480, window.innerWidth - 24),
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
@@ -3832,7 +3932,7 @@ var LoomaEditor = defineComponent({
 				label: "Link",
 				size: "sm",
 				variant: "ghost",
-				"aria-expanded": linkOpen.value ? "true" : "false",
+				"aria-expanded": linkState.value.surface === "popover" ? "true" : "false",
 				"aria-pressed": instance.isActive("link") ? "true" : "false",
 				"data-active": instance.isActive("link") ? "true" : "false",
 				onPointerenter: () => showTool(linkTriggerId, "Link", false),
@@ -4016,7 +4116,7 @@ var LoomaEditor = defineComponent({
 					ref: formattingSurfaceRef,
 					class: "looma-editor__floating-shell looma-editor__formatting-shell",
 					hidden: true
-				}, [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,
+				}, [props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkState.value.surface === "context" || instance.state.selection.empty && instance.isActive("link")) && linkState.value.surface !== "popover" && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover")])]) : null,
 				instance && props.editable ? h("div", { key: "looma-link-host" }, [h("div", {
 					ref: linkSurfaceRef,
 					class: "looma-editor__floating-shell looma-editor__link-shell",
@@ -4049,16 +4149,12 @@ var LoomaEditor = defineComponent({
 					class: "looma-editor__code-language",
 					style: codeUi.style,
 					onFocusout: () => updateCodeUi()
-				}, [h(Combobox, {
-					label: "Code language",
-					labelVisibility: "sr-only",
-					size: "sm",
-					disclosure: true,
-					filter: "label",
+				}, [h(EditorCodeLanguage, {
 					value: codeUi.language,
-					onValueChange: (event) => chooseCodeLanguage(event.detail)
-				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
-				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
+					languages: codeLanguageOptions.value,
+					onLanguage: (event) => chooseCodeLanguage(event.detail.value)
+				})]) : null,
+				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkState.value.surface === "popover" || !props.editable) ? h("div", {
 					key: "looma-mobile-toolbar-shell",
 					ref: mobileToolbarRef,
 					class: "looma-editor__mobile-toolbar-shell",
@@ -4153,17 +4249,18 @@ var LoomaEditor = defineComponent({
 				h(Popover, {
 					class: "looma-editor__link-popover",
 					size: "sm",
-					open: linkOpen.value,
+					open: linkState.value.surface === "popover",
 					for: linkPopoverAnchorId.value,
 					placement: mobile.value ? "top-start" : "bottom-start",
 					onOpen: () => openLinkEditor(),
 					onClose: () => {
-						linkOpen.value = false;
+						if (linkState.value.surface === "popover") linkEditing?.close();
 						linkPressedSelection = null;
 						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);
+						const range = linkState.value.range;
+						if (current && !current.empty && range && current.from === range.from && current.to === range.to) editor.value?.commands.setTextSelection(current.to);
 					}
-				}, () => linkOpen.value ? renderLinkForm() : null),
+				}, () => linkState.value.surface === "popover" ? renderLinkForm() : null),
 				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
 					class: "looma-editor__compact-formatting",
 					for: formatAnchorId,
@@ -4310,4 +4407,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };