@atlaskit/editor-plugin-table 5.8.1 → 5.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#66678](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66678) [`dcfaed76166a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dcfaed76166a) - Update insert row / column plus icon for table
+
 ## 5.8.1
 
 ### 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/FloatingInsertButton/InsertButton.js

@@ -81,7 +81,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M8.66667 7.33333V4.66667C8.66667 4.48986 8.59643 4.32029 8.47141 4.19526C8.34638 4.07024 8.17682 4 8 4C7.82318 4 7.65362 4.07024 7.52859 4.19526C7.40357 4.32029 7.33333 4.48986 7.33333 4.66667V7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82318 4 8C4 8.17682 4.07024 8.34638 4.19526 8.47141C4.32029 8.59643 4.48986 8.66667 4.66667 8.66667H7.33333V11.3333C7.33333 11.5101 7.40357 11.6797 7.52859 11.8047C7.65362 11.9298 7.82318 12 8 12C8.17682 12 8.34638 11.9298 8.47141 11.8047C8.59643 11.6797 8.66667 11.5101 8.66667 11.3333V8.66667H11.3333C11.5101 8.66667 11.6797 8.59643 11.8047 8.47141C11.9298 8.34638 12 8.17682 12 8C12 7.82318 11.9298 7.65362 11.8047 7.52859C11.6797 7.40357 11.5101 7.33333 11.3333 7.33333H8.66667Z",
+    d: "M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z",
     fill: "currentColor"
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.CONTROLS_INSERT_LINE,