@atlaskit/editor-plugin-table 5.2.0 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.2.2
+
+### Patch Changes
+
+- [#41510](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41510) [`12e9528f975`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12e9528f975) - [ux] Adds a command for shift+arrowUp when pressed inside table to select the whole table when we reach top row.
+- Updated dependencies
+
+## 5.2.1
+
+### Patch Changes
+
+- [#41471](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41471) [`94c3351cece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94c3351cece) - Table row nodeviews will now be set as drop targets when the DnD FF is enabled
+
 ## 5.2.0
 
 ### Minor Changes

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
+exports.shiftArrowUpFromTable = 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 _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -344,4 +345,22 @@ var isSelectionAtStartOfTable = function isSelectionAtStartOfTable($pos, selecti
 };
 var isSelectionAtEndOfTable = function isSelectionAtEndOfTable($pos, selection) {
   return (0, _selection.isSelectionAtEndOfNode)($pos, (0, _utils.findTable)(selection));
+};
+var shiftArrowUpFromTable = exports.shiftArrowUpFromTable = function shiftArrowUpFromTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+      if (table && index === 0) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

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

@@ -16,6 +16,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -47,9 +49,6 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listening", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padding", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "top", 0);
-    /**
-     * Methods
-     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -75,6 +74,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         _this.subscribe();
       }
     }
+    if (_this.isDragAndDropEnabled) {
+      _this.addDropTarget(_this.contentDOM);
+    }
     return _this;
   }
 
@@ -121,6 +123,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = (0, _dom2.getTree)(this.dom);
@@ -129,6 +132,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
+
+      // If a drop target cleanup method has been set then we should call it.
+      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -155,6 +161,54 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
+
+    /**
+     * Methods
+     */
+  }, {
+    key: "addDropTarget",
+    value: function addDropTarget(element) {
+      var pos = this.getPos();
+      if (!Number.isFinite(pos)) {
+        return;
+      }
+      if (this.dropTargetCleanup) {
+        this.dropTargetCleanup();
+      }
+      var resolvedPos = this.view.state.doc.resolve(pos);
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      this.dropTargetCleanup = (0, _element.dropTargetForElements)({
+        element: element,
+        canDrop: function canDrop(_ref2) {
+          var _data$indexes, _data$indexes2;
+          var source = _ref2.source;
+          var data = source.data;
+          return (
+            // Only draggables of row type can be dropped on this target
+            data.type === 'table-row' &&
+            // Only draggables which came from the same table can be dropped on this target
+            data.localId === localId &&
+            // Only draggables which DO NOT include this drop targets index can be dropped
+            !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+          );
+        },
+        getData: function getData(_ref3) {
+          var input = _ref3.input,
+            element = _ref3.element;
+          var data = {
+            localId: localId,
+            type: 'table-row',
+            targetIndex: targetIndex
+          };
+          return (0, _closestEdge.attachClosestEdge)(data, {
+            input: input,
+            element: element,
+            allowedEdges: ['top', 'bottom']
+          });
+        }
+      });
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {

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

@@ -7,11 +7,15 @@ exports.default = void 0;
 exports.tableSelectionKeymapPlugin = tableSelectionKeymapPlugin;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _selection = require("../commands/selection");
 function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _selection.arrowRightFromTable)(editorSelectionAPI)(), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _selection.arrowLeftFromTable)(editorSelectionAPI)(), list);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.shift-arrowup-fix')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
+  }
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = tableSelectionKeymapPlugin;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = void 0;
+exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -291,7 +291,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     showSelected: false
   };
 };
-var getClosestSelectionRect = function getClosestSelectionRect(state) {
+var getClosestSelectionRect = exports.getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : (0, _utils3.findCellRectClosestToPos)(selection.$from);
 };

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

@@ -117,4 +117,7 @@ var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+/**
+ * Drag and Drop interfaces
+ */

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

@@ -3,6 +3,7 @@ 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 { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -305,4 +306,20 @@ const setGapCursorAfterTable = editorSelectionAPI => () => (state, dispatch) =>
   return false;
 };
 const isSelectionAtStartOfTable = ($pos, selection) => isSelectionAtStartOfNode($pos, findTable(selection));
-const isSelectionAtEndOfTable = ($pos, selection) => isSelectionAtEndOfNode($pos, findTable(selection));
+const isSelectionAtEndOfTable = ($pos, selection) => isSelectionAtEndOfNode($pos, findTable(selection));
+export const shiftArrowUpFromTable = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const selectionRect = getClosestSelectionRect(state);
+  const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+  if (table && index === 0) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  return false;
+};

package/dist/es2019/plugins/table/nodeviews/TableRow.js

@@ -3,6 +3,8 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -29,9 +31,6 @@ export default class TableRow extends TableNodeView {
     _defineProperty(this, "listening", false);
     _defineProperty(this, "padding", 0);
     _defineProperty(this, "top", 0);
-    /**
-     * Methods
-     */
     _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
       this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -58,6 +57,9 @@ export default class TableRow extends TableNodeView {
         this.subscribe();
       }
     }
+    if (this.isDragAndDropEnabled) {
+      this.addDropTarget(this.contentDOM);
+    }
   }
 
   /**
@@ -99,6 +101,7 @@ export default class TableRow extends TableNodeView {
     return true;
   }
   destroy() {
+    var _this$dropTargetClean;
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
       const tree = getTree(this.dom);
@@ -107,6 +110,9 @@ export default class TableRow extends TableNodeView {
       }
       this.emitOff(true);
     }
+
+    // If a drop target cleanup method has been set then we should call it.
+    (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 ? void 0 : _this$dropTargetClean.call(this);
   }
   ignoreMutation(mutationRecord) {
     /* tableRows are not directly editable by the user
@@ -131,6 +137,55 @@ export default class TableRow extends TableNodeView {
     }
     return true;
   }
+
+  /**
+   * Methods
+   */
+
+  addDropTarget(element) {
+    const pos = this.getPos();
+    if (!Number.isFinite(pos)) {
+      return;
+    }
+    if (this.dropTargetCleanup) {
+      this.dropTargetCleanup();
+    }
+    const resolvedPos = this.view.state.doc.resolve(pos);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+    this.dropTargetCleanup = dropTargetForElements({
+      element: element,
+      canDrop({
+        source
+      }) {
+        var _data$indexes, _data$indexes2;
+        const data = source.data;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-row' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+        );
+      },
+      getData({
+        input,
+        element
+      }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      }
+    });
+  }
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
     if (this.editorScrollableElement) {

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

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

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

@@ -286,7 +286,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     showSelected: false
   };
 };
-const getClosestSelectionRect = state => {
+export const getClosestSelectionRect = state => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };

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

@@ -109,4 +109,8 @@ export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+
+/**
+ * Drag and Drop interfaces
+ */

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

@@ -3,6 +3,7 @@ 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 { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -338,4 +339,22 @@ var isSelectionAtStartOfTable = function isSelectionAtStartOfTable($pos, selecti
 };
 var isSelectionAtEndOfTable = function isSelectionAtEndOfTable($pos, selection) {
   return isSelectionAtEndOfNode($pos, findTable(selection));
+};
+export var shiftArrowUpFromTable = function shiftArrowUpFromTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+      if (table && index === 0) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

package/dist/esm/plugins/table/nodeviews/TableRow.js

@@ -11,6 +11,8 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -41,9 +43,6 @@ var TableRow = /*#__PURE__*/function (_ref) {
     _defineProperty(_assertThisInitialized(_this), "listening", false);
     _defineProperty(_assertThisInitialized(_this), "padding", 0);
     _defineProperty(_assertThisInitialized(_this), "top", 0);
-    /**
-     * Methods
-     */
     _defineProperty(_assertThisInitialized(_this), "headerRowMouseScrollEnd", debounce(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -69,6 +68,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
         _this.subscribe();
       }
     }
+    if (_this.isDragAndDropEnabled) {
+      _this.addDropTarget(_this.contentDOM);
+    }
     return _this;
   }
 
@@ -115,6 +117,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = getTree(this.dom);
@@ -123,6 +126,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
+
+      // If a drop target cleanup method has been set then we should call it.
+      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -149,6 +155,54 @@ var TableRow = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
+
+    /**
+     * Methods
+     */
+  }, {
+    key: "addDropTarget",
+    value: function addDropTarget(element) {
+      var pos = this.getPos();
+      if (!Number.isFinite(pos)) {
+        return;
+      }
+      if (this.dropTargetCleanup) {
+        this.dropTargetCleanup();
+      }
+      var resolvedPos = this.view.state.doc.resolve(pos);
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      this.dropTargetCleanup = dropTargetForElements({
+        element: element,
+        canDrop: function canDrop(_ref2) {
+          var _data$indexes, _data$indexes2;
+          var source = _ref2.source;
+          var data = source.data;
+          return (
+            // Only draggables of row type can be dropped on this target
+            data.type === 'table-row' &&
+            // Only draggables which came from the same table can be dropped on this target
+            data.localId === localId &&
+            // Only draggables which DO NOT include this drop targets index can be dropped
+            !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+          );
+        },
+        getData: function getData(_ref3) {
+          var input = _ref3.input,
+            element = _ref3.element;
+          var data = {
+            localId: localId,
+            type: 'table-row',
+            targetIndex: targetIndex
+          };
+          return attachClosestEdge(data, {
+            input: input,
+            element: element,
+            allowedEdges: ['top', 'bottom']
+          });
+        }
+      });
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {

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

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

package/dist/esm/plugins/table/toolbar.js

@@ -283,7 +283,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     showSelected: false
   };
 };
-var getClosestSelectionRect = function getClosestSelectionRect(state) {
+export var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };

package/dist/esm/plugins/table/types.js

@@ -111,4 +111,8 @@ export var ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+
+/**
+ * Drag and Drop interfaces
+ */

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

@@ -6,3 +6,4 @@ 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 shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/dist/types/plugins/table/nodeviews/TableRow.d.ts

@@ -23,6 +23,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private listening;
     private padding;
     private top;
+    private dropTargetCleanup?;
     /**
      * Methods: Nodeview Lifecycle
      */
@@ -35,6 +36,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     /**
      * Methods
      */
+    private addDropTarget;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

package/dist/types/plugins/table/toolbar.d.ts

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

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

@@ -341,3 +341,17 @@ export type InvalidNodeAttr = {
     spanValue: number;
     tableLocalId: string;
 };
+/**
+ * Drag and Drop interfaces
+ */
+export type DraggableType = 'table-row' | 'table-column';
+export interface DraggableSourceData extends Record<string, unknown> {
+    type: DraggableType;
+    localId: string;
+    indexes: number[];
+}
+export interface DraggableTargetData extends Record<string, unknown> {
+    type: DraggableType;
+    localId: string;
+    targetIndex: number;
+}

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

@@ -6,3 +6,4 @@ 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 shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts

@@ -23,6 +23,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private listening;
     private padding;
     private top;
+    private dropTargetCleanup?;
     /**
      * Methods: Nodeview Lifecycle
      */
@@ -35,6 +36,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     /**
      * Methods
      */
+    private addDropTarget;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

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

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

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

@@ -341,3 +341,17 @@ export type InvalidNodeAttr = {
     spanValue: number;
     tableLocalId: string;
 };
+/**
+ * Drag and Drop interfaces
+ */
+export type DraggableType = 'table-row' | 'table-column';
+export interface DraggableSourceData extends Record<string, unknown> {
+    type: DraggableType;
+    localId: string;
+    indexes: number[];
+}
+export interface DraggableTargetData extends Record<string, unknown> {
+    type: DraggableType;
+    localId: string;
+    targetIndex: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.9.0",
+    "@atlaskit/editor-common": "^76.11.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -38,6 +38,8 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.26.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -125,6 +127,9 @@
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },
+    "platform.editor.table.shift-arrowup-fix": {
+      "type": "boolean"
+    },
     "platform.editor.table.update-table-resizer-styles": {
       "type": "boolean"
     },

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

@@ -20,6 +20,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import type tablePlugin from '../index';
+import { getClosestSelectionRect } from '../toolbar';
 
 export enum TableSelectionDirection {
   TopToBottom = 'TopToBottom',
@@ -485,3 +486,26 @@ const isSelectionAtStartOfTable = ($pos: ResolvedPos, selection: Selection) =>
 
 const isSelectionAtEndOfTable = ($pos: ResolvedPos, selection: Selection) =>
   isSelectionAtEndOfNode($pos, findTable(selection));
+
+export const shiftArrowUpFromTable =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const selectionRect = getClosestSelectionRect(state);
+    const index = selectionRect?.top;
+    if (table && index === 0) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    return false;
+  };

package/src/plugins/table/nodeviews/TableRow.ts

@@ -6,6 +6,8 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -14,7 +16,7 @@ import {
   syncStickyRowToTable,
   updateStickyMargins as updateTableMargin,
 } from '../pm-plugins/table-resizing/utils/dom';
-import type { TablePluginState } from '../types';
+import type { DraggableSourceData, TablePluginState } from '../types';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import {
   STICKY_HEADER_TOGGLE_TOLERANCE_MS,
@@ -62,6 +64,10 @@ export default class TableRow
         this.subscribe();
       }
     }
+
+    if (this.isDragAndDropEnabled) {
+      this.addDropTarget(this.contentDOM);
+    }
   }
 
   /**
@@ -87,6 +93,7 @@ export default class TableRow
   private listening = false;
   private padding: number = 0;
   private top: number = 0;
+  private dropTargetCleanup?: () => void;
 
   /**
    * Methods: Nodeview Lifecycle
@@ -133,6 +140,9 @@ export default class TableRow
 
       this.emitOff(true);
     }
+
+    // If a drop target cleanup method has been set then we should call it.
+    this.dropTargetCleanup?.();
   }
 
   ignoreMutation(
@@ -172,6 +182,49 @@ export default class TableRow
    * Methods
    */
 
+  private addDropTarget(element: HTMLElement) {
+    const pos = this.getPos()!;
+    if (!Number.isFinite(pos)) {
+      return;
+    }
+
+    if (this.dropTargetCleanup) {
+      this.dropTargetCleanup();
+    }
+
+    const resolvedPos = this.view.state.doc.resolve(pos);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+
+    this.dropTargetCleanup = dropTargetForElements({
+      element: element,
+      canDrop({ source }) {
+        const data = source.data as DraggableSourceData;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-row' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!data.indexes?.length &&
+          data.indexes?.indexOf(targetIndex) === -1
+        );
+      },
+      getData({ input, element }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex,
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom'],
+        });
+      },
+    });
+  }
+
   private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);

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

@@ -2,12 +2,18 @@ import {
   bindKeymapWithCommand,
   moveLeft,
   moveRight,
+  shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+import {
+  arrowLeftFromTable,
+  arrowRightFromTable,
+  shiftArrowUpFromTable,
+} from '../commands/selection';
 import type tablePlugin from '../index';
 
 export function tableSelectionKeymapPlugin(
@@ -29,6 +35,14 @@ export function tableSelectionKeymapPlugin(
     list,
   );
 
+  if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
+    bindKeymapWithCommand(
+      shiftArrowUp.common!,
+      shiftArrowUpFromTable(editorSelectionAPI)(),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

package/src/plugins/table/toolbar.tsx

@@ -420,7 +420,9 @@ export const getToolbarCellOptionsConfig = (
   };
 };
 
-const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
+export const getClosestSelectionRect = (
+  state: EditorState,
+): Rect | undefined => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell')
     ? getSelectionRect(selection)!

package/src/plugins/table/types.ts

@@ -367,3 +367,19 @@ export type InvalidNodeAttr = {
   spanValue: number;
   tableLocalId: string;
 };
+
+/**
+ * Drag and Drop interfaces
+ */
+export type DraggableType = 'table-row' | 'table-column';
+export interface DraggableSourceData extends Record<string, unknown> {
+  type: DraggableType;
+  localId: string;
+  indexes: number[];
+}
+
+export interface DraggableTargetData extends Record<string, unknown> {
+  type: DraggableType;
+  localId: string;
+  targetIndex: number;
+}

package/tsconfig.app.json

@@ -69,6 +69,12 @@
     {
       "path": "../../platform/feature-flags/tsconfig.app.json"
     },
+    {
+      "path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
+    },
+    {
+      "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },