@atlaskit/editor-plugin-table 5.5.2 → 5.5.4

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

@@ -2,7 +2,7 @@ import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaski
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findCellClosestToPos, findTable, getCellsInColumn, getCellsInRow, getSelectionRect, isSelectionType, isTableSelected, removeTable, selectColumn as selectColumnTransform, selectionCell, selectRow as selectRowTransform, setCellAttrs } from '@atlaskit/editor-tables/utils';
+import { findCellClosestToPos, findTable, getCellsInColumn, getCellsInRow, getSelectionRect, isSelectionType, isTableSelected, removeTable, selectColumns as selectColumnsTransform, selectColumn as selectColumnTransform, selectionCell, selectRows as selectRowsTransform, selectRow as selectRowTransform, setCellAttrs } from '@atlaskit/editor-tables/utils';
 import { getDecorations } from '../pm-plugins/decorations/plugin';
 import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../pm-plugins/decorations/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
@@ -350,6 +350,31 @@ export const selectColumn = (column, expand) => createCommand(state => {
     }
   };
 }, tr => selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false));
+export const selectColumns = columnIndexes => createCommand(state => {
+  if (!columnIndexes) {
+    return false;
+  }
+  const cells = columnIndexes.map(column => getCellsInColumn(column)(state.tr.selection)).flat();
+  if (!cells || !cells.length || cells.some(cell => cell && typeof cell.pos !== 'number')) {
+    return false;
+  }
+  const decorations = createColumnSelectedDecoration(selectColumnsTransform(columnIndexes)(state.tr));
+  const decorationSet = updatePluginStateDecorations(state, decorations, TableDecorations.COLUMN_SELECTED);
+  const cellsInFirstColumn = getCellsInColumn(Math.min(...columnIndexes))(state.tr.selection);
+  if (!cellsInFirstColumn || cellsInFirstColumn.length === 0) {
+    return false;
+  }
+  const targetCellPosition = cellsInFirstColumn[0].pos;
+  return {
+    type: 'SELECT_COLUMN',
+    data: {
+      targetCellPosition,
+      decorationSet
+    }
+  };
+}, tr => {
+  return selectColumnsTransform(columnIndexes)(tr).setMeta('addToHistory', false);
+});
 export const selectRow = (row, expand) => createCommand(state => {
   let targetCellPosition;
   const cells = getCellsInRow(row)(state.tr.selection);
@@ -363,6 +388,26 @@ export const selectRow = (row, expand) => createCommand(state => {
     }
   };
 }, tr => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false));
+export const selectRows = rowIndexes => createCommand(state => {
+  if (rowIndexes.length === 0) {
+    return false;
+  }
+  const cells = rowIndexes.map(row => getCellsInRow(row)(state.tr.selection)).flat();
+  if (!cells || !cells.length || cells.some(cell => cell && typeof cell.pos !== 'number')) {
+    return false;
+  }
+  const cellsInFirstRow = getCellsInRow(Math.min(...rowIndexes))(state.tr.selection);
+  if (!cellsInFirstRow || cellsInFirstRow.length === 0) {
+    return false;
+  }
+  const targetCellPosition = cellsInFirstRow[0].pos;
+  return {
+    type: 'SET_TARGET_CELL_POSITION',
+    data: {
+      targetCellPosition
+    }
+  };
+}, tr => selectRowsTransform(rowIndexes)(tr).setMeta('addToHistory', false));
 export const showInsertColumnButton = columnIndex => createCommand(_ => columnIndex > -1 ? {
   type: 'SHOW_INSERT_COLUMN_BUTTON',
   data: {

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

@@ -199,7 +199,7 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent
         }) => {
           var _options$tableResizin;
-          return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
+          return createTableOverflowAnalyticsPlugin(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/es2019/plugins/table/nodeviews/TableComponent.js

@@ -395,10 +395,8 @@ class TableComponent extends React.Component {
       this.onStickyState(currentStickyState);
     }
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
-    }
+    const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
   }
   componentWillUnmount() {
     const {
@@ -487,31 +485,29 @@ class TableComponent extends React.Component {
       }
       this.handleTableResizingDebounced();
     }
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-      const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
-      }
-      if (!this.isInitialOverflowSent) {
-        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-      }
-      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-        var _this$state2;
-        const {
-          dispatch,
-          state: {
-            tr
-          }
-        } = this.props.view;
-        dispatch(tr.setMeta(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
-        }));
-      }
+    const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
+    if (!this.isInitialOverflowSent) {
+      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    }
+    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+      var _this$state2;
+      const {
+        dispatch,
+        state: {
+          tr
+        }
+      } = this.props.view;
+      dispatch(tr.setMeta(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
+      }));
     }
   }
   render() {

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

@@ -192,6 +192,7 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             const [sourceIndex] = sourceIndexes;
             requestAnimationFrame(() => {
               moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+              editorView.focus();
             });
           }
         })

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

@@ -23,13 +23,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     return false;
   }
   event.preventDefault();
-  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-    const tr = view.state.tr;
-    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
-    });
-    dispatch(tr);
-  }
+  const tr = view.state.tr;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
+  });
+  dispatch(tr);
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);
   const $cell = state.doc.resolve(localResizeHandlePos);

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

@@ -2,25 +2,14 @@ import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export const HandleIconComponent = props => {
   const {
-    canDrag,
-    direction,
-    isDragMenuOpen,
+    forceDefaultHandle,
     isRowHandleHovered,
     isColumnHandleHovered,
-    hasMergedCells,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection
+    hasMergedCells
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-  const isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
-  const isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  const isDragPossible = canDrag && !hasMergedCells;
-  const showNormalHandle = !isDragPossible ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (isHandleHovered || forceDefaultHandle) {
+    return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }
   return /*#__PURE__*/React.createElement(MinimisedHandleIcon, null);
 };

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

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
-import { getPluginState as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
@@ -15,6 +14,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -28,32 +28,19 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState(null);
   const {
     hoveredColumns,
-    hoveredRows,
-    hoveredCell
+    hoveredRows
   } = getPluginState(editorView.state);
-  const {
-    dragMenuDirection,
-    isDragMenuOpen,
-    dragMenuIndex
-  } = getDragDropPluginState(editorView.state);
   const {
     selection
   } = editorView.state;
-  const isCurrentRowSelected = isDragMenuOpen && direction === 'row' && hoveredCell.rowIndex === dragMenuIndex;
-  const isCurrentColumnSelected = isDragMenuOpen && direction === 'column' && hoveredCell.colIndex === dragMenuIndex;
   const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   const isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
   const hasMergedCells = useMemo(() => direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, direction, selection]);
   const handleIconProps = {
-    canDrag,
-    hasMergedCells,
-    direction,
-    isDragMenuOpen,
-    isRowHandleHovered,
+    forceDefaultHandle,
     isColumnHandleHovered,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection
+    isRowHandleHovered,
+    hasMergedCells
   };
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;

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

@@ -1,8 +1,10 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { useCallback, useMemo } from 'react';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
+import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
@@ -32,19 +34,12 @@ export const ColumnControls = ({
   isTableHovered,
   canDrag
 }) => {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
@@ -53,8 +48,14 @@ export const ColumnControls = ({
       state,
       dispatch
     } = editorView;
-    selectColumn(colIndex, event.shiftKey)(state, dispatch);
-  }, [colIndex, editorView]);
+    const isClickOutsideSelectedCols = selectedColIndexes.length >= 1 && !selectedColIndexes.includes(colIndex);
+    if (!selectedColIndexes || selectedColIndexes.length === 0 || isClickOutsideSelectedCols) {
+      selectColumn(colIndex, event.shiftKey)(state, dispatch);
+    }
+    if (selectedColIndexes.length > 1 && selectedColIndexes.includes(colIndex) && !event.shiftKey) {
+      selectColumns(selectedColIndexes)(state, dispatch);
+    }
+  }, [colIndex, selectedColIndexes, editorView]);
   const handleMouseOver = useCallback(() => {
     const {
       state,
@@ -104,6 +105,64 @@ export const ColumnControls = ({
     return [colIndex];
   }, [colIndex]);
   const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  const generateHandleByType = type => {
+    var _colWidths;
+    if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
+      return null;
+    }
+    const isHover = type === 'hover';
+    const isColumnsSelected = selectedColIndexes.length > 0;
+    const 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;
+    }
+    const gridColumnPosition = `${colIndex + 1} / span 1`;
+    const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
+    const hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    const currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    const istSelecting = isColumnsSelected && !isHover;
+
+    // this indexes are used to calculate the drag and drop source
+    const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    return showCondition && /*#__PURE__*/React.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.createElement(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 : tableCellMinWidth,
+      previewHeight: previewHeight,
+      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView,
+      canDrag: canDrag
+    }));
+  };
+  const columnHandles = hoveredCell => {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -131,31 +190,6 @@ export const ColumnControls = ({
     style: columnParams.length - 1 === index ? {
       right: '0'
     } : {}
-  }))), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.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.createElement(DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 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)));
 };
 export default ColumnControls;

package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -10,7 +10,9 @@ import { tableBorderColor } from '../../consts';
 export default class NumberColumn extends Component {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "hoverRows", index => this.props.tableActive ? this.props.hoverRows([index]) : null);
+    _defineProperty(this, "hoverRows", index => {
+      return this.props.tableActive ? this.props.hoverRows([index]) : null;
+    });
     _defineProperty(this, "selectRow", (index, event) => {
       const {
         tableActive,

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

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -34,6 +36,7 @@ const DragControlsComponent = ({
   canDrag,
   hoverRows,
   selectRow,
+  selectRows,
   updateCellHoverLocation
 }) => {
   var _tableNode$attrs$loca, _tableNode$attrs;
@@ -75,13 +78,6 @@ const DragControlsComponent = ({
     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]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
-  const gridRowPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex)) {
-      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    }
-    return `${rowIndex + 1} / span 1`;
-  }, [rowIndex, selectedRowIndexes]);
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -108,8 +104,69 @@ const DragControlsComponent = ({
     hoverRows([rowIndex]);
   }, [hoverRows, rowIndex]);
   const handleClick = useCallback(e => {
-    selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
-  }, [rowIndex, selectRow]);
+    const 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]);
+  const generateHandleByType = type => {
+    if (!hoveredCell) {
+      return null;
+    }
+    const isHover = type === 'hover';
+    const isRowsSelected = selectedRowIndexes.length > 0;
+    const 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;
+    }
+    const gridRowPosition = `${rowIndex + 1} / span 1`;
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    const selectedRowPosition = `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
+    const hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    const isSelecting = isRowsSelected && !isHover;
+    const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    return showCondition && /*#__PURE__*/React.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.createElement(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
+    }));
+  };
+  const rowHandles = hoveredCell => {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -148,28 +205,6 @@ const DragControlsComponent = ({
       position: 'relative',
       left: "var(--ds-space-negative-100, -8px)"
     }
-  }))), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.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.createElement(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));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
-import { hoverCell, hoverRows, selectRow } from '../../commands';
+import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
@@ -24,6 +24,20 @@ export default class TableFloatingControls extends Component {
       }
       selectRow(row, expand)(state, dispatch);
     });
+    _defineProperty(this, "selectRows", rowIndexes => {
+      const {
+        editorView
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      // fix for issue ED-4665
+      if (browser.ie_version === 11) {
+        editorView.dom.blur();
+      }
+      selectRows(rowIndexes)(state, dispatch);
+    });
     _defineProperty(this, "hoverRows", (rows, danger) => {
       const {
         state,
@@ -167,6 +181,7 @@ export default class TableFloatingControls extends Component {
       tableWidth: this.state.tableWrapperWidth,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
+      selectRows: this.selectRows,
       updateCellHoverLocation: this.updateCellHoverLocation,
       canDrag: canDrag
     })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {

package/dist/esm/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';