@trafica/editor 1.0.21 → 1.0.22

package/dist/index.d.mts

@@ -665,6 +665,10 @@ declare function replaceAllMatches(matches: SearchMatch[], replacement: string):
  *
  * Tab         → move cursor to next cell (adds row if on last cell)
  * Shift+Tab   → move cursor to previous cell (no-op on first cell)
+ * ArrowRight  → move to next cell when at end of current cell
+ * ArrowLeft   → move to previous cell when at start of current cell
+ * ArrowDown   → move to cell below when on bottom line
+ * ArrowUp     → move to cell above when on top line
  *
  * Enter inside a cell is handled by the default handleEnter command because
  * findContentBlockPath correctly resolves to the paragraph inside the cell

package/dist/index.d.ts

@@ -665,6 +665,10 @@ declare function replaceAllMatches(matches: SearchMatch[], replacement: string):
  *
  * Tab         → move cursor to next cell (adds row if on last cell)
  * Shift+Tab   → move cursor to previous cell (no-op on first cell)
+ * ArrowRight  → move to next cell when at end of current cell
+ * ArrowLeft   → move to previous cell when at start of current cell
+ * ArrowDown   → move to cell below when on bottom line
+ * ArrowUp     → move to cell above when on top line
  *
  * Enter inside a cell is handled by the default handleEnter command because
  * findContentBlockPath correctly resolves to the paragraph inside the cell

package/dist/index.js

@@ -8629,6 +8629,53 @@ function prettyPrintHTML(html) {
 }
 
 // src/editor/table/TablePlugin.ts
+function getCellDOMElement(cellPathJson) {
+  return document.querySelector(`[data-block-path='${cellPathJson}']`);
+}
+function isCaretAtContainerStart(container) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  if (range.startOffset !== 0) return false;
+  let node = range.startContainer;
+  while (node && node !== container) {
+    if (node.previousSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretAtContainerEnd(container) {
+  var _a, _b;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  const endNode = range.endContainer;
+  const endOffset = range.endOffset;
+  const len = endNode.nodeType === Node.TEXT_NODE ? (_b = (_a = endNode.textContent) == null ? void 0 : _a.length) != null ? _b : 0 : endNode.childNodes.length;
+  if (endOffset !== len) return false;
+  let node = endNode;
+  while (node && node !== container) {
+    if (node.nextSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretOnEdgeLine(container, direction) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const caretRange = sel.getRangeAt(0).cloneRange();
+  caretRange.collapse(true);
+  const caretRects = caretRange.getClientRects();
+  if (!caretRects.length) return true;
+  const caretRect = caretRects[0];
+  const containerRect = container.getBoundingClientRect();
+  const lineHeight = parseFloat(getComputedStyle(container).lineHeight) || 20;
+  if (direction === "up") {
+    return caretRect.top < containerRect.top + lineHeight;
+  } else {
+    return caretRect.bottom > containerRect.bottom - lineHeight;
+  }
+}
 var TablePlugin = {
   name: "table",
   keyBindings: {
@@ -8679,6 +8726,125 @@ var TablePlugin = {
       engine.dispatch(tr);
       return true;
     },
+    "ArrowRight": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerEnd(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row;
+      let nextCol = col + 1;
+      while (nextRow < rows) {
+        if (nextCol >= cols) {
+          nextCol = 0;
+          nextRow++;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        nextCol++;
+      }
+      if (nextRow >= rows) return true;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowLeft": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerStart(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { cols } = getTableDimensions(table);
+      let prevRow = row;
+      let prevCol = col - 1;
+      while (prevRow >= 0) {
+        if (prevCol < 0) {
+          prevCol = cols - 1;
+          prevRow--;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, prevCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        prevCol--;
+      }
+      if (prevRow < 0) return true;
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, prevCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowDown": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "down")) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row + 1;
+      while (nextRow < rows) {
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        nextRow++;
+      }
+      if (nextRow >= rows) return false;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowUp": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "up")) return false;
+      let prevRow = row - 1;
+      while (prevRow >= 0) {
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        prevRow--;
+      }
+      if (prevRow < 0) return false;
+      const { cols } = getTableDimensions(getNodeAtPath(state.doc, tablePath));
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
     "Shift+Tab": (engine) => {
       var _a;
       const state = engine.getState();