@threadlabs/looma 0.29.2 → 0.29.4

package/editor/host-actions.d.ts

@@ -0,0 +1,47 @@
+import type { EditorState } from "@tiptap/pm/state";
+/** Host-owned non-mutating commands for the selected passage. */
+export interface LoomaEditorSelectionAction {
+    id: string;
+    label: string;
+}
+/** Host action available at a collapsed caret inside an ephemeral editor range. */
+export interface LoomaEditorRangeAction extends LoomaEditorSelectionAction {
+    from: number;
+    to: number;
+}
+/** Matching ranges are grouped into one control for each action ID. */
+export interface LoomaEditorRangeActionDetail {
+    id: string;
+    ranges: {
+        from: number;
+        to: number;
+    }[];
+}
+/** Exact editor range captured before focus leaves for a host action. */
+export interface LoomaEditorSelectionActionDetail {
+    id: string;
+    from: number;
+    to: number;
+    text: string;
+    before: string;
+    after: string;
+}
+/**
+ * The range actions whose range holds the collapsed text caret.
+ * @contract Ranges that are not whole numbers, are empty, or fall outside the document are ignored.
+ */
+export declare function rangeActionsAtCaret(state: EditorState, actions: readonly LoomaEditorRangeAction[]): LoomaEditorRangeAction[];
+/** One control per action ID: its label and each distinct range it covers at the caret, in order. */
+export declare function groupRangeActions(actions: readonly LoomaEditorRangeAction[]): Array<{
+    id: string;
+    label: string;
+    detail: LoomaEditorRangeActionDetail;
+}>;
+/** Whether the selection is a passage that selection actions apply to: nonempty text, or everything. */
+export declare function selectsPassage(state: EditorState): boolean;
+/**
+ * A selection action's detail for the current passage: its range, its text, and up to 48 characters
+ * of context on each side, captured before focus leaves the editor.
+ * @failure Returns null when the selection is empty.
+ */
+export declare function selectionActionDetail(state: EditorState, id: string): LoomaEditorSelectionActionDetail | null;

package/editor/mobile-dock.d.ts

@@ -0,0 +1,29 @@
+import type { ViewportRect } from "./viewport.js";
+/** The widest viewport, in CSS pixels, that gets the editing dock; the slash and mention menus use the same width. */
+export declare const LOOMA_MOBILE_DOCK_MAX_WIDTH = 767;
+/** Whether a viewport this wide gets the editing dock rather than floating tools. */
+export declare const usesMobileDock: (viewportWidth: number) => boolean;
+/**
+ * Where the dock sits: across the visual viewport, against its bottom edge, so an on-screen keyboard
+ * pushes it up. It never rises above the viewport's top.
+ */
+export declare function mobileDockPlacement(viewport: ViewportRect, dockHeight: number): {
+    left: number;
+    top: number;
+    width: number;
+};
+export type LoomaMobileDockMode = "formatting" | "table";
+/**
+ * Which controls the dock shows. A table holding the selection shows its controls, until the author
+ * goes back to formatting; that choice lasts until no table is active.
+ *
+ * @ownership The host reports table activity and renders the mode; this owns the choice.
+ */
+export interface LoomaMobileDock {
+    readonly mode: LoomaMobileDockMode;
+    tableActive(): void;
+    showFormatting(): void;
+    tableInactive(): void;
+}
+/** Calls `onChange` with the new mode whenever it changes. */
+export declare function createMobileDock(onChange: (mode: LoomaMobileDockMode) => void): LoomaMobileDock;

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -6,6 +6,7 @@ import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaCodeLanguages
 import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageSourceResolver, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
 import { type LoomaImageUploadDetail } from "../../editor/image-uploads.js";
 import { type LoomaResponder } from "../../editor/requests.js";
+import { type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail } from "../../editor/host-actions.js";
 import { type LoomaLinkTarget } from "../../editor/link-editing.js";
 export type { LoomaImageUploadDetail } from "../../editor/image-uploads.js";
 export type { LoomaRequestInit, LoomaResponder } from "../../editor/requests.js";
@@ -17,33 +18,7 @@ export type { LoomaRequestInit, LoomaResponder } from "../../editor/requests.js"
  * set. Narrow viewports retain a dock; document commands/content are unchanged.
  */
 export type LoomaEditorToolbarMode = "bubble" | "sticky" | "popover" | "contextual";
-/** Host-owned non-mutating commands for the selected passage. */
-export interface LoomaEditorSelectionAction {
-    id: string;
-    label: string;
-}
-/** Host action available at a collapsed caret inside an ephemeral editor range. */
-export interface LoomaEditorRangeAction extends LoomaEditorSelectionAction {
-    from: number;
-    to: number;
-}
-/** Matching ranges are grouped into one control for each action ID. */
-export interface LoomaEditorRangeActionDetail {
-    id: string;
-    ranges: {
-        from: number;
-        to: number;
-    }[];
-}
-/** Exact editor range captured before focus leaves for a host action. */
-export interface LoomaEditorSelectionActionDetail {
-    id: string;
-    from: number;
-    to: number;
-    text: string;
-    before: string;
-    after: string;
-}
+export type { LoomaEditorRangeAction, LoomaEditorRangeActionDetail, LoomaEditorSelectionAction, LoomaEditorSelectionActionDetail, } from "../../editor/host-actions.js";
 export type { LoomaLinkTarget } from "../../editor/link-editing.js";
 /** The `slash-commands` request's detail: this editor's default commands. */
 export interface LoomaSlashCommandsDetail {

package/vue/editor/index.js

@@ -1751,6 +1751,105 @@ function createChipEditing(options) {
 	};
 }
 //#endregion
+//#region src/editor/host-actions.ts
+/** Characters of context on each side of a selected passage. */
+var CONTEXT = 48;
+/**
+* The range actions whose range holds the collapsed text caret.
+* @contract Ranges that are not whole numbers, are empty, or fall outside the document are ignored.
+*/
+function rangeActionsAtCaret(state, actions) {
+	const selection = state.selection;
+	if (!(selection instanceof TextSelection) || !selection.empty) return [];
+	const size = state.doc.content.size;
+	return actions.filter(({ from, to }) => Number.isSafeInteger(from) && Number.isSafeInteger(to) && from >= 0 && to > from && to <= size && from <= selection.from && selection.from <= to);
+}
+/** One control per action ID: its label and each distinct range it covers at the caret, in order. */
+function groupRangeActions(actions) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const { id, label, from, to } of actions) {
+		const group = groups.get(id) ?? {
+			label,
+			ranges: /* @__PURE__ */ new Map()
+		};
+		group.ranges.set(`${from}:${to}`, {
+			from,
+			to
+		});
+		groups.set(id, group);
+	}
+	return [...groups].map(([id, { label, ranges }]) => ({
+		id,
+		label,
+		detail: {
+			id,
+			ranges: [...ranges.values()]
+		}
+	}));
+}
+/** Whether the selection is a passage that selection actions apply to: nonempty text, or everything. */
+function selectsPassage(state) {
+	const selection = state.selection;
+	return !selection.empty && (selection instanceof TextSelection || selection instanceof AllSelection);
+}
+/**
+* A selection action's detail for the current passage: its range, its text, and up to 48 characters
+* of context on each side, captured before focus leaves the editor.
+* @failure Returns null when the selection is empty.
+*/
+function selectionActionDetail(state, id) {
+	const { from, to } = state.selection;
+	if (from === to) return null;
+	const doc = state.doc;
+	return {
+		id,
+		from,
+		to,
+		text: doc.textBetween(from, to, "\n"),
+		before: doc.textBetween(Math.max(0, from - CONTEXT), from, "\n"),
+		after: doc.textBetween(to, Math.min(doc.content.size, to + CONTEXT), "\n")
+	};
+}
+/** Whether a viewport this wide gets the editing dock rather than floating tools. */
+var usesMobileDock = (viewportWidth) => viewportWidth <= 767;
+/**
+* Where the dock sits: across the visual viewport, against its bottom edge, so an on-screen keyboard
+* pushes it up. It never rises above the viewport's top.
+*/
+function mobileDockPlacement(viewport, dockHeight) {
+	return {
+		left: viewport.left,
+		top: Math.max(viewport.top, viewport.bottom - dockHeight),
+		width: viewport.width
+	};
+}
+/** Calls `onChange` with the new mode whenever it changes. */
+function createMobileDock(onChange) {
+	let mode = "formatting";
+	let formattingChosen = false;
+	const set = (next) => {
+		if (next === mode) return;
+		mode = next;
+		onChange(mode);
+	};
+	return {
+		get mode() {
+			return mode;
+		},
+		tableActive() {
+			if (!formattingChosen) set("table");
+		},
+		showFormatting() {
+			formattingChosen = true;
+			set("formatting");
+		},
+		tableInactive() {
+			formattingChosen = false;
+			set("formatting");
+		}
+	};
+}
+//#endregion
 //#region src/editor/extensions/relative-links.ts
 /** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
 function siteRelativeHref(href, baseUrl) {
@@ -3448,7 +3547,7 @@ var LoomaEditor = defineComponent({
 		});
 		const tablePickerOpen = ref(false);
 		const mobileToolbarStyle = ref({});
-		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
+		const mobile = ref(typeof window !== "undefined" && usesMobileDock(window.innerWidth));
 		const editorFocused = ref(false);
 		let formatting;
 		let formattingPopup = null;
@@ -3456,18 +3555,16 @@ var LoomaEditor = defineComponent({
 		let imagePopup = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
 		const formattingPickerOpen = () => linkState.value.surface === "popover" || tablePickerOpen.value || formatOpen.value;
-		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 activeRangeActions = (instance) => rangeActionsAtCaret(instance.state, props.rangeActions);
 		const formattingActive = () => formatting?.active() ?? false;
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
+		const mobileDock = createMobileDock((mode) => {
+			mobileToolbarMode.value = mode;
+		});
 		let dragLeaveTimer = null;
 		let tableResizeActive = false;
 		let tableInteractionActive = false;
-		let mobileTableControlsDismissed = false;
 		let hoveredTableCell = null;
 		let overlayTableElement = null;
 		let tablePointerFrame = null;
@@ -3937,22 +4034,20 @@ var LoomaEditor = defineComponent({
 			tableUi.geometry = null;
 			tableUi.capabilities = { ...EMPTY_CAPABILITIES };
 			overlayTableElement = null;
-			mobileTableControlsDismissed = false;
-			mobileToolbarMode.value = "formatting";
+			mobileDock.tableInactive();
 		};
 		const updateMobileViewport = () => {
-			mobile.value = window.innerWidth <= 767;
+			mobile.value = usesMobileDock(window.innerWidth);
 			if (!mobile.value) {
 				mobileToolbarStyle.value = {};
 				return;
 			}
 			nextTick(() => {
-				const viewport = getVisualViewportRect(window);
-				const toolbarHeight = mobileToolbarShell.value?.getBoundingClientRect().height || 56;
+				const placement = mobileDockPlacement(getVisualViewportRect(window), mobileToolbarShell.value?.getBoundingClientRect().height || 56);
 				mobileToolbarStyle.value = {
-					left: `${viewport.left}px`,
-					top: `${Math.max(viewport.top, viewport.bottom - toolbarHeight)}px`,
-					width: `${viewport.width}px`
+					left: `${placement.left}px`,
+					top: `${placement.top}px`,
+					width: `${placement.width}px`
 				};
 			});
 		};
@@ -4042,7 +4137,7 @@ var LoomaEditor = defineComponent({
 			}
 			const selectedTableIsActive = state.active && selectedTable === table;
 			overlayTableElement = table;
-			if (selectedTableIsActive && !mobileTableControlsDismissed) mobileToolbarMode.value = "table";
+			if (selectedTableIsActive) mobileDock.tableActive();
 			const rect = table.getBoundingClientRect();
 			const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
 			const toolbarLeft = Math.min(Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2), Math.max(12, window.innerWidth - maxToolbarWidth - 12));
@@ -4514,40 +4609,22 @@ var LoomaEditor = defineComponent({
 				onClick: run
 			}, () => loomaIcon(icon));
 		};
-		const renderRangeActions = (instance) => {
-			const groups = /* @__PURE__ */ new Map();
-			for (const action of activeRangeActions(instance)) {
-				const group = groups.get(action.id) ?? {
-					label: action.label,
-					ranges: /* @__PURE__ */ new Map()
-				};
-				group.ranges.set(`${action.from}:${action.to}`, {
-					from: action.from,
-					to: action.to
-				});
-				groups.set(action.id, group);
+		const renderRangeActions = (instance) => groupRangeActions(activeRangeActions(instance)).map(({ id, label, detail }) => h(Button, {
+			key: id,
+			"aria-label": label,
+			type: "button",
+			variant: "ghost",
+			tone: "neutral",
+			size: "sm",
+			onPointerdown: (event) => event.preventDefault(),
+			onClick: () => {
+				emit("rangeAction", detail);
+				formattingPopup?.hide();
 			}
-			return [...groups].map(([id, group]) => h(Button, {
-				key: id,
-				"aria-label": group.label,
-				type: "button",
-				variant: "ghost",
-				tone: "neutral",
-				size: "sm",
-				onPointerdown: (event) => event.preventDefault(),
-				onClick: () => {
-					emit("rangeAction", {
-						id,
-						ranges: [...group.ranges.values()]
-					});
-					formattingPopup?.hide();
-				}
-			}, () => group.label));
-		};
+		}, () => label));
 		const renderSelectionActions = (instance) => {
-			const selection = instance.state.selection;
-			if (selection.empty) return renderRangeActions(instance);
-			if (!(selection instanceof TextSelection || selection instanceof AllSelection)) return [];
+			if (instance.state.selection.empty) return renderRangeActions(instance);
+			if (!selectsPassage(instance.state)) return [];
 			return props.selectionActions.map((action) => h(Button, {
 				key: action.id,
 				"aria-label": action.label,
@@ -4557,17 +4634,9 @@ var LoomaEditor = defineComponent({
 				size: "sm",
 				onPointerdown: (event) => event.preventDefault(),
 				onClick: () => {
-					const { from, to } = instance.state.selection;
-					if (from === to) return;
-					const doc = instance.state.doc;
-					emit("selectionAction", {
-						id: action.id,
-						from,
-						to,
-						text: doc.textBetween(from, to, "\n"),
-						before: doc.textBetween(Math.max(0, from - 48), from, "\n"),
-						after: doc.textBetween(to, Math.min(doc.content.size, to + 48), "\n")
-					});
+					const detail = selectionActionDetail(instance.state, action.id);
+					if (!detail) return;
+					emit("selectionAction", detail);
 					formattingPopup?.hide();
 				}
 			}, () => action.label));
@@ -4823,8 +4892,7 @@ var LoomaEditor = defineComponent({
 					type: "button",
 					"aria-label": "Formatting tools",
 					onClick: () => {
-						mobileTableControlsDismissed = true;
-						mobileToolbarMode.value = "formatting";
+						mobileDock.showFormatting();
 						editor.value?.commands.focus();
 						nextTick(updateMobileViewport);
 					}