@atlaskit/editor-plugin-table 5.3.34 → 5.3.36

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.36
+
+### Patch Changes
+
+- [#42221](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42221) [`1f49a73a590`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f49a73a590) - [ux] [ECA11Y-110] Selecting table columns, rows, whole table via shortcuts
+
+## 5.3.35
+
+### Patch Changes
+
+- [#43255](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43255) [`404fa3bc44e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/404fa3bc44e) - Add requestAnimationFrame around move row/column command to fix an issue where selection would be lost
+- Updated dependencies
+
 ## 5.3.34
 
 ### Patch Changes

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shiftArrowUpFromTable = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
+exports.shiftArrowUpFromTable = exports.selectRows = exports.selectColumns = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _misc = require("../commands/misc");
 var _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -45,6 +46,46 @@ var arrowRightFromTable = exports.arrowRightFromTable = function arrowRightFromT
     };
   };
 };
+var selectColumns = exports.selectColumns = function selectColumns(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var rect = (0, _utils.selectedRect)(state);
+      if (table && (0, _utils.isRowSelected)(rect.top)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return (0, _misc.selectColumn)(rect.left)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var rect = (0, _utils.selectedRect)(state);
+      if (table && (0, _utils.isColumnSelected)(rect.left)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return (0, _misc.selectRow)(rect.top)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
 var arrowLeftFromCellSelection = function arrowLeftFromCellSelection(editorSelectionAPI) {
   return function (selection) {
     return function (state, dispatch) {

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

@@ -359,7 +359,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled) {
+    if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled && !(0, _pluginFactory.getPluginState)(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updatePluginStateDecorations = exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
+var _transforms = require("../../utils/transforms");
 var _actions = require("./actions");
 var _consts = require("./consts");
 var _pluginFactory = require("./plugin-factory");
@@ -76,11 +78,15 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
+    var anchor = tr.selection.anchor;
+    var selectStartOfTable = function selectStartOfTable(newTr) {
+      return newTr.setSelection(_state.TextSelection.create(newTr.doc, anchor));
+    };
     var isTableRow = sourceType === 'table-row';
-    var move = isTableRow ? _utils.moveRow : _utils.moveColumn;
-    var newTr = move(sourceIndex, targetIndex)(tr);
-    var select = isTableRow ? _utils.selectRow : _utils.selectColumn;
-    return select(targetIndex)(newTr);
+    if (isTableRow) {
+      return (0, _transforms.combineTransforms)([(0, _utils.moveRow)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectRow)(targetIndex)], tr);
+    }
+    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], tr);
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -27,7 +27,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         dropTargetType: _consts.DropTargetType.NONE,
         dropTargetIndex: 0,
         isDragMenuOpen: false,
-        dragMenuIndex: 0
+        dragMenuIndex: 0,
+        isDragging: false
       };
     }),
     key: _pluginKey.pluginKey,
@@ -132,7 +133,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             }
             var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(function () {
+              (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

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

@@ -16,13 +16,15 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       });
     case _actions.DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: _consts.DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       });
     case _actions.DragAndDropActionType.TOGGLE_DRAG_MENU:
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/cjs/plugins/table/pm-plugins/table-selection-keymap.js

@@ -16,6 +16,8 @@ function tableSelectionKeymapPlugin(editorSelectionAPI) {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.shift-arrowup-fix')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
   }
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.selectColumn.common, (0, _selection.selectColumns)(editorSelectionAPI)(), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.selectRow.common, (0, _selection.selectRows)(editorSelectionAPI)(), list);
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = tableSelectionKeymapPlugin;

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -148,7 +148,9 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
-          (0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+          requestAnimationFrame(function () {
+            (0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+          });
           return true;
         }
         return false;

package/dist/cjs/plugins/table/utils/transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.combineTransforms = void 0;
+var combineTransforms = exports.combineTransforms = function combineTransforms(transforms, tr) {
+  return transforms.reduce(function (prev, curr) {
+    return curr(prev);
+  }, tr);
+};

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

@@ -2,7 +2,8 @@ import { GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, R
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { selectColumn, selectRow } from '../commands/misc';
 import { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -35,6 +36,42 @@ export const arrowRightFromTable = editorSelectionAPI => () => (state, dispatch)
   }
   return false;
 };
+export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const rect = selectedRect(state);
+  if (table && isRowSelected(rect.top)(selection)) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  if (table && rect) {
+    return selectColumn(rect.left)(state, dispatch);
+  }
+  return false;
+};
+export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const rect = selectedRect(state);
+  if (table && isColumnSelected(rect.left)(selection)) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  if (table && rect) {
+    return selectRow(rect.top)(state, dispatch);
+  }
+  return false;
+};
 const arrowLeftFromCellSelection = editorSelectionAPI => selection => (state, dispatch) => {
   if (isTableSelected(state.selection) && editorSelectionAPI) {
     const selectionState = editorSelectionAPI.sharedState.currentState() || {};

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

@@ -366,7 +366,7 @@ const trackCellLocation = (view, mouseEvent) => {
   }
 };
 export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
-  if (getPluginState(view.state).isDragAndDropEnabled) {
+  if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
     trackCellLocation(view, mouseEvent);
   }
   return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -1,7 +1,9 @@
+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 { 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';
@@ -62,11 +64,13 @@ export const moveSource = (sourceType, sourceIndex, targetIndex) => createComman
   if (sourceIndex === targetIndex) {
     return tr.setMeta('addToHistory', false);
   }
+  const anchor = tr.selection.anchor;
+  const selectStartOfTable = newTr => newTr.setSelection(TextSelection.create(newTr.doc, anchor));
   const isTableRow = sourceType === 'table-row';
-  const move = isTableRow ? moveRow : moveColumn;
-  const newTr = move(sourceIndex, targetIndex)(tr);
-  const select = isTableRow ? selectRow : selectColumn;
-  return select(targetIndex)(newTr);
+  if (isTableRow) {
+    return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+  }
+  return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
 });
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {

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

@@ -18,7 +18,8 @@ export const createPlugin = (dispatch, eventDispatcher) => {
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
       isDragMenuOpen: false,
-      dragMenuIndex: 0
+      dragMenuIndex: 0,
+      isDragging: false
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -132,7 +133,9 @@ export const createPlugin = (dispatch, eventDispatcher) => {
               return;
             }
             const [sourceIndex] = sourceIndexes;
-            moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(() => {
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

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

@@ -7,14 +7,16 @@ export default ((pluginState, action) => {
         ...pluginState,
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       };
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return {

package/dist/es2019/plugins/table/pm-plugins/table-selection-keymap.js

@@ -1,7 +1,7 @@
-import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { arrowLeftFromTable, arrowRightFromTable, shiftArrowUpFromTable } from '../commands/selection';
+import { arrowLeftFromTable, arrowRightFromTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
 export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   const list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
@@ -9,6 +9,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }
+  bindKeymapWithCommand(selectColumn.common, selectColumns(editorSelectionAPI)(), list);
+  bindKeymapWithCommand(selectRow.common, selectRows(editorSelectionAPI)(), list);
   return keymap(list);
 }
 export default tableSelectionKeymapPlugin;

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

@@ -133,7 +133,9 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap,
     icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {
-        moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        requestAnimationFrame(() => {
+          moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        });
         return true;
       }
       return false;

package/dist/es2019/plugins/table/utils/transforms.js

@@ -0,0 +1,5 @@
+export const combineTransforms = (transforms, tr) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};

package/dist/esm/plugins/table/commands/selection.js

@@ -2,7 +2,8 @@ import { GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, R
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { selectColumn, selectRow } from '../commands/misc';
 import { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -39,6 +40,46 @@ export var arrowRightFromTable = function arrowRightFromTable(editorSelectionAPI
     };
   };
 };
+export var selectColumns = function selectColumns(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var rect = selectedRect(state);
+      if (table && isRowSelected(rect.top)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return selectColumn(rect.left)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+export var selectRows = function selectRows(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var rect = selectedRect(state);
+      if (table && isColumnSelected(rect.left)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return selectRow(rect.top)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
 var arrowLeftFromCellSelection = function arrowLeftFromCellSelection(editorSelectionAPI) {
   return function (selection) {
     return function (state, dispatch) {

package/dist/esm/plugins/table/event-handlers.js

@@ -350,7 +350,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -1,7 +1,9 @@
+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 { 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';
@@ -71,11 +73,15 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
+    var anchor = tr.selection.anchor;
+    var selectStartOfTable = function selectStartOfTable(newTr) {
+      return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+    };
     var isTableRow = sourceType === 'table-row';
-    var move = isTableRow ? moveRow : moveColumn;
-    var newTr = move(sourceIndex, targetIndex)(tr);
-    var select = isTableRow ? selectRow : selectColumn;
-    return select(targetIndex)(newTr);
+    if (isTableRow) {
+      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+    }
+    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -20,7 +20,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
         isDragMenuOpen: false,
-        dragMenuIndex: 0
+        dragMenuIndex: 0,
+        isDragging: false
       };
     }),
     key: pluginKey,
@@ -125,7 +126,9 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             }
             var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(function () {
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

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

@@ -9,13 +9,15 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       });
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       });
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return _objectSpread(_objectSpread({}, pluginState), {}, {

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

@@ -1,7 +1,7 @@
-import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { arrowLeftFromTable, arrowRightFromTable, shiftArrowUpFromTable } from '../commands/selection';
+import { arrowLeftFromTable, arrowRightFromTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
 export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
@@ -9,6 +9,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }
+  bindKeymapWithCommand(selectColumn.common, selectColumns(editorSelectionAPI)(), list);
+  bindKeymapWithCommand(selectRow.common, selectRows(editorSelectionAPI)(), list);
   return keymap(list);
 }
 export default tableSelectionKeymapPlugin;

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -141,7 +141,9 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
-          moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          requestAnimationFrame(function () {
+            moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          });
           return true;
         }
         return false;

package/dist/esm/plugins/table/utils/transforms.js

@@ -0,0 +1,5 @@
+export var combineTransforms = function combineTransforms(transforms, tr) {
+  return transforms.reduce(function (prev, curr) {
+    return curr(prev);
+  }, tr);
+};

package/dist/types/plugins/table/commands/selection.d.ts

@@ -6,4 +6,6 @@ export declare enum TableSelectionDirection {
 }
 export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

package/dist/types/plugins/table/utils/transforms.d.ts

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/commands/selection.d.ts

@@ -6,4 +6,6 @@ export declare enum TableSelectionDirection {
 }
 export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

package/dist/types-ts4.5/plugins/table/utils/transforms.d.ts

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.34",
+  "version": "5.3.36",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.24.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.7.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.11.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^18.0.0",

package/src/plugins/table/commands/selection.ts

@@ -17,8 +17,15 @@ import type {
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-
+import {
+  findTable,
+  isColumnSelected,
+  isRowSelected,
+  isTableSelected,
+  selectedRect,
+} from '@atlaskit/editor-tables/utils';
+
+import { selectColumn, selectRow } from '../commands/misc';
 import type tablePlugin from '../index';
 import { getClosestSelectionRect } from '../toolbar';
 
@@ -78,6 +85,60 @@ export const arrowRightFromTable =
     return false;
   };
 
+export const selectColumns =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const rect = selectedRect(state);
+
+    if (table && isRowSelected(rect.top)(selection)) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    if (table && rect) {
+      return selectColumn(rect.left)(state, dispatch);
+    }
+
+    return false;
+  };
+
+export const selectRows =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const rect = selectedRect(state);
+
+    if (table && isColumnSelected(rect.left)(selection)) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    if (table && rect) {
+      return selectRow(rect.top)(state, dispatch);
+    }
+
+    return false;
+  };
+
 const arrowLeftFromCellSelection =
   (
     editorSelectionAPI:

package/src/plugins/table/event-handlers.ts

@@ -587,7 +587,10 @@ export const withCellTracking =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (
+      getPluginState(view.state).isDragAndDropEnabled &&
+      !getDragDropPluginState(view.state).isDragging
+    ) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -2,6 +2,7 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -18,6 +19,7 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -114,11 +116,31 @@ export const moveSource = (
         return tr.setMeta('addToHistory', false);
       }
 
+      const anchor = tr.selection.anchor;
+      const selectStartOfTable = (newTr: Transaction) =>
+        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+
       const isTableRow = sourceType === 'table-row';
-      const move = isTableRow ? moveRow : moveColumn;
-      const newTr = move(sourceIndex, targetIndex)(tr);
-      const select = isTableRow ? selectRow : selectColumn;
-      return select(targetIndex)(newTr);
+
+      if (isTableRow) {
+        return combineTransforms(
+          [
+            moveRow(sourceIndex, targetIndex),
+            selectStartOfTable,
+            selectRow(targetIndex),
+          ],
+          tr,
+        );
+      }
+
+      return combineTransforms(
+        [
+          moveColumn(sourceIndex, targetIndex),
+          selectStartOfTable,
+          selectColumn(targetIndex),
+        ],
+        tr,
+      );
     },
   );
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -39,6 +39,7 @@ export const createPlugin = (
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
+      isDragging: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -160,11 +161,14 @@ export const createPlugin = (
             }
 
             const [sourceIndex] = sourceIndexes;
-            moveSource(
-              sourceType,
-              sourceIndex,
-              targetAdjustedIndex + (direction === -1 ? 0 : -1),
-            )(editorView.state, editorView.dispatch);
+
+            requestAnimationFrame(() => {
+              moveSource(
+                sourceType,
+                sourceIndex,
+                targetAdjustedIndex + (direction === -1 ? 0 : -1),
+              )(editorView.state, editorView.dispatch);
+            });
           },
         }),
       };

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -14,6 +14,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index,
+        isDragging: true,
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
@@ -21,6 +22,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
+        isDragging: false,
       };
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return {

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -11,4 +11,5 @@ export interface DragAndDropPluginState {
   isDragMenuOpen: boolean;
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
+  isDragging: boolean;
 }

package/src/plugins/table/pm-plugins/table-selection-keymap.ts

@@ -2,6 +2,8 @@ import {
   bindKeymapWithCommand,
   moveLeft,
   moveRight,
+  selectColumn,
+  selectRow,
   shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -12,6 +14,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import {
   arrowLeftFromTable,
   arrowRightFromTable,
+  selectColumns,
+  selectRows,
   shiftArrowUpFromTable,
 } from '../commands/selection';
 import type tablePlugin from '../index';
@@ -43,6 +47,18 @@ export function tableSelectionKeymapPlugin(
     );
   }
 
+  bindKeymapWithCommand(
+    selectColumn.common!,
+    selectColumns(editorSelectionAPI)(),
+    list,
+  );
+
+  bindKeymapWithCommand(
+    selectRow.common!,
+    selectRows(editorSelectionAPI)(),
+    list,
+  );
+
   return keymap(list) as SafePlugin;
 }
 

package/src/plugins/table/utils/drag-menu.ts

@@ -194,11 +194,13 @@ export const getDragMenuConfig = (
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {
-          moveSource(
-            `table-${direction}`,
-            index!,
-            index! + offset,
-          )(state, dispatch);
+          requestAnimationFrame(() => {
+            moveSource(
+              `table-${direction}`,
+              index!,
+              index! + offset,
+            )(state, dispatch);
+          });
           return true;
         }
         return false;

package/src/plugins/table/utils/transforms.ts

@@ -0,0 +1,10 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+
+export const combineTransforms = (
+  transforms: Array<(tr: Transaction) => Transaction>,
+  tr: Transaction,
+) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};