@threadlabs/looma 0.1.9 → 0.1.11

package/editor/{chunk-OK5NARJI.js → chunk-4VGVEHU2.js}

@@ -3,6 +3,7 @@ import {
 } from "./chunk-CX4QDKSV.js";
 
 // src/table-context-menu.ts
+import { clampRectToViewport, getVisualViewportRect } from "@threadlabs/looma/core";
 var TAG = "ui-editor-table-context-menu";
 function dispatchTableAction(element, action) {
   element.dispatchEvent(
@@ -68,14 +69,11 @@ if (typeof HTMLElement !== "undefined") {
       if (!menu) return;
       menu.style.translate = "";
       const rect = menu.getBoundingClientRect();
-      const gutter = 12;
-      const visualViewport = window.visualViewport;
-      const viewportLeft = visualViewport?.offsetLeft ?? 0;
-      const viewportTop = visualViewport?.offsetTop ?? 0;
-      const viewportRight = viewportLeft + (visualViewport?.width ?? window.innerWidth);
-      const viewportBottom = viewportTop + (visualViewport?.height ?? window.innerHeight);
-      const offsetX = rect.right > viewportRight - gutter ? viewportRight - gutter - rect.right : Math.max(0, viewportLeft + gutter - rect.left);
-      const offsetY = rect.bottom > viewportBottom - gutter ? viewportBottom - gutter - rect.bottom : Math.max(0, viewportTop + gutter - rect.top);
+      const { x: offsetX, y: offsetY } = clampRectToViewport(
+        rect,
+        getVisualViewportRect(window),
+        12
+      );
       if (offsetX !== 0 || offsetY !== 0) {
         menu.style.translate = `${offsetX}px ${offsetY}px`;
       }
@@ -107,6 +105,7 @@ if (typeof HTMLElement !== "undefined") {
         {
           heading: "Cells",
           actions: [
+            { action: "clear-cells", label: "Clear selected cells" },
             { action: "merge-cells", label: "Merge cells", can: "can-merge-cells" },
             { action: "split-cell", label: "Split cell", can: "can-split-cell" }
           ]
@@ -126,7 +125,7 @@ if (typeof HTMLElement !== "undefined") {
         }
         return {
           ...section,
-          actions: section.actions.filter((action) => this.getBoolAttr(action.can))
+          actions: section.actions.filter((action) => !action.can || this.getBoolAttr(action.can))
         };
       }).filter((section) => "backgrounds" in section ? section.backgrounds.length > 0 : section.actions.length > 0);
       let html = '<div class="ui-editor-table-context-menu" role="menu">';
@@ -277,6 +276,7 @@ if (typeof HTMLElement !== "undefined") {
         {
           heading: "Cells",
           actions: [
+            { action: "clear-cells", label: "Clear selected cells" },
             { action: "merge-cells", label: "Merge selected cells", can: "can-merge-cells" },
             { action: "split-cell", label: "Split merged cell", can: "can-split-cell" }
           ]
@@ -292,7 +292,7 @@ if (typeof HTMLElement !== "undefined") {
       ];
       const availableOverflowSections = overflowSections.map((section) => ({
         ...section,
-        actions: section.actions.filter((action) => this.getBoolAttr(action.can))
+        actions: section.actions.filter((action) => !action.can || this.getBoolAttr(action.can))
       })).filter((section) => section.actions.length > 0);
       this.innerHTML = [
         '<div class="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions">',
@@ -467,17 +467,112 @@ if (typeof HTMLElement !== "undefined") {
 }
 
 // src/table-overlay.ts
+import {
+  createProximityCoordinator
+} from "@threadlabs/looma/core";
 var TAG4 = "ui-editor-table-overlay";
 var DEFAULT_ROWS = 3;
 var DEFAULT_COLS = 3;
+function sameNumbers(left, right) {
+  return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function sameActiveCell(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.left === right.left && left.top === right.top && left.width === right.width && left.height === right.height && left.rowIndex === right.rowIndex && left.columnIndex === right.columnIndex;
+}
+function sameGeometry(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return sameNumbers(left.rowBoundaries, right.rowBoundaries) && sameNumbers(left.columnBoundaries, right.columnBoundaries) && sameActiveCell(left.activeCell, right.activeCell);
+}
+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 };
+}
+function resolveTableCellAt(table, rowIndex, columnIndex) {
+  return mapTableCells(table).grid[rowIndex]?.[columnIndex] ?? null;
+}
+function uniqueSorted(values) {
+  return values.sort((left, right) => left - right).filter((value, index, all) => index === 0 || Math.abs(value - (all[index - 1] ?? value)) >= 0.5).map((value) => Math.round(value * 100) / 100);
+}
+function measureTableOverlayGeometry(table, activeCell) {
+  const tableRect = table.getBoundingClientRect();
+  const rows = Array.from(table.rows);
+  const cells = rows.flatMap((row) => Array.from(row.cells));
+  const { coordinates } = mapTableCells(table);
+  const rowBoundaries = uniqueSorted(rows.flatMap((row) => {
+    const rect = row.getBoundingClientRect();
+    return [rect.top - tableRect.top, rect.bottom - tableRect.top];
+  }));
+  const columnBoundaries = uniqueSorted(cells.flatMap((cell) => {
+    const rect = cell.getBoundingClientRect();
+    return [rect.left - tableRect.left, rect.right - tableRect.left];
+  }));
+  if (!activeCell || !table.contains(activeCell)) {
+    return { rowBoundaries, columnBoundaries, activeCell: null };
+  }
+  const cellRect = activeCell.getBoundingClientRect();
+  const coordinate = coordinates.get(activeCell);
+  return {
+    rowBoundaries,
+    columnBoundaries,
+    activeCell: {
+      left: Math.round((cellRect.left - tableRect.left) * 100) / 100,
+      top: Math.round((cellRect.top - tableRect.top) * 100) / 100,
+      width: Math.round(cellRect.width * 100) / 100,
+      height: Math.round(cellRect.height * 100) / 100,
+      rowIndex: coordinate?.rowIndex ?? 0,
+      columnIndex: coordinate?.columnIndex ?? 0
+    }
+  };
+}
+function finiteNumbers(value) {
+  if (!value) return [];
+  const values = value.split(",").map((part) => Number(part.trim()));
+  return values.every(Number.isFinite) ? values : [];
+}
+function fallbackBoundaries(segments, length) {
+  return Array.from({ length: segments + 1 }, (_, index) => index * length / segments);
+}
 if (typeof HTMLElement !== "undefined") {
   class UIEditorTableOverlayElement extends HTMLElement {
     static get observedAttributes() {
-      return ["open", "rows", "cols"];
+      return ["open", "rows", "cols", "row-boundaries", "column-boundaries", "active-cell"];
     }
     #rows = DEFAULT_ROWS;
     #cols = DEFAULT_COLS;
     #activeControlKey = null;
+    #proximity = null;
+    #geometry = null;
+    #renderPending = false;
+    get geometry() {
+      return this.#geometry;
+    }
+    set geometry(value) {
+      if (sameGeometry(this.#geometry, value)) return;
+      this.#geometry = value;
+      this.#scheduleRender();
+    }
     connectedCallback() {
       this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
       this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
@@ -487,6 +582,10 @@ if (typeof HTMLElement !== "undefined") {
       this.addEventListener("pointerout", this.onPointerOut);
       this.addEventListener("focusin", this.onFocusIn);
       this.addEventListener("focusout", this.onFocusOut);
+      this.#proximity = createProximityCoordinator(this, {
+        pointerTarget: this.ownerDocument,
+        anchorSelector: ".ui-editor-table-overlay__handle[data-ui-affordance]"
+      });
     }
     disconnectedCallback() {
       this.removeEventListener("click", this.onClick);
@@ -494,68 +593,139 @@ if (typeof HTMLElement !== "undefined") {
       this.removeEventListener("pointerout", this.onPointerOut);
       this.removeEventListener("focusin", this.onFocusIn);
       this.removeEventListener("focusout", this.onFocusOut);
+      this.#proximity?.destroy();
+      this.#proximity = null;
     }
     attributeChangedCallback(name) {
       if (name === "rows") this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
       if (name === "cols") this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
-      this.render();
+      this.#scheduleRender();
+    }
+    #scheduleRender() {
+      if (!this.isConnected || this.#renderPending) return;
+      this.#renderPending = true;
+      queueMicrotask(() => {
+        this.#renderPending = false;
+        if (this.isConnected) this.render();
+      });
     }
     #readBoundedNumber(name, fallback) {
-      const parsed = parseInt(this.getAttribute(name) ?? String(fallback), 10);
-      if (!Number.isFinite(parsed)) {
-        return fallback;
-      }
-      return Math.min(100, Math.max(1, parsed));
+      const parsed = Number.parseInt(this.getAttribute(name) ?? String(fallback), 10);
+      return Number.isFinite(parsed) ? Math.min(100, Math.max(1, parsed)) : fallback;
+    }
+    #boundaries(name, segments) {
+      if (this.#geometry) {
+        return name === "row-boundaries" ? this.#geometry.rowBoundaries : this.#geometry.columnBoundaries;
+      }
+      const explicit = finiteNumbers(this.getAttribute(name));
+      if (explicit.length === segments + 1) return explicit;
+      const length = name === "row-boundaries" ? this.getBoundingClientRect().height : this.getBoundingClientRect().width;
+      return fallbackBoundaries(segments, length);
+    }
+    #activeCell() {
+      if (this.#geometry) return this.#geometry.activeCell;
+      const values = finiteNumbers(this.getAttribute("active-cell"));
+      if (values.length !== 6) return null;
+      const [left, top, width, height, rowIndex, columnIndex] = values;
+      if (left === void 0 || top === void 0 || width === void 0 || height === void 0 || rowIndex === void 0 || columnIndex === void 0) return null;
+      return { left, top, width, height, rowIndex, columnIndex };
+    }
+    dispatch(detail) {
+      this.dispatchEvent(new CustomEvent(
+        "looma-editor-table-overlay-action",
+        { detail, bubbles: true, composed: true }
+      ));
     }
     onClick = (event) => {
-      const target = event.target.closest("[data-action]");
-      if (!target) {
+      const target = event.target.closest("button[data-action]");
+      if (!target) return;
+      const action = target.dataset.action;
+      if (!action) return;
+      if (action === "select-row" || action === "select-column") {
+        const rowIndex = Number.parseInt(target.dataset.rowIndex ?? "", 10);
+        const columnIndex = Number.parseInt(target.dataset.columnIndex ?? "", 10);
+        if (Number.isFinite(rowIndex) && Number.isFinite(columnIndex)) {
+          this.dispatch({ action, rowIndex, columnIndex });
+        }
         return;
       }
-      const action = target.getAttribute("data-action");
-      const boundaryIndex = parseInt(target.getAttribute("data-boundary-index") ?? "-1", 10);
-      if (!action || !Number.isFinite(boundaryIndex) || boundaryIndex < 0) {
+      if (action === "open-cell-menu") {
+        const rowIndex = Number.parseInt(target.dataset.rowIndex ?? "", 10);
+        const columnIndex = Number.parseInt(target.dataset.columnIndex ?? "", 10);
+        if (!Number.isFinite(rowIndex) || !Number.isFinite(columnIndex)) return;
+        const rect = target.getBoundingClientRect();
+        this.dispatch({
+          action,
+          rowIndex,
+          columnIndex,
+          anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
+        });
         return;
       }
-      this.dispatchEvent(
-        new CustomEvent("looma-editor-table-overlay-action", {
-          detail: { action, boundaryIndex },
-          bubbles: true,
-          composed: true
-        })
-      );
+      const boundaryIndex = Number.parseInt(target.dataset.boundaryIndex ?? "", 10);
+      if (!Number.isFinite(boundaryIndex) || boundaryIndex < 0) return;
+      this.dispatch({ action, boundaryIndex });
     };
     onPointerOver = (event) => {
       const control = event.target.closest("[data-control-key]");
       this.#setActiveControl(control?.dataset.controlKey ?? null);
     };
     onPointerOut = (event) => {
-      const relatedTarget = event.relatedTarget;
-      const nextControl = relatedTarget instanceof Element ? relatedTarget.closest("[data-control-key]") : null;
-      this.#setActiveControl(nextControl?.dataset.controlKey ?? null);
+      const related = event.relatedTarget;
+      const next = related instanceof Element ? related.closest("[data-control-key]") : null;
+      this.#setActiveControl(next?.dataset.controlKey ?? null);
     };
     onFocusIn = (event) => {
       const control = event.target.closest("[data-control-key]");
       this.#setActiveControl(control?.dataset.controlKey ?? null);
     };
     onFocusOut = (event) => {
-      const relatedTarget = event.relatedTarget;
-      const nextControl = relatedTarget instanceof Element ? relatedTarget.closest("[data-control-key]") : null;
-      this.#setActiveControl(nextControl?.dataset.controlKey ?? null);
+      const related = event.relatedTarget;
+      const next = related instanceof Element ? related.closest("[data-control-key]") : null;
+      this.#setActiveControl(next?.dataset.controlKey ?? null);
     };
     #setActiveControl(controlKey) {
-      if (this.#activeControlKey === controlKey) {
-        return;
-      }
+      if (this.#activeControlKey === controlKey) return;
       this.#activeControlKey = controlKey;
       this.#syncActiveControl();
     }
     #syncActiveControl() {
-      const controls = this.querySelectorAll("[data-control-key]");
-      controls.forEach((control) => {
-        control.dataset.active = this.#activeControlKey && control.dataset.controlKey === this.#activeControlKey ? "true" : "false";
+      this.querySelectorAll("[data-control-key]").forEach((control) => {
+        control.dataset.active = this.#activeControlKey === control.dataset.controlKey ? "true" : "false";
       });
     }
+    #insertionControl(axis, index, position) {
+      const first = index === 0;
+      const action = axis === "row" ? first ? "add-row-before" : "add-row-after" : first ? "add-column-before" : "add-column-after";
+      const noun = axis === "row" ? "row" : "column";
+      const relation = first ? axis === "row" ? "above" : "left" : axis === "row" ? "below" : "right";
+      const label = `Insert ${noun} ${relation}`;
+      const controlKey = `${axis}:${index}`;
+      const positionStyle = axis === "row" ? `top:${position}px;` : `left:${position}px;`;
+      return [
+        `<div class="ui-editor-table-overlay__control ui-editor-table-overlay__control--${axis}"`,
+        ` style="${positionStyle}" data-control-key="${controlKey}"`,
+        ` data-active="${this.#activeControlKey === controlKey ? "true" : "false"}">`,
+        '<span class="ui-editor-table-overlay__line" aria-hidden="true"></span>',
+        '<span class="ui-editor-table-overlay__guide" data-ui-guide aria-hidden="true"></span>',
+        `<button type="button" class="ui-editor-table-overlay__handle" data-ui-affordance="insert-${noun}"`,
+        ` data-action="${action}" data-boundary-index="${index}" aria-label="${label}">`,
+        '<span aria-hidden="true">+</span>',
+        `<span class="ui-editor-table-overlay__tooltip" role="tooltip">${label}</span>`,
+        "</button>",
+        "</div>"
+      ].join("");
+    }
+    #activeCellControls(cell) {
+      const centerX = cell.left + cell.width / 2;
+      const centerY = cell.top + cell.height / 2;
+      const indexes = `data-row-index="${cell.rowIndex}" data-column-index="${cell.columnIndex}"`;
+      return [
+        `<button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--row" style="top:${centerY}px" data-action="select-row" ${indexes} title="Select row" aria-label="Select row"><span aria-hidden="true"></span></button>`,
+        `<button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--column" style="left:${centerX}px" data-action="select-column" ${indexes} title="Select column" aria-label="Select column"><span aria-hidden="true"></span></button>`,
+        `<button type="button" class="ui-editor-table-overlay__cell-menu" style="left:${cell.left + cell.width - 30}px;top:${cell.top + 6}px" data-action="open-cell-menu" ${indexes} title="Cell actions" aria-label="Cell actions"><span aria-hidden="true">\u2304</span></button>`
+      ].join("");
+    }
     render() {
       const open = this.hasAttribute("open") && this.getAttribute("open") !== "false";
       this.hidden = !open;
@@ -563,24 +733,22 @@ if (typeof HTMLElement !== "undefined") {
         this.#setActiveControl(null);
         return;
       }
-      let html = '<div class="ui-editor-table-overlay" aria-label="Table insertion controls">';
-      html += '<div class="ui-editor-table-overlay__rows">';
-      for (let i = 0; i <= this.#rows; i++) {
-        const action = i === 0 ? "add-row-before" : "add-row-after";
-        const controlKey = `row:${i}`;
-        html += `<button type="button" class="ui-editor-table-overlay__control ui-editor-table-overlay__control--row" style="--ui-editor-table-overlay-boundary-index:${i};--ui-editor-table-overlay-segments:${this.#rows};" data-action="${action}" data-boundary-index="${i}" data-control-key="${controlKey}" data-active="${this.#activeControlKey === controlKey ? "true" : "false"}" aria-label="Add row"><span class="ui-editor-table-overlay__handle" aria-hidden="true">+</span></button>`;
-      }
-      html += "</div>";
-      html += '<div class="ui-editor-table-overlay__cols">';
-      for (let i = 0; i <= this.#cols; i++) {
-        const action = i === 0 ? "add-column-before" : "add-column-after";
-        const controlKey = `col:${i}`;
-        html += `<button type="button" class="ui-editor-table-overlay__control ui-editor-table-overlay__control--col" style="--ui-editor-table-overlay-boundary-index:${i};--ui-editor-table-overlay-segments:${this.#cols};" data-action="${action}" data-boundary-index="${i}" data-control-key="${controlKey}" data-active="${this.#activeControlKey === controlKey ? "true" : "false"}" aria-label="Add column"><span class="ui-editor-table-overlay__handle" aria-hidden="true">+</span></button>`;
-      }
-      html += "</div>";
-      html += "</div>";
-      this.innerHTML = html;
+      const rows = this.#boundaries("row-boundaries", this.#rows);
+      const columns = this.#boundaries("column-boundaries", this.#cols);
+      const cell = this.#activeCell();
+      this.innerHTML = [
+        '<div class="ui-editor-table-overlay" aria-label="Table controls">',
+        '<div class="ui-editor-table-overlay__rows">',
+        rows.map((position, index) => this.#insertionControl("row", index, position)).join(""),
+        "</div>",
+        '<div class="ui-editor-table-overlay__cols">',
+        columns.map((position, index) => this.#insertionControl("col", index, position)).join(""),
+        "</div>",
+        cell ? this.#activeCellControls(cell) : "",
+        "</div>"
+      ].join("");
       this.#syncActiveControl();
+      this.#proximity?.refresh();
     }
   }
   if (typeof window !== "undefined" && !customElements.get(TAG4)) {
@@ -589,6 +757,7 @@ if (typeof HTMLElement !== "undefined") {
 }
 
 // src/slash-menu.ts
+import { getVisualViewportRect as getVisualViewportRect2 } from "@threadlabs/looma/core";
 var TAG5 = "ui-editor-slash-menu";
 var MOBILE_BREAKPOINT = 768;
 var MENU_HEIGHT_ESTIMATE = 320;
@@ -737,9 +906,9 @@ if (typeof HTMLElement !== "undefined") {
         this.style.display = "none";
         return;
       }
-      const visualViewport = window.visualViewport;
-      const viewportWidth = visualViewport?.width ?? window.innerWidth;
-      const viewportHeight = visualViewport?.height ?? window.innerHeight;
+      const viewport = getVisualViewportRect2(window);
+      const viewportWidth = viewport.width;
+      const viewportHeight = viewport.height;
       this.style.display = "block";
       this.style.position = "fixed";
       this.style.zIndex = "500";
@@ -749,30 +918,30 @@ if (typeof HTMLElement !== "undefined") {
           MENU_HEIGHT_ESTIMATE,
           Math.max(0, viewportHeight - toolbarReserve)
         );
-        this.style.left = `${visualViewport?.offsetLeft ?? 0}px`;
+        this.style.left = `${viewport.left}px`;
         this.style.right = "";
         this.style.bottom = "";
-        this.style.top = `${(visualViewport?.offsetTop ?? 0) + viewportHeight - menuHeight - toolbarReserve}px`;
+        this.style.top = `${viewport.top + viewportHeight - menuHeight - toolbarReserve}px`;
         this.style.width = `${viewportWidth}px`;
         this.style.maxHeight = `${menuHeight}px`;
         return;
       }
       let top;
-      const spaceBelow = viewportHeight - rect.bottom - OFFSET;
-      const spaceAbove = rect.top - OFFSET;
+      const spaceBelow = viewport.bottom - rect.bottom - OFFSET;
+      const spaceAbove = rect.top - viewport.top - OFFSET;
       if (spaceBelow >= MENU_HEIGHT_ESTIMATE || spaceBelow >= spaceAbove) {
         top = rect.bottom + OFFSET;
       } else {
         top = rect.top - OFFSET - MENU_HEIGHT_ESTIMATE;
       }
       let left = rect.left;
-      if (left + MENU_WIDTH > viewportWidth - 8) {
-        left = viewportWidth - MENU_WIDTH - 8;
+      if (left + MENU_WIDTH > viewport.right - 8) {
+        left = viewport.right - MENU_WIDTH - 8;
       }
-      if (left < 8) {
-        left = 8;
+      if (left < viewport.left + 8) {
+        left = viewport.left + 8;
       }
-      this.style.top = `${Math.max(8, top)}px`;
+      this.style.top = `${Math.max(viewport.top + 8, top)}px`;
       this.style.left = `${left}px`;
       this.style.right = "";
       this.style.bottom = "";
@@ -840,3 +1009,8 @@ if (typeof HTMLElement !== "undefined") {
     customElements.define(TAG6, UIEditorToolbarElement);
   }
 }
+
+export {
+  resolveTableCellAt,
+  measureTableOverlayGeometry
+};

package/editor/{chunk-NJ2KAMS2.js → chunk-F4AYF33M.js}

@@ -5307,6 +5307,10 @@ var TableHeader = Node18.create({
 // src/extensions/table-formatting.ts
 var LoomaTable = Table.configure({
   resizable: true,
+  // Tiptap also uses this as its inward coordinate probe. The 5px default can
+  // resolve to the row around an empty minimum-width cell instead of the cell.
+  handleWidth: 3,
+  cellMinWidth: 112,
   lastColumnResizable: false
 });
 function normalizeTableCellAlignment(value) {
@@ -5470,7 +5474,14 @@ function getDefaultEditorExtensions(options = {}) {
 
 // src/extensions/table-commands.ts
 import { TextSelection as TextSelection4 } from "@tiptap/pm/state";
-import { TableMap } from "@tiptap/pm/tables";
+import {
+  addColumn,
+  addRow,
+  CellSelection as CellSelection2,
+  cellAround,
+  deleteCellSelection,
+  TableMap
+} from "@tiptap/pm/tables";
 var NO_TABLE_CAPABILITIES = {
   canAddRowBefore: false,
   canAddRowAfter: false,
@@ -5548,6 +5559,14 @@ function handleTableAction(editor, detail) {
       return editor.chain().focus().deleteColumn().run();
     case "delete-table":
       return editor.chain().focus().deleteTable().run();
+    case "clear-cells": {
+      if (!(editor.state.selection instanceof CellSelection2)) {
+        const cellPos = findSelectedCellPosition(editor);
+        if (cellPos === null) return false;
+        if (!editor.commands.setCellSelection({ anchorCell: cellPos })) return false;
+      }
+      return deleteCellSelection(editor.state, editor.view.dispatch);
+    }
     case "merge-cells":
       return editor.chain().focus().mergeCells().run();
     case "split-cell":
@@ -5619,17 +5638,6 @@ function normalizeColumnWidths(widths, availableWidth, minWidth) {
   );
   return distributeWidthDelta(scaled, availableWidth, minWidth);
 }
-function getTextPositionInCell(tablePos, table, rowIndex, colIndex) {
-  let pos = tablePos + 1;
-  for (let r = 0; r < rowIndex; r++) {
-    pos += table.child(r).nodeSize;
-  }
-  const row = table.child(rowIndex);
-  for (let c = 0; c < colIndex; c++) {
-    pos += row.child(c).nodeSize;
-  }
-  return pos + 3;
-}
 function findTable(editor) {
   const { $from } = editor.state.selection;
   for (let d = $from.depth; d > 0; d--) {
@@ -5640,6 +5648,26 @@ function findTable(editor) {
   }
   return null;
 }
+function findSelectedCellPosition(editor) {
+  return cellAround(editor.state.selection.$from)?.pos ?? null;
+}
+function selectTableAxis(editor, axis, rowIndex, columnIndex) {
+  const tableInfo = findTable(editor);
+  if (!tableInfo) return false;
+  const { pos: tablePos, node: table } = tableInfo;
+  const map = TableMap.get(table);
+  const row = Math.min(Math.max(0, rowIndex), map.height - 1);
+  const column = Math.min(Math.max(0, columnIndex), map.width - 1);
+  const start = axis === "row" ? map.positionAt(row, 0, table) : map.positionAt(0, column, table);
+  const end = axis === "row" ? map.positionAt(row, map.width - 1, table) : map.positionAt(map.height - 1, column, table);
+  const tableStart = tablePos + 1;
+  if (!editor.commands.setCellSelection({
+    anchorCell: tableStart + start,
+    headCell: tableStart + end
+  })) return false;
+  editor.commands.focus();
+  return true;
+}
 function insertTableAtRange(editor, range, options = {}) {
   const rows = Math.min(10, Math.max(1, options.rows ?? 3));
   const cols = Math.min(10, Math.max(1, options.cols ?? 3));
@@ -5700,45 +5728,57 @@ function normalizeActiveTableColumnWidths(editor, tableElement, minWidth = 25) {
 function handleTableOverlayAction(editor, detail) {
   const tableInfo = findTable(editor);
   if (!tableInfo) return false;
-  const { action, boundaryIndex } = detail;
+  const { action } = detail;
+  if (action === "select-row" || action === "select-column") {
+    return selectTableAxis(
+      editor,
+      action === "select-row" ? "row" : "column",
+      detail.rowIndex,
+      detail.columnIndex
+    );
+  }
+  if (action === "open-cell-menu") return true;
+  if (!("boundaryIndex" in detail)) return false;
+  const { boundaryIndex } = detail;
   const { pos: tablePos, node: table } = tableInfo;
-  const rows = table.childCount;
-  const cols = rows > 0 ? table.child(0).childCount : 0;
-  let cellPos;
-  let command;
+  const map = TableMap.get(table);
+  const rect = {
+    map,
+    table,
+    tableStart: tablePos + 1,
+    left: 0,
+    top: 0,
+    right: map.width,
+    bottom: map.height
+  };
+  let transaction = editor.state.tr;
   switch (action) {
     case "add-row-before": {
-      const rowIndex = Math.min(boundaryIndex, rows - 1);
-      if (rowIndex < 0) return false;
-      cellPos = getTextPositionInCell(tablePos, table, rowIndex, 0);
-      command = () => editor.chain().focus().setTextSelection(cellPos).addRowBefore().run();
+      if (boundaryIndex !== 0) return false;
+      transaction = addRow(transaction, rect, 0);
       break;
     }
     case "add-row-after": {
-      const rowIndex = Math.min(boundaryIndex - 1, rows - 1);
-      if (rowIndex < 0) return false;
-      cellPos = getTextPositionInCell(tablePos, table, rowIndex, 0);
-      command = () => editor.chain().focus().setTextSelection(cellPos).addRowAfter().run();
+      if (boundaryIndex < 1 || boundaryIndex > map.height) return false;
+      transaction = addRow(transaction, rect, boundaryIndex);
       break;
     }
     case "add-column-before": {
-      const colIndex = Math.min(boundaryIndex, cols - 1);
-      if (colIndex < 0) return false;
-      cellPos = getTextPositionInCell(tablePos, table, 0, colIndex);
-      command = () => editor.chain().focus().setTextSelection(cellPos).addColumnBefore().run();
+      if (boundaryIndex !== 0) return false;
+      transaction = addColumn(transaction, rect, 0);
       break;
     }
     case "add-column-after": {
-      const colIndex = Math.min(boundaryIndex - 1, cols - 1);
-      if (colIndex < 0) return false;
-      cellPos = getTextPositionInCell(tablePos, table, 0, colIndex);
-      command = () => editor.chain().focus().setTextSelection(cellPos).addColumnAfter().run();
+      if (boundaryIndex < 1 || boundaryIndex > map.width) return false;
+      transaction = addColumn(transaction, rect, boundaryIndex);
       break;
     }
     default:
       return false;
   }
-  return command();
+  editor.view.dispatch(transaction);
+  editor.commands.focus();
+  return true;
 }
 
 // src/extensions/slash-command.ts

package/editor/extensions/index.d.ts

@@ -1,6 +1,6 @@
 import { AnyExtension, Editor, Range, Extension } from '@tiptap/core';
-import { d as TableContextMenuActionEventDetail, f as TableOverlayActionEventDetail } from '../table-overlay-Bq0F5xPg.js';
-export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-Bq0F5xPg.js';
+import { d as TableContextMenuActionEventDetail, g as TableOverlayActionEventDetail } from '../table-overlay-jjvdARTJ.js';
+export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-jjvdARTJ.js';
 
 /**
  * Default Tiptap extension preset for Looma editor.

package/editor/extensions/index.js

@@ -18,7 +18,7 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "../chunk-NJ2KAMS2.js";
+} from "../chunk-F4AYF33M.js";
 import {
   TABLE_CELL_BACKGROUND_PRESETS
 } from "../chunk-CX4QDKSV.js";

package/editor/index.d.ts

@@ -1,4 +1,4 @@
-export { T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableOverlayAction, f as TableOverlayActionEventDetail, d as TableToolbarActionEventDetail } from './table-overlay-Bq0F5xPg.js';
+export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-jjvdARTJ.js';
 export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
 export { ActiveTableUiState, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
 import '@tiptap/core';