@threadlabs/looma 0.29.3 → 0.29.4

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.3",
+  "version": "0.29.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/index.js

@@ -1810,6 +1810,45 @@ function selectionActionDetail(state, id) {
 		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. */
@@ -3508,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;
@@ -3520,10 +3559,12 @@ var LoomaEditor = defineComponent({
 		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;
@@ -3993,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`
 				};
 			});
 		};
@@ -4098,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));
@@ -4853,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);
 					}