@atlaskit/editor-plugin-table 10.4.5 → 10.4.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 10.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.4.6
+
+### Patch Changes
+
+- [#124950](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124950)
+  [`45961c4f4a9a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45961c4f4a9a3) -
+  [ux] ED-25485 Fixes issue where up/down arrow keys would move to the wrong cell in a table if
+  there was a node selection inside the table.
+
 ## 10.4.5
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/go-to-next-cell.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.goToNextCell = void 0;
+exports.goToNextCellVertical = exports.goToNextCell = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _nesting = require("@atlaskit/editor-common/nesting");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _pluginFactory = require("../plugin-factory");
 var _columnResize = require("./column-resize");
 var _commandsWithAnalytics = require("./commands-with-analytics");
-// #region Constants
-
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
 var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
@@ -41,7 +41,7 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
       var firstCellPos = map.positionAt(0, 0, table.node) + table.start;
       var lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-      // when tabbing backwards at first cell (top left), insert row at the start of table
+      // When tabbing backwards at first cell (top left), insert row at the start of table
       if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
         (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD, {
           index: 0,
@@ -50,7 +50,7 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
         return true;
       }
 
-      // when tabbing forwards at last cell (bottom right), insert row at the end of table
+      // When tabbing forwards at last cell (bottom right), insert row at the end of table
       if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
         (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD, {
           index: map.height,
@@ -64,4 +64,94 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
       return true;
     };
   };
-};
+};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+var goToNextCellVertical = exports.goToNextCellVertical = function goToNextCellVertical(direction) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+    var nestedTableSelection = (0, _nesting.isSelectionTableNestedInTable)(state);
+    if (!(selection instanceof _state.NodeSelection) && !nestedTableSelection) {
+      return false; // Let ProseMirror handle other selection types
+    }
+    var table = (0, _utils2.findTable)(selection);
+    var cell = (0, _utils2.findCellClosestToPos)(state.doc.resolve(selection.from));
+    var selectionPos = selection.from;
+
+    // Handle when we have nested table fully selected
+    if (table && nestedTableSelection && (0, _utils2.isTableSelected)(selection)) {
+      var parentTablePos = table.pos;
+      table = (0, _utils2.findTableClosestToPos)(state.doc.resolve(parentTablePos));
+      cell = (0, _utils2.findCellClosestToPos)(state.doc.resolve(parentTablePos));
+      selectionPos = parentTablePos;
+    }
+    if (!table || !cell || !cell.pos) {
+      return false;
+    }
+    var _state$schema$nodes2 = state.schema.nodes,
+      tableCell = _state$schema$nodes2.tableCell,
+      tableHeader = _state$schema$nodes2.tableHeader;
+
+    // Let ProseMirror handle movement within the cell if content exists above/below
+    if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+      return false;
+    }
+
+    // Move to the next cell vertically
+    var map = _tableMap.TableMap.get(table.node);
+    var nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+    if (dispatch && nextCellPos) {
+      var _$nextCell$nodeAfter, _$nextCell$nodeAfter2;
+      var nextCellStart = table.start + nextCellPos;
+      var $nextCell = state.doc.resolve(nextCellStart);
+      if ((_$nextCell$nodeAfter = $nextCell.nodeAfter) !== null && _$nextCell$nodeAfter !== void 0 && _$nextCell$nodeAfter.type && [tableCell, tableHeader].includes((_$nextCell$nodeAfter2 = $nextCell.nodeAfter) === null || _$nextCell$nodeAfter2 === void 0 ? void 0 : _$nextCell$nodeAfter2.type)) {
+        var contentPos = getTargetPositionInNextCell($nextCell.nodeAfter, nextCellStart, direction);
+        dispatch(state.tr.setSelection(_state.TextSelection.create(state.doc, contentPos)));
+        return true;
+      }
+      return false;
+    }
+    return false; // No next cell found
+  };
+};
+function cellHasContentInDirection(cellNode, cellPos, selectionPos, direction) {
+  var hasContent = false;
+  cellNode.content.forEach(function (node, offset) {
+    var nodeStart = cellPos + 1 + offset;
+    var nodeEnd = nodeStart + node.nodeSize;
+    if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+      hasContent = true; // Content below
+    } else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+      hasContent = true; // Content above
+    }
+  });
+  return hasContent;
+}
+function getTargetPositionInNextCell(cellNode, nextCellStart, direction) {
+  var contentPos = nextCellStart + 1; // Default: just inside the cell
+  if (cellNode.content.size > 0) {
+    if (direction === 1) {
+      var firstChild = cellNode.firstChild;
+      if (firstChild && firstChild.isBlock) {
+        contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+      }
+    } else if (direction === -1) {
+      var lastBlock;
+      var lastOffset = 0;
+      cellNode.content.forEach(function (node, offset) {
+        if (node.isBlock) {
+          lastBlock = node;
+          lastOffset = offset;
+        }
+      });
+      if (lastBlock) {
+        contentPos = nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+      }
+    }
+  }
+  return contentPos;
+}

package/dist/cjs/pm-plugins/keymap.js

@@ -15,6 +15,7 @@ var _commandsWithAnalytics = require("../pm-plugins/drag-and-drop/commands-with-
 var _commands2 = require("./commands");
 var _columnResize = require("./commands/column-resize");
 var _commandsWithAnalytics2 = require("./commands/commands-with-analytics");
+var _goToNextCell = require("./commands/go-to-next-cell");
 var _insert = require("./commands/insert");
 function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
@@ -163,6 +164,14 @@ function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, e
   (0, _keymaps.bindKeymapWithCommand)(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  _keymaps.moveDown.common, (0, _goToNextCell.goToNextCellVertical)(1), list);
+  (0, _keymaps.bindKeymapWithCommand)(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  _keymaps.moveUp.common, (0, _goToNextCell.goToNextCellVertical)(-1), list);
+  (0, _keymaps.bindKeymapWithCommand)(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   _keymaps.decreaseMediaSize.common, (0, _commandsWithAnalytics2.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   (0, _keymaps.bindKeymapWithCommand)(
   // Ignored via go/ees005

package/dist/es2019/pm-plugins/commands/go-to-next-cell.js

@@ -1,9 +1,9 @@
-// #region Constants
-
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
+import { goToNextCell as baseGotoNextCell, findCellClosestToPos, findTable, findTableClosestToPos, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 import { insertRowWithAnalytics } from './commands-with-analytics';
@@ -34,7 +34,7 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
   const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
   const lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-  // when tabbing backwards at first cell (top left), insert row at the start of table
+  // When tabbing backwards at first cell (top left), insert row at the start of table
   if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
     insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: 0,
@@ -43,7 +43,7 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
     return true;
   }
 
-  // when tabbing forwards at last cell (bottom right), insert row at the end of table
+  // When tabbing forwards at last cell (bottom right), insert row at the end of table
   if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
     insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: map.height,
@@ -55,4 +55,95 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
     return baseGotoNextCell(direction)(state, dispatch);
   }
   return true;
-};
+};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export const goToNextCellVertical = direction => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const nestedTableSelection = isSelectionTableNestedInTable(state);
+  if (!(selection instanceof NodeSelection) && !nestedTableSelection) {
+    return false; // Let ProseMirror handle other selection types
+  }
+  let table = findTable(selection);
+  let cell = findCellClosestToPos(state.doc.resolve(selection.from));
+  let selectionPos = selection.from;
+
+  // Handle when we have nested table fully selected
+  if (table && nestedTableSelection && isTableSelected(selection)) {
+    const parentTablePos = table.pos;
+    table = findTableClosestToPos(state.doc.resolve(parentTablePos));
+    cell = findCellClosestToPos(state.doc.resolve(parentTablePos));
+    selectionPos = parentTablePos;
+  }
+  if (!table || !cell || !cell.pos) {
+    return false;
+  }
+  const {
+    tableCell,
+    tableHeader
+  } = state.schema.nodes;
+
+  // Let ProseMirror handle movement within the cell if content exists above/below
+  if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+    return false;
+  }
+
+  // Move to the next cell vertically
+  const map = TableMap.get(table.node);
+  const nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+  if (dispatch && nextCellPos) {
+    var _$nextCell$nodeAfter, _$nextCell$nodeAfter2;
+    const nextCellStart = table.start + nextCellPos;
+    const $nextCell = state.doc.resolve(nextCellStart);
+    if ((_$nextCell$nodeAfter = $nextCell.nodeAfter) !== null && _$nextCell$nodeAfter !== void 0 && _$nextCell$nodeAfter.type && [tableCell, tableHeader].includes((_$nextCell$nodeAfter2 = $nextCell.nodeAfter) === null || _$nextCell$nodeAfter2 === void 0 ? void 0 : _$nextCell$nodeAfter2.type)) {
+      const contentPos = getTargetPositionInNextCell($nextCell.nodeAfter, nextCellStart, direction);
+      dispatch(state.tr.setSelection(TextSelection.create(state.doc, contentPos)));
+      return true;
+    }
+    return false;
+  }
+  return false; // No next cell found
+};
+function cellHasContentInDirection(cellNode, cellPos, selectionPos, direction) {
+  let hasContent = false;
+  cellNode.content.forEach((node, offset) => {
+    const nodeStart = cellPos + 1 + offset;
+    const nodeEnd = nodeStart + node.nodeSize;
+    if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+      hasContent = true; // Content below
+    } else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+      hasContent = true; // Content above
+    }
+  });
+  return hasContent;
+}
+function getTargetPositionInNextCell(cellNode, nextCellStart, direction) {
+  let contentPos = nextCellStart + 1; // Default: just inside the cell
+  if (cellNode.content.size > 0) {
+    if (direction === 1) {
+      const firstChild = cellNode.firstChild;
+      if (firstChild && firstChild.isBlock) {
+        contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+      }
+    } else if (direction === -1) {
+      let lastBlock;
+      let lastOffset = 0;
+      cellNode.content.forEach((node, offset) => {
+        if (node.isBlock) {
+          lastBlock = node;
+          lastOffset = offset;
+        }
+      });
+      if (lastBlock) {
+        contentPos = nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+      }
+    }
+  }
+  return contentPos;
+}

package/dist/es2019/pm-plugins/keymap.js

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveDown, moveLeft, moveRight, moveRowDown, moveRowUp, moveUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
@@ -8,6 +8,7 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from './commands';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from './commands/column-resize';
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from './commands/commands-with-analytics';
+import { goToNextCellVertical } from './commands/go-to-next-cell';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable, insertTableWithNestingSupport } from './commands/insert';
 export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
@@ -146,6 +147,14 @@ export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProvide
   bindKeymapWithCommand(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveDown.common, goToNextCellVertical(1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveUp.common, goToNextCellVertical(-1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(
   // Ignored via go/ees005

package/dist/esm/pm-plugins/commands/go-to-next-cell.js

@@ -1,9 +1,9 @@
-// #region Constants
-
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
+import { goToNextCell as baseGotoNextCell, findCellClosestToPos, findTable, findTableClosestToPos, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 import { insertRowWithAnalytics } from './commands-with-analytics';
@@ -35,7 +35,7 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify,
       var firstCellPos = map.positionAt(0, 0, table.node) + table.start;
       var lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-      // when tabbing backwards at first cell (top left), insert row at the start of table
+      // When tabbing backwards at first cell (top left), insert row at the start of table
       if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
         insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
           index: 0,
@@ -44,7 +44,7 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify,
         return true;
       }
 
-      // when tabbing forwards at last cell (bottom right), insert row at the end of table
+      // When tabbing forwards at last cell (bottom right), insert row at the end of table
       if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
         insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
           index: map.height,
@@ -58,4 +58,94 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify,
       return true;
     };
   };
-};
+};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export var goToNextCellVertical = function goToNextCellVertical(direction) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+    var nestedTableSelection = isSelectionTableNestedInTable(state);
+    if (!(selection instanceof NodeSelection) && !nestedTableSelection) {
+      return false; // Let ProseMirror handle other selection types
+    }
+    var table = findTable(selection);
+    var cell = findCellClosestToPos(state.doc.resolve(selection.from));
+    var selectionPos = selection.from;
+
+    // Handle when we have nested table fully selected
+    if (table && nestedTableSelection && isTableSelected(selection)) {
+      var parentTablePos = table.pos;
+      table = findTableClosestToPos(state.doc.resolve(parentTablePos));
+      cell = findCellClosestToPos(state.doc.resolve(parentTablePos));
+      selectionPos = parentTablePos;
+    }
+    if (!table || !cell || !cell.pos) {
+      return false;
+    }
+    var _state$schema$nodes2 = state.schema.nodes,
+      tableCell = _state$schema$nodes2.tableCell,
+      tableHeader = _state$schema$nodes2.tableHeader;
+
+    // Let ProseMirror handle movement within the cell if content exists above/below
+    if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+      return false;
+    }
+
+    // Move to the next cell vertically
+    var map = TableMap.get(table.node);
+    var nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+    if (dispatch && nextCellPos) {
+      var _$nextCell$nodeAfter, _$nextCell$nodeAfter2;
+      var nextCellStart = table.start + nextCellPos;
+      var $nextCell = state.doc.resolve(nextCellStart);
+      if ((_$nextCell$nodeAfter = $nextCell.nodeAfter) !== null && _$nextCell$nodeAfter !== void 0 && _$nextCell$nodeAfter.type && [tableCell, tableHeader].includes((_$nextCell$nodeAfter2 = $nextCell.nodeAfter) === null || _$nextCell$nodeAfter2 === void 0 ? void 0 : _$nextCell$nodeAfter2.type)) {
+        var contentPos = getTargetPositionInNextCell($nextCell.nodeAfter, nextCellStart, direction);
+        dispatch(state.tr.setSelection(TextSelection.create(state.doc, contentPos)));
+        return true;
+      }
+      return false;
+    }
+    return false; // No next cell found
+  };
+};
+function cellHasContentInDirection(cellNode, cellPos, selectionPos, direction) {
+  var hasContent = false;
+  cellNode.content.forEach(function (node, offset) {
+    var nodeStart = cellPos + 1 + offset;
+    var nodeEnd = nodeStart + node.nodeSize;
+    if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+      hasContent = true; // Content below
+    } else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+      hasContent = true; // Content above
+    }
+  });
+  return hasContent;
+}
+function getTargetPositionInNextCell(cellNode, nextCellStart, direction) {
+  var contentPos = nextCellStart + 1; // Default: just inside the cell
+  if (cellNode.content.size > 0) {
+    if (direction === 1) {
+      var firstChild = cellNode.firstChild;
+      if (firstChild && firstChild.isBlock) {
+        contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+      }
+    } else if (direction === -1) {
+      var lastBlock;
+      var lastOffset = 0;
+      cellNode.content.forEach(function (node, offset) {
+        if (node.isBlock) {
+          lastBlock = node;
+          lastOffset = offset;
+        }
+      });
+      if (lastBlock) {
+        contentPos = nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+      }
+    }
+  }
+  return contentPos;
+}

package/dist/esm/pm-plugins/keymap.js

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveDown, moveLeft, moveRight, moveRowDown, moveRowUp, moveUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
@@ -8,6 +8,7 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from './commands';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from './commands/column-resize';
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from './commands/commands-with-analytics';
+import { goToNextCellVertical } from './commands/go-to-next-cell';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable, insertTableWithNestingSupport } from './commands/insert';
 export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
@@ -156,6 +157,14 @@ export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProvide
   bindKeymapWithCommand(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveDown.common, goToNextCellVertical(1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveUp.common, goToNextCellVertical(-1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(
   // Ignored via go/ees005

package/dist/types/pm-plugins/commands/go-to-next-cell.d.ts

@@ -3,3 +3,9 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => (direction: Direction) => Command;
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export declare const goToNextCellVertical: (direction: Direction) => Command;

package/dist/types-ts4.5/pm-plugins/commands/go-to-next-cell.d.ts

@@ -3,3 +3,9 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => (direction: Direction) => Command;
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export declare const goToNextCellVertical: (direction: Direction) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.4.5",
+	"version": "10.4.7",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-extension": "^5.0.0",
+		"@atlaskit/editor-plugin-extension": "5.0.8",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/toggle": "^15.0.0",

package/src/pm-plugins/commands/go-to-next-cell.ts

@@ -1,13 +1,21 @@
-// #region Constants
 import type { IntlShape } from 'react-intl-next/src/types';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import type { Command } from '@atlaskit/editor-common/types';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import type { Direction } from '@atlaskit/editor-tables/types';
-import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
+import {
+	goToNextCell as baseGotoNextCell,
+	findCellClosestToPos,
+	findTable,
+	findTableClosestToPos,
+	isTableSelected,
+} from '@atlaskit/editor-tables/utils';
 
 import { getPluginState } from '../plugin-factory';
 
@@ -47,7 +55,7 @@ export const goToNextCell =
 		const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
 		const lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-		// when tabbing backwards at first cell (top left), insert row at the start of table
+		// When tabbing backwards at first cell (top left), insert row at the start of table
 		if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
 			insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
 				index: 0,
@@ -56,7 +64,7 @@ export const goToNextCell =
 			return true;
 		}
 
-		// when tabbing forwards at last cell (bottom right), insert row at the end of table
+		// When tabbing forwards at last cell (bottom right), insert row at the end of table
 		if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
 			insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
 				index: map.height,
@@ -71,3 +79,120 @@ export const goToNextCell =
 
 		return true;
 	};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export const goToNextCellVertical =
+	(direction: Direction): Command =>
+	(state, dispatch) => {
+		const { selection } = state;
+		const nestedTableSelection = isSelectionTableNestedInTable(state);
+
+		if (!(selection instanceof NodeSelection) && !nestedTableSelection) {
+			return false; // Let ProseMirror handle other selection types
+		}
+
+		let table = findTable(selection);
+		let cell = findCellClosestToPos(state.doc.resolve(selection.from));
+		let selectionPos = selection.from;
+
+		// Handle when we have nested table fully selected
+		if (table && nestedTableSelection && isTableSelected(selection)) {
+			const parentTablePos = table.pos;
+			table = findTableClosestToPos(state.doc.resolve(parentTablePos));
+			cell = findCellClosestToPos(state.doc.resolve(parentTablePos));
+			selectionPos = parentTablePos;
+		}
+
+		if (!table || !cell || !cell.pos) {
+			return false;
+		}
+
+		const { tableCell, tableHeader } = state.schema.nodes;
+
+		// Let ProseMirror handle movement within the cell if content exists above/below
+		if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+			return false;
+		}
+
+		// Move to the next cell vertically
+		const map = TableMap.get(table.node);
+		const nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+		if (dispatch && nextCellPos) {
+			const nextCellStart = table.start + nextCellPos;
+			const $nextCell = state.doc.resolve(nextCellStart);
+
+			if (
+				$nextCell.nodeAfter?.type &&
+				[tableCell, tableHeader].includes($nextCell.nodeAfter?.type)
+			) {
+				const contentPos = getTargetPositionInNextCell(
+					$nextCell.nodeAfter,
+					nextCellStart,
+					direction,
+				);
+
+				dispatch(state.tr.setSelection(TextSelection.create(state.doc, contentPos)));
+				return true;
+			}
+
+			return false;
+		}
+
+		return false; // No next cell found
+	};
+
+function cellHasContentInDirection(
+	cellNode: PMNode,
+	cellPos: number,
+	selectionPos: number,
+	direction: Direction,
+): boolean {
+	let hasContent = false;
+
+	cellNode.content.forEach((node: PMNode, offset: number) => {
+		const nodeStart = cellPos + 1 + offset;
+		const nodeEnd = nodeStart + node.nodeSize;
+
+		if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+			hasContent = true; // Content below
+		} else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+			hasContent = true; // Content above
+		}
+	});
+
+	return hasContent;
+}
+
+function getTargetPositionInNextCell(
+	cellNode: PMNode,
+	nextCellStart: number,
+	direction: Direction,
+): number {
+	let contentPos = nextCellStart + 1; // Default: just inside the cell
+	if (cellNode.content.size > 0) {
+		if (direction === 1) {
+			const firstChild = cellNode.firstChild;
+			if (firstChild && firstChild.isBlock) {
+				contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+			}
+		} else if (direction === -1) {
+			let lastBlock: PMNode | undefined;
+			let lastOffset = 0;
+			cellNode.content.forEach((node: PMNode, offset: number) => {
+				if (node.isBlock) {
+					lastBlock = node;
+					lastOffset = offset;
+				}
+			});
+			if (lastBlock) {
+				contentPos =
+					nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+			}
+		}
+	}
+	return contentPos;
+}

package/src/pm-plugins/keymap.ts

@@ -27,10 +27,12 @@ import {
 	increaseMediaSize,
 	moveColumnLeft,
 	moveColumnRight,
+	moveDown,
 	moveLeft,
 	moveRight,
 	moveRowDown,
 	moveRowUp,
+	moveUp,
 	nextCell,
 	previousCell,
 	startColumnResizing,
@@ -60,6 +62,7 @@ import {
 	deleteTableIfSelectedWithAnalytics,
 	emptyMultipleCellsWithAnalytics,
 } from './commands/commands-with-analytics';
+import { goToNextCellVertical } from './commands/go-to-next-cell';
 import {
 	addColumnAfter as addColumnAfterCommand,
 	addColumnBefore as addColumnBeforeCommand,
@@ -362,6 +365,22 @@ export function keymapPlugin(
 		list,
 	);
 
+	bindKeymapWithCommand(
+		// Ignored via go/ees005
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		moveDown.common!,
+		goToNextCellVertical(1),
+		list,
+	);
+
+	bindKeymapWithCommand(
+		// Ignored via go/ees005
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		moveUp.common!,
+		goToNextCellVertical(-1),
+		list,
+	);
+
 	bindKeymapWithCommand(
 		// Ignored via go/ees005
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion