@threadlabs/looma 0.28.10 → 0.28.11

package/editor/block-actions.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+/**
+ * Applies a block menu action to the top-level block holding the caret, then focuses the editor:
+ * insert a paragraph below, duplicate the block, or delete it. Deleting the only block leaves an
+ * empty paragraph.
+ *
+ * @failure Returns false, and changes nothing, for an unknown action or a caret outside any block.
+ */
+export declare function runBlockAction(editor: Editor, action: string): boolean;

package/editor/extensions/table-commands.d.ts

@@ -4,7 +4,7 @@
  */
 import type { Editor, Range } from "@tiptap/core";
 import type { TableContextMenuActionEventDetail } from "../table-context-menu.js";
-import type { TableOverlayActionEventDetail } from "../table-overlay.js";
+import { type TableOverlayActionEventDetail } from "../table-overlay.js";
 import { type TableCellAlignment, type TableCellBackground } from "./table-formatting.js";
 /**
  * Bounded initial shape for table insertion.
@@ -120,3 +120,9 @@ export declare function normalizeActiveTableColumnWidths(editor: Editor, tableEl
  * return false before dispatching a transaction.
  */
 export declare function handleTableOverlayAction(editor: Editor, detail: TableOverlayActionEventDetail): boolean;
+/**
+ * Moves the caret to the cell an overlay action names when the action comes from a table other
+ * than the selected one, so table commands act on that table. A cell menu also selects its cell,
+ * unless that cell is already part of the selection.
+ */
+export declare function focusTableOverlayTarget(editor: Editor, table: HTMLTableElement, detail: TableOverlayActionEventDetail): void;

package/package.json

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

package/vue/editor/index.js

@@ -1,5 +1,5 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt } from "@threadlabs/looma/editor";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
 import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
@@ -7,6 +7,7 @@ import { closeHistory } from "@tiptap/pm/history";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
+import "@tiptap/pm/tables";
 import "@tiptap/pm/transform";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
@@ -1094,6 +1095,125 @@ function createCodeHighlighting(codeLanguages, onGrammarsLoaded) {
 	};
 }
 //#endregion
+//#region src/editor/block-actions.ts
+/**
+* Applies a block menu action to the top-level block holding the caret, then focuses the editor:
+* insert a paragraph below, duplicate the block, or delete it. Deleting the only block leaves an
+* empty paragraph.
+*
+* @failure Returns false, and changes nothing, for an unknown action or a caret outside any block.
+*/
+function runBlockAction(editor, action) {
+	const head = editor.state.selection.$head;
+	if (head.depth === 0) return false;
+	const { state } = editor;
+	const position = head.before(1);
+	const block = state.doc.nodeAt(position);
+	if (!block) return false;
+	const end = position + block.nodeSize;
+	const transaction = state.tr;
+	let focusAt = end + 1;
+	if (action === "insert-below") transaction.insert(end, state.schema.nodes.paragraph.create());
+	else if (action === "duplicate") transaction.insert(end, block);
+	else if (action === "delete") {
+		if (state.doc.childCount === 1) {
+			transaction.replaceWith(position, end, state.schema.nodes.paragraph.create());
+			focusAt = 1;
+		} else {
+			transaction.delete(position, end);
+			focusAt = Math.min(position + 1, transaction.doc.content.size);
+		}
+	} else return false;
+	transaction.setSelection(TextSelection.near(transaction.doc.resolve(Math.min(focusAt, transaction.doc.content.size))));
+	editor.view.dispatch(transaction);
+	editor.commands.focus();
+	return true;
+}
+//#endregion
+//#region src/editor/table-overlay.ts
+function mapTableCells(table) {
+	const rows = Array.from(table.rows);
+	const grid = [];
+	const coordinates = /* @__PURE__ */ new Map();
+	rows.forEach((row, rowIndex) => {
+		grid[rowIndex] ??= [];
+		let columnIndex = 0;
+		for (const cell of Array.from(row.cells)) {
+			while (grid[rowIndex]?.[columnIndex]) columnIndex += 1;
+			coordinates.set(cell, {
+				rowIndex,
+				columnIndex
+			});
+			const rowSpan = cell.rowSpan === 0 ? rows.length - rowIndex : Math.max(1, cell.rowSpan);
+			const columnSpan = Math.max(1, cell.colSpan);
+			for (let rowOffset = 0; rowOffset < rowSpan; rowOffset += 1) {
+				const gridRow = grid[rowIndex + rowOffset] ??= [];
+				for (let columnOffset = 0; columnOffset < columnSpan; columnOffset += 1) gridRow[columnIndex + columnOffset] = cell;
+			}
+			columnIndex += columnSpan;
+		}
+	});
+	return {
+		grid,
+		coordinates
+	};
+}
+/**
+* Resolves a logical grid coordinate to its owning DOM cell.
+* A spanning cell can therefore be returned for more than one coordinate; this
+* is intentional and prevents overlay actions from inventing nonexistent cells.
+*
+* @contract Coordinates outside the expanded table grid return null; coordinates
+* covered by a span resolve to the single DOM cell that owns them.
+*/
+function resolveTableCellAt(table, rowIndex, columnIndex) {
+	return mapTableCells(table).grid[rowIndex]?.[columnIndex] ?? null;
+}
+//#endregion
+//#region src/editor/selection-geometry.ts
+/** A plain copy of a client rectangle, the anchor shape the slash and mention menus accept as a prop. */
+function menuAnchorRect(rect) {
+	if (!rect) return null;
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function selectionElement(editor) {
+	const { node } = editor.view.domAtPos(editor.state.selection.from);
+	return node instanceof HTMLElement ? node : node.parentElement;
+}
+/** The rendered table that holds the selection's start. */
+function selectedTableElement(editor) {
+	return selectionElement(editor)?.closest("table");
+}
+/** The rendered cell that holds the selection's start. */
+function selectedTableCellElement(editor) {
+	return selectionElement(editor)?.closest("td, th");
+}
+//#endregion
+//#region src/editor/extensions/table-commands.ts
+/**
+* Moves the caret to the cell an overlay action names when the action comes from a table other
+* than the selected one, so table commands act on that table. A cell menu also selects its cell,
+* unless that cell is already part of the selection.
+*/
+function focusTableOverlayTarget(editor, table, detail) {
+	const target = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : "fromIndex" in detail ? resolveTableCellAt(table, detail.action === "reorder-row" ? detail.fromIndex : 0, detail.action === "reorder-column" ? detail.fromIndex : 0) : resolveTableCellAt(table, detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0, detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0);
+	if (target && selectedTableElement(editor) !== table) editor.chain().focus().setTextSelection(editor.view.posAtDOM(target, 0) + 1).run();
+	if (detail.action !== "open-cell-menu") return;
+	const selected = selectedTableCellElement(editor);
+	const cell = resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selected;
+	if (cell && selected !== cell && !cell.classList.contains("selectedCell")) editor.chain().focus().setTextSelection(editor.view.posAtDOM(cell, 0) + 1).run();
+	else editor.commands.focus();
+}
+//#endregion
 //#region src/editor/content.ts
 /** Whether a controlled document already matches the editor, so applying it would only reset the selection. */
 function sameDocument(left, right) {
@@ -1389,34 +1509,6 @@ function createLinkEditing(options) {
 	};
 }
 //#endregion
-//#region src/editor/selection-geometry.ts
-/** A plain copy of a client rectangle, the anchor shape the slash and mention menus accept as a prop. */
-function menuAnchorRect(rect) {
-	if (!rect) return null;
-	return {
-		left: rect.left,
-		top: rect.top,
-		right: rect.right,
-		bottom: rect.bottom,
-		x: rect.x,
-		y: rect.y,
-		width: rect.width,
-		height: rect.height
-	};
-}
-function selectionElement(editor) {
-	const { node } = editor.view.domAtPos(editor.state.selection.from);
-	return node instanceof HTMLElement ? node : node.parentElement;
-}
-/** The rendered table that holds the selection's start. */
-function selectedTableElement(editor) {
-	return selectionElement(editor)?.closest("table");
-}
-/** The rendered cell that holds the selection's start. */
-function selectedTableCellElement(editor) {
-	return selectionElement(editor)?.closest("td, th");
-}
-//#endregion
 //#region src/editor/selection-surface.ts
 var surfaceSequence = 0;
 /**
@@ -3145,32 +3237,6 @@ var LoomaEditor = defineComponent({
 				onRemove: () => linkEditing?.remove()
 			});
 		};
-		const runBlockAction = (value) => {
-			const instance = editor.value;
-			const head = instance?.state.selection.$head;
-			if (!instance || !head || head.depth === 0 || !props.editable) return;
-			const { state } = instance;
-			const position = head.before(1);
-			const block = state.doc.nodeAt(position);
-			if (!block) return;
-			const end = position + block.nodeSize;
-			const transaction = state.tr;
-			let focusAt = end + 1;
-			if (value === "insert-below") transaction.insert(end, state.schema.nodes.paragraph.create());
-			else if (value === "duplicate") transaction.insert(end, block);
-			else if (value === "delete") {
-				if (state.doc.childCount === 1) {
-					transaction.replaceWith(position, end, state.schema.nodes.paragraph.create());
-					focusAt = 1;
-				} else {
-					transaction.delete(position, end);
-					focusAt = Math.min(position + 1, transaction.doc.content.size);
-				}
-			} else return;
-			transaction.setSelection(TextSelection.near(transaction.doc.resolve(Math.min(focusAt, transaction.doc.content.size))));
-			instance.view.dispatch(transaction);
-			instance.commands.focus();
-		};
 		watch([() => props.slashCommands, () => props.uploadImage], () => {
 			slashExtension.options.commands = resolveSlashCommands();
 			editor.value?.commands.dismissLoomaSlashMenu();
@@ -3760,13 +3826,8 @@ var LoomaEditor = defineComponent({
 			if (!instance) return;
 			const table = overlayTableElement ?? selectedTableElement(instance);
 			if (!table) return;
-			const targetCell = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : "fromIndex" in detail ? resolveTableCellAt(table, detail.action === "reorder-row" ? detail.fromIndex : 0, detail.action === "reorder-column" ? detail.fromIndex : 0) : resolveTableCellAt(table, detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0, detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0);
-			if (targetCell && selectedTableElement(instance) !== table) instance.chain().focus().setTextSelection(instance.view.posAtDOM(targetCell, 0) + 1).run();
+			focusTableOverlayTarget(instance, table, detail);
 			if (detail.action === "open-cell-menu") {
-				const selectedCell = selectedTableCellElement(instance);
-				const cell = table ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selectedCell : selectedCell;
-				if (cell && selectedCell !== cell && !cell.classList.contains("selectedCell")) instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
-				else instance.commands.focus();
 				updateTableUi();
 				tableUi.menuScope = "cell";
 				tableUi.menuStyle = {
@@ -4276,7 +4337,9 @@ var LoomaEditor = defineComponent({
 				h(EditorBlockActions, {
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
-					onAction: (event) => runBlockAction(event.detail.action)
+					onAction: (event) => {
+						if (props.editable && editor.value) runBlockAction(editor.value, event.detail.action);
+					}
 				}),
 				h(Popover, {
 					class: "looma-editor__table-picker-popover",