@threadlabs/looma 0.26.26 → 0.27.0

package/vue/editor/index.js

@@ -28,6 +28,152 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 function announceOverlayOpen(document, id) {
 	document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
 }
+function topLayerOpen(surface) {
+	try {
+		return surface.matches(":popover-open");
+	} catch {
+		return !surface.hidden;
+	}
+}
+function show(surface) {
+	surface.setAttribute("popover", "manual");
+	surface.hidden = false;
+	if (typeof surface.showPopover === "function" && !topLayerOpen(surface)) try {
+		surface.showPopover();
+	} catch {}
+}
+function hide(surface) {
+	if (typeof surface.hidePopover === "function" && topLayerOpen(surface)) try {
+		surface.hidePopover();
+	} catch {}
+	surface.hidden = true;
+}
+/**
+* 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.
+* Each subscriber rereads its own live anchor and applies its viewport containment policy.
+*/
+function observeOverlayViewport(document, update) {
+	const key = Symbol.for("@threadlabs/looma/overlay-viewport/v1");
+	const owner = document.defaultView;
+	let state = document[key];
+	if (!state) {
+		state = {
+			clients: /* @__PURE__ */ new Set(),
+			pending: /* @__PURE__ */ new Map(),
+			frame: null,
+			abort: null
+		};
+		Object.defineProperty(document, key, { value: state });
+	}
+	const schedule = (event) => {
+		for (const client of state.clients) state.pending.set(client, event);
+		if (state.frame !== null) return;
+		state.frame = owner.requestAnimationFrame(() => {
+			state.frame = null;
+			const pending = Array.from(state.pending);
+			state.pending.clear();
+			for (const [client, event] of pending) if (state.clients.has(client)) client(event);
+		});
+	};
+	state.clients.add(update);
+	if (!state.abort) {
+		state.abort = new owner.AbortController();
+		const signal = state.abort.signal;
+		owner.addEventListener("resize", schedule, {
+			passive: true,
+			signal
+		});
+		owner.addEventListener("scroll", schedule, {
+			passive: true,
+			capture: true,
+			signal
+		});
+		owner.visualViewport?.addEventListener("resize", schedule, {
+			passive: true,
+			signal
+		});
+		owner.visualViewport?.addEventListener("scroll", schedule, {
+			passive: true,
+			signal
+		});
+	}
+	return () => {
+		state.clients.delete(update);
+		state.pending.delete(update);
+		if (state.clients.size) return;
+		state.abort?.abort();
+		state.abort = null;
+		if (state.frame !== null) owner.cancelAnimationFrame(state.frame);
+		state.frame = null;
+	};
+}
+/** Presents an unanchored or virtual-anchor surface in the top layer, using the shared viewport pass. */
+function createViewportSurface(surface, options = {}) {
+	const owner = surface.ownerDocument.defaultView;
+	let destroyed = false;
+	let stop = null;
+	let sizeObserver = null;
+	let frame = null;
+	const position = () => {
+		frame = null;
+		if (stop) options.position?.();
+	};
+	const refresh = () => {
+		if (stop && frame === null) frame = owner.requestAnimationFrame(position);
+	};
+	const chrome = options.preserveChrome ? owner.getComputedStyle(surface) : null;
+	const absentBorders = chrome ? [
+		"Top",
+		"Right",
+		"Bottom",
+		"Left"
+	].filter((side) => chrome[`border${side}Width`] === "0px") : [];
+	surface.setAttribute("popover", "manual");
+	if (options.bare) {
+		Object.assign(surface.style, {
+			position: "fixed",
+			margin: "0",
+			top: surface.style.top || "auto",
+			right: surface.style.right || "auto",
+			bottom: surface.style.bottom || "auto",
+			left: surface.style.left || "auto"
+		});
+		if (chrome) for (const side of absentBorders) surface.style[`border${side}Width`] = "0";
+		else Object.assign(surface.style, {
+			padding: "0",
+			border: "0",
+			background: "transparent"
+		});
+	}
+	const hideSurface = () => {
+		stop?.();
+		stop = null;
+		sizeObserver?.disconnect();
+		sizeObserver = null;
+		if (frame !== null) owner.cancelAnimationFrame(frame);
+		frame = null;
+		hide(surface);
+	};
+	return {
+		show() {
+			if (destroyed) return;
+			show(surface);
+			stop ??= observeOverlayViewport(surface.ownerDocument, position);
+			options.position?.();
+			if (!sizeObserver && owner.ResizeObserver) {
+				sizeObserver = new owner.ResizeObserver(refresh);
+				sizeObserver.observe(surface);
+			}
+		},
+		hide: hideSurface,
+		refresh,
+		destroy() {
+			destroyed = true;
+			hideSurface();
+		}
+	};
+}
 //#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
 /**
@@ -2761,8 +2907,10 @@ var LoomaEditor = defineComponent({
 		}, { immediate: true });
 		const onViewportChange = (event) => {
 			if (event?.type === "scroll" && event.target instanceof Node && (tableToolbarShell.value?.contains(event.target) || tableMenuShell.value?.contains(event.target))) return;
-			cancelHeldPress();
+			if (!event || !heldPress || event.timeStamp >= heldPress.time) cancelHeldPress();
 			const wasMobile = mobile.value;
+			if (slash.active && slash.getRect) slash.rect = slash.getRect();
+			if (mention.active && mention.getRect) mention.rect = mention.getRect();
 			updateMobileViewport();
 			if (wasMobile !== mobile.value) heldFormattingSelection = null;
 			updateTableUi();
@@ -2770,6 +2918,62 @@ var LoomaEditor = defineComponent({
 			if (floatingFormattingMode() && editor.value && !formattingSelectionActive(editor.value)) formattingPopup?.hide();
 			tableUi.menuOpen = false;
 		};
+		let stopViewport;
+		const popupRef = (target, preserveChrome = false) => {
+			let presentation;
+			return (node) => {
+				const element = node instanceof HTMLElement ? node : null;
+				if (target.value === element) return;
+				presentation?.destroy();
+				target.value = element;
+				presentation = element ? createViewportSurface(element, {
+					bare: true,
+					preserveChrome
+				}) : void 0;
+				presentation?.show();
+			};
+		};
+		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)));
@@ -2788,7 +2992,8 @@ var LoomaEditor = defineComponent({
 			heldPress = {
 				id: event.pointerId,
 				x: event.clientX,
-				y: event.clientY
+				y: event.clientY,
+				time: event.timeStamp
 			};
 			heldPressTimer = setTimeout(() => {
 				heldPressTimer = void 0;
@@ -2911,10 +3116,7 @@ var LoomaEditor = defineComponent({
 			window.addEventListener("pointermove", onLinkNavigationModifier);
 			window.addEventListener("blur", clearLinkNavigationModifier);
 			updateMobileViewport();
-			window.addEventListener("resize", onViewportChange);
-			window.addEventListener("scroll", onViewportChange, true);
-			window.visualViewport?.addEventListener("resize", onViewportChange);
-			window.visualViewport?.addEventListener("scroll", onViewportChange);
+			stopViewport = observeOverlayViewport(document, onViewportChange);
 			document.addEventListener("pointerdown", onDocumentPointerDown, true);
 			document.addEventListener("pointerdown", onFormattingPointerDown);
 			document.addEventListener("pointermove", onFormattingPointerMove);
@@ -2926,14 +3128,11 @@ var LoomaEditor = defineComponent({
 			root.value?.addEventListener("error", onImageError, true);
 		});
 		onBeforeUnmount(() => {
+			stopViewport?.();
 			window.removeEventListener("keydown", onLinkNavigationModifier);
 			window.removeEventListener("keyup", onLinkNavigationModifier);
 			window.removeEventListener("pointermove", onLinkNavigationModifier);
 			window.removeEventListener("blur", clearLinkNavigationModifier);
-			window.removeEventListener("resize", onViewportChange);
-			window.removeEventListener("scroll", onViewportChange, true);
-			window.visualViewport?.removeEventListener("resize", onViewportChange);
-			window.visualViewport?.removeEventListener("scroll", onViewportChange);
 			cancelHeldPress();
 			formattingPopup = null;
 			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
@@ -3374,28 +3573,16 @@ var LoomaEditor = defineComponent({
 					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: () => {
+						onDestroy: (popup) => {
 							formattingPopup = null;
+							tippyPresentations.get(popup.popper)?.destroy();
 						},
-						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
-						onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
-						duration: 100,
-						maxWidth: "none",
-						placement: "top",
-						...props.toolbarMode === "contextual" && root.value ? { popperOptions: { modifiers: [{
-							name: "flip",
-							options: { boundary: root.value }
-						}, {
-							name: "preventOverflow",
-							options: {
-								boundary: root.value,
-								altAxis: true
-							}
-						}] } } : {}
+						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, {
@@ -3407,17 +3594,15 @@ var LoomaEditor = defineComponent({
 					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: () => {
+						onDestroy: (popup) => {
 							linkPopup = null;
-						},
-						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
-						duration: 100,
-						maxWidth: Math.min(480, window.innerWidth - 24),
-						placement: "top"
+							tippyPresentations.get(popup.popper)?.destroy();
+						}
 					}
 				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null]),
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
@@ -3452,7 +3637,7 @@ var LoomaEditor = defineComponent({
 				}, { default: () => h(ImageControls, { editor: instance }) }) : null,
 				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h(EditorContent, { editor: instance })) : null,
 				codeUi.open ? h("div", {
-					ref: codeLanguageShell,
+					ref: codeLanguageRef,
 					class: "looma-editor__code-language",
 					style: codeUi.style,
 					onFocusout: () => updateCodeUi()
@@ -3466,7 +3651,7 @@ var LoomaEditor = defineComponent({
 					onValueChange: (event) => chooseCodeLanguage(event.detail)
 				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
 				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
-					ref: mobileToolbarShell,
+					ref: mobileToolbarRef,
 					class: "looma-editor__mobile-toolbar-shell",
 					"data-mode": mobileToolbarMode.value,
 					style: mobileToolbarStyle.value,
@@ -3646,7 +3831,7 @@ var LoomaEditor = defineComponent({
 					}
 				}) : null,
 				tableUi.toolbarOpen ? h("div", {
-					ref: tableToolbarShell,
+					ref: tableToolbarRef,
 					class: "looma-editor__table-toolbar-shell",
 					style: tableUi.toolbarStyle
 				}, [h(EditorTableToolbar, tableProps)]) : null,
@@ -3706,11 +3891,11 @@ var LoomaEditor = defineComponent({
 				})]) : null,
 				tableUi.menuOpen ? h("div", {
 					ref: tableMenuShell,
-					class: "looma-editor__table-menu-shell",
-					style: tableUi.menuStyle
+					class: "looma-editor__table-menu-shell"
 				}, [h(EditorTableContextMenu, {
 					...tableProps,
-					scope: tableUi.menuScope
+					scope: tableUi.menuScope,
+					style: tableUi.menuStyle
 				})]) : null
 			]);
 		};