@threadlabs/looma 0.28.12 → 0.28.13

package/editor/formatting-selection.d.ts

@@ -0,0 +1,49 @@
+import type { Editor } from "@tiptap/core";
+import { TextSelection, type Selection } from "@tiptap/pm/state";
+export interface LoomaFormattingSelectionOptions {
+    editor: Editor;
+    /** Whether a press held on the text may open the tools: floating tools, an editable document, no resize in progress. */
+    canHold: () => boolean;
+    /** Whether a slash or mention menu is open, which a completed hold leaves alone. */
+    menuOpen: () => boolean;
+    /** Whether something other than a selection, such as a range action at the caret, shows the tools. */
+    shownAtCaret: () => boolean;
+    /** Opens the tools at the caret a press was held on. */
+    onHold: (selection: TextSelection) => void;
+}
+/**
+ * Which selection the editor's floating formatting tools belong to: a text selection, a caret the
+ * reader pressed and held, never one the reader dismissed with Escape.
+ *
+ * @ownership The host owns the tools' surface and the document listeners that feed `press`; this
+ * owns the dismissed and held selections and the hold gesture's timer.
+ * @lifecycle `destroy()` cancels a pending hold.
+ */
+export interface LoomaFormattingSelection {
+    /** Whether the current selection shows the tools. */
+    active(): boolean;
+    /** Whether `selection` is the one the reader dismissed. */
+    dismissed(selection: Selection): boolean;
+    /**
+     * Hides the tools for the current selection, or for `selection`, until the reader selects again.
+     * Without an argument only a text or whole-document selection is remembered.
+     */
+    dismiss(selection?: Selection | null): void;
+    /** Forgets a dismissal, as when the reader clicks a link. */
+    undismiss(): void;
+    /** Forgets a held caret. */
+    release(): void;
+    /** Forgets a dismissed or held selection that no longer matches the editor's. */
+    selectionChanged(): void;
+    /** Feeds the hold gesture: a still press for half a second on the text opens the tools at its caret. */
+    readonly press: {
+        down(event: PointerEvent): void;
+        move(event: PointerEvent): void;
+        end(event: PointerEvent): void;
+        cancel(): void;
+        /** A viewport change after the press began cancels it; the shared pass may report one from before. */
+        viewportChanged(event?: Event): void;
+    };
+    destroy(): void;
+}
+export declare function createFormattingSelection(options: LoomaFormattingSelectionOptions): LoomaFormattingSelection;

package/package.json

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

package/vue/editor/index.js

@@ -1131,6 +1131,76 @@ function runBlockAction(editor, action) {
 	return true;
 }
 //#endregion
+//#region src/editor/formatting-selection.ts
+var HOLD_MS = 500;
+var HOLD_SLOP_PX = 8;
+function createFormattingSelection(options) {
+	const { editor } = options;
+	let dismissedSelection = null;
+	let heldSelection = null;
+	let held = null;
+	let timer;
+	const cancel = () => {
+		clearTimeout(timer);
+		timer = void 0;
+		held = null;
+	};
+	return {
+		active() {
+			const selection = editor.state.selection;
+			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(editor.state.doc.textContent)) && !dismissedSelection?.eq(selection) && (!selection.empty || Boolean(heldSelection?.eq(selection)) || options.shownAtCaret());
+		},
+		dismissed: (selection) => Boolean(dismissedSelection?.eq(selection)),
+		dismiss(selection) {
+			const current = editor.state.selection;
+			dismissedSelection = selection !== void 0 ? selection : current instanceof TextSelection || current instanceof AllSelection ? current : null;
+			heldSelection = null;
+		},
+		undismiss() {
+			dismissedSelection = null;
+		},
+		release() {
+			heldSelection = null;
+		},
+		selectionChanged() {
+			const selection = editor.state.selection;
+			if (!dismissedSelection?.eq(selection)) dismissedSelection = null;
+			if (!heldSelection?.eq(selection)) heldSelection = null;
+		},
+		press: {
+			down(event) {
+				cancel();
+				if (!options.canHold() || editor.isDestroyed || event.button !== 0 || !event.isPrimary || !(event.target instanceof Element) || !editor.view.dom.contains(event.target) || event.target.closest("button, input, select, textarea, [data-looma-image-node]")) return;
+				held = {
+					id: event.pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					time: event.timeStamp
+				};
+				timer = setTimeout(() => {
+					timer = void 0;
+					const selection = editor.state.selection;
+					if (!held || !options.canHold() || !editor.isFocused || options.menuOpen() || !(selection instanceof TextSelection)) return;
+					dismissedSelection = null;
+					heldSelection = selection;
+					options.onHold(selection);
+				}, HOLD_MS);
+			},
+			move(event) {
+				if (held?.id === event.pointerId && Math.hypot(event.clientX - held.x, event.clientY - held.y) > HOLD_SLOP_PX) cancel();
+			},
+			end(event) {
+				if (held?.id === event.pointerId) cancel();
+			},
+			cancel,
+			viewportChanged(event) {
+				if (!event || !held || event.timeStamp >= held.time) cancel();
+			}
+		},
+		destroy: cancel
+	};
+}
+//#endregion
 //#region src/editor/table-overlay.ts
 function mapTableCells(table) {
 	const rows = Array.from(table.rows);
@@ -2908,29 +2978,18 @@ var LoomaEditor = defineComponent({
 		const mobileToolbarStyle = ref({});
 		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
 		const editorFocused = ref(false);
-		let dismissedFormattingSelection = null;
-		let heldFormattingSelection = null;
+		let formatting;
 		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;
 		const formattingPickerOpen = () => linkState.value.surface === "popover" || tablePickerOpen.value || formatOpen.value;
-		const cancelHeldPress = () => {
-			clearTimeout(heldPressTimer);
-			heldPressTimer = void 0;
-			heldPress = null;
-		};
 		const activeRangeActions = (instance) => {
 			const selection = instance.state.selection;
 			if (!(selection instanceof TextSelection) || !selection.empty) return [];
 			return props.rangeActions.filter((action) => Number.isSafeInteger(action.from) && Number.isSafeInteger(action.to) && action.from >= 0 && action.to > action.from && action.to <= instance.state.doc.content.size && action.from <= selection.from && selection.from <= action.to);
 		};
-		const formattingSelectionActive = (instance) => {
-			const selection = instance.state.selection;
-			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(instance.state.doc.textContent)) && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)) || activeRangeActions(instance).length > 0);
-		};
+		const formattingActive = () => formatting?.active() ?? false;
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
 		let dragLeaveTimer = null;
@@ -3100,7 +3159,7 @@ var LoomaEditor = defineComponent({
 							window.open(href, "_blank", "noopener,noreferrer");
 							return true;
 						}
-						dismissedFormattingSelection = null;
+						formatting?.undismiss();
 						requestAnimationFrame(() => {
 							if (view.isDestroyed) return;
 							editorStateVersion.value += 1;
@@ -3123,10 +3182,9 @@ var LoomaEditor = defineComponent({
 				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();
+						instance.state.selection;
+						formatting?.selectionChanged();
+						if (!formattingActive()) formattingPopup?.hide();
 					}
 				},
 				onUpdate: ({ editor: instance }) => {
@@ -3149,6 +3207,17 @@ var LoomaEditor = defineComponent({
 				linkState.value = engine.state;
 			});
 			linkEditing = engine;
+			const instance = session.editor;
+			formatting = createFormattingSelection({
+				editor: instance,
+				canHold: () => floatingFormattingMode() && !tableResizeActive && props.editable,
+				menuOpen: () => slash.active || mention.active,
+				shownAtCaret: () => activeRangeActions(instance).length > 0,
+				onHold: (selection) => {
+					formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
+					formattingPopup?.show();
+				}
+			});
 		});
 		const attachDocument = (element) => {
 			if (element instanceof HTMLElement) session?.attach(element);
@@ -3170,7 +3239,7 @@ var LoomaEditor = defineComponent({
 			const to = selection?.to ?? current.to;
 			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));
+				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive() ? formattingPopup : linkPopup)?.setAnchor(() => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to));
 				(linkState.value.mode === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
 			});
 		};
@@ -3178,8 +3247,7 @@ var LoomaEditor = defineComponent({
 			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;
+			formatting?.dismiss(editor.value?.state.selection ?? null);
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
@@ -3248,8 +3316,8 @@ var LoomaEditor = defineComponent({
 			editor.value?.commands.dismissLoomaSlashMenu();
 		});
 		watch(() => props.editable, (editable) => {
-			cancelHeldPress();
-			heldFormattingSelection = null;
+			formatting?.press.cancel();
+			formatting?.release();
 			editor.value?.setEditable(editable);
 			if (!editable) formattingPopup?.hide();
 			if (editor.value) imageDelivery.reset(editor.value);
@@ -3264,7 +3332,7 @@ var LoomaEditor = defineComponent({
 			formatOpen
 		], ([linking, table, format]) => {
 			if (linking || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
-			heldFormattingSelection = null;
+			formatting?.release();
 			formattingPopup?.hide();
 		});
 		watch(() => props.rangeActions, () => {
@@ -3440,12 +3508,12 @@ var LoomaEditor = defineComponent({
 			updateMobileViewport();
 		};
 		const onEditorBlur = () => {
-			cancelHeldPress();
+			formatting?.press.cancel();
 			queueMicrotask(updateTableUi);
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused && !mobileToolbarShell.value?.contains(document.activeElement)) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) formatting?.release();
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -3471,15 +3539,15 @@ 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;
-			if (!event || !heldPress || event.timeStamp >= heldPress.time) cancelHeldPress();
+			formatting?.press.viewportChanged(event);
 			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;
+			if (wasMobile !== mobile.value) formatting?.release();
 			updateTableUi();
 			updateCodeUi();
-			if (floatingFormattingMode() && editor.value && !formattingSelectionActive(editor.value)) formattingPopup?.hide();
+			if (floatingFormattingMode() && editor.value && !formattingActive()) formattingPopup?.hide();
 			tableUi.menuOpen = false;
 		};
 		let stopViewport;
@@ -3516,42 +3584,17 @@ var LoomaEditor = defineComponent({
 			}, 0);
 			if ((tableUi.toolbarOpen || tableUi.overlayOpen || tableUi.menuOpen) && !inElement(root.value) && !inTableUi) closeTableUi();
 		};
-		const onFormattingPointerDown = (event) => {
-			cancelHeldPress();
-			const instance = editor.value;
-			if (!floatingFormattingMode() || tableResizeActive || !props.editable || !instance || event.button !== 0 || !event.isPrimary || !(event.target instanceof Element) || !instance.view.dom.contains(event.target) || event.target.closest("button, input, select, textarea, [data-looma-image-node]")) return;
-			heldPress = {
-				id: event.pointerId,
-				x: event.clientX,
-				y: event.clientY,
-				time: event.timeStamp
-			};
-			heldPressTimer = setTimeout(() => {
-				heldPressTimer = void 0;
-				const selection = instance.state.selection;
-				if (!heldPress || !floatingFormattingMode() || tableResizeActive || !props.editable || !instance.isFocused || slash.active || mention.active || !(selection instanceof TextSelection)) return;
-				dismissedFormattingSelection = null;
-				heldFormattingSelection = selection;
-				formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
-				formattingPopup?.show();
-			}, 500);
-		};
-		const onFormattingPointerMove = (event) => {
-			if (heldPress?.id === event.pointerId && Math.hypot(event.clientX - heldPress.x, event.clientY - heldPress.y) > 8) cancelHeldPress();
-		};
-		const onFormattingPointerEnd = (event) => {
-			if (heldPress?.id === event.pointerId) cancelHeldPress();
-		};
+		const onFormattingPointerDown = (event) => formatting?.press.down(event);
+		const onFormattingPointerMove = (event) => formatting?.press.move(event);
+		const onFormattingPointerEnd = (event) => formatting?.press.end(event);
 		const onFormattingKeyDown = (event) => {
-			cancelHeldPress();
+			formatting?.press.cancel();
 			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;
+			formatting?.dismiss();
 			formatOpen.value = false;
 			formattingPopup?.hide();
 			linkPopup?.hide();
@@ -3574,10 +3617,10 @@ 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) || linkState.value.surface === "context" || 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()) && formattingActive(),
 			boundary: () => props.toolbarMode === "contextual" ? root.value : null,
 			related: editorRoot,
-			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
+			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingActive() ? false : void 0,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : formattingPopup?.hide()
 		}));
 		const linkSurfaceRef = surfaceRef((surface) => {
@@ -3586,7 +3629,7 @@ var LoomaEditor = defineComponent({
 			editor: instance,
 			element,
 			pluginKey: "looma-link-context-menu",
-			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)),
+			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && linkState.value.surface !== "popover" && !formatting?.dismissed(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive()),
 			maxWidth: () => Math.min(480, window.innerWidth - 24),
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
@@ -3753,7 +3796,7 @@ var LoomaEditor = defineComponent({
 			window.removeEventListener("keyup", onLinkNavigationModifier);
 			window.removeEventListener("pointermove", onLinkNavigationModifier);
 			window.removeEventListener("blur", clearLinkNavigationModifier);
-			cancelHeldPress();
+			formatting?.destroy();
 			formattingPopup = null;
 			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
 			document.removeEventListener("pointerdown", onFormattingPointerDown);
@@ -4183,12 +4226,12 @@ 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), (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,
+				}, [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" && formattingActive() ? 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,
+				}, [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",
 					role: "region",