@atlaskit/editor-plugin-table 5.5.2 → 5.5.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.4
+
+### Patch Changes
+
+- [#60278](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60278) [`bc2785a02329`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc2785a02329) - Selection of multiple rows / column should remain when clicking the drag handle
+- [#60323](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60323) [`e0c900d97140`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0c900d97140) - Fix undo of drag and drop using keyboard
+
+## 5.5.3
+
+### Patch Changes
+
+- [#59569](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59569) [`dffa156814cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dffa156814cd) - [ux] re-implement feature with fixed handle when drag menu off and fix issue when numbered column enabled.
+- [#60153](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60153) [`5764d44cc93b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5764d44cc93b) - Cleaned references for feature flag: platform.editor.table.overflow-state-analytics
+
 ## 5.5.2
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/index.js

@@ -135,12 +135,24 @@ Object.defineProperty(exports, "selectColumn", {
     return _misc.selectColumn;
   }
 });
+Object.defineProperty(exports, "selectColumns", {
+  enumerable: true,
+  get: function get() {
+    return _misc.selectColumns;
+  }
+});
 Object.defineProperty(exports, "selectRow", {
   enumerable: true,
   get: function get() {
     return _misc.selectRow;
   }
 });
+Object.defineProperty(exports, "selectRows", {
+  enumerable: true,
+  get: function get() {
+    return _misc.selectRows;
+  }
+});
 Object.defineProperty(exports, "setCellAttr", {
   enumerable: true,
   get: function get() {

package/dist/cjs/plugins/table/commands/misc.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRow = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -346,6 +347,37 @@ var selectColumn = exports.selectColumn = function selectColumn(column, expand)
     return (0, _utils2.selectColumn)(column, expand)(tr).setMeta('addToHistory', false);
   });
 };
+var selectColumns = exports.selectColumns = function selectColumns(columnIndexes) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    if (!columnIndexes) {
+      return false;
+    }
+    var cells = columnIndexes.map(function (column) {
+      return (0, _utils2.getCellsInColumn)(column)(state.tr.selection);
+    }).flat();
+    if (!cells || !cells.length || cells.some(function (cell) {
+      return cell && typeof cell.pos !== 'number';
+    })) {
+      return false;
+    }
+    var decorations = (0, _decoration.createColumnSelectedDecoration)((0, _utils2.selectColumns)(columnIndexes)(state.tr));
+    var decorationSet = (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, decorations, _types.TableDecorations.COLUMN_SELECTED);
+    var cellsInFirstColumn = (0, _utils2.getCellsInColumn)(Math.min.apply(Math, (0, _toConsumableArray2.default)(columnIndexes)))(state.tr.selection);
+    if (!cellsInFirstColumn || cellsInFirstColumn.length === 0) {
+      return false;
+    }
+    var targetCellPosition = cellsInFirstColumn[0].pos;
+    return {
+      type: 'SELECT_COLUMN',
+      data: {
+        targetCellPosition: targetCellPosition,
+        decorationSet: decorationSet
+      }
+    };
+  }, function (tr) {
+    return (0, _utils2.selectColumns)(columnIndexes)(tr).setMeta('addToHistory', false);
+  });
+};
 var selectRow = exports.selectRow = function selectRow(row, expand) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var targetCellPosition;
@@ -363,6 +395,34 @@ var selectRow = exports.selectRow = function selectRow(row, expand) {
     return (0, _utils2.selectRow)(row, expand)(tr).setMeta('addToHistory', false);
   });
 };
+var selectRows = exports.selectRows = function selectRows(rowIndexes) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    if (rowIndexes.length === 0) {
+      return false;
+    }
+    var cells = rowIndexes.map(function (row) {
+      return (0, _utils2.getCellsInRow)(row)(state.tr.selection);
+    }).flat();
+    if (!cells || !cells.length || cells.some(function (cell) {
+      return cell && typeof cell.pos !== 'number';
+    })) {
+      return false;
+    }
+    var cellsInFirstRow = (0, _utils2.getCellsInRow)(Math.min.apply(Math, (0, _toConsumableArray2.default)(rowIndexes)))(state.tr.selection);
+    if (!cellsInFirstRow || cellsInFirstRow.length === 0) {
+      return false;
+    }
+    var targetCellPosition = cellsInFirstRow[0].pos;
+    return {
+      type: 'SET_TARGET_CELL_POSITION',
+      data: {
+        targetCellPosition: targetCellPosition
+      }
+    };
+  }, function (tr) {
+    return (0, _utils2.selectRows)(rowIndexes)(tr).setMeta('addToHistory', false);
+  });
+};
 var showInsertColumnButton = exports.showInsertColumnButton = function showInsertColumnButton(columnIndex) {
   return (0, _pluginFactory.createCommand)(function (_) {
     return columnIndex > -1 ? {

package/dist/cjs/plugins/table/index.js

@@ -211,7 +211,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _options$tableResizin;
           var dispatch = _ref12.dispatch,
             dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
-          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics') ? (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
+          return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -393,10 +393,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.onStickyState(currentStickyState);
       }
       eventDispatcher.on(_stickyHeaders.pluginKey.key, this.onStickyState);
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
-        var initialIsOveflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
-      }
+      var initialIsOveflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
     }
   }, {
     key: "componentWillUnmount",
@@ -483,28 +481,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         this.handleTableResizingDebounced();
       }
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
-        var newIsOverflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-        var prevIsOverflowing = prevState[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-        if (this.initialOverflowCaptureTimerId) {
-          clearTimeout(this.initialOverflowCaptureTimerId);
-        }
-        if (!this.isInitialOverflowSent) {
-          this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-        }
-        if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-          var _this$state2;
-          var _this$props$view = this.props.view,
-            dispatch = _this$props$view.dispatch,
-            tr = _this$props$view.state.tr;
-          dispatch(tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_STATE_CHANGED, {
-            isOverflowing: newIsOverflowing,
-            wasOverflowing: prevIsOverflowing,
-            editorWidth: this.props.containerWidth.width || 0,
-            width: this.node.attrs.width || 0,
-            parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-          }));
-        }
+      var newIsOverflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+      var prevIsOverflowing = prevState[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+        var _this$state2;
+        var _this$props$view = this.props.view,
+          dispatch = _this$props$view.dispatch,
+          tr = _this$props$view.state.tr;
+        dispatch(tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+        }));
       }
     }
   }, {

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -191,6 +191,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
               (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+              editorView.focus();
             });
           }
         })

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -27,13 +27,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     return false;
   }
   event.preventDefault();
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
-    var tr = view.state.tr;
-    tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
-      name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
-    });
-    dispatch(tr);
-  }
+  var tr = view.state.tr;
+  tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+    name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
+  });
+  dispatch(tr);
   var mouseDownTime = event.timeStamp;
   var cell = state.doc.nodeAt(localResizeHandlePos);
   var $cell = state.doc.resolve(localResizeHandlePos);

package/dist/cjs/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -8,24 +8,13 @@ exports.HandleIconComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("../icons");
 var HandleIconComponent = exports.HandleIconComponent = function HandleIconComponent(props) {
-  var canDrag = props.canDrag,
-    direction = props.direction,
-    isDragMenuOpen = props.isDragMenuOpen,
+  var forceDefaultHandle = props.forceDefaultHandle,
     isRowHandleHovered = props.isRowHandleHovered,
     isColumnHandleHovered = props.isColumnHandleHovered,
-    hasMergedCells = props.hasMergedCells,
-    isCurrentRowSelected = props.isCurrentRowSelected,
-    isCurrentColumnSelected = props.isCurrentColumnSelected,
-    dragMenuDirection = props.dragMenuDirection;
+    hasMergedCells = props.hasMergedCells;
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-  var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
-  var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  var isDragPossible = canDrag && !hasMergedCells;
-  var showNormalHandle = !isDragPossible ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (isHandleHovered || forceDefaultHandle) {
+    return hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
   }
   return /*#__PURE__*/_react.default.createElement(_icons.MinimisedHandleIcon, null);
 };

package/dist/cjs/plugins/table/ui/DragHandle/index.js

@@ -14,8 +14,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
-var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
-var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
 var _DragPreview = require("../DragPreview");
@@ -29,6 +28,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
+    _ref$forceDefaultHand = _ref.forceDefaultHandle,
+    forceDefaultHandle = _ref$forceDefaultHand === void 0 ? false : _ref$forceDefaultHand,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
@@ -43,32 +44,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
-  var _getPluginState = (0, _pluginFactory2.getPluginState)(editorView.state),
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     hoveredColumns = _getPluginState.hoveredColumns,
-    hoveredRows = _getPluginState.hoveredRows,
-    hoveredCell = _getPluginState.hoveredCell;
-  var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(editorView.state),
-    dragMenuDirection = _getDragDropPluginSta.dragMenuDirection,
-    isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
-    dragMenuIndex = _getDragDropPluginSta.dragMenuIndex;
+    hoveredRows = _getPluginState.hoveredRows;
   var selection = editorView.state.selection;
-  var isCurrentRowSelected = isDragMenuOpen && direction === 'row' && hoveredCell.rowIndex === dragMenuIndex;
-  var isCurrentColumnSelected = isDragMenuOpen && direction === 'column' && hoveredCell.colIndex === dragMenuIndex;
   var isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   var isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
   var hasMergedCells = (0, _react.useMemo)(function () {
     return direction === 'row' ? (0, _utils2.hasMergedCellsInRow)(indexes[0])(selection) : (0, _utils2.hasMergedCellsInColumn)(indexes[0])(selection);
   }, [indexes, direction, selection]);
   var handleIconProps = {
-    canDrag: _canDrag,
-    hasMergedCells: hasMergedCells,
-    direction: direction,
-    isDragMenuOpen: isDragMenuOpen,
-    isRowHandleHovered: isRowHandleHovered,
+    forceDefaultHandle: forceDefaultHandle,
     isColumnHandleHovered: isColumnHandleHovered,
-    isCurrentRowSelected: isCurrentRowSelected,
-    isCurrentColumnSelected: isCurrentColumnSelected,
-    dragMenuDirection: dragMenuDirection
+    isRowHandleHovered: isRowHandleHovered,
+    hasMergedCells: hasMergedCells
   };
   (0, _react.useEffect)(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -16,6 +16,8 @@ var _utils2 = require("../../../utils");
 var _DragHandle = require("../../DragHandle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isColSelection()) {
     var rect = (0, _utils.getSelectionRect)(selection);
@@ -27,7 +29,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -48,21 +50,20 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  var gridColumnPosition = (0, _react.useMemo)(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
-    }
-    return "".concat(colIndex + 1, " / span 1");
-  }, [colIndex, selectedColIndexes]);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   var handleClick = (0, _react.useCallback)(function (event) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    (0, _commands.selectColumn)(colIndex, event.shiftKey)(state, dispatch);
-  }, [colIndex, editorView]);
+    var isClickOutsideSelectedCols = selectedColIndexes.length >= 1 && !selectedColIndexes.includes(colIndex);
+    if (!selectedColIndexes || selectedColIndexes.length === 0 || isClickOutsideSelectedCols) {
+      (0, _commands.selectColumn)(colIndex, event.shiftKey)(state, dispatch);
+    }
+    if (selectedColIndexes.length > 1 && selectedColIndexes.includes(colIndex) && !event.shiftKey) {
+      (0, _commands.selectColumns)(selectedColIndexes)(state, dispatch);
+    }
+  }, [colIndex, selectedColIndexes, editorView]);
   var handleMouseOver = (0, _react.useCallback)(function () {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -106,6 +107,64 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
     return sum + cur;
   }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  var generateHandleByType = function generateHandleByType(type) {
+    var _colWidths;
+    if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
+      return null;
+    }
+    var isHover = type === 'hover';
+    var isColumnsSelected = selectedColIndexes.length > 0;
+    var showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    var gridColumnPosition = "".concat(colIndex + 1, " / span 1");
+    var selectedColumnPosition = "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
+    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    var currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var istSelecting = isColumnsSelected && !isHover;
+
+    // this indexes are used to calculate the drag and drop source
+    var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: indexes,
+      forceDefaultHandle: isHover ? false : isColumnsSelected,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
+      previewHeight: previewHeight,
+      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView,
+      canDrag: canDrag
+    }));
+  };
+  var columnHandles = function columnHandles(hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -134,31 +193,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
-    previewHeight: previewHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView,
-    canDrag: canDrag
-  }))));
+  }), tableActive && isTableHovered && !isResizing && columnHandles(hoveredCell)));
 };
 var _default = exports.default = ColumnControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -22,6 +22,8 @@ var _DragHandle = require("../../DragHandle");
 var _RowDropTarget = _interopRequireDefault(require("../RowDropTarget"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var getSelectedRows = function getSelectedRows(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isRowSelection()) {
     var rect = (0, _utils.getSelectionRect)(selection);
@@ -46,6 +48,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     canDrag = _ref.canDrag,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
+    selectRows = _ref.selectRows,
     updateCellHoverLocation = _ref.updateCellHoverLocation;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -87,13 +90,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     (0, _commands2.toggleDragMenu)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
-  var gridRowPosition = (0, _react.useMemo)(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex)) {
-      return "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
-    }
-    return "".concat(rowIndex + 1, " / span 1");
-  }, [rowIndex, selectedRowIndexes]);
   var handleMouseOut = (0, _react.useCallback)(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -118,8 +114,69 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     hoverRows([rowIndex]);
   }, [hoverRows, rowIndex]);
   var handleClick = (0, _react.useCallback)(function (e) {
-    selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
-  }, [rowIndex, selectRow]);
+    var isClickOutsideSelectedRows = selectedRowIndexes.length >= 1 && !selectedRowIndexes.includes(rowIndex);
+    if (!selectedRowIndexes || selectedRowIndexes.length === 0 || isClickOutsideSelectedRows) {
+      selectRow(rowIndex, e.shiftKey);
+    }
+    if (selectedRowIndexes.length > 1 && selectedRowIndexes.includes(rowIndex) && !e.shiftKey) {
+      selectRows(selectedRowIndexes);
+    }
+  }, [rowIndex, selectRow, selectRows, selectedRowIndexes]);
+  var generateHandleByType = function generateHandleByType(type) {
+    if (!hoveredCell) {
+      return null;
+    }
+    var isHover = type === 'hover';
+    var isRowsSelected = selectedRowIndexes.length > 0;
+    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    var gridRowPosition = "".concat(rowIndex + 1, " / span 1");
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    var selectedRowPosition = "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
+    var hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var isSelecting = isRowsSelected && !isHover;
+    var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+      key: type,
+      style: {
+        gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+        gridColumn: '2',
+        // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+        width: '9px',
+        position: 'relative',
+        right: '-0.5px'
+      },
+      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: indexes,
+      forceDefaultHandle: isHover ? false : isRowsSelected,
+      previewWidth: tableWidth,
+      previewHeight: rowHeights[rowIndex],
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: onMouseUp,
+      editorView: editorView,
+      canDrag: canDrag
+    }));
+  };
+  var rowHandles = function rowHandles(hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -159,28 +216,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gridRow: gridRowPosition,
-      gridColumn: '2',
-      // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-      width: '9px',
-      position: 'relative',
-      right: '-0.5px'
-    },
-    "data-testid": "table-floating-row-drag-handle"
-  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    tableLocalId: currentNodeLocalId,
-    indexes: rowIndexes,
-    previewWidth: tableWidth,
-    previewHeight: rowHeights[rowIndex],
-    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: onMouseUp,
-    editorView: editorView,
-    canDrag: canDrag
-  })));
+  }), tableActive && isTableHovered && !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js

@@ -45,6 +45,16 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
       }
       (0, _commands.selectRow)(row, expand)(state, dispatch);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRows", function (rowIndexes) {
+      var editorView = _this.props.editorView;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      // fix for issue ED-4665
+      if (_utils.browser.ie_version === 11) {
+        editorView.dom.blur();
+      }
+      (0, _commands.selectRows)(rowIndexes)(state, dispatch);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hoverRows", function (rows, danger) {
       var _this$props$editorVie = _this.props.editorView,
         state = _this$props$editorVie.state,
@@ -208,6 +218,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableWidth: this.state.tableWrapperWidth,
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
+        selectRows: this.selectRows,
         updateCellHoverLocation: this.updateCellHoverLocation,
         canDrag: canDrag
       })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {

package/dist/es2019/plugins/table/commands/index.js

@@ -2,7 +2,7 @@ export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clear
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';