@atlaskit/editor-plugin-table 5.8.2 → 5.8.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.8.4
+
+### Patch Changes
+
+- [#67113](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67113) [`7160ae19d9e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7160ae19d9e5) - [ux] Adds localisation for table drag handle menu options
+- [#66456](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66456) [`f67ea3106bb9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f67ea3106bb9) - Add support for i18n for drag handles
+
+## 5.8.3
+
+### Patch Changes
+
+- [#66462](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66462) [`241abc835673`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/241abc835673) - Add autoscroll to editor page to fix table drag and drop
+
 ## 5.8.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -23,21 +24,20 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
-var _element2 = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _commands = require("../commands");
+var _utils3 = require("../pm-plugins/drag-and-drop/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
-var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _utils4 = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
 var _consts = require("../ui/consts");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
-var _utils4 = require("../utils");
+var _utils5 = require("../utils");
 var _ExternalDropTargets = require("./ExternalDropTargets");
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 var _TableContainer = require("./TableContainer");
@@ -125,14 +125,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
-      var isNested = (0, _utils4.isTableNested)(_this.props.view.state, _this.props.getPos());
+      var isNested = (0, _utils5.isTableNested)(_this.props.view.state, _this.props.getPos());
       // We only consider a layout change valid if it's done outside of an autoSize.
       var layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
       var parentWidth = _this.getParentNodeWidth();
       var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
-      var noOfColumnsChanged = (0, _utils4.tablesHaveDifferentNoOfColumns)(node, prevNode);
+      var noOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(node, prevNode);
       if (
       // Breakout mode/layout changed
       layoutChanged ||
@@ -186,7 +186,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
       _this.scaleTableDebounced.cancel();
-      var tr = (0, _utils3.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
+      var tr = (0, _utils4.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
         start: pos + 1,
@@ -274,7 +274,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
-      return (0, _utils3.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
+      return (0, _utils4.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
@@ -327,55 +327,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (isDragAndDropEnabled) {
-          this.dragAndDropCleanupFn = (0, _combine.combine)((0, _element.autoScrollForElements)({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref) {
-              var source = _ref.source;
-              var _ref2 = source.data,
-                localId = _ref2.localId,
-                type = _ref2.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            }
-          }), (0, _element.autoScrollWindowForElements)({
-            canScroll: function canScroll(_ref3) {
-              var source = _ref3.source;
-              var _ref4 = source.data,
-                localId = _ref4.localId,
-                type = _ref4.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
-            }
-          }), (0, _element2.unsafeOverflowAutoScrollForElements)({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref5) {
-              var source = _ref5.source;
-              var _ref6 = source.data,
-                localId = _ref6.localId,
-                type = _ref6.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            },
-            getOverflow: function getOverflow() {
-              return {
-                fromTopEdge: {
-                  top: _consts.dropTargetExtendedWidth,
-                  right: _consts.dropTargetExtendedWidth,
-                  left: _consts.dropTargetExtendedWidth
-                },
-                fromRightEdge: {
-                  right: _consts.dropTargetExtendedWidth,
-                  top: _consts.dropTargetExtendedWidth,
-                  bottom: _consts.dropTargetExtendedWidth
-                },
-                fromLeftEdge: {
-                  top: _consts.dropTargetExtendedWidth,
-                  left: _consts.dropTargetExtendedWidth,
-                  bottom: _consts.dropTargetExtendedWidth
-                }
-              };
-            }
-          }));
+          this.dragAndDropCleanupFn = _combine.combine.apply(void 0, (0, _toConsumableArray2.default)((0, _utils3.autoScrollerFactory)({
+            tableWrapper: this.wrapper,
+            getNode: getNode
+          })));
         }
       }
       if (allowColumnResizing) {
@@ -471,11 +426,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
         var previousTable = this.node;
-        if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
+        if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view = this.props.view;
-          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
           if (shouldRecreateResizeCols) {
-            (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+            (0, _utils4.insertColgroupFromNode)(this.table, currentTable);
           }
           (0, _dom.updateControls)()(_view.state);
         }
@@ -537,7 +492,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableHovered = _getPluginState2.isTableHovered;
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
-      var hasHeaderRow = (0, _utils4.containsHeaderRow)(node);
+      var hasHeaderRow = (0, _utils5.containsHeaderRow)(node);
       var rowControls = /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
         editorView: view,
         tableRef: tableRef,
@@ -602,7 +557,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       } catch (e) {
         tablePos = undefined;
       }
-      var isNested = (0, _utils4.isTableNested)(view.state, tablePos);
+      var isNested = (0, _utils5.isTableNested)(view.state, tablePos);
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
       var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar,

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

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createPlugin = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _element2 = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _utils2 = require("../../utils");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
@@ -26,6 +28,148 @@ var _pluginKey2 = require("./plugin-key");
 var _monitor = require("./utils/monitor");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
+  var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var rowAutoScrollers = editorPageScrollContainer ? [(0, _element2.monitorForElements)({
+    canMonitor: function canMonitor(_ref) {
+      var source = _ref.source;
+      var _ref2 = source.data,
+        type = _ref2.type;
+      return type === 'table-row';
+    },
+    onDragStart: function onDragStart() {
+      // auto scroller doesn't work when scroll-behavior: smooth is set, this monitor temporarily removes it via inline styles
+      editorPageScrollContainer.style.setProperty('scroll-behavior', 'unset');
+    },
+    onDrop: function onDrop() {
+      // 'null' will remove the inline style
+      editorPageScrollContainer.style.setProperty('scroll-behavior', null);
+    }
+  }), (0, _element.autoScrollForElements)({
+    element: editorPageScrollContainer,
+    canScroll: function canScroll(_ref3) {
+      var source = _ref3.source;
+      var _ref4 = source.data,
+        type = _ref4.type;
+      return type === 'table-row';
+    }
+  })] : [];
+  return _combine.combine.apply(void 0, rowAutoScrollers.concat([(0, _element2.monitorForElements)({
+    canMonitor: function canMonitor(_ref5) {
+      var source = _ref5.source;
+      var _ref6 = source.data,
+        type = _ref6.type,
+        localId = _ref6.localId,
+        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')) {
+        return false;
+      }
+      var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+        tableNode = _getTablePluginState.tableNode;
+      // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+      // watch for changes
+      return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
+    },
+    onDragStart: function onDragStart(_ref7) {
+      var location = _ref7.location;
+      (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
+    },
+    onDrag: function onDrag(event) {
+      var data = (0, _monitor.getDraggableDataFromEvent)(event);
+      // If no data can be found then it's most like we do not want to perform any drag actions
+      if (!data) {
+        (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
+        return;
+      }
+
+      // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+      // insert location as to where the draggable will most likely be go. For example;
+      var sourceType = data.sourceType,
+        targetAdjustedIndex = data.targetAdjustedIndex;
+      var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
+      var hasMergedCells = (0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+      (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
+    },
+    onDrop: function onDrop(event) {
+      var _cell$row, _cell$col;
+      var data = (0, _monitor.getDraggableDataFromEvent)(event);
+
+      // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
+      // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
+      // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
+      // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
+      // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
+      // triggered by this on drop event.
+      var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(editorView.state),
+        hoveredCell = _getTablePluginState2.hoveredCell;
+      var cell = (0, _utils2.findNearestCellIndexToPoint)(event.location.current.input.clientX, event.location.current.input.clientY);
+      var tr = editorView.state.tr;
+      var action = {
+        type: 'HOVER_CELL',
+        data: {
+          hoveredCell: {
+            rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
+            colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
+          }
+        }
+      };
+      tr.setMeta(_pluginKey.pluginKey, action);
+
+      // If no data can be found then it's most like we do not want to perform any drop action
+      if (!data) {
+        var _event$source, _event$source2;
+        // If we're able to determine the source type of the dropped element then we should report to analytics that
+        // the drop event was cancelled. Otherwise we will cancel silently.
+        if ((event === null || event === void 0 || (_event$source = event.source) === null || _event$source === void 0 || (_event$source = _event$source.data) === null || _event$source === void 0 ? void 0 : _event$source.type) === 'table-row' || (event === null || event === void 0 || (_event$source2 = event.source) === null || _event$source2 === void 0 || (_event$source2 = _event$source2.data) === null || _event$source2 === void 0 ? void 0 : _event$source2.type) === 'table-column') {
+          return (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, _analytics.TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
+        }
+        return (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
+      }
+      var sourceType = data.sourceType,
+        sourceIndexes = data.sourceIndexes,
+        targetIndex = data.targetIndex,
+        targetAdjustedIndex = data.targetAdjustedIndex,
+        direction = data.direction;
+
+      // When we drop on a target we will know the targets row/col index for certain,
+      if (sourceType === 'table-row') {
+        action.data.hoveredCell.rowIndex = targetIndex;
+      } else {
+        action.data.hoveredCell.colIndex = targetIndex;
+      }
+
+      // If the drop target index contains merged cells then we should not allow the drop to occur.
+      if ((0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN)(editorView.state.selection)) {
+        (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType,
+        // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
+        _analytics.TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
+        return;
+      }
+      var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
+        sourceIndex = _sourceIndexes[0];
+      requestAnimationFrame(function () {
+        (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+
+        // force a colgroup update here, otherwise dropped columns don't have
+        // the correct width immediately after the drop
+        if (sourceType === 'table-column') {
+          var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
+            tableRef = _getTablePluginState3.tableRef,
+            tableNode = _getTablePluginState3.tableNode;
+          if (tableRef && tableNode) {
+            (0, _utils3.insertColgroupFromNode)(tableRef, tableNode);
+          }
+        }
+        editorView.focus();
+      });
+    }
+  })]));
+};
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
   return new _safePlugin.SafePlugin({
     state: (0, _pluginFactory2.createPluginState)(dispatch, function (state) {
@@ -41,12 +185,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
     }),
     key: _pluginKey2.pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _getTablePluginState = (0, _pluginFactory.getPluginState)(oldState),
-        oldTargetCellPosition = _getTablePluginState.targetCellPosition,
-        oldTableNode = _getTablePluginState.tableNode;
-      var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(newState),
-        newTargetCellPosition = _getTablePluginState2.targetCellPosition,
-        newTableNode = _getTablePluginState2.tableNode;
+      var _getTablePluginState4 = (0, _pluginFactory.getPluginState)(oldState),
+        oldTargetCellPosition = _getTablePluginState4.targetCellPosition,
+        oldTableNode = _getTablePluginState4.tableNode;
+      var _getTablePluginState5 = (0, _pluginFactory.getPluginState)(newState),
+        newTargetCellPosition = _getTablePluginState5.targetCellPosition,
+        newTableNode = _getTablePluginState5.tableNode;
       var _getPluginState = (0, _pluginFactory2.getPluginState)(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex,
@@ -100,121 +244,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
     },
     view: function view(editorView) {
       return {
-        destroy: (0, _element.monitorForElements)({
-          canMonitor: function canMonitor(_ref) {
-            var source = _ref.source;
-            var _ref2 = source.data,
-              type = _ref2.type,
-              localId = _ref2.localId,
-              indexes = _ref2.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')) {
-              return false;
-            }
-            var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
-              tableNode = _getTablePluginState3.tableNode;
-            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
-            // watch for changes
-            return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
-          },
-          onDragStart: function onDragStart(_ref3) {
-            var location = _ref3.location;
-            (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
-          },
-          onDrag: function onDrag(event) {
-            var data = (0, _monitor.getDraggableDataFromEvent)(event);
-            // If no data can be found then it's most like we do not want to perform any drag actions
-            if (!data) {
-              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
-              return;
-            }
-
-            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
-            // insert location as to where the draggable will most likely be go. For example;
-            var sourceType = data.sourceType,
-              targetAdjustedIndex = data.targetAdjustedIndex;
-            var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
-            var hasMergedCells = (0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
-            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-          },
-          onDrop: function onDrop(event) {
-            var _cell$row, _cell$col;
-            var data = (0, _monitor.getDraggableDataFromEvent)(event);
-
-            // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
-            // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
-            // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
-            // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
-            // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
-            // triggered by this on drop event.
-            var _getTablePluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
-              hoveredCell = _getTablePluginState4.hoveredCell;
-            var cell = (0, _utils2.findNearestCellIndexToPoint)(event.location.current.input.clientX, event.location.current.input.clientY);
-            var tr = editorView.state.tr;
-            var action = {
-              type: 'HOVER_CELL',
-              data: {
-                hoveredCell: {
-                  rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
-                  colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
-                }
-              }
-            };
-            tr.setMeta(_pluginKey.pluginKey, action);
-
-            // If no data can be found then it's most like we do not want to perform any drop action
-            if (!data) {
-              var _event$source, _event$source2;
-              // If we're able to determine the source type of the dropped element then we should report to analytics that
-              // the drop event was cancelled. Otherwise we will cancel silently.
-              if ((event === null || event === void 0 || (_event$source = event.source) === null || _event$source === void 0 || (_event$source = _event$source.data) === null || _event$source === void 0 ? void 0 : _event$source.type) === 'table-row' || (event === null || event === void 0 || (_event$source2 = event.source) === null || _event$source2 === void 0 || (_event$source2 = _event$source2.data) === null || _event$source2 === void 0 ? void 0 : _event$source2.type) === 'table-column') {
-                return (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, _analytics.TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
-              }
-              return (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
-            }
-            var sourceType = data.sourceType,
-              sourceIndexes = data.sourceIndexes,
-              targetIndex = data.targetIndex,
-              targetAdjustedIndex = data.targetAdjustedIndex,
-              direction = data.direction;
-
-            // When we drop on a target we will know the targets row/col index for certain,
-            if (sourceType === 'table-row') {
-              action.data.hoveredCell.rowIndex = targetIndex;
-            } else {
-              action.data.hoveredCell.colIndex = targetIndex;
-            }
-
-            // If the drop target index contains merged cells then we should not allow the drop to occur.
-            if ((0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN)(editorView.state.selection)) {
-              (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType,
-              // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
-              _analytics.TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
-              return;
-            }
-            var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
-              sourceIndex = _sourceIndexes[0];
-            requestAnimationFrame(function () {
-              (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
-
-              // force a colgroup update here, otherwise dropped columns don't have
-              // the correct width immediately after the drop
-              if (sourceType === 'table-column') {
-                var _getTablePluginState5 = (0, _pluginFactory.getPluginState)(editorView.state),
-                  tableRef = _getTablePluginState5.tableRef,
-                  tableNode = _getTablePluginState5.tableNode;
-                if (tableRef && tableNode) {
-                  (0, _utils3.insertColgroupFromNode)(tableRef, tableNode);
-                }
-              }
-              editorView.focus();
-            });
-          }
-        })
+        destroy: destroyFn(editorView, editorAnalyticsAPI)
       };
     },
     props: {

package/dist/cjs/pm-plugins/drag-and-drop/utils/autoscrollers.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoScrollerFactory = void 0;
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _element2 = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element");
+var _consts = require("../../../ui/consts");
+var autoScrollerFactory = exports.autoScrollerFactory = function autoScrollerFactory(_ref) {
+  var tableWrapper = _ref.tableWrapper,
+    getNode = _ref.getNode;
+  return [(0, _element.autoScrollForElements)({
+    element: tableWrapper,
+    canScroll: function canScroll(_ref2) {
+      var source = _ref2.source;
+      var _ref3 = source.data,
+        localId = _ref3.localId,
+        type = _ref3.type;
+      var node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+    }
+  }), (0, _element2.unsafeOverflowAutoScrollForElements)({
+    element: tableWrapper,
+    canScroll: function canScroll(_ref4) {
+      var source = _ref4.source;
+      var _ref5 = source.data,
+        localId = _ref5.localId,
+        type = _ref5.type;
+      var node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+    },
+    getOverflow: function getOverflow() {
+      return {
+        fromTopEdge: {
+          top: _consts.dropTargetExtendedWidth,
+          right: _consts.dropTargetExtendedWidth,
+          left: _consts.dropTargetExtendedWidth
+        },
+        fromRightEdge: {
+          right: _consts.dropTargetExtendedWidth,
+          top: _consts.dropTargetExtendedWidth,
+          bottom: _consts.dropTargetExtendedWidth
+        },
+        fromLeftEdge: {
+          top: _consts.dropTargetExtendedWidth,
+          left: _consts.dropTargetExtendedWidth,
+          bottom: _consts.dropTargetExtendedWidth
+        }
+      };
+    }
+  })];
+};

package/dist/cjs/pm-plugins/drag-and-drop/utils/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "autoScrollerFactory", {
+  enumerable: true,
+  get: function get() {
+    return _autoscrollers.autoScrollerFactory;
+  }
+});
 Object.defineProperty(exports, "getDraggableDataFromEvent", {
   enumerable: true,
   get: function get() {
     return _monitor.getDraggableDataFromEvent;
   }
 });
-var _monitor = require("./monitor");
+var _monitor = require("./monitor");
+var _autoscrollers = require("./autoscrollers");

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

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
@@ -21,7 +23,7 @@ var _DragPreview = require("../DragPreview");
 var _HandleIconComponent = require("./HandleIconComponent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
@@ -39,7 +41,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     _ref$canDrag = _ref.canDrag,
-    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag;
+    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag,
+    formatMessage = _ref.intl.formatMessage;
   var dragHandleDivRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,6 +127,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-drag-handle-button",
+    "aria-label": formatMessage(direction === 'row' ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {
@@ -142,4 +146,5 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     width: previewWidth,
     height: previewHeight
   }), previewContainer));
-};
+};
+var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -148,7 +148,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumn : _messages.tableMessages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
@@ -165,7 +165,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRow : _messages.tableMessages.insertRow),
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },