@atlaskit/editor-tables 2.8.4 → 2.8.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-tables
 
+## 2.8.6
+
+### Patch Changes
+
+- [#109121](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109121)
+  [`6d2a8d349742b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d2a8d349742b) -
+  [ux] [ED-25650] This PR is aligning keyboard behaviour for nested tables and parent tables by
+  fixing a bug where pressing Tab sometimes incorrectly selects the drag handle and gets stuck.
+
+## 2.8.5
+
+### Patch Changes
+
+- [#109026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109026)
+  [`05e5c3f595ae0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/05e5c3f595ae0) -
+  [ux] [ED-26076] Fixed bug where selecting from parent cell to nested table cell caused a cell
+  selection instead of a partial text selection.
+
 ## 2.8.4
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ exports.handleTripleClick = handleTripleClick;
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _cellSelection = require("../cell-selection");
 var _utils = require("../utils");
 var _cells = require("../utils/cells");
@@ -205,13 +206,20 @@ function handleMouseDown(view, event, dragAndDropEnabled) {
   }
   function move(event) {
     var anchor = _pluginKey.tableEditingKey.getState(view.state);
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    var currDOMCell = domInCell(view, event.target);
+    var isCurrCellInsideNestedTable = isInsideNestedTable(view, event);
+    var isStartCellInsideNestedTable = isInsideNestedTable(view, startEvent);
+    var isBothCellsInSameTable = isCurrCellInsideNestedTable === isStartCellInsideNestedTable;
     var $moveAnchor;
+    var oldIfStatement = currDOMCell !== startDOMCell;
+    var newIfStatement = currDOMCell !== startDOMCell && isBothCellsInSameTable;
+    var checkCellsAreDifferent = (0, _platformFeatureFlags.fg)('platform_editor_cell_selection_with_nested_tables') ? newIfStatement : oldIfStatement;
     if (anchor != null) {
       // Continuing an existing cross-cell selection
       $moveAnchor = view.state.doc.resolve(anchor);
       // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    } else if (domInCell(view, event.target) !== startDOMCell) {
+    } else if (checkCellsAreDifferent) {
       // Moving out of the initial cell -- start a new cell selection
       $moveAnchor = cellUnderMouse(view, startEvent);
       if (!$moveAnchor) {
@@ -275,4 +283,21 @@ function cellUnderMouse(view, event) {
     return null;
   }
   return (0, _cells.cellAround)(view.state.doc.resolve(mousePos.pos));
+}
+function isInsideNestedTable(view, event) {
+  var mousePos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY
+  });
+  if (!mousePos) {
+    return false;
+  }
+  var pos = view.state.doc.resolve(mousePos.pos);
+  var table = (0, _utils.findTableClosestToPos)(pos);
+  if (!table) {
+    return false;
+  }
+  var parent = view.state.doc.resolve(table.pos).parent;
+  var nodeTypes = view.state.schema.nodes;
+  return [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
 }

package/dist/cjs/utils/go-to-next-cell.js

@@ -52,6 +52,11 @@ function findNextCell($cell, direction) {
       return $cell.pos + $cell.nodeAfter.nodeSize;
     }
     var table = $cell.node(-1);
+
+    // table is the parent table, not the nested table
+    if ($cell.node(-4) && $cell.node(-4).type.name === 'table') {
+      table = $cell.node(-4);
+    }
     for (var _row = $cell.indexAfter(-1), rowStart = $cell.after(); _row < table.childCount; _row++) {
       var _rowNode = table.child(_row);
       if (_rowNode.childCount) {

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

@@ -4,8 +4,9 @@
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CellSelection } from '../cell-selection';
-import { tableNodeTypes } from '../utils';
+import { findTableClosestToPos, tableNodeTypes } from '../utils';
 import { cellAround, nextCell } from '../utils/cells';
 import { inSameTable } from '../utils/tables';
 import { tableEditingKey } from './plugin-key';
@@ -204,13 +205,20 @@ export function handleMouseDown(view, event, dragAndDropEnabled) {
   }
   function move(event) {
     const anchor = tableEditingKey.getState(view.state);
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    const currDOMCell = domInCell(view, event.target);
+    const isCurrCellInsideNestedTable = isInsideNestedTable(view, event);
+    const isStartCellInsideNestedTable = isInsideNestedTable(view, startEvent);
+    const isBothCellsInSameTable = isCurrCellInsideNestedTable === isStartCellInsideNestedTable;
     let $moveAnchor;
+    const oldIfStatement = currDOMCell !== startDOMCell;
+    const newIfStatement = currDOMCell !== startDOMCell && isBothCellsInSameTable;
+    const checkCellsAreDifferent = fg('platform_editor_cell_selection_with_nested_tables') ? newIfStatement : oldIfStatement;
     if (anchor != null) {
       // Continuing an existing cross-cell selection
       $moveAnchor = view.state.doc.resolve(anchor);
       // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    } else if (domInCell(view, event.target) !== startDOMCell) {
+    } else if (checkCellsAreDifferent) {
       // Moving out of the initial cell -- start a new cell selection
       $moveAnchor = cellUnderMouse(view, startEvent);
       if (!$moveAnchor) {
@@ -276,4 +284,21 @@ function cellUnderMouse(view, event) {
     return null;
   }
   return cellAround(view.state.doc.resolve(mousePos.pos));
+}
+function isInsideNestedTable(view, event) {
+  const mousePos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY
+  });
+  if (!mousePos) {
+    return false;
+  }
+  const pos = view.state.doc.resolve(mousePos.pos);
+  const table = findTableClosestToPos(pos);
+  if (!table) {
+    return false;
+  }
+  const parent = view.state.doc.resolve(table.pos).parent;
+  const nodeTypes = view.state.schema.nodes;
+  return [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
 }

package/dist/es2019/utils/go-to-next-cell.js

@@ -45,7 +45,12 @@ function findNextCell($cell, direction) {
     if ($cell.index() < $cell.parent.childCount - 1 && $cell.nodeAfter) {
       return $cell.pos + $cell.nodeAfter.nodeSize;
     }
-    const table = $cell.node(-1);
+    let table = $cell.node(-1);
+
+    // table is the parent table, not the nested table
+    if ($cell.node(-4) && $cell.node(-4).type.name === 'table') {
+      table = $cell.node(-4);
+    }
     for (let row = $cell.indexAfter(-1), rowStart = $cell.after(); row < table.childCount; row++) {
       const rowNode = table.child(row);
       if (rowNode.childCount) {

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

@@ -4,8 +4,9 @@
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CellSelection } from '../cell-selection';
-import { tableNodeTypes } from '../utils';
+import { findTableClosestToPos, tableNodeTypes } from '../utils';
 import { cellAround, nextCell } from '../utils/cells';
 import { inSameTable } from '../utils/tables';
 import { tableEditingKey } from './plugin-key';
@@ -197,13 +198,20 @@ export function handleMouseDown(view, event, dragAndDropEnabled) {
   }
   function move(event) {
     var anchor = tableEditingKey.getState(view.state);
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    var currDOMCell = domInCell(view, event.target);
+    var isCurrCellInsideNestedTable = isInsideNestedTable(view, event);
+    var isStartCellInsideNestedTable = isInsideNestedTable(view, startEvent);
+    var isBothCellsInSameTable = isCurrCellInsideNestedTable === isStartCellInsideNestedTable;
     var $moveAnchor;
+    var oldIfStatement = currDOMCell !== startDOMCell;
+    var newIfStatement = currDOMCell !== startDOMCell && isBothCellsInSameTable;
+    var checkCellsAreDifferent = fg('platform_editor_cell_selection_with_nested_tables') ? newIfStatement : oldIfStatement;
     if (anchor != null) {
       // Continuing an existing cross-cell selection
       $moveAnchor = view.state.doc.resolve(anchor);
       // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    } else if (domInCell(view, event.target) !== startDOMCell) {
+    } else if (checkCellsAreDifferent) {
       // Moving out of the initial cell -- start a new cell selection
       $moveAnchor = cellUnderMouse(view, startEvent);
       if (!$moveAnchor) {
@@ -267,4 +275,21 @@ function cellUnderMouse(view, event) {
     return null;
   }
   return cellAround(view.state.doc.resolve(mousePos.pos));
+}
+function isInsideNestedTable(view, event) {
+  var mousePos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY
+  });
+  if (!mousePos) {
+    return false;
+  }
+  var pos = view.state.doc.resolve(mousePos.pos);
+  var table = findTableClosestToPos(pos);
+  if (!table) {
+    return false;
+  }
+  var parent = view.state.doc.resolve(table.pos).parent;
+  var nodeTypes = view.state.schema.nodes;
+  return [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
 }

package/dist/esm/utils/go-to-next-cell.js

@@ -46,6 +46,11 @@ function findNextCell($cell, direction) {
       return $cell.pos + $cell.nodeAfter.nodeSize;
     }
     var table = $cell.node(-1);
+
+    // table is the parent table, not the nested table
+    if ($cell.node(-4) && $cell.node(-4).type.name === 'table') {
+      table = $cell.node(-4);
+    }
     for (var _row = $cell.indexAfter(-1), rowStart = $cell.after(); _row < table.childCount; _row++) {
       var _rowNode = table.child(_row);
       if (_rowNode.childCount) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-tables",
-	"version": "2.8.4",
+	"version": "2.8.6",
 	"description": "A package that contains common classes and utility functions for editor tables",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,6 +51,9 @@
 	"platform-feature-flags": {
 		"platform_editor_table_fix_move_column": {
 			"type": "boolean"
+		},
+		"platform_editor_cell_selection_with_nested_tables": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {