@threadlabs/looma 0.28.9 → 0.28.11

package/editor/block-actions.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+/**
+ * Applies a block menu action to the top-level block holding the caret, then focuses the editor:
+ * insert a paragraph below, duplicate the block, or delete it. Deleting the only block leaves an
+ * empty paragraph.
+ *
+ * @failure Returns false, and changes nothing, for an unknown action or a caret outside any block.
+ */
+export declare function runBlockAction(editor: Editor, action: string): boolean;

package/editor/extensions/table-commands.d.ts

@@ -4,7 +4,7 @@
  */
 import type { Editor, Range } from "@tiptap/core";
 import type { TableContextMenuActionEventDetail } from "../table-context-menu.js";
-import type { TableOverlayActionEventDetail } from "../table-overlay.js";
+import { type TableOverlayActionEventDetail } from "../table-overlay.js";
 import { type TableCellAlignment, type TableCellBackground } from "./table-formatting.js";
 /**
  * Bounded initial shape for table insertion.
@@ -120,3 +120,9 @@ export declare function normalizeActiveTableColumnWidths(editor: Editor, tableEl
  * return false before dispatching a transaction.
  */
 export declare function handleTableOverlayAction(editor: Editor, detail: TableOverlayActionEventDetail): boolean;
+/**
+ * Moves the caret to the cell an overlay action names when the action comes from a table other
+ * than the selected one, so table commands act on that table. A cell menu also selects its cell,
+ * unless that cell is already part of the selection.
+ */
+export declare function focusTableOverlayTarget(editor: Editor, table: HTMLTableElement, detail: TableOverlayActionEventDetail): void;

package/editor/link-editing.d.ts

@@ -0,0 +1,85 @@
+import type { Editor } from "@tiptap/core";
+/** 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>;
+/** The link form's state and the resolved target of the link at the caret. */
+export interface LoomaLinkEditingState {
+    /** Where the form shows: nowhere, in the toolbar's popover, or in place of the link card. */
+    readonly surface: "none" | "popover" | "context";
+    /** The range the form links, and whether it was already a link when the form opened. */
+    readonly range: {
+        readonly from: number;
+        readonly to: number;
+        readonly existing: boolean;
+    } | null;
+    readonly mode: "target" | "url";
+    readonly query: string;
+    readonly href: string;
+    readonly text: string;
+    readonly textEditable: boolean;
+    readonly newTab: boolean;
+    readonly error: string;
+    readonly results: readonly LoomaLinkTarget[];
+    readonly searching: boolean;
+    readonly selected: LoomaLinkTarget | null;
+    /** What the link at the caret resolves to, for the link card. */
+    readonly current: LoomaLinkTarget | null;
+}
+export interface LoomaLinkEditingOptions {
+    editor: Editor;
+    /** Read on each use, so a host can change them while the editor runs. */
+    search: () => LoomaLinkSearch | null | undefined;
+    resolve: () => LoomaLinkResolve | null | undefined;
+    baseUrl: () => string;
+}
+/**
+ * The editor's link form as a state machine: what the form holds, how it applies to the
+ * document as the reader types, and the host's search and resolve calls.
+ *
+ * @ownership The host owns presentation: where the form shows, focus, and which selection it
+ * opens on. This owns the form's state and the link mark it writes.
+ * @lifecycle Listens to the editor's transactions until `destroy()`; results of a search or lookup
+ * that finish after a newer one, or after `destroy()`, are dropped.
+ */
+export interface LoomaLinkEditing {
+    readonly state: LoomaLinkEditingState;
+    /** Calls `listener` after every state change; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /** Opens the form on `from`–`to`, filled from the link there if there is one. */
+    open(from: number, to: number, surface: "popover" | "context"): void;
+    setDestination(value: string): void;
+    clear(): void;
+    choose(target: LoomaLinkTarget): void;
+    setNewTab(newTab: boolean): void;
+    setText(text: string): void;
+    /**
+     * Writes the form's link to its range without moving focus.
+     * @failure Returns false and leaves the document unchanged when the destination or text is
+     * missing or invalid; `reportError` also sets the form's error.
+     */
+    apply(reportError?: boolean): boolean;
+    close(): void;
+    /** Removes the link at the caret. */
+    remove(): void;
+    destroy(): void;
+}
+/** The status line above search results: progress, a hint, or an empty result. */
+export declare function linkFormStatus(state: LoomaLinkEditingState): string;
+export declare const LOOMA_LINK_EDITING_IDLE: LoomaLinkEditingState;
+export declare function createLinkEditing(options: LoomaLinkEditingOptions): LoomaLinkEditing;

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -4,6 +4,7 @@ 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 LoomaLinkResolve, type LoomaLinkSearch } from "../../editor/link-editing.js";
 /**
  * Host upload result normalized into the editor's durable image descriptor.
  * `url` becomes the stored `src`; optional dimensions preserve layout before
@@ -62,25 +63,7 @@ export interface LoomaEditorSelectionActionDetail {
  * fresh defaults and invokes this factory when the inventory prop changes.
  */
 export type LoomaEditorSlashCommands = LoomaSlashCommand[] | ((defaults: LoomaSlashCommand[]) => LoomaSlashCommand[]);
-/** 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>;
+export type { LoomaLinkResolve, LoomaLinkSearch, LoomaLinkTarget } from "../../editor/link-editing.js";
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.

package/vue/editor/index.js

@@ -1,5 +1,5 @@
 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 { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig } 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";
@@ -7,6 +7,8 @@ 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/tables";
+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
@@ -1093,32 +1095,79 @@ function createCodeHighlighting(codeLanguages, onGrammarsLoaded) {
 	};
 }
 //#endregion
-//#region src/editor/content.ts
-/** Whether a controlled document already matches the editor, so applying it would only reset the selection. */
-function sameDocument(left, right) {
-	return JSON.stringify(left) === JSON.stringify(right);
+//#region src/editor/block-actions.ts
+/**
+* Applies a block menu action to the top-level block holding the caret, then focuses the editor:
+* insert a paragraph below, duplicate the block, or delete it. Deleting the only block leaves an
+* empty paragraph.
+*
+* @failure Returns false, and changes nothing, for an unknown action or a caret outside any block.
+*/
+function runBlockAction(editor, action) {
+	const head = editor.state.selection.$head;
+	if (head.depth === 0) return false;
+	const { state } = editor;
+	const position = head.before(1);
+	const block = state.doc.nodeAt(position);
+	if (!block) return false;
+	const end = position + block.nodeSize;
+	const transaction = state.tr;
+	let focusAt = end + 1;
+	if (action === "insert-below") transaction.insert(end, state.schema.nodes.paragraph.create());
+	else if (action === "duplicate") transaction.insert(end, block);
+	else if (action === "delete") {
+		if (state.doc.childCount === 1) {
+			transaction.replaceWith(position, end, state.schema.nodes.paragraph.create());
+			focusAt = 1;
+		} else {
+			transaction.delete(position, end);
+			focusAt = Math.min(position + 1, transaction.doc.content.size);
+		}
+	} else return false;
+	transaction.setSelection(TextSelection.near(transaction.doc.resolve(Math.min(focusAt, transaction.doc.content.size))));
+	editor.view.dispatch(transaction);
+	editor.commands.focus();
+	return true;
+}
+//#endregion
+//#region src/editor/table-overlay.ts
+function mapTableCells(table) {
+	const rows = Array.from(table.rows);
+	const grid = [];
+	const coordinates = /* @__PURE__ */ new Map();
+	rows.forEach((row, rowIndex) => {
+		grid[rowIndex] ??= [];
+		let columnIndex = 0;
+		for (const cell of Array.from(row.cells)) {
+			while (grid[rowIndex]?.[columnIndex]) columnIndex += 1;
+			coordinates.set(cell, {
+				rowIndex,
+				columnIndex
+			});
+			const rowSpan = cell.rowSpan === 0 ? rows.length - rowIndex : Math.max(1, cell.rowSpan);
+			const columnSpan = Math.max(1, cell.colSpan);
+			for (let rowOffset = 0; rowOffset < rowSpan; rowOffset += 1) {
+				const gridRow = grid[rowIndex + rowOffset] ??= [];
+				for (let columnOffset = 0; columnOffset < columnSpan; columnOffset += 1) gridRow[columnIndex + columnOffset] = cell;
+			}
+			columnIndex += columnSpan;
+		}
+	});
+	return {
+		grid,
+		coordinates
+	};
 }
 /**
-* A link destination the editor may store: a site-relative path, fragment, or query, or an
-* absolute http, https, mailto, or tel URL.
+* Resolves a logical grid coordinate to its owning DOM cell.
+* A spanning cell can therefore be returned for more than one coordinate; this
+* is intentional and prevents overlay actions from inventing nonexistent cells.
 *
-* @failure Returns null for empty input, control characters, other schemes, and unparseable URLs.
+* @contract Coordinates outside the expanded table grid return null; coordinates
+* covered by a span resolve to the single DOM cell that owns them.
 */
-function validLinkHref(value) {
-	const href = value.trim();
-	if (!href || /[\u0000-\u001f\u007f]/.test(href)) return null;
-	if (/^(\/|#|\?)/.test(href)) return href;
-	try {
-		const url = new URL(href);
-		return [
-			"http:",
-			"https:",
-			"mailto:",
-			"tel:"
-		].includes(url.protocol) ? href : null;
-	} catch {
-		return null;
-	}
+function resolveTableCellAt(table, rowIndex, columnIndex) {
+	return mapTableCells(table).grid[rowIndex]?.[columnIndex] ?? null;
 }
 //#endregion
 //#region src/editor/selection-geometry.ts
@@ -1149,6 +1198,317 @@ function selectedTableCellElement(editor) {
 	return selectionElement(editor)?.closest("td, th");
 }
 //#endregion
+//#region src/editor/extensions/table-commands.ts
+/**
+* Moves the caret to the cell an overlay action names when the action comes from a table other
+* than the selected one, so table commands act on that table. A cell menu also selects its cell,
+* unless that cell is already part of the selection.
+*/
+function focusTableOverlayTarget(editor, table, detail) {
+	const target = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : "fromIndex" in detail ? resolveTableCellAt(table, detail.action === "reorder-row" ? detail.fromIndex : 0, detail.action === "reorder-column" ? detail.fromIndex : 0) : resolveTableCellAt(table, detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0, detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0);
+	if (target && selectedTableElement(editor) !== table) editor.chain().focus().setTextSelection(editor.view.posAtDOM(target, 0) + 1).run();
+	if (detail.action !== "open-cell-menu") return;
+	const selected = selectedTableCellElement(editor);
+	const cell = resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selected;
+	if (cell && selected !== cell && !cell.classList.contains("selectedCell")) editor.chain().focus().setTextSelection(editor.view.posAtDOM(cell, 0) + 1).run();
+	else editor.commands.focus();
+}
+//#endregion
+//#region src/editor/content.ts
+/** Whether a controlled document already matches the editor, so applying it would only reset the selection. */
+function sameDocument(left, right) {
+	return JSON.stringify(left) === JSON.stringify(right);
+}
+/**
+* A link destination the editor may store: a site-relative path, fragment, or query, or an
+* absolute http, https, mailto, or tel URL.
+*
+* @failure Returns null for empty input, control characters, other schemes, and unparseable URLs.
+*/
+function validLinkHref(value) {
+	const href = value.trim();
+	if (!href || /[\u0000-\u001f\u007f]/.test(href)) return null;
+	if (/^(\/|#|\?)/.test(href)) return href;
+	try {
+		const url = new URL(href);
+		return [
+			"http:",
+			"https:",
+			"mailto:",
+			"tel:"
+		].includes(url.protocol) ? href : null;
+	} catch {
+		return null;
+	}
+}
+//#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-surface.ts
 var surfaceSequence = 0;
 /**
@@ -2493,28 +2853,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("");
@@ -2565,7 +2910,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;
@@ -2754,7 +3099,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();
 							}
@@ -2777,7 +3122,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();
@@ -2789,6 +3133,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);
@@ -2796,56 +3150,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;
@@ -2855,130 +3162,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();
-			});
-		};
-		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
+				(linkState.value.mode === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
 			});
-			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,
@@ -2987,46 +3201,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",
@@ -3034,7 +3225,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,
@@ -3043,35 +3234,9 @@ var LoomaEditor = defineComponent({
 				detail: target?.detail ?? "",
 				targetLabel: props.linkTargetLabel,
 				onEdit: () => openLinkEditor(true),
-				onRemove: removeCurrentLink
+				onRemove: () => linkEditing?.remove()
 			});
 		};
-		const runBlockAction = (value) => {
-			const instance = editor.value;
-			const head = instance?.state.selection.$head;
-			if (!instance || !head || head.depth === 0 || !props.editable) return;
-			const { state } = instance;
-			const position = head.before(1);
-			const block = state.doc.nodeAt(position);
-			if (!block) return;
-			const end = position + block.nodeSize;
-			const transaction = state.tr;
-			let focusAt = end + 1;
-			if (value === "insert-below") transaction.insert(end, state.schema.nodes.paragraph.create());
-			else if (value === "duplicate") transaction.insert(end, block);
-			else if (value === "delete") {
-				if (state.doc.childCount === 1) {
-					transaction.replaceWith(position, end, state.schema.nodes.paragraph.create());
-					focusAt = 1;
-				} else {
-					transaction.delete(position, end);
-					focusAt = Math.min(position + 1, transaction.doc.content.size);
-				}
-			} else return;
-			transaction.setSelection(TextSelection.near(transaction.doc.resolve(Math.min(focusAt, transaction.doc.content.size))));
-			instance.view.dispatch(transaction);
-			instance.commands.focus();
-		};
 		watch([() => props.slashCommands, () => props.uploadImage], () => {
 			slashExtension.options.commands = resolveSlashCommands();
 			editor.value?.commands.dismissLoomaSlashMenu();
@@ -3088,11 +3253,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();
 		});
@@ -3337,7 +3502,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(() => {
@@ -3403,7 +3568,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,
@@ -3415,7 +3580,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()
@@ -3661,13 +3826,8 @@ var LoomaEditor = defineComponent({
 			if (!instance) return;
 			const table = overlayTableElement ?? selectedTableElement(instance);
 			if (!table) return;
-			const targetCell = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : "fromIndex" in detail ? resolveTableCellAt(table, detail.action === "reorder-row" ? detail.fromIndex : 0, detail.action === "reorder-column" ? detail.fromIndex : 0) : resolveTableCellAt(table, detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0, detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0);
-			if (targetCell && selectedTableElement(instance) !== table) instance.chain().focus().setTextSelection(instance.view.posAtDOM(targetCell, 0) + 1).run();
+			focusTableOverlayTarget(instance, table, detail);
 			if (detail.action === "open-cell-menu") {
-				const selectedCell = selectedTableCellElement(instance);
-				const cell = table ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selectedCell : selectedCell;
-				if (cell && selectedCell !== cell && !cell.classList.contains("selectedCell")) instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
-				else instance.commands.focus();
 				updateTableUi();
 				tableUi.menuScope = "cell";
 				tableUi.menuStyle = {
@@ -3833,7 +3993,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),
@@ -4017,7 +4177,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",
@@ -4055,7 +4215,7 @@ var LoomaEditor = defineComponent({
 					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 || linkOpen.value || !props.editable) ? h("div", {
+				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",
@@ -4150,17 +4310,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,
@@ -4176,7 +4337,9 @@ var LoomaEditor = defineComponent({
 				h(EditorBlockActions, {
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
-					onAction: (event) => runBlockAction(event.detail.action)
+					onAction: (event) => {
+						if (props.editable && editor.value) runBlockAction(editor.value, event.detail.action);
+					}
 				}),
 				h(Popover, {
 					class: "looma-editor__table-picker-popover",