@atlaskit/editor-plugin-table 7.0.3 → 7.1.1

package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -4,18 +4,12 @@ import { ColumnDropTarget } from './ColumnDropTarget';
 export const ColumnDropTargets = ({
   tableRef,
   tableHeight,
-  stickyTop,
   localId,
-  rowHeights,
   colWidths
 }) => {
-  var _rowHeights$;
   if (!tableRef) {
     return null;
   }
-  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;
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
@@ -29,7 +23,7 @@ export const ColumnDropTargets = ({
       localId: localId,
       width: width,
       height: tableHeight,
-      marginTop: marginTop
+      marginTop: 0
     });
   })));
 };

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -112,10 +112,8 @@ export const TableFloatingColumnControls = ({
     isDragging: isDragging
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
-    stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,
     localId: currentNodeLocalId,
-    rowHeights: rowHeights,
     colWidths: colWidths
   }));
 };

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

@@ -74,7 +74,10 @@ const DragControlsComponent = ({
       }
     });
   }, [editorView]);
-  const onMouseUp = useCallback(() => {
+  const onMouseUp = useCallback(event => {
+    if (event.shiftKey) {
+      return;
+    }
     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;
@@ -118,7 +121,7 @@ const DragControlsComponent = ({
     }
     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);
+    const showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && rowIndex < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
     }
@@ -136,7 +139,9 @@ const DragControlsComponent = ({
         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
+        display: 'flex',
         width: '9px',
+        height: '100%',
         position: 'relative',
         right: '-0.5px'
       },

package/dist/es2019/ui/common-styles.js

@@ -204,7 +204,9 @@ const tableWrapperStyles = () => {
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = props => css`
+export const tableStyles = props => {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
+  return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${`var(--ds-background-neutral, ${N20A})`};
     color: ${`var(--ds-icon, ${N300})`};
@@ -223,8 +225,8 @@ export const tableStyles = props => css`
     ${hoveredDeleteButton()};
     ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
-    ${resizeHandle()};
+    ${((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine()};
+    ${resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -434,7 +436,7 @@ export const tableStyles = props => css`
     }
 
     ${sentinelStyles}
-    ${OverflowShadow()}
+    ${OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop)}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -653,6 +655,22 @@ export const tableStyles = props => css`
       }
     }
 
+    .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
+      background: none;
+      border: none;
+      outline: none;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      :focus {
+        outline: none;
+      }
+    }
+
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
       pointer-events: auto;
@@ -739,7 +757,7 @@ export const tableStyles = props => css`
       position: relative;
       float: right;
       margin-left: ${getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1}px;
-      top: ${getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize}px;
+      top: ${(_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
@@ -969,6 +987,7 @@ export const tableStyles = props => css`
 
   ${shadowSentinelStyles}
 `;
+};
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;

package/dist/es2019/ui/consts.js

@@ -1,6 +1,5 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
@@ -50,7 +49,8 @@ export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = getBooleanFF('platform.editor.table.drag-and-drop') ? 250 : 180;
+export const contextualMenuDropdownWidth = 180;
+export const contextualMenuDropdownWidthDnD = 250;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;

package/dist/es2019/ui/icons/AddRowAboveIcon.js

@@ -10,24 +10,20 @@ export const AddRowAboveIcon = () => /*#__PURE__*/React.createElement("svg", {
   height: "24",
   fill: "var(--ds-border-inverse, #FFFFFF)",
   fillOpacity: "0.01"
-}), /*#__PURE__*/React.createElement("mask", {
-  id: "path-1-inside-1_896_17822",
-  fill: "var(--ds-border-inverse, #FFFFFF)"
-}, /*#__PURE__*/React.createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "6",
   y: "12",
   width: "12",
-  height: "8",
-  rx: "0.5"
-})), /*#__PURE__*/React.createElement("rect", {
+  height: "3",
+  rx: "0.5",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
   x: "6",
-  y: "12",
+  y: "16",
   width: "12",
-  height: "8",
+  height: "3",
   rx: "0.5",
-  stroke: "currentColor",
-  strokeWidth: "4",
-  mask: "url(#path-1-inside-1_896_17822)"
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",

package/dist/es2019/ui/icons/AddRowBelowIcon.js

@@ -5,27 +5,31 @@ export const AddRowBelowIcon = () => /*#__PURE__*/React.createElement("svg", {
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React.createElement("mask", {
-  id: "path-1-inside-1_920_47112",
-  fill: "var(--ds-border-inverse, #FFFFFF)"
 }, /*#__PURE__*/React.createElement("rect", {
-  x: "6",
-  y: "4",
+  width: "24",
+  height: "24",
+  transform: "matrix(-1 0 0 -1 24 24)",
+  fill: "var(--ds-border-inverse, #FFFFFF)",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "18",
+  y: "12",
   width: "12",
-  height: "8",
-  rx: "0.5"
-})), /*#__PURE__*/React.createElement("rect", {
-  x: "6",
-  y: "4",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-180 18 12)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "18",
+  y: "8",
   width: "12",
-  height: "8",
+  height: "3",
   rx: "0.5",
-  stroke: "currentColor",
-  strokeWidth: "4",
-  mask: "url(#path-1-inside-1_920_47112)"
+  transform: "rotate(-180 18 8)",
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+  d: "M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z",
   fill: "currentColor"
 }));

package/dist/es2019/ui/ui-styles.js

@@ -264,7 +264,7 @@ export const DeleteButton = () => css`
     cursor: pointer;
   }
 `;
-export const OverflowShadow = () => css`
+export const OverflowShadow = isDragAndDropEnabled => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
     height: calc(100% - ${tableMarginTop}px);
@@ -306,14 +306,14 @@ export const OverflowShadow = () => css`
     left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px)` : `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2}px)`};
   }
   .${ClassName.WITH_CONTROLS} {
-    ${overflowShadowWidhoutDnD()}
+    ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor};
     }
   }
 `;
-const overflowShadowWidhoutDnD = () => {
-  if (!getBooleanFF('platform.editor.table.drag-and-drop')) {
+const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
+  if (!isDragAndDropEnabled) {
     return css`
       .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
         height: calc(100% - ${tableMarginTopWithControl}px);
@@ -680,8 +680,8 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
-const resizeHandleOverrides = () => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+const resizeHandleOverrides = isDragAndDropEnabled => {
+  if (isDragAndDropEnabled) {
     return css`
       th.${ClassName.WITH_RESIZE_LINE}::before,
         td.${ClassName.WITH_RESIZE_LINE}::before {
@@ -754,7 +754,7 @@ const resizeHandleOverrides = () => {
     }
   `;
 };
-export const resizeHandle = () => css`
+export const resizeHandle = isDragAndDropEnabled => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -769,7 +769,7 @@ export const resizeHandle = () => css`
 
     ${getLastColumnResizerOverrides()}
 
-    ${resizeHandleOverrides()}
+    ${resizeHandleOverrides(isDragAndDropEnabled)}
 
     table
       tr:first-of-type

package/dist/es2019/utils/drag-menu.js

@@ -18,7 +18,7 @@ import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizi
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
-import { getSelectedColumnIndexes } from './index';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
 const isDistributeColumnsEnabled = state => {
@@ -53,34 +53,38 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
   }];
   const moveOptions = direction === 'row' ? [{
     label: 'up',
-    offset: -1,
-    canMove: index => canDrag && canDecrease(index),
     icon: ArrowUpIcon,
-    keymap: moveRowUp
+    keymap: moveRowUp,
+    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top),
+    getOriginIndexes: getSelectedRowIndexes,
+    getTargetIndex: selectionRect => selectionRect.top - 1
   }, {
     label: 'down',
-    offset: 1,
-    canMove: index => {
-      var _tableMap$height;
-      return canDrag && canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
     icon: ArrowDownIcon,
-    keymap: moveRowDown
+    keymap: moveRowDown,
+    canMove: selectionRect => {
+      var _selectionRect$bottom, _tableMap$height;
+      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+    },
+    getOriginIndexes: getSelectedRowIndexes,
+    getTargetIndex: selectionRect => selectionRect.bottom
   }] : [{
     label: 'left',
-    offset: -1,
-    canMove: index => canDrag && canDecrease(index),
     icon: ArrowLeftIcon,
-    keymap: moveColumnLeft
+    keymap: moveColumnLeft,
+    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left),
+    getOriginIndexes: getSelectedColumnIndexes,
+    getTargetIndex: selectionRect => selectionRect.left - 1
   }, {
     label: 'right',
-    offset: 1,
-    canMove: index => {
-      var _tableMap$width;
-      return canDrag && canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
     icon: ArrowRightIcon,
-    keymap: moveColumnRight
+    keymap: moveColumnRight,
+    canMove: selectionRect => {
+      var _selectionRect$right, _tableMap$width;
+      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+    },
+    getOriginIndexes: getSelectedColumnIndexes,
+    getTargetIndex: selectionRect => selectionRect.right
   }];
   const sortOptions = direction === 'column' ? [{
     label: 'increasing',
@@ -154,19 +158,20 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }, ...moveOptions.map(({
     label,
-    offset,
     canMove,
     icon,
-    keymap
+    keymap,
+    getOriginIndexes,
+    getTargetIndex
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
-    disabled: !canMove(index),
+    disabled: !canMove(selectionRect),
     icon,
     onClick: (state, dispatch) => {
-      if (canMove(index)) {
+      if (canMove(selectionRect)) {
         requestAnimationFrame(() => {
-          moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, [index], index + offset)(editorView.state, editorView.dispatch);
+          moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
         });
         return true;
       }

package/dist/esm/event-handlers.js

@@ -10,7 +10,7 @@ import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
-import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
@@ -25,12 +25,15 @@ var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
 var isFocusingDragHandles = function isFocusingDragHandles(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
 };
+var isFocusingDragHandlesClickableZone = function isFocusingDragHandlesClickableZone(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.classList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
+};
 export var handleBlur = function handleBlur(view, event) {
   var state = view.state,
     dispatch = view.dispatch;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();

package/dist/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -39,6 +39,7 @@ export var moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnal
   return function (inputMethod, sourceType, sourceIndexes, targetIndex, tr) {
     return withEditorAnalyticsAPI(function (_ref2) {
       var selection = _ref2.selection;
+      var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
       var _getSelectedTableInfo2 = getSelectedTableInfo(selection),
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
@@ -52,8 +53,8 @@ export var moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnal
           // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
           // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
           distance: Math.min.apply(Math, _toConsumableArray(sourceIndexes.map(function (v) {
-            return targetIndex - v;
-          }))),
+            return Math.abs(targetIndex - v);
+          }))) * direction,
           // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
           status: sourceIndexes.includes(targetIndex) ? TABLE_STATUS.CANCELLED : TABLE_STATUS.SUCCESS,
           totalRowCount: totalRowCount,
@@ -80,15 +81,14 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       }
       var isRow = sourceType === 'table-row';
       var selectedIndexes = isRow ? getSelectedRowIndexes(selectionRect) : getSelectedColumnIndexes(selectionRect);
-
-      // FIXME: We can move if only one row/column selected
-      if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+      if (selectedIndexes.length === 0) {
         return false;
       }
-      var sourceIndex = selectedIndexes[0];
+
+      // const sourceIndex = selectedIndexes[0];
       // we can move only by one row/column
       // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-      var targetIndex = sourceIndex + direction;
+      var targetIndex = Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
 
       // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
       var _getSelectedTableInfo3 = getSelectedTableInfo(selection),
@@ -100,7 +100,7 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       }
 
       // We can move only if there are no merged cells in the source or target row/column
-      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(sourceIndex)(selection) : hasMergedCellsInColumn(sourceIndex)(selection);
+      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
       if (hasMergedCellsInSource) {
         return false;
       }
@@ -108,7 +108,7 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       if (hasMergedCellsInTarget) {
         return false;
       }
-      return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, [sourceIndex], targetIndex)(state, dispatch);
+      return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };
 };

package/dist/esm/pm-plugins/drag-and-drop/commands.js

@@ -1,9 +1,7 @@
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
-import { combineTransforms } from '../../utils/transforms';
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
@@ -74,15 +72,10 @@ export var moveSource = function moveSource(sourceType, sourceIndexes, targetInd
     if (sourceIndexes.includes(targetIndex)) {
       return nextTr.setMeta('addToHistory', false);
     }
-    var anchor = nextTr.selection.anchor;
-    var selectStartOfTable = function selectStartOfTable(newTr) {
-      return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-    };
-    var isTableRow = sourceType === 'table-row';
-    if (isTableRow) {
-      return combineTransforms([moveRow(state, sourceIndexes, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
-    }
-    return combineTransforms([moveColumn(sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
+    var move = sourceType === 'table-row' ? moveRow : moveColumn;
+    return move(state, sourceIndexes, targetIndex, {
+      selectAfterMove: true
+    })(nextTr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -55,10 +55,7 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
         indexes = _ref6.indexes;
 
       // First; Perform any quick checks so we can abort early.
-      if (!indexes || !localId ||
-      // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-      // of more then 1 item.
-      indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+      if (!indexes || !localId || !(type === 'table-row' || type === 'table-column')) {
         return false;
       }
       var _getTablePluginState = getTablePluginState(editorView.state),

package/dist/esm/pm-plugins/drag-and-drop/utils/monitor.js

@@ -30,11 +30,6 @@ export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref)
   sourceLocalId !== targetLocalId) {
     return undefined;
   }
-
-  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
-  if (sourceIndexes.length > 1) {
-    return undefined;
-  }
   var targetClosestEdge = (_extractClosestEdge = extractClosestEdge(destination.data)) !== null && _extractClosestEdge !== void 0 ? _extractClosestEdge : targetType === 'table-row' ? 'top' : 'left';
   // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
   // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want

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

@@ -3,7 +3,7 @@ import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace,
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
@@ -31,7 +31,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(getEditorContainerWidth), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(getEditorContainerWidth), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts

package/dist/esm/types.js

@@ -93,6 +93,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   DRAG_COLUMN_DROP_TARGET_CONTROLS: "".concat(tablePrefixSelector, "-col-drop-target-controls"),
   DRAG_COLUMN_CONTROLS_INNER: "".concat(tablePrefixSelector, "-col-controls__inner"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: "".concat(tablePrefixSelector, "-drag-handle-button-clickable-zone"),
   DRAG_CORNER_BUTTON: "".concat(tablePrefixSelector, "-drag-corner-button"),
   DRAG_CORNER_BUTTON_INNER: "".concat(tablePrefixSelector, "-drag-corner-button-inner"),
   /** disabled classes */

package/dist/esm/ui/DragHandle/index.js

@@ -11,6 +11,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/ut
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 var DragHandleComponent = function DragHandleComponent(_ref) {
@@ -42,11 +43,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
   var selection = editorView.state.selection;
-  var isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  var isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
+  var isRow = direction === 'row';
+  var isColumn = direction === 'column';
+  var isRowHandleHovered = isRow && hoveredRows.length > 0;
+  var isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
   var hasMergedCells = useMemo(function () {
-    return direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
-  }, [indexes, direction, selection]);
+    return isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
+  }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
     isColumnHandleHovered: isColumnHandleHovered,
@@ -83,7 +86,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
                 // be generated.
                 container.style.left = "-".concat(rect.width - 0.0001, "px");
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return {
                   x: 12,
                   y: rect.height / 2
@@ -107,17 +110,32 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
-  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+    "data-testid": "table-drag-handle-clickable-zone-button",
+    style: {
+      height: isRow ? "calc(100% - ".concat(dragTableInsertColumnButtonSize, "px)") : "var(--ds-space-200, 16px)",
+      // 16px here because it's the size of drag handle button's large side
+      width: isRow ? "var(--ds-space-200, 16px)" // 16px here because it's the size of drag handle button's large side
+      : "calc(100% - ".concat(dragTableInsertColumnButtonSize, "px)"),
+      left: isRow ? '3px' : undefined,
+      bottom: isColumn ? '0' : undefined,
+      alignSelf: isColumn ? 'none' : 'center',
+      zIndex: isColumn ? '-1' : 'auto'
+    },
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("button", {
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
-      transform: direction === 'column' ? 'none' : 'rotate(90deg)'
+      transform: isColumn ? 'none' : 'rotate(90deg)',
+      alignSelf: isColumn ? 'none' : 'center'
     },
     "data-testid": "table-drag-handle-button",
-    "aria-label": formatMessage(direction === 'row' ? messages.rowDragHandle : messages.columnDragHandle),
+    "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {