@threadlabs/looma 0.31.1 → 0.31.3

package/vue/editor/index.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
+import { Teleport, computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
 import { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorFootnoteEditor, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, InputRule, Node as Node$1, PasteRule, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
@@ -427,7 +427,8 @@ function createViewportSurface$1(surface, options = {}) {
 		else Object.assign(surface.style, {
 			padding: "0",
 			border: "0",
-			background: "transparent"
+			background: "transparent",
+			overflow: "visible"
 		});
 	}
 	const hideSurface = () => {
@@ -2291,25 +2292,10 @@ function tableControls(state, selectionInTable, narrow) {
 		capabilities: state.capabilities
 	};
 }
-/** Space, in pixels, the toolbar needs above a table; with less it sits below. */
-var ROOM_ABOVE$1 = 76;
-/**
-* Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
-* above the table when there is room and below it otherwise.
-*/
-function tableToolbarPlacement(table, viewportWidth) {
-	const width = Math.min(420, viewportWidth - 24);
-	const left = Math.min(Math.max(12, table.left + (table.width - width) / 2), Math.max(12, viewportWidth - width - 12));
-	return {
-		top: `${table.top > ROOM_ABOVE$1 ? table.top - 52 : table.bottom + 12}px`,
-		left: `${left}px`,
-		maxWidth: `${width}px`
-	};
-}
-/** The overlay covers the table exactly. */
-var tableOverlayPlacement = (table) => ({
-	top: `${table.top}px`,
-	left: `${table.left}px`,
+/** Inline controls cover the table in the editor's coordinate system. */
+var tableOverlayPlacement = (table, editor) => ({
+	top: `${table.top - editor.top}px`,
+	left: `${table.left - editor.left}px`,
 	width: `${table.width}px`,
 	height: `${table.height}px`
 });
@@ -3114,8 +3100,17 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
+//#endregion
+//#region src/components/shared/tooltip.js
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+function tooltipShowDelay$1(element, fallback = 500) {
+	if (!element) return fallback;
+	const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+	const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+	return match ? Number(match[1]) * (match[2] === "s" ? 1e3 : 1) : fallback;
+}
 /** Calls `onChange` after every state change. */
-function createToolbarTooltip(onChange) {
+function createToolbarTooltip(onChange, delay = () => 400) {
 	let state = {
 		for: "",
 		label: "",
@@ -3150,7 +3145,7 @@ function createToolbarTooltip(onChange) {
 			if (!open) timer = setTimeout(() => {
 				timer = void 0;
 				set({ open: true });
-			}, 400);
+			}, delay());
 		},
 		hide() {
 			clear();
@@ -4770,7 +4765,8 @@ function createViewportSurface(surface, options = {}) {
 		else Object.assign(surface.style, {
 			padding: "0",
 			border: "0",
-			background: "transparent"
+			background: "transparent",
+			overflow: "visible"
 		});
 	}
 	const hideSurface = () => {
@@ -8984,6 +8980,14 @@ var S$9 = {
 var D$9 = {
 	g: "ui-popover",
 	props: {
+		"bare": {
+			"required": false,
+			"default": false,
+			c: checkBoolean,
+			t: "boolean",
+			j: 0,
+			m: "b"
+		},
 		"for": {
 			"required": false,
 			"default": "",
@@ -9053,6 +9057,7 @@ function createUiPopover(options = {}, html) {
 		null,
 		null,
 		null,
+		null,
 		null
 	];
 	const B = acceptProps(element, D$9, S$9.n, v, componentProps, [], html);
@@ -9060,8 +9065,16 @@ function createUiPopover(options = {}, html) {
 		return { n: (P1$7 ??= buildTemplate(T1$7)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
-		if (c & 17) {
-			const s0 = hostState(["internalOpen", "size"], [v[0], v[4]]);
+		if (c & 35) {
+			const s0 = hostState([
+				"bare",
+				"internalOpen",
+				"size"
+			], [
+				v[1],
+				v[0],
+				v[5]
+			]);
 			if (s0 !== r.v0) writeAttribute(r.n, "data-ui-popover-state", (r.v0 = s0) === "" ? null : s0);
 		}
 		if (r.f0 === void 0) {
@@ -9097,6 +9110,7 @@ function createUiPopover(options = {}, html) {
 	return element;
 }
 defineComponent$1("ui-popover", createUiPopover, [
+	"bare",
 	"for",
 	"open",
 	"placement",
@@ -10530,6 +10544,15 @@ defineComponent$1("ui-text", createUiText, [
 	"wrap"
 ]);
 //#endregion
+//#region components/shared/tooltip.js
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+function tooltipShowDelay(element, fallback = 500) {
+	if (!element) return fallback;
+	const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+	const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+	return match ? Number(match[1]) * (match[2] === "s" ? 1e3 : 1) : fallback;
+}
+//#endregion
 //#region components/ui-tooltip/ui-tooltip.js
 var ui_tooltip_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$4 });
 var warmTooltips = /* @__PURE__ */ new WeakMap();
@@ -10606,7 +10629,7 @@ function connect$4(host) {
 		showTimer = setTimeout(() => {
 			showTimer = null;
 			setOpen(true, "pointer");
-		}, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.props.showDelay.value ?? 500)));
+		}, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, host.props.showDelay.inputValue != null ? Number(host.props.showDelay.value) : tooltipShowDelay(element)));
 	};
 	const onLeave = () => {
 		clearShow();
@@ -10676,6 +10699,7 @@ function connect$4(host) {
 		if (how === "hover") {
 			trigger.addEventListener("pointerenter", onEnter);
 			trigger.addEventListener("pointerleave", onLeave);
+			if (trigger.matches(":hover")) onEnter({ pointerType: "mouse" });
 		}
 		trigger.addEventListener("focusin", onFocusin);
 		trigger.addEventListener("focusout", onFocusout);
@@ -14758,7 +14782,7 @@ var LoomaEditor = defineComponent({
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const toolbarTooltip = createToolbarTooltip((state) => {
 			tooltip.value = state;
-		});
+		}, () => tooltipShowDelay$1(root.value));
 		const tooltip = shallowRef(toolbarTooltip.state);
 		const resizeHintFor = ref("");
 		let resizeHintSequence = 0;
@@ -14830,7 +14854,7 @@ var LoomaEditor = defineComponent({
 			rows: 0,
 			cols: 0,
 			geometry: null,
-			toolbarStyle: {},
+			toolbarTarget: null,
 			overlayStyle: {},
 			menuStyle: {},
 			capabilities: LOOMA_TABLE_CONTROLS_CLOSED.capabilities
@@ -15362,8 +15386,8 @@ var LoomaEditor = defineComponent({
 			tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
 			tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
 			tableUi.geometry = geometry;
-			tableUi.toolbarStyle = tableToolbarPlacement(rect, window.innerWidth);
-			tableUi.overlayStyle = tableOverlayPlacement(rect);
+			tableUi.toolbarTarget = table.closest("[data-looma-table-block]")?.querySelector("[data-looma-table-toolbar-host]") ?? null;
+			tableUi.overlayStyle = tableOverlayPlacement(rect, root.value.getBoundingClientRect());
 		};
 		const onEditorFocus = () => {
 			editorFocused.value = true;
@@ -15429,13 +15453,10 @@ var LoomaEditor = defineComponent({
 				presentation?.show();
 			};
 		};
-		const tableToolbarRef = popupRef(tableToolbarShell);
 		const codeLanguageRef = popupRef(codeLanguageShell, true);
 		const mobileToolbarRef = popupRef(mobileToolbarShell, true);
-		const presentTableOverlay = popupRef(tableOverlayShell);
 		const tableOverlayRef = (node) => {
-			presentTableOverlay(node);
-			if (node instanceof HTMLElement) node.hidden = !tableUi.overlayOpen;
+			tableOverlayShell.value = node instanceof HTMLElement ? node : null;
 		};
 		const onDocumentPointerDown = (event) => {
 			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
@@ -16048,8 +16069,6 @@ var LoomaEditor = defineComponent({
 			}, [
 				resizeHintFor.value ? h(Tooltip, {
 					for: resizeHintFor.value,
-					open: true,
-					trigger: "focus",
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
@@ -16065,6 +16084,7 @@ var LoomaEditor = defineComponent({
 				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive() ? null : renderLinkContextCard(instance)])]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
+					bare: true,
 					role: "region",
 					"aria-label": "Formatting tools",
 					open: props.toolbarOpen,
@@ -16194,6 +16214,7 @@ var LoomaEditor = defineComponent({
 				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
 					class: "looma-editor__compact-formatting",
 					for: formatAnchorId,
+					bare: true,
 					open: formatOpen.value,
 					placement: "bottom-start",
 					onOpen: () => {
@@ -16263,12 +16284,11 @@ var LoomaEditor = defineComponent({
 						mention.select?.(event.detail.index);
 					}
 				}) : null,
-				tableUi.toolbarOpen ? h("div", {
+				tableUi.toolbarOpen && tableUi.toolbarTarget ? h(Teleport, { to: tableUi.toolbarTarget }, [h("div", {
 					key: "looma-table-toolbar-shell",
-					ref: tableToolbarRef,
-					class: "looma-editor__table-toolbar-shell",
-					style: tableUi.toolbarStyle
-				}, [h(EditorTableToolbar, tableProps)]) : null,
+					ref: tableToolbarShell,
+					class: "looma-editor__table-toolbar-shell"
+				}, [h(EditorTableToolbar, tableProps)])]) : null,
 				instance && props.editable && !mobile.value ? h("div", {
 					key: "looma-table-overlay-shell",
 					ref: tableOverlayRef,