@threadlabs/looma 0.28.12 → 0.28.14

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",

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -349,6 +349,20 @@ export interface Readable<T> {
   readonly value: T
 }
 
+/** Vue refs a component invocation as its public instance; the ref is the root element it lowered to. */
+function refElement(ref: any): Element {
+  return ref == null || ref.nodeType === 1 ? ref : ref.$el
+}
+
+/** The root ref as an element: a delegating component's root ref holds the invoked component. */
+function rootElement<T extends Element>(root: Readable<T | null>): Readable<T | null> {
+  return {
+    get value() {
+      return refElement(root.value) as T | null
+    },
+  }
+}
+
 type DocumentMutationSubscriber = (mutations: readonly MutationRecord[]) => void
 interface DocumentMutationHub {
   readonly observer: MutationObserver
@@ -391,10 +405,11 @@ function observeConnection(element: Element, check: () => void): () => void {
  * reinserted outside Vue.
  */
 export function useLifecycle(
-  root: Readable<Element | null>,
+  componentRoot: Readable<Element | null>,
   connect?: () => void,
   disconnect?: () => void,
 ): void {
+  const root = rootElement(componentRoot)
   let connected = false
   let stop: (() => void) | undefined
   const synchronize = (): void => {
@@ -416,7 +431,8 @@ export function useLifecycle(
 }
 
 /** Keep native focus on the corresponding control when a root-level $match replaces its element. */
-export function preserveRootFocus(root: Readable<Element | null>): void {
+export function preserveRootFocus(componentRoot: Readable<Element | null>): void {
+  const root = rootElement(componentRoot)
   const focusable =
     'a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]'
   let previous: Element | null = null
@@ -496,8 +512,8 @@ export function useComponentHost(
   controllerLoader: () => Promise<unknown>,
   options: ComponentHostOptions,
 ) {
+  const root = rootElement(options.root)
   const {
-    root,
     dispatch,
     props,
     propInputs = () => null,
@@ -634,7 +650,10 @@ export function useComponentHost(
       Object.fromEntries(
         Object.entries(refs).map(([name, ref]) => [name, {
           enumerable: true,
-          get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : (ref.value as Element),
+          get: () =>
+            Array.isArray(ref.value)
+              ? inDocumentOrder(ref.value.map(refElement))
+              : refElement(ref.value),
         }]),
       ),
     ) as Readonly<Record<string, Element | readonly Element[]>>,
@@ -819,10 +838,11 @@ export function runFilteredEvent(
 
 /** Reports declared CustomEvents to Vue and dispatches them through the DOM. */
 export function createDispatch(
-  root: Readable<HTMLElement | null>,
+  componentRoot: Readable<HTMLElement | null>,
   emit?: (name: string, detail: unknown) => void,
   options: DispatchOptions = {},
 ): (name: string, detail?: unknown, targets?: unknown) => boolean {
+  const root = rootElement(componentRoot)
   const { declared = {}, checks = {}, modeled = [] } = options
   // One change can be reported by more than one event — a choice is both a select and a change —
   // and each carries the new value. The prop updates once per change: a value already reported in