@atlaskit/editor-tables 2.4.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-tables
 
+## 2.5.1
+
+### Patch Changes
+
+- [#69625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69625) [`67d7971c6ddf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67d7971c6ddf) - [ux] Tables DnD now supports dragging multiple rows/columns in a single drag using multi-select
+
+## 2.5.0
+
+### Minor Changes
+
+- [#69232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69232) [`93c8f231aa82`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93c8f231aa82) - Optimized the table move column logic to perform individual insert/deletes per row
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/table-map.js

@@ -143,9 +143,34 @@ var TableMap = exports.TableMap = /*#__PURE__*/function () {
   }, {
     key: "isPosMerged",
     value: function isPosMerged(pos) {
-      return this.map.filter(function (cellPos) {
-        return cellPos === pos;
-      }).length > 1;
+      return this.map.includes(pos, this.map.indexOf(pos) + 1);
+    }
+  }, {
+    key: "isCellMerged",
+    value: function isCellMerged(row, col) {
+      return this.isCellMergedTopLeft(row, col) || this.isCellMergedBottomRight(row, col);
+    }
+  }, {
+    key: "isCellMergedTopLeft",
+    value: function isCellMergedTopLeft(row, col) {
+      var pos = this.map[row * this.width + col];
+      return (
+        // top
+        row > 0 && pos === this.map[(row - 1) * this.width + col] ||
+        // left
+        col > 0 && pos === this.map[row * this.width + (col - 1)]
+      );
+    }
+  }, {
+    key: "isCellMergedBottomRight",
+    value: function isCellMergedBottomRight(row, col) {
+      var pos = this.map[row * this.width + col];
+      return (
+        // bottom
+        row < this.height - 1 && pos === this.map[(row + 1) * this.width + col] ||
+        // right
+        col < this.width - 1 && pos === this.map[row * this.width + (col + 1)]
+      );
     }
 
     // :: (number, string, number) → ?number

package/dist/cjs/utils/analyse-table.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.determineTableHeaderStateFromTableNode = determineTableHeaderStateFromTableNode;
+function determineTableHeaderStateFromTableNode(table, tableMap, types) {
+  // We only really need to check the 2nd cell in the row/col if it's a header, since we only support a single full row/col header on the top & left
+  // of a table. We can assume that if the 2nd cell is a header then the entire row/col is a header.
+  // Be carefull though! when checking the 1st cell as it shares its header state with both row/cols.
+  // This means we wont be able to reliably identify header state on tables smaller the 2x2, however we can do best guess.
+
+  // This is a 3 bit mask;
+  // bit: 0 = Identifies if the cell at (0, 0) (row, col - 0-based) is a header cell or not
+  // bit: 1 = Identifies if the cell at (0, 1) is a header cell or not
+  // bit: 2 = Identifies if the cell at (1, 0) is a header cell or not
+  var mask = 0;
+
+  // At minimum we should have 1 cell in the table.
+  var topLeftCell = table.nodeAt(tableMap.map[0]);
+  // If this cell is a header that could indicate
+  mask |= topLeftCell && topLeftCell.type === types.header_cell ? 1 : 0;
+  if (tableMap.width > 1) {
+    var cell = table.nodeAt(tableMap.map[1]);
+    // If the cell at (0, 1) is a header then we set the bit flag to indicate row headers are enabled, otherwise if it's
+    // not then we will set the col headers enabled flag (and vice versa in the branch below) only if the cell at (0,0)
+    // was a header cell.
+    mask |= cell && cell.type === types.header_cell ? 2 : 4 * (mask & 1);
+  }
+  if (tableMap.height > 1) {
+    var _cell = table.nodeAt(tableMap.map[tableMap.width]);
+    mask |= _cell && _cell.type === types.header_cell ? 4 : 2 * (mask & 1);
+  }
+  return {
+    rowHeaderEnabled: mask === 7 || mask === 3,
+    columnHeaderEnabled: mask === 7 || mask === 5
+  };
+}

package/dist/cjs/utils/get-selection-range-in-column.js

@@ -7,10 +7,11 @@ exports.getSelectionRangeInColumn = void 0;
 var _getCellsInColumn = require("./get-cells-in-column");
 var _getCellsInRow = require("./get-cells-in-row");
 // Returns a range of rectangular selection spanning all merged cells around a column at index `columnIndex`.
-var getSelectionRangeInColumn = exports.getSelectionRangeInColumn = function getSelectionRangeInColumn(columnIndex) {
+var getSelectionRangeInColumn = exports.getSelectionRangeInColumn = function getSelectionRangeInColumn(startColIndex) {
+  var endColIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startColIndex;
   return function (tr) {
-    var startIndex = columnIndex;
-    var endIndex = columnIndex;
+    var startIndex = startColIndex;
+    var endIndex = endColIndex;
 
     // looking for selection start column (startIndex)
     var _loop = function _loop(i) {
@@ -27,7 +28,7 @@ var getSelectionRangeInColumn = exports.getSelectionRangeInColumn = function get
         });
       }
     };
-    for (var i = columnIndex; i >= 0; i--) {
+    for (var i = startColIndex; i >= 0; i--) {
       _loop(i);
     }
     // looking for selection end column (endIndex)
@@ -42,7 +43,7 @@ var getSelectionRangeInColumn = exports.getSelectionRangeInColumn = function get
         });
       }
     };
-    for (var _i = columnIndex; _i <= endIndex; _i++) {
+    for (var _i = startColIndex; _i <= endIndex; _i++) {
       _loop2(_i);
     }
 

package/dist/cjs/utils/move-column.js

@@ -1,13 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.moveColumn = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _cellSelection = require("../cell-selection");
+var _tableMap = require("../table-map");
+var _analyseTable = require("./analyse-table");
 var _cloneTr = require("./clone-tr");
 var _find = require("./find");
 var _getSelectionRangeInColumn = require("./get-selection-range-in-column");
+var _normalizeDirection = require("./normalize-direction");
 var _reorderUtils = require("./reorder-utils");
+var _tableNodeTypes = require("./table-node-types");
 // :: (originColumnIndex: number, targetColumnIndex: targetColumnIndex, options?: MovementOptions) → (tr: Transaction) → Transaction
 // Returns a new transaction that moves the origin column to the target index;
 //
@@ -136,10 +143,11 @@ var _reorderUtils = require("./reorder-utils");
 //   moveColumn(x, y, options)(state.tr)
 // );
 // ```
-var moveColumn = exports.moveColumn = function moveColumn(originColumnIndex, targetColumnIndex) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+var moveColumn = exports.moveColumn = function moveColumn(state, originColumnIndex, targetColumnIndex) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
     tryToFit: false,
-    direction: 0
+    direction: 0,
+    selectAfterMove: false
   };
   return function (tr) {
     var _originalColumnRanges, _targetColumnRanges$i;
@@ -147,21 +155,122 @@ var moveColumn = exports.moveColumn = function moveColumn(originColumnIndex, tar
     if (!table) {
       return tr;
     }
+
+    // normalize the origin index to an array since this supports moving both a single & multiple cols in a single action.
     if (!Array.isArray(originColumnIndex)) {
       originColumnIndex = [originColumnIndex];
     }
-    var originalColumnRanges = (0, _getSelectionRangeInColumn.getSelectionRangeInColumn)(originColumnIndex[0])(tr);
+    var tableMap = _tableMap.TableMap.get(table.node);
+    var originalColumnRanges = (0, _getSelectionRangeInColumn.getSelectionRangeInColumn)(Math.min.apply(Math, (0, _toConsumableArray2.default)(originColumnIndex)), Math.max.apply(Math, (0, _toConsumableArray2.default)(originColumnIndex)))(tr);
     var targetColumnRanges = (0, _getSelectionRangeInColumn.getSelectionRangeInColumn)(targetColumnIndex)(tr);
     var indexesOriginColumn = (_originalColumnRanges = originalColumnRanges === null || originalColumnRanges === void 0 ? void 0 : originalColumnRanges.indexes) !== null && _originalColumnRanges !== void 0 ? _originalColumnRanges : [];
     var indexesTargetColumn = (_targetColumnRanges$i = targetColumnRanges === null || targetColumnRanges === void 0 ? void 0 : targetColumnRanges.indexes) !== null && _targetColumnRanges$i !== void 0 ? _targetColumnRanges$i : [];
+    var min = indexesOriginColumn[0];
+    var max = indexesOriginColumn[indexesOriginColumn.length - 1];
     if (indexesOriginColumn.includes(targetColumnIndex)) {
       return tr;
     }
     if (!options.tryToFit && indexesTargetColumn.length > 1) {
       (0, _reorderUtils.isValidReorder)(originColumnIndex[0], targetColumnIndex, indexesTargetColumn, 'column');
     }
-    var newTable = (0, _reorderUtils.moveTableColumn)(table, indexesOriginColumn, indexesTargetColumn, options.direction);
-    var newTr = (0, _cloneTr.cloneTr)(tr).replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
+    var types = (0, _tableNodeTypes.tableNodeTypes)(state.schema);
+    var direction = (0, _normalizeDirection.normalizeDirection)(min, targetColumnIndex, options);
+    var actualTargetIndex = Math[direction === 'start' ? 'min' : 'max'].apply(Math, (0, _toConsumableArray2.default)(indexesTargetColumn));
+    var _determineTableHeader = (0, _analyseTable.determineTableHeaderStateFromTableNode)(table.node, tableMap, types),
+      rowHeaderEnabled = _determineTableHeader.rowHeaderEnabled,
+      columnHeaderEnabled = _determineTableHeader.columnHeaderEnabled;
+    var createContentNode = createContentNodeFactory(table);
+    var newTr = (0, _cloneTr.cloneTr)(tr);
+    var origins = [];
+    for (var y = 0; y < tableMap.height; y++) {
+      origins.push([]);
+      for (var x = min; x <= max; x++) {
+        if (tableMap.isCellMergedTopLeft(y, x)) {
+          continue;
+        }
+        var nodePos = tableMap.map[y * tableMap.width + x];
+        origins[y].push(createContentNode(nodePos));
+      }
+      if (columnHeaderEnabled && (min === 0 || actualTargetIndex === 0)) {
+        // This block is handling the situation where a col is moved in/out of the header position. If the header col option
+        // is enabled then;
+        // When a col is moved out, the col will be converted to a normal col and the col to the right will become the header.
+        // When a col is moved in, the old col header needs to be made normal, and the incoming col needs to be made a header.
+        // This section only manages what happens to the other col, not the one being moved.
+        var nearHeaderCol = min === 0 ? max + 1 : actualTargetIndex;
+        var _nodePos = tableMap.map[y * tableMap.width + nearHeaderCol];
+        var _createContentNode = createContentNode(_nodePos),
+          pos = _createContentNode.pos,
+          node = _createContentNode.node;
+        newTr.setNodeMarkup(pos, actualTargetIndex !== 0 || rowHeaderEnabled && y === 0 ? types.header_cell : types.cell, node.attrs);
+      }
+    }
+    origins.forEach(function (row, y) {
+      if (!row.length) {
+        // If the origin has no cells to be moved then we can skip moving for this row. This can occur when a cell above rowspans
+        // into the current row.
+        return;
+      }
+
+      // The actual target index needs to be translated per row, this is because row/col spans can affect the amount of
+      // cells each row contains.
+      var rowTargetPosition = translateTargetPosition(y, actualTargetIndex, tableMap);
+      var node = table.node.nodeAt(rowTargetPosition);
+      var pos = table.start + rowTargetPosition;
+      var insertPos = direction === 'end' ? newTr.mapping.map(pos + node.nodeSize, 1) : newTr.mapping.map(pos, -1);
+      newTr.insert(insertPos, row.map(function (_ref, x) {
+        var node = _ref.node;
+        return normalizeCellNode(node, rowHeaderEnabled && y === 0, columnHeaderEnabled && actualTargetIndex === 0 && x === 0, types);
+      }));
+
+      // NOTE: only consecutive cells can be moved, this means we can simplify the delete op into a single step which
+      // deletes the range of cells.
+      var first = row[0];
+      var last = row[row.length - 1];
+      return newTr.delete(newTr.mapping.map(first.pos, 1), newTr.mapping.map(last.pos + last.node.nodeSize, -1));
+    });
+    if (options.selectAfterMove) {
+      var n = indexesOriginColumn.length - 1;
+      var selectionRange = (0, _getSelectionRangeInColumn.getSelectionRangeInColumn)(actualTargetIndex - (direction === 'end' ? n : 0), actualTargetIndex + (direction === 'start' ? n : 0))(newTr);
+      if (selectionRange) {
+        newTr.setSelection(new _cellSelection.CellSelection(selectionRange.$anchor, selectionRange.$head));
+      }
+    }
     return newTr;
   };
-};
+};
+function normalizeCellNode(cellNode, rowHeaderEnabled, columnHeaderEnabled, types) {
+  var newTargetType = rowHeaderEnabled || columnHeaderEnabled ? types.header_cell : types.cell;
+  return cellNode.type !== newTargetType ? newTargetType.create(cellNode.attrs, cellNode.content, cellNode.marks) : cellNode;
+}
+function createContentNodeFactory(table) {
+  return function (nodePos) {
+    var node = table.node.nodeAt(nodePos);
+    var pos = nodePos + table.start;
+    return {
+      pos: pos,
+      start: pos + 1,
+      node: node,
+      depth: table.depth + 2
+    };
+  };
+}
+function translateTargetPosition(row, startIndex, tableMap) {
+  if (tableMap.isCellMergedTopLeft(row, startIndex)) {
+    // find the closet unmerged position to the left of the target. We scan left first because merged cells will actually
+    // reduce the amount of cells in a row.
+    for (var x = startIndex - 1; x >= 0; x--) {
+      if (!tableMap.isCellMergedTopLeft(row, x)) {
+        return tableMap.map[row * tableMap.width + x];
+      }
+    }
+
+    // If no index found then we need to look to the right, this can occur when the first cell in the row is merged.
+    for (var _x = startIndex + 1; _x < tableMap.width; _x++) {
+      if (!tableMap.isCellMergedTopLeft(row, _x)) {
+        return tableMap.map[row * tableMap.width + _x];
+      }
+    }
+  }
+  return tableMap.map[row * tableMap.width + startIndex];
+}

package/dist/cjs/utils/move-row.js

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.moveRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _cellSelection = require("../cell-selection");
 var _tableMap = require("../table-map");
+var _analyseTable = require("./analyse-table");
 var _cloneTr = require("./clone-tr");
 var _find = require("./find");
 var _getSelectionRangeInRow = require("./get-selection-range-in-row");
+var _normalizeDirection = require("./normalize-direction");
+var _reorderUtils = require("./reorder-utils");
 var _tableNodeTypes = require("./table-node-types");
 // :: (originRowIndex: number, targetRowIndex: targetColumnIndex, options?: MovementOptions) → (tr: Transaction) → Transaction
 // Returns a new transaction that moves the origin row to the target index;
@@ -158,7 +162,8 @@ var _tableNodeTypes = require("./table-node-types");
 var moveRow = exports.moveRow = function moveRow(state, originRowIndex, targetRowIndex) {
   var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
     tryToFit: false,
-    direction: 0
+    direction: 0,
+    selectAfterMove: false
   };
   return function (tr) {
     var table = (0, _find.findTable)(tr.selection);
@@ -192,8 +197,11 @@ var moveRow = exports.moveRow = function moveRow(state, originRowIndex, targetRo
     targetRowIndex >= originMin && targetRowIndex <= originMax) {
       return tr;
     }
+    if (!options.tryToFit && indexesTargetRow.length > 1) {
+      (0, _reorderUtils.isValidReorder)(originMin, targetRowIndex, indexesTargetRow, 'row');
+    }
     var types = (0, _tableNodeTypes.tableNodeTypes)(state.schema);
-    var direction = normalizeDirection(originMin, targetRowIndex, options);
+    var direction = (0, _normalizeDirection.normalizeDirection)(originMin, targetRowIndex, options);
     var actualTargetIndex = Math[direction === 'start' ? 'min' : 'max'].apply(Math, (0, _toConsumableArray2.default)(indexesTargetRow));
     var originPositions = indexesOriginRow.map(function (index) {
       return tableMap.positionAt(index, 0, table.node) + table.pos;
@@ -212,7 +220,7 @@ var moveRow = exports.moveRow = function moveRow(state, originRowIndex, targetRo
     var targetNode = tr.doc.nodeAt(tr.mapping.map(targetPos));
     if (originNodes !== null && originNodes !== void 0 && originNodes.length && targetNode) {
       var newTr = (0, _cloneTr.cloneTr)(tr);
-      var _determineTableHeader = determineTableHeaderState(table.node, tableMap, types),
+      var _determineTableHeader = (0, _analyseTable.determineTableHeaderStateFromTableNode)(table.node, tableMap, types),
         rowHeaderEnabled = _determineTableHeader.rowHeaderEnabled,
         columnHeaderEnabled = _determineTableHeader.columnHeaderEnabled;
       if (rowHeaderEnabled && (originMin === 0 || actualTargetIndex === 0)) {
@@ -235,6 +243,16 @@ var moveRow = exports.moveRow = function moveRow(state, originRowIndex, targetRo
         var node = _ref3.node;
         return normalizeRowNode(node, rowHeaderEnabled && actualTargetIndex === 0 && index === 0, columnHeaderEnabled, types);
       }));
+
+      // IMPORTANT: We need to perform the selection between the insert/delete. This is because the delete could cause
+      // the current selection to be pushed out of the table resulting in an invalid selection range outside of the table
+      if (options.selectAfterMove) {
+        var offset = direction === 'end' ? 1 : 0;
+        var selectionRange = (0, _getSelectionRangeInRow.getSelectionRangeInRow)(actualTargetIndex + offset, actualTargetIndex + offset + originNodes.length - 1)(newTr);
+        if (selectionRange) {
+          newTr.setSelection(new _cellSelection.CellSelection(selectionRange.$anchor, selectionRange.$head));
+        }
+      }
       originNodes.forEach(function (_ref4) {
         var pos = _ref4.pos,
           node = _ref4.node;
@@ -245,47 +263,6 @@ var moveRow = exports.moveRow = function moveRow(state, originRowIndex, targetRo
     return tr;
   };
 };
-function normalizeDirection(origin, target) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    tryToFit: false,
-    direction: 0
-  };
-  var dir = origin < target ? 'end' : 'start';
-  var override = options.direction < 0 ? 'start' : 'end';
-  return options.tryToFit && !!options.direction ? override : dir;
-}
-function determineTableHeaderState(table, tableMap, types) {
-  // We only really need to check the 2nd cell in the row/col if it's a header, since we only support a single full row/col header on the top & left
-  // of a table. We can assume that if the 2nd cell is a header then the entire row/col is a header.
-  // Be carefull though! when checking the 1st cell as it shares its header state with both row/cols.
-  // This means we wont be able to reliably identify header state on tables smaller the 2x2, however we can do best guess.
-
-  // This is a 3 bit mask;
-  // bit: 0 = Identifies if the cell at (0, 0) (row, col - 0-based) is a header cell or not
-  // bit: 1 = Identifies if the cell at (0, 1) is a header cell or not
-  // bit: 2 = Identifies if the cell at (1, 0) is a header cell or not
-  var mask = 0;
-
-  // At minimum we should have 1 cell in the table.
-  var topLeftCell = table.nodeAt(tableMap.map[0]);
-  // If this cell is a header that could indicate
-  mask |= topLeftCell && topLeftCell.type === types.header_cell ? 1 : 0;
-  if (tableMap.width > 1) {
-    var cell = table.nodeAt(tableMap.map[1]);
-    // If the cell at (0, 1) is a header then we set the bit flag to indicate row headers are enabled, otherwise if it's
-    // not then we will set the col headers enabled flag (and vice versa in the branch below) only if the cell at (0,0)
-    // was a header cell.
-    mask |= cell && cell.type === types.header_cell ? 2 : 4 * (mask & 1);
-  }
-  if (tableMap.height > 1) {
-    var _cell = table.nodeAt(tableMap.map[tableMap.width]);
-    mask |= _cell && _cell.type === types.header_cell ? 4 : 2 * (mask & 1);
-  }
-  return {
-    rowHeaderEnabled: mask === 7 || mask === 3,
-    columnHeaderEnabled: mask === 7 || mask === 5
-  };
-}
 
 /**
  * This ensures the row node cell type correctly reflect what they should be.

package/dist/cjs/utils/normalize-direction.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeDirection = normalizeDirection;
+function normalizeDirection(origin, target, options) {
+  var _options$direction;
+  var dir = origin < target ? 'end' : 'start';
+  var override = ((_options$direction = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction !== void 0 ? _options$direction : 0) < 0 ? 'start' : 'end';
+  return options !== null && options !== void 0 && options.tryToFit && !!(options !== null && options !== void 0 && options.direction) ? override : dir;
+}

package/dist/es2019/table-map.js

@@ -124,7 +124,28 @@ export class TableMap {
     throw new RangeError('No cell with offset ' + pos + ' found');
   }
   isPosMerged(pos) {
-    return this.map.filter(cellPos => cellPos === pos).length > 1;
+    return this.map.includes(pos, this.map.indexOf(pos) + 1);
+  }
+  isCellMerged(row, col) {
+    return this.isCellMergedTopLeft(row, col) || this.isCellMergedBottomRight(row, col);
+  }
+  isCellMergedTopLeft(row, col) {
+    const pos = this.map[row * this.width + col];
+    return (
+      // top
+      row > 0 && pos === this.map[(row - 1) * this.width + col] ||
+      // left
+      col > 0 && pos === this.map[row * this.width + (col - 1)]
+    );
+  }
+  isCellMergedBottomRight(row, col) {
+    const pos = this.map[row * this.width + col];
+    return (
+      // bottom
+      row < this.height - 1 && pos === this.map[(row + 1) * this.width + col] ||
+      // right
+      col < this.width - 1 && pos === this.map[row * this.width + (col + 1)]
+    );
   }
 
   // :: (number, string, number) → ?number

package/dist/es2019/utils/analyse-table.js

@@ -0,0 +1,32 @@
+export function determineTableHeaderStateFromTableNode(table, tableMap, types) {
+  // We only really need to check the 2nd cell in the row/col if it's a header, since we only support a single full row/col header on the top & left
+  // of a table. We can assume that if the 2nd cell is a header then the entire row/col is a header.
+  // Be carefull though! when checking the 1st cell as it shares its header state with both row/cols.
+  // This means we wont be able to reliably identify header state on tables smaller the 2x2, however we can do best guess.
+
+  // This is a 3 bit mask;
+  // bit: 0 = Identifies if the cell at (0, 0) (row, col - 0-based) is a header cell or not
+  // bit: 1 = Identifies if the cell at (0, 1) is a header cell or not
+  // bit: 2 = Identifies if the cell at (1, 0) is a header cell or not
+  let mask = 0;
+
+  // At minimum we should have 1 cell in the table.
+  const topLeftCell = table.nodeAt(tableMap.map[0]);
+  // If this cell is a header that could indicate
+  mask |= topLeftCell && topLeftCell.type === types.header_cell ? 1 : 0;
+  if (tableMap.width > 1) {
+    const cell = table.nodeAt(tableMap.map[1]);
+    // If the cell at (0, 1) is a header then we set the bit flag to indicate row headers are enabled, otherwise if it's
+    // not then we will set the col headers enabled flag (and vice versa in the branch below) only if the cell at (0,0)
+    // was a header cell.
+    mask |= cell && cell.type === types.header_cell ? 2 : 4 * (mask & 1);
+  }
+  if (tableMap.height > 1) {
+    const cell = table.nodeAt(tableMap.map[tableMap.width]);
+    mask |= cell && cell.type === types.header_cell ? 4 : 2 * (mask & 1);
+  }
+  return {
+    rowHeaderEnabled: mask === 7 || mask === 3,
+    columnHeaderEnabled: mask === 7 || mask === 5
+  };
+}

package/dist/es2019/utils/get-selection-range-in-column.js

@@ -2,12 +2,12 @@ import { getCellsInColumn } from './get-cells-in-column';
 import { getCellsInRow } from './get-cells-in-row';
 
 // Returns a range of rectangular selection spanning all merged cells around a column at index `columnIndex`.
-export const getSelectionRangeInColumn = columnIndex => tr => {
-  let startIndex = columnIndex;
-  let endIndex = columnIndex;
+export const getSelectionRangeInColumn = (startColIndex, endColIndex = startColIndex) => tr => {
+  let startIndex = startColIndex;
+  let endIndex = endColIndex;
 
   // looking for selection start column (startIndex)
-  for (let i = columnIndex; i >= 0; i--) {
+  for (let i = startColIndex; i >= 0; i--) {
     const cells = getCellsInColumn(i)(tr.selection);
     if (cells) {
       cells.forEach(cell => {
@@ -22,7 +22,7 @@ export const getSelectionRangeInColumn = columnIndex => tr => {
     }
   }
   // looking for selection end column (endIndex)
-  for (let i = columnIndex; i <= endIndex; i++) {
+  for (let i = startColIndex; i <= endIndex; i++) {
     const cells = getCellsInColumn(i)(tr.selection);
     if (cells) {
       cells.forEach(cell => {

package/dist/es2019/utils/move-column.js

@@ -1,8 +1,12 @@
+import { CellSelection } from '../cell-selection';
+import { TableMap } from '../table-map';
+import { determineTableHeaderStateFromTableNode } from './analyse-table';
 import { cloneTr } from './clone-tr';
 import { findTable } from './find';
 import { getSelectionRangeInColumn } from './get-selection-range-in-column';
-import { isValidReorder, moveTableColumn } from './reorder-utils';
-
+import { normalizeDirection } from './normalize-direction';
+import { isValidReorder } from './reorder-utils';
+import { tableNodeTypes } from './table-node-types';
 // :: (originColumnIndex: number, targetColumnIndex: targetColumnIndex, options?: MovementOptions) → (tr: Transaction) → Transaction
 // Returns a new transaction that moves the origin column to the target index;
 //
@@ -131,29 +135,132 @@ import { isValidReorder, moveTableColumn } from './reorder-utils';
 //   moveColumn(x, y, options)(state.tr)
 // );
 // ```
-export const moveColumn = (originColumnIndex, targetColumnIndex, options = {
+export const moveColumn = (state, originColumnIndex, targetColumnIndex, options = {
   tryToFit: false,
-  direction: 0
+  direction: 0,
+  selectAfterMove: false
 }) => tr => {
   var _originalColumnRanges, _targetColumnRanges$i;
   const table = findTable(tr.selection);
   if (!table) {
     return tr;
   }
+
+  // normalize the origin index to an array since this supports moving both a single & multiple cols in a single action.
   if (!Array.isArray(originColumnIndex)) {
     originColumnIndex = [originColumnIndex];
   }
-  const originalColumnRanges = getSelectionRangeInColumn(originColumnIndex[0])(tr);
+  const tableMap = TableMap.get(table.node);
+  const originalColumnRanges = getSelectionRangeInColumn(Math.min(...originColumnIndex), Math.max(...originColumnIndex))(tr);
   const targetColumnRanges = getSelectionRangeInColumn(targetColumnIndex)(tr);
   const indexesOriginColumn = (_originalColumnRanges = originalColumnRanges === null || originalColumnRanges === void 0 ? void 0 : originalColumnRanges.indexes) !== null && _originalColumnRanges !== void 0 ? _originalColumnRanges : [];
   const indexesTargetColumn = (_targetColumnRanges$i = targetColumnRanges === null || targetColumnRanges === void 0 ? void 0 : targetColumnRanges.indexes) !== null && _targetColumnRanges$i !== void 0 ? _targetColumnRanges$i : [];
+  const min = indexesOriginColumn[0];
+  const max = indexesOriginColumn[indexesOriginColumn.length - 1];
   if (indexesOriginColumn.includes(targetColumnIndex)) {
     return tr;
   }
   if (!options.tryToFit && indexesTargetColumn.length > 1) {
     isValidReorder(originColumnIndex[0], targetColumnIndex, indexesTargetColumn, 'column');
   }
-  const newTable = moveTableColumn(table, indexesOriginColumn, indexesTargetColumn, options.direction);
-  const newTr = cloneTr(tr).replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
+  const types = tableNodeTypes(state.schema);
+  const direction = normalizeDirection(min, targetColumnIndex, options);
+  const actualTargetIndex = Math[direction === 'start' ? 'min' : 'max'](...indexesTargetColumn);
+  const {
+    rowHeaderEnabled,
+    columnHeaderEnabled
+  } = determineTableHeaderStateFromTableNode(table.node, tableMap, types);
+  const createContentNode = createContentNodeFactory(table);
+  const newTr = cloneTr(tr);
+  const origins = [];
+  for (let y = 0; y < tableMap.height; y++) {
+    origins.push([]);
+    for (let x = min; x <= max; x++) {
+      if (tableMap.isCellMergedTopLeft(y, x)) {
+        continue;
+      }
+      const nodePos = tableMap.map[y * tableMap.width + x];
+      origins[y].push(createContentNode(nodePos));
+    }
+    if (columnHeaderEnabled && (min === 0 || actualTargetIndex === 0)) {
+      // This block is handling the situation where a col is moved in/out of the header position. If the header col option
+      // is enabled then;
+      // When a col is moved out, the col will be converted to a normal col and the col to the right will become the header.
+      // When a col is moved in, the old col header needs to be made normal, and the incoming col needs to be made a header.
+      // This section only manages what happens to the other col, not the one being moved.
+      const nearHeaderCol = min === 0 ? max + 1 : actualTargetIndex;
+      const nodePos = tableMap.map[y * tableMap.width + nearHeaderCol];
+      const {
+        pos,
+        node
+      } = createContentNode(nodePos);
+      newTr.setNodeMarkup(pos, actualTargetIndex !== 0 || rowHeaderEnabled && y === 0 ? types.header_cell : types.cell, node.attrs);
+    }
+  }
+  origins.forEach((row, y) => {
+    if (!row.length) {
+      // If the origin has no cells to be moved then we can skip moving for this row. This can occur when a cell above rowspans
+      // into the current row.
+      return;
+    }
+
+    // The actual target index needs to be translated per row, this is because row/col spans can affect the amount of
+    // cells each row contains.
+    const rowTargetPosition = translateTargetPosition(y, actualTargetIndex, tableMap);
+    const node = table.node.nodeAt(rowTargetPosition);
+    const pos = table.start + rowTargetPosition;
+    const insertPos = direction === 'end' ? newTr.mapping.map(pos + node.nodeSize, 1) : newTr.mapping.map(pos, -1);
+    newTr.insert(insertPos, row.map(({
+      node
+    }, x) => normalizeCellNode(node, rowHeaderEnabled && y === 0, columnHeaderEnabled && actualTargetIndex === 0 && x === 0, types)));
+
+    // NOTE: only consecutive cells can be moved, this means we can simplify the delete op into a single step which
+    // deletes the range of cells.
+    const first = row[0];
+    const last = row[row.length - 1];
+    return newTr.delete(newTr.mapping.map(first.pos, 1), newTr.mapping.map(last.pos + last.node.nodeSize, -1));
+  });
+  if (options.selectAfterMove) {
+    const n = indexesOriginColumn.length - 1;
+    const selectionRange = getSelectionRangeInColumn(actualTargetIndex - (direction === 'end' ? n : 0), actualTargetIndex + (direction === 'start' ? n : 0))(newTr);
+    if (selectionRange) {
+      newTr.setSelection(new CellSelection(selectionRange.$anchor, selectionRange.$head));
+    }
+  }
   return newTr;
-};
+};
+function normalizeCellNode(cellNode, rowHeaderEnabled, columnHeaderEnabled, types) {
+  const newTargetType = rowHeaderEnabled || columnHeaderEnabled ? types.header_cell : types.cell;
+  return cellNode.type !== newTargetType ? newTargetType.create(cellNode.attrs, cellNode.content, cellNode.marks) : cellNode;
+}
+function createContentNodeFactory(table) {
+  return nodePos => {
+    const node = table.node.nodeAt(nodePos);
+    const pos = nodePos + table.start;
+    return {
+      pos,
+      start: pos + 1,
+      node,
+      depth: table.depth + 2
+    };
+  };
+}
+function translateTargetPosition(row, startIndex, tableMap) {
+  if (tableMap.isCellMergedTopLeft(row, startIndex)) {
+    // find the closet unmerged position to the left of the target. We scan left first because merged cells will actually
+    // reduce the amount of cells in a row.
+    for (let x = startIndex - 1; x >= 0; x--) {
+      if (!tableMap.isCellMergedTopLeft(row, x)) {
+        return tableMap.map[row * tableMap.width + x];
+      }
+    }
+
+    // If no index found then we need to look to the right, this can occur when the first cell in the row is merged.
+    for (let x = startIndex + 1; x < tableMap.width; x++) {
+      if (!tableMap.isCellMergedTopLeft(row, x)) {
+        return tableMap.map[row * tableMap.width + x];
+      }
+    }
+  }
+  return tableMap.map[row * tableMap.width + startIndex];
+}