@threadlabs/looma 0.28.1 → 0.28.3

package/vue/editor/index.js

@@ -1,8 +1,8 @@
 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, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, EditorToolbar as EditorToolbar$1, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
-import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
-import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
+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";
@@ -25,9 +25,98 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 };
 //#endregion
 //#region src/components/shared/overlay.js
+function stateFor(document) {
+	const key = Symbol.for("@threadlabs/looma/overlay-stack/v1");
+	let state = document[key];
+	if (state) return state;
+	state = {
+		records: [],
+		modalCount: 0,
+		listening: false
+	};
+	Object.defineProperty(document, key, { value: state });
+	return state;
+}
+function syncScrollLock(document, state) {
+	document.documentElement.toggleAttribute("data-ui-scroll-lock", state.modalCount > 0);
+	if (state.modalCount > 0) document.documentElement.style.overflow = "hidden";
+	else document.documentElement.style.removeProperty("overflow");
+}
+function syncModalBackdrops(state) {
+	const topModal = state.records.findLast((record) => record.modal);
+	for (const record of state.records) (record.modalElement ?? record.element).toggleAttribute("data-ui-backdrop-hidden", Boolean(record.modal && record !== topModal));
+}
+function requestClose(document, reason, trigger) {
+	const record = stateFor(document).records.at(-1);
+	if (!record || record.dismissible === false && (reason === "escape" || reason === "light-dismiss") || record.canClose?.(reason) === false) return false;
+	record.requestClose(reason, trigger);
+	return true;
+}
+function ensureListeners(document, state) {
+	if (state.listening) return;
+	state.onKeydown = (event) => {
+		if (event.key === "Escape" && !event.defaultPrevented && requestClose(document, "escape", "keyboard")) event.preventDefault();
+	};
+	state.onPointerdown = (event) => {
+		const top = state.records.at(-1);
+		if (!top || top.dismissible === false) return;
+		const boundary = [top.element, ...top.relatedElements ?? []];
+		if (event.clientX === 0 && event.clientY === 0) return;
+		const rect = top.element.getBoundingClientRect();
+		if (!(event.target === top.element && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) && event.composedPath().some((target) => target instanceof Node && boundary.some((element) => element.contains(target)))) return;
+		requestClose(document, "light-dismiss", "pointer");
+	};
+	document.addEventListener("keydown", state.onKeydown);
+	document.addEventListener("pointerdown", state.onPointerdown, true);
+	state.listening = true;
+}
+function removeListeners(document, state) {
+	if (!state.listening || state.records.length) return;
+	document.removeEventListener("keydown", state.onKeydown);
+	document.removeEventListener("pointerdown", state.onPointerdown, true);
+	state.listening = false;
+}
+function openOverlay(record) {
+	const document = record.element.ownerDocument;
+	const state = stateFor(document);
+	const index = state.records.findIndex((entry) => entry.id === record.id);
+	if (index >= 0) {
+		const previous = state.records[index];
+		state.records[index] = record;
+		if (previous.modal !== record.modal) {
+			state.modalCount += record.modal ? 1 : -1;
+			syncScrollLock(document, state);
+		}
+		if (previous.modalElement && previous.modalElement !== record.modalElement) previous.modalElement.removeAttribute("data-ui-backdrop-hidden");
+		syncModalBackdrops(state);
+		return;
+	}
+	state.records.push(record);
+	if (record.modal) {
+		state.modalCount += 1;
+		syncScrollLock(document, state);
+	}
+	syncModalBackdrops(state);
+	ensureListeners(document, state);
+	announceOverlayOpen(document, record.id);
+}
 function announceOverlayOpen(document, id) {
 	document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
 }
+function closeOverlay(document, id) {
+	const state = stateFor(document);
+	const index = state.records.findIndex((record) => record.id === id);
+	if (index >= 0) {
+		const [record] = state.records.splice(index, 1);
+		(record.modalElement ?? record.element).removeAttribute("data-ui-backdrop-hidden");
+		if (record?.modal) {
+			state.modalCount = Math.max(0, state.modalCount - 1);
+			syncScrollLock(document, state);
+		}
+		syncModalBackdrops(state);
+	}
+	removeListeners(document, state);
+}
 function topLayerOpen(surface) {
 	try {
 		return surface.matches(":popover-open");
@@ -48,6 +137,178 @@ function hide(surface) {
 	} catch {}
 	surface.hidden = true;
 }
+function viewport(owner) {
+	const visual = owner.visualViewport;
+	const left = visual?.offsetLeft ?? 0;
+	const top = visual?.offsetTop ?? 0;
+	const width = visual?.width ?? owner.innerWidth;
+	const height = visual?.height ?? owner.innerHeight;
+	return {
+		left,
+		top,
+		right: left + width,
+		bottom: top + height,
+		width,
+		height
+	};
+}
+function clamp(rect, bounds, gutter) {
+	const availableWidth = Math.max(0, bounds.width - gutter * 2);
+	const availableHeight = Math.max(0, bounds.height - gutter * 2);
+	const left = rect.width > availableWidth ? bounds.left + gutter : Math.min(Math.max(rect.left, bounds.left + gutter), bounds.right - gutter - rect.width);
+	const top = rect.height > availableHeight ? bounds.top + gutter : Math.min(Math.max(rect.top, bounds.top + gutter), bounds.bottom - gutter - rect.height);
+	return {
+		x: left - rect.left,
+		y: top - rect.top
+	};
+}
+function layoutRect(surface) {
+	const box = surface.getBoundingClientRect();
+	const width = surface.offsetWidth || box.width;
+	const height = surface.offsetHeight || box.height;
+	const left = box.left + (box.width - width) / 2;
+	const top = box.top + (box.height - height) / 2;
+	return {
+		left,
+		top,
+		right: left + width,
+		bottom: top + height,
+		width,
+		height
+	};
+}
+/**
+* Where an unanchored surface is written, for presenting it there in the top layer. The top layer
+* takes a surface out of page flow, and engines disagree on its static position there (Chromium
+* uses the viewport origin), so measure the surface in flow before it is shown, with the inline
+* styles its caller owns cleared. `rect()` then carries that place with the box that holds it, so
+* the surface travels with scrolling and with layout around it. A fixed surface keeps its measured
+* place; one an integration places with inline insets the caller does not own keeps its live box.
+* `floating` reports a surface placed that way or written in a fixed or absolute box, which answers to
+* the viewport. Call it only while the surface is outside the top layer.
+*/
+function writtenPlace(surface, ownedStyles = []) {
+	const owner = surface.ownerDocument.defaultView;
+	const up = (node) => node.assignedSlot ?? node.parentElement ?? node.getRootNode().host ?? null;
+	let parent = up(surface);
+	while (parent && owner.getComputedStyle(parent).display === "contents") parent = up(parent);
+	const popover = surface.getAttribute("popover");
+	const hidden = surface.hidden;
+	const saved = ownedStyles.map((name) => [name, surface.style.getPropertyValue(name)]);
+	if (popover !== null) surface.removeAttribute("popover");
+	if (hidden) surface.hidden = false;
+	for (const name of ownedStyles) surface.style.removeProperty(name);
+	const spot = layoutRect(surface);
+	const floats = (node) => node instanceof owner.Element && /^(fixed|absolute)$/.test(owner.getComputedStyle(node).position);
+	const placed = ["left", "top"].some((name) => !ownedStyles.includes(name) && surface.style.getPropertyValue(name));
+	const fixed = owner.getComputedStyle(surface).position === "fixed";
+	const floating = placed || floats(surface) || floats(surface.offsetParent);
+	for (const [name, value] of saved) if (value) surface.style.setProperty(name, value);
+	if (hidden) surface.hidden = true;
+	if (popover !== null) surface.setAttribute("popover", popover);
+	surface.offsetWidth;
+	const scroll = () => !parent || parent === surface.ownerDocument.documentElement || parent === surface.ownerDocument.scrollingElement ? [0, 0] : [parent.scrollLeft, parent.scrollTop];
+	let offset = null;
+	const rect = () => {
+		let { left, top } = placed ? layoutRect(surface) : spot;
+		if (!placed && !fixed && parent) {
+			const base = parent.getBoundingClientRect();
+			const [x, y] = scroll();
+			offset ??= {
+				left: spot.left - base.left + x,
+				top: spot.top - base.top + y
+			};
+			left = base.left + offset.left - x;
+			top = base.top + offset.top - y;
+		}
+		return {
+			left,
+			top,
+			right: left,
+			bottom: top,
+			width: 0,
+			height: 0
+		};
+	};
+	return {
+		rect,
+		floating
+	};
+}
+function containment(surface, boundary) {
+	const visible = viewport(surface.ownerDocument.defaultView);
+	const element = typeof boundary === "function" ? boundary() : boundary;
+	if (!element) return visible;
+	const box = element.getBoundingClientRect();
+	const left = Math.max(visible.left, box.left);
+	const top = Math.max(visible.top, box.top);
+	const right = Math.min(visible.right, box.right);
+	const bottom = Math.min(visible.bottom, box.bottom);
+	if (right <= left || bottom <= top) return visible;
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface), boundary = null) {
+	const bounds = containment(surface, boundary);
+	const [preferred, align = "center"] = placement.split("-");
+	const side = [
+		"top",
+		"bottom",
+		"left",
+		"right"
+	].includes(preferred) ? preferred : "bottom";
+	const opposite = {
+		top: "bottom",
+		bottom: "top",
+		left: "right",
+		right: "left"
+	}[side];
+	const available = {
+		top: anchor.top - bounds.top - viewportGap,
+		bottom: bounds.bottom - anchor.bottom - viewportGap,
+		left: anchor.left - bounds.left - viewportGap,
+		right: bounds.right - anchor.right - viewportGap
+	};
+	const needed = (side === "top" || side === "bottom" ? surfaceRect.height : surfaceRect.width) + gap;
+	const actual = available[side] < needed && available[opposite] > available[side] ? opposite : side;
+	surface.dataset.uiActualPlacement = actual;
+	surface.dataset.uiActualAlign = align;
+	const rtl = getComputedStyle(surface).direction === "rtl";
+	let left;
+	let top;
+	if (actual === "top" || actual === "bottom") {
+		top = actual === "top" ? anchor.top - surfaceRect.height - gap : anchor.bottom + gap;
+		left = align === "start" ? rtl ? anchor.right - surfaceRect.width : anchor.left : align === "end" ? rtl ? anchor.left : anchor.right - surfaceRect.width : (anchor.left + anchor.right - surfaceRect.width) / 2;
+	} else {
+		left = actual === "left" ? anchor.left - surfaceRect.width - gap : anchor.right + gap;
+		top = align === "start" ? anchor.top : align === "end" ? anchor.bottom - surfaceRect.height : (anchor.top + anchor.bottom - surfaceRect.height) / 2;
+	}
+	const shift = clamp({
+		left,
+		top,
+		right: left + surfaceRect.width,
+		bottom: top + surfaceRect.height,
+		width: surfaceRect.width,
+		height: surfaceRect.height
+	}, bounds, viewportGap);
+	surface.style.left = `${Math.round(left + shift.x)}px`;
+	surface.style.top = `${Math.round(top + shift.y)}px`;
+	surface.style.right = "auto";
+	surface.style.bottom = "auto";
+}
+/**
+* Applies the shared flip/shift policy to a live element or consumer-supplied virtual rectangle.
+* `boundary` (an element, or a function returning one) narrows the room to its visible part.
+*/
+function positionAnchoredSurface(surface, rect, options = {}) {
+	fallbackPosition(surface, rect, options.placement ?? "bottom-start", options.gap ?? 4, options.viewportGap ?? 8, void 0, options.boundary);
+}
 /**
 * One document-scoped scroll/resize listener and one frame for all active floating surfaces.
 * The registry lives on the document so HTML and Vue bundles share the same coordinator.
@@ -174,6 +435,152 @@ function createViewportSurface(surface, options = {}) {
 		}
 	};
 }
+function createAnchoredSurface(surface, options = {}) {
+	const owner = surface.ownerDocument.defaultView;
+	let placement = options.placement ?? "bottom-start";
+	const gap = () => Math.max(0, Number(typeof options.gap === "function" ? options.gap() : options.gap ?? 4) || 0);
+	const viewportGap = Math.max(0, options.viewportGap ?? 8);
+	const boundary = options.boundary ?? null;
+	let anchor = options.anchor ?? null;
+	let point = null;
+	let open = false;
+	let destroyed = false;
+	let anchorFrame = null;
+	let lastAnchorRect = null;
+	let written = null;
+	const anchorRect = () => typeof anchor === "function" ? anchor() : anchor ? anchor.getBoundingClientRect() : written?.rect();
+	const position = () => {
+		if (!anchor && !point) {
+			if (!written) return;
+			show(surface);
+			const rect = lastAnchorRect = written.rect();
+			Object.assign(surface.style, {
+				left: `${Math.round(rect.left)}px`,
+				top: `${Math.round(rect.top)}px`,
+				right: "auto",
+				bottom: "auto"
+			});
+			return;
+		}
+		const rect = point ? {
+			left: point.x,
+			right: point.x,
+			top: point.y,
+			bottom: point.y,
+			width: 0,
+			height: 0
+		} : anchorRect();
+		if (!rect) return;
+		if (!point && typeof anchor !== "function" && (anchor.isConnected === false || rect.width === 0 && rect.height === 0 || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible")) {
+			if (lastAnchorRect) positionAnchoredSurface(surface, lastAnchorRect, {
+				placement,
+				gap: gap(),
+				viewportGap,
+				boundary
+			});
+			else hide(surface);
+			return;
+		}
+		lastAnchorRect = {
+			left: rect.left,
+			top: rect.top,
+			right: rect.right,
+			bottom: rect.bottom,
+			width: rect.width,
+			height: rect.height
+		};
+		show(surface);
+		if (options.maxWidth !== void 0) {
+			const maxWidth = typeof options.maxWidth === "function" ? options.maxWidth() : options.maxWidth;
+			surface.style.maxWidth = maxWidth === null ? "" : `${maxWidth}px`;
+		}
+		positionAnchoredSurface(surface, rect, {
+			placement: point ? "bottom-start" : placement,
+			gap: gap(),
+			viewportGap,
+			boundary
+		});
+	};
+	surface.style.position = "fixed";
+	surface.style.margin = "0";
+	const presentation = createViewportSurface(surface, {
+		position,
+		bare: options.bare
+	});
+	const trackAnchor = () => {
+		anchorFrame = null;
+		if (!open || !(anchor || written) || point) return;
+		const rect = anchorRect();
+		if (rect && (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height)) presentation.refresh();
+		anchorFrame = owner.requestAnimationFrame(trackAnchor);
+	};
+	const stopTracking = () => {
+		if (anchorFrame !== null) owner.cancelAnimationFrame(anchorFrame);
+		anchorFrame = null;
+		lastAnchorRect = null;
+	};
+	const syncTracking = () => {
+		if (open && (anchor || written) && !point) {
+			if (anchorFrame === null) anchorFrame = owner.requestAnimationFrame(trackAnchor);
+		} else stopTracking();
+	};
+	return {
+		setAnchor(next) {
+			point = null;
+			anchor = next;
+			syncTracking();
+			presentation.refresh();
+		},
+		setPlacement(next) {
+			placement = next || "bottom-start";
+			presentation.refresh();
+		},
+		show() {
+			if (destroyed) return;
+			point = null;
+			open = true;
+			if (anchor || topLayerOpen(surface)) {
+				presentation.show();
+				syncTracking();
+				return;
+			}
+			queueMicrotask(() => {
+				if (destroyed || !open || point || anchor || topLayerOpen(surface)) return;
+				written = writtenPlace(surface, [
+					"position",
+					"margin",
+					"left",
+					"top",
+					"right",
+					"bottom"
+				]);
+				presentation.show();
+				syncTracking();
+			});
+		},
+		showAtPoint(next) {
+			if (destroyed) return;
+			point = next;
+			open = true;
+			syncTracking();
+			presentation.show();
+		},
+		hide() {
+			open = false;
+			point = null;
+			syncTracking();
+			presentation.hide();
+		},
+		refresh: presentation.refresh,
+		destroy() {
+			destroyed = true;
+			open = false;
+			stopTracking();
+			presentation.destroy();
+			anchor = null;
+		}
+	};
+}
 //#endregion
 //#region ../../node_modules/.pnpm/@tiptap+extension-image@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-image/dist/index.js
 /**
@@ -737,6 +1144,241 @@ function selectedTableCellElement(editor) {
 	return selectionElement(editor)?.closest("td, th");
 }
 //#endregion
+//#region src/editor/selection-surface.ts
+var surfaceSequence = 0;
+/**
+* Shows `element` beside the selection whenever `shouldShow` allows, as Tiptap's bubble menu does,
+* and presents it through Looma's shared overlay layer: in the top layer, placed by the shared
+* flip/shift policy, travelling with its anchor, and registered on the overlay stack.
+*
+* @lifecycle Registers a ProseMirror plugin now; `destroy()` unregisters it and closes the surface.
+* The editor destroying its view closes the surface too.
+* @contract A press inside the surface keeps it open when the editor blurs; dragging hides it.
+*/
+function createSelectionSurface(options) {
+	const { editor, element } = options;
+	const document = element.ownerDocument;
+	const id = `looma-selection-surface-${++surfaceSequence}`;
+	const selectionRect = () => {
+		const { view, state } = editor;
+		const { ranges } = state.selection;
+		const from = Math.min(...ranges.map((range) => range.$from.pos));
+		const to = Math.max(...ranges.map((range) => range.$to.pos));
+		if (isNodeSelection(state.selection)) {
+			let node = view.nodeDOM(from);
+			const wrapper = node?.dataset?.nodeViewWrapper ? node : node?.querySelector?.("[data-node-view-wrapper]");
+			if (wrapper) node = wrapper.firstChild;
+			if (node instanceof Element) return node.getBoundingClientRect();
+		}
+		return posToDOMRect(view, from, to);
+	};
+	let anchor = options.anchor ?? selectionRect;
+	let lastRect = null;
+	let open = false;
+	let destroyed = false;
+	let preventHide = false;
+	let timer;
+	const presentation = createAnchoredSurface(element, {
+		anchor: () => {
+			if (editor.isDestroyed) return lastRect;
+			try {
+				lastRect = anchor();
+			} catch {}
+			return lastRect;
+		},
+		placement: options.placement ?? "top",
+		gap: 10,
+		viewportGap: 5,
+		boundary: options.boundary,
+		maxWidth: options.maxWidth,
+		bare: true
+	});
+	const host = element.parentElement;
+	element.hidden = true;
+	element.tabIndex = 0;
+	element.remove();
+	const show = () => {
+		if (destroyed) return;
+		if (!open) {
+			open = true;
+			openOverlay({
+				id,
+				modal: false,
+				element,
+				relatedElements: options.related?.() ?? [],
+				dismissible: true,
+				requestClose: (reason) => {
+					if (reason === "escape" || reason === "light-dismiss") options.onDismiss?.(reason);
+					else hide();
+				}
+			});
+		}
+		if (!element.isConnected) host?.append(element);
+		presentation.show();
+	};
+	const close = () => {
+		open = false;
+		presentation.hide();
+		element.remove();
+		closeOverlay(document, id);
+	};
+	const hide = () => {
+		if (!open || options.onHide?.() === false) return;
+		close();
+	};
+	const decide = (view, oldState, selectionChanged, docChanged) => {
+		const { state, composing } = view;
+		if (composing || !selectionChanged && !docChanged) return;
+		const { ranges } = state.selection;
+		const from = Math.min(...ranges.map((range) => range.$from.pos));
+		const to = Math.max(...ranges.map((range) => range.$to.pos));
+		if (!options.shouldShow({
+			editor,
+			view,
+			state,
+			oldState,
+			from,
+			to
+		})) {
+			hide();
+			return;
+		}
+		anchor = options.anchor ?? selectionRect;
+		show();
+		presentation.refresh();
+	};
+	const update = (view, oldState) => {
+		const selectionChanged = !oldState?.selection.eq(view.state.selection);
+		const docChanged = !oldState?.doc.eq(view.state.doc);
+		const delay = options.updateDelay ?? 0;
+		if (delay > 0 && view.state.selection.from !== view.state.selection.to) {
+			if (!selectionChanged && !docChanged) return;
+			clearTimeout(timer);
+			timer = setTimeout(() => decide(view, oldState, selectionChanged, docChanged), delay);
+			return;
+		}
+		decide(view, oldState, selectionChanged, docChanged);
+	};
+	const onPointerDown = () => {
+		preventHide = true;
+	};
+	const onDragStart = () => hide();
+	const onFocus = () => {
+		setTimeout(() => {
+			if (!destroyed && !editor.isDestroyed) update(editor.view);
+		});
+	};
+	const onBlur = ({ event }) => {
+		if (preventHide) {
+			preventHide = false;
+			return;
+		}
+		const next = event?.relatedTarget;
+		if (next instanceof Node && (element.contains(next) || next === editor.view.dom)) return;
+		hide();
+	};
+	const onElementBlur = (event) => onBlur({ event });
+	const key = new PluginKey(options.pluginKey);
+	const plugin = new Plugin({
+		key,
+		view: (view) => {
+			element.addEventListener("mousedown", onPointerDown, { capture: true });
+			element.addEventListener("blur", onElementBlur);
+			view.dom.addEventListener("dragstart", onDragStart);
+			editor.on("focus", onFocus);
+			editor.on("blur", onBlur);
+			return {
+				update,
+				destroy() {
+					clearTimeout(timer);
+					element.removeEventListener("mousedown", onPointerDown, { capture: true });
+					element.removeEventListener("blur", onElementBlur);
+					view.dom.removeEventListener("dragstart", onDragStart);
+					editor.off("focus", onFocus);
+					editor.off("blur", onBlur);
+					close();
+				}
+			};
+		}
+	});
+	editor.registerPlugin(plugin);
+	return {
+		element,
+		isOpen: () => open,
+		show,
+		hide,
+		setAnchor(next) {
+			anchor = next;
+			presentation.refresh();
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			if (!editor.isDestroyed) editor.unregisterPlugin(key);
+			clearTimeout(timer);
+			close();
+			presentation.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/editor/session.ts
+function selectionSnapshot(selection) {
+	return {
+		bookmark: selection.getBookmark(),
+		from: selection.from,
+		to: selection.to,
+		text: selection instanceof TextSelection
+	};
+}
+/**
+* Creates the session's editor from `options`. A framework layer may pass its own `Editor`
+* subclass, such as `@tiptap/vue-3`'s reactive one, so the editor it exposes keeps that behavior.
+*/
+function createEditorSession(options, EditorClass = Editor) {
+	const editor = new EditorClass(options);
+	return {
+		editor,
+		attach(element) {
+			const current = editor.options.element;
+			if (editor.isDestroyed || current === element || !current.firstChild) return;
+			element.append(...current.childNodes);
+			editor.setOptions({ element });
+			editor.createNodeViews();
+		},
+		setContent(content, selection) {
+			if (editor.isDestroyed || sameDocument(editor.getJSON(), content)) return false;
+			const previous = selection ?? selectionSnapshot(editor.view.state.selection);
+			if (!editor.isFocused) {
+				editor.commands.setContent(content, false);
+				return true;
+			}
+			editor.chain().setContent(content, false).command(({ tr }) => {
+				try {
+					tr.setSelection(previous.text ? TextSelection.create(tr.doc, previous.from, previous.to) : previous.bookmark.resolve(tr.doc));
+				} catch {
+					const max = tr.doc.content.size;
+					const from = Math.max(1, Math.min(previous.from, max));
+					const to = Math.max(from, Math.min(previous.to, max));
+					tr.setSelection(TextSelection.create(tr.doc, from, to));
+				}
+				return true;
+			}).run();
+			editor.view.focus();
+			return true;
+		},
+		subscribe(listener) {
+			editor.on("transaction", listener);
+			return () => {
+				editor.off("transaction", listener);
+			};
+		},
+		destroy() {
+			editor.destroy();
+		}
+	};
+}
+//#endregion
 //#region src/editor/shortcuts.ts
 /**
 * Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
@@ -2077,6 +2719,7 @@ var LoomaEditor = defineComponent({
 		let heldFormattingSelection = null;
 		let formattingPopup = null;
 		let linkPopup = null;
+		let imagePopup = null;
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
@@ -2206,13 +2849,7 @@ var LoomaEditor = defineComponent({
 		let linkPressedSelection = null;
 		const rememberSelection = (instance) => {
 			if (!instance.isFocused) return;
-			const selection = instance.view.state.selection;
-			lastFocusedSelection = {
-				bookmark: selection.getBookmark(),
-				from: selection.from,
-				to: selection.to,
-				text: selection instanceof TextSelection
-			};
+			lastFocusedSelection = selectionSnapshot(instance.view.state.selection);
 		};
 		const authorHighlight = !props.disableHighlight;
 		const codeHighlighting = createCodeHighlighting(props.codeLanguages, () => {
@@ -2228,83 +2865,96 @@ var LoomaEditor = defineComponent({
 			style: {}
 		});
 		const loadForCodeBlock = codeHighlighting.loadForCodeBlock;
-		const editor = useEditor({
-			extensions: [
-				...getDefaultEditorExtensions({
-					placeholder: props.placeholder,
-					linkBaseUrl: props.linkBaseUrl,
-					mention: mentionExtension ?? false,
-					disableHighlight: props.disableHighlight,
-					codeLanguages: props.codeLanguages ?? void 0,
-					codeLowlight: codeHighlighting.lowlight,
-					tableOfContentsNodeView,
-					expandNodeView,
-					dividerNodeView,
-					calloutNodeView,
-					imageNodeView
-				}),
-				imageDelivery.extension,
-				slashExtension,
-				...props.extensions
-			],
-			content: props.modelValue,
-			editable: props.editable,
-			editorProps: {
-				attributes: {
-					role: "textbox",
-					"aria-multiline": "true",
-					"aria-label": props.label
-				},
-				handleKeyDown: (_view, event) => onFormattingKeyDown(event),
-				handleDOMEvents: { click: (view, event) => {
-					if (!(event.target instanceof Element) || event.button !== 0) return false;
-					const link = event.target.closest("a[href]");
-					if (!link || !view.dom.contains(link)) return false;
-					const href = validLinkHref(link.getAttribute("href") ?? "");
-					if (!href) return false;
-					if (isApplePlatform() ? event.metaKey : event.ctrlKey) {
-						event.preventDefault();
-						window.open(href, "_blank", "noopener,noreferrer");
-						return true;
-					}
-					dismissedFormattingSelection = null;
-					requestAnimationFrame(() => {
-						if (view.isDestroyed) return;
-						editorStateVersion.value += 1;
-						const instance = editor.value;
-						if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
-							linkPopup?.setProps({ getReferenceClientRect: () => link.getBoundingClientRect() });
-							linkPopup?.show();
+		const editor = shallowRef();
+		let session;
+		onMounted(() => {
+			session = createEditorSession({
+				extensions: [
+					...getDefaultEditorExtensions({
+						placeholder: props.placeholder,
+						linkBaseUrl: props.linkBaseUrl,
+						mention: mentionExtension ?? false,
+						disableHighlight: props.disableHighlight,
+						codeLanguages: props.codeLanguages ?? void 0,
+						codeLowlight: codeHighlighting.lowlight,
+						tableOfContentsNodeView,
+						expandNodeView,
+						dividerNodeView,
+						calloutNodeView,
+						imageNodeView
+					}),
+					imageDelivery.extension,
+					slashExtension,
+					...props.extensions
+				],
+				content: props.modelValue,
+				editable: props.editable,
+				editorProps: {
+					attributes: {
+						role: "textbox",
+						"aria-multiline": "true",
+						"aria-label": props.label
+					},
+					handleKeyDown: (_view, event) => onFormattingKeyDown(event),
+					handleDOMEvents: { click: (view, event) => {
+						if (!(event.target instanceof Element) || event.button !== 0) return false;
+						const link = event.target.closest("a[href]");
+						if (!link || !view.dom.contains(link)) return false;
+						const href = validLinkHref(link.getAttribute("href") ?? "");
+						if (!href) return false;
+						if (isApplePlatform() ? event.metaKey : event.ctrlKey) {
+							event.preventDefault();
+							window.open(href, "_blank", "noopener,noreferrer");
+							return true;
 						}
+						dismissedFormattingSelection = null;
+						requestAnimationFrame(() => {
+							if (view.isDestroyed) return;
+							editorStateVersion.value += 1;
+							const instance = editor.value;
+							if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
+								linkPopup?.setAnchor(() => link.getBoundingClientRect());
+								linkPopup?.show();
+							}
+						});
+						return false;
+					} }
+				},
+				onCreate: ({ editor: instance }) => {
+					emit("ready", instance);
+					instance.state.doc.descendants((node) => {
+						if (node.type.name === "codeBlock") loadForCodeBlock(instance, node.attrs.language, node.textContent);
 					});
-					return false;
-				} }
-			},
-			onCreate: ({ editor: instance }) => {
-				emit("ready", instance);
-				instance.state.doc.descendants((node) => {
-					if (node.type.name === "codeBlock") loadForCodeBlock(instance, node.attrs.language, node.textContent);
-				});
-			},
-			onFocus: ({ editor: instance }) => rememberSelection(instance),
-			onSelectionUpdate: ({ editor: instance }) => {
-				rememberSelection(instance);
-				if (floatingFormattingMode()) {
-					const selection = instance.state.selection;
-					if (!dismissedFormattingSelection?.eq(selection)) dismissedFormattingSelection = null;
-					if (!heldFormattingSelection?.eq(selection)) heldFormattingSelection = null;
-					if (!formattingSelectionActive(instance)) formattingPopup?.hide();
+				},
+				onFocus: ({ editor: instance }) => rememberSelection(instance),
+				onSelectionUpdate: ({ editor: instance }) => {
+					rememberSelection(instance);
+					if (floatingFormattingMode()) {
+						const selection = instance.state.selection;
+						if (!dismissedFormattingSelection?.eq(selection)) dismissedFormattingSelection = null;
+						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();
+					emit("update:modelValue", value);
+					emit("update", value);
 				}
-				if (linkContextEditing.value && instance.state.selection.from !== linkSelection?.from) linkContextEditing.value = false;
-			},
-			onTransaction: () => {
+			}, Editor$1);
+			session.subscribe(() => {
 				editorStateVersion.value += 1;
-			},
-			onUpdate: ({ editor: instance }) => {
-				const value = instance.getJSON();
-				emit("update:modelValue", value);
-				emit("update", value);
-			}
+			});
+			editor.value = session.editor;
+		});
+		const attachDocument = (element) => {
+			if (element instanceof HTMLElement) session?.attach(element);
+		};
+		onBeforeUnmount(() => {
+			const element = session?.editor.options.element;
+			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			session?.destroy();
 		});
 		watch(() => {
 			editorStateVersion.value;
@@ -2404,7 +3054,7 @@ var LoomaEditor = defineComponent({
 				}).catch(() => {});
 			}
 			nextTick(() => {
-				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to) });
+				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();
 			});
 		};
@@ -2473,6 +3123,7 @@ var LoomaEditor = defineComponent({
 			const selection = linkSelection;
 			if (restoreFocus && selection) editor.value?.chain().focus().setTextSelection(selection.to).run();
 			dismissedFormattingSelection = editor.value?.state.selection ?? null;
+			heldFormattingSelection = null;
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
@@ -2752,7 +3403,7 @@ var LoomaEditor = defineComponent({
 			tablePickerOpen,
 			formatOpen
 		], ([link, table, format]) => {
-			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.popper.contains(document.activeElement)) return;
+			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 		});
@@ -2773,31 +3424,9 @@ var LoomaEditor = defineComponent({
 		});
 		watch(() => props.modelValue, (value) => {
 			const instance = editor.value;
-			if (!instance || sameDocument(instance.getJSON(), value)) return;
+			if (!instance || !session) return;
 			const wasFocused = instance.isFocused;
-			const previousSelection = lastFocusedSelection ?? {
-				bookmark: instance.view.state.selection.getBookmark(),
-				from: instance.view.state.selection.from,
-				to: instance.view.state.selection.to,
-				text: instance.view.state.selection instanceof TextSelection
-			};
-			if (!wasFocused) {
-				instance.commands.setContent(value, false);
-				return;
-			}
-			instance.chain().setContent(value, false).command(({ tr }) => {
-				try {
-					tr.setSelection(previousSelection.text ? TextSelection.create(tr.doc, previousSelection.from, previousSelection.to) : previousSelection.bookmark.resolve(tr.doc));
-				} catch {
-					const max = tr.doc.content.size;
-					const from = Math.max(1, Math.min(previousSelection.from, max));
-					const to = Math.max(from, Math.min(previousSelection.to, max));
-					tr.setSelection(TextSelection.create(tr.doc, from, to));
-				}
-				return true;
-			}).run();
-			instance.view.focus();
-			rememberSelection(instance);
+			if (session.setContent(value, lastFocusedSelection) && wasFocused) rememberSelection(instance);
 		}, { deep: true });
 		const closeTableUi = () => {
 			tableUi.toolbarOpen = false;
@@ -2956,7 +3585,7 @@ var LoomaEditor = defineComponent({
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused && !mobileToolbarShell.value?.contains(document.activeElement)) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) heldFormattingSelection = null;
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -3011,44 +3640,6 @@ var LoomaEditor = defineComponent({
 		const tableToolbarRef = popupRef(tableToolbarShell);
 		const codeLanguageRef = popupRef(codeLanguageShell, true);
 		const mobileToolbarRef = popupRef(mobileToolbarShell, true);
-		const tippyPresentations = /* @__PURE__ */ new WeakMap();
-		const floatingTippyOptions = (placement, boundary = null) => ({
-			appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-			popperOptions: {
-				strategy: "fixed",
-				modifiers: [{
-					name: "eventListeners",
-					enabled: false
-				}, ...boundary ? [{
-					name: "flip",
-					options: { boundary }
-				}, {
-					name: "preventOverflow",
-					options: {
-						boundary,
-						altAxis: true
-					}
-				}] : []]
-			},
-			onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
-			onMount: (instance) => {
-				let presentation = tippyPresentations.get(instance.popper);
-				if (!presentation) {
-					presentation = createViewportSurface(instance.popper, {
-						bare: true,
-						position: () => {
-							instance.popperInstance?.update();
-						}
-					});
-					tippyPresentations.set(instance.popper, presentation);
-				}
-				presentation.show();
-			},
-			onHidden: (instance) => tippyPresentations.get(instance.popper)?.hide(),
-			onDestroy: (instance) => tippyPresentations.get(instance.popper)?.destroy(),
-			duration: 100,
-			placement
-		});
 		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)));
@@ -3076,7 +3667,7 @@ var LoomaEditor = defineComponent({
 				if (!heldPress || !floatingFormattingMode() || tableResizeActive || !props.editable || !instance.isFocused || slash.active || mention.active || !(selection instanceof TextSelection)) return;
 				dismissedFormattingSelection = null;
 				heldFormattingSelection = selection;
-				formattingPopup?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, selection.from, selection.to) });
+				formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
 				formattingPopup?.show();
 			}, 500);
 		};
@@ -3088,7 +3679,11 @@ var LoomaEditor = defineComponent({
 		};
 		const onFormattingKeyDown = (event) => {
 			cancelHeldPress();
-			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target) || linkPopup?.popper.contains(event.target)) || !(formatOpen.value || formattingPopup?.popper.style.visibility === "visible" || linkPopup?.popper.style.visibility === "visible")) return false;
+			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.element.contains(event.target) || linkPopup?.element.contains(event.target)) || !(formatOpen.value || formattingPopup?.isOpen() || linkPopup?.isOpen())) return false;
+			dismissFormatting();
+			return true;
+		};
+		const dismissFormatting = () => {
 			const selection = editor.value?.state.selection;
 			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
@@ -3096,8 +3691,57 @@ var LoomaEditor = defineComponent({
 			formattingPopup?.hide();
 			linkPopup?.hide();
 			hideTool();
-			return true;
 		};
+		const surfaceRef = (assign, options) => {
+			let current = null;
+			return (node) => {
+				const element = node instanceof HTMLElement ? node : null;
+				if (current?.element === element) return;
+				current?.destroy();
+				current = element && editor.value ? createSelectionSurface(options(element, editor.value)) : null;
+				assign(current);
+			};
+		};
+		const editorRoot = () => root.value ? [root.value] : [];
+		const formattingSurfaceRef = surfaceRef((surface) => {
+			formattingPopup = surface;
+		}, (element, instance) => ({
+			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),
+			boundary: () => props.toolbarMode === "contextual" ? root.value : null,
+			related: editorRoot,
+			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
+			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : formattingPopup?.hide()
+		}));
+		const linkSurfaceRef = surfaceRef((surface) => {
+			linkPopup = surface;
+		}, (element, instance) => ({
+			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)),
+			maxWidth: () => Math.min(480, window.innerWidth - 24),
+			related: editorRoot,
+			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
+		}));
+		const imageSurfaceRef = surfaceRef((surface) => {
+			imagePopup = surface;
+		}, (element, instance) => ({
+			editor: instance,
+			element,
+			pluginKey: "looma-image-actions",
+			updateDelay: 250,
+			shouldShow: ({ editor: menuEditor }) => menuEditor.isEditable && menuEditor.state.selection instanceof NodeSelection && menuEditor.state.selection.node.type.name === "image",
+			anchor: () => {
+				const dom = instance.view.nodeDOM(instance.state.selection.from);
+				return (dom instanceof Element ? dom.querySelector("img") ?? dom : instance.view.dom).getBoundingClientRect();
+			},
+			maxWidth: () => window.innerWidth - 24,
+			related: editorRoot,
+			onDismiss: () => imagePopup?.hide()
+		}));
 		const onResizePointerDown = (event) => {
 			tableResizeActive = event.target instanceof HTMLElement && event.target.classList.contains("column-resize-handle");
 		};
@@ -3639,47 +4283,16 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				h(Stack, {
-					key: "looma-formatting-popup-host",
-					gap: "none"
-				}, () => [instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-text-formatting-menu",
-					updateDelay: 0,
-					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?.popper.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
-					tippyOptions: {
-						...floatingTippyOptions("top", props.toolbarMode === "contextual" ? root.value : null),
-						maxWidth: "none",
-						onCreate: (popup) => {
-							formattingPopup = popup;
-						},
-						onDestroy: (popup) => {
-							formattingPopup = null;
-							tippyPresentations.get(popup.popper)?.destroy();
-						},
-						onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0
-					}
-				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null]),
-				h(Stack, {
-					key: "looma-link-popup-host",
-					gap: "none"
-				}, () => [instance && props.editable ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-link-context-menu",
-					updateDelay: 0,
-					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkContextEditing.value || linkPopup?.popper.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
-					tippyOptions: {
-						...floatingTippyOptions("top"),
-						maxWidth: Math.min(480, window.innerWidth - 24),
-						onCreate: (popup) => {
-							linkPopup = popup;
-						},
-						onDestroy: (popup) => {
-							linkPopup = null;
-							tippyPresentations.get(popup.popper)?.destroy();
-						}
-					}
-				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null]),
+				instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h("div", { key: "looma-formatting-host" }, [h("div", {
+					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,
+				instance && props.editable ? h("div", { key: "looma-link-host" }, [h("div", {
+					ref: linkSurfaceRef,
+					class: "looma-editor__floating-shell looma-editor__link-shell",
+					hidden: true
+				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance)])]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -3695,22 +4308,12 @@ var LoomaEditor = defineComponent({
 					role: "toolbar",
 					"aria-label": "Editor tools"
 				}, [renderToolbar(instance, false)]) : null,
-				instance && props.editable ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-image-actions",
-					shouldShow: ({ editor: menuEditor }) => menuEditor.isEditable && menuEditor.state.selection instanceof NodeSelection && menuEditor.state.selection.node.type.name === "image",
-					tippyOptions: {
-						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-						placement: "top",
-						duration: 100,
-						maxWidth: window.innerWidth - 24,
-						getReferenceClientRect: () => {
-							const dom = instance.view.nodeDOM(instance.state.selection.from);
-							return (dom instanceof Element ? dom.querySelector("img") ?? dom : instance.view.dom).getBoundingClientRect();
-						}
-					}
-				}, { default: () => h(ImageControls, { editor: instance }) }) : null,
-				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h(EditorContent, { editor: instance })) : null,
+				instance && props.editable ? h("div", { key: "looma-image-host" }, [h("div", {
+					ref: imageSurfaceRef,
+					class: "looma-editor__floating-shell looma-editor__image-shell",
+					hidden: true
+				}, [h(ImageControls, { editor: instance })])]) : null,
+				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h("div", { ref: attachDocument })) : null,
 				codeUi.open ? h("div", {
 					ref: codeLanguageRef,
 					class: "looma-editor__code-language",