@atlaskit/editor-plugin-table 5.8.2 → 5.8.4

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -4,12 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragMenu = void 0;
+exports.default = exports.DragMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
@@ -34,22 +36,109 @@ var _styles2 = require("./styles");
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
+var MapDragMenuOptionIdToMessage = {
+  add_row_above: {
+    message: _messages.tableMessages.addRowAbove,
+    plural: null
+  },
+  add_row_below: {
+    message: _messages.tableMessages.addRowBelow,
+    plural: null
+  },
+  add_column_left: {
+    message: _messages.tableMessages.addColumnLeft,
+    plural: null
+  },
+  add_column_right: {
+    message: _messages.tableMessages.addColumnRight,
+    plural: null
+  },
+  distribute_columns: {
+    message: _messages.tableMessages.distributeColumns,
+    plural: 'noOfCols'
+  },
+  clear_cells: {
+    message: _messages.tableMessages.clearCells,
+    plural: 'noOfCells'
+  },
+  delete_row: {
+    message: _messages.tableMessages.removeRows,
+    plural: 'noOfRows'
+  },
+  delete_column: {
+    message: _messages.tableMessages.removeColumns,
+    plural: 'noOfCols'
+  },
+  move_column_left: {
+    message: _messages.tableMessages.moveColumnLeft,
+    plural: 'noOfCols'
+  },
+  move_column_right: {
+    message: _messages.tableMessages.moveColumnRight,
+    plural: 'noOfCols'
+  },
+  move_row_up: {
+    message: _messages.tableMessages.moveRowUp,
+    plural: 'noOfRows'
+  },
+  move_row_down: {
+    message: _messages.tableMessages.moveRowDown,
+    plural: 'noOfRows'
+  },
+  sort_column_asc: {
+    message: _messages.tableMessages.sortColumnIncreasing,
+    plural: null
+  },
+  sort_column_desc: {
+    message: _messages.tableMessages.sortColumnDecreasing,
+    plural: null
+  }
+};
 var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
-var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
   var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
   var menuCallback = {};
   dragMenuConfig.forEach(function (item) {
+    var _MapDragMenuOptionIdT;
     var menuGroupIndex = groupedDragMenuConfig.findIndex(function (group) {
       return group.includes(item.id);
     });
     if (menuGroupIndex === -1) {
       return;
     }
+    var isPlural = Boolean((_MapDragMenuOptionIdT = MapDragMenuOptionIdToMessage[item.id]) === null || _MapDragMenuOptionIdT === void 0 ? void 0 : _MapDragMenuOptionIdT.plural);
+    var plural = 0;
+    if (isPlural && selectionRect) {
+      var top = selectionRect.top,
+        bottom = selectionRect.bottom,
+        right = selectionRect.right,
+        left = selectionRect.left;
+      switch (MapDragMenuOptionIdToMessage[item.id].plural) {
+        case 'noOfCols':
+          {
+            plural = right - left;
+            break;
+          }
+        case 'noOfRows':
+          {
+            plural = bottom - top;
+            break;
+          }
+        case 'noOfCells':
+          {
+            plural = Math.max(right - left, bottom - top);
+            break;
+          }
+      }
+    }
+    var options = isPlural ? {
+      0: plural
+    } : undefined;
     menuItemsArr[menuGroupIndex].push({
       key: item.id,
-      content: item.title,
+      content: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
       value: {
         name: item.id
       },
@@ -59,7 +148,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
           display: 'flex'
         }
       }, (0, _react2.jsx)(item.icon, {
-        label: item.title
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
       elemAfter: item.keymap ? (0, _react2.jsx)("div", {
         css: _shortcut.shortcutStyle
@@ -93,7 +182,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    pluginConfig = _ref.pluginConfig;
+    pluginConfig = _ref.pluginConfig,
+    formatMessage = _ref.intl.formatMessage;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -108,7 +198,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -138,12 +228,12 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
     return {
-      content: 'Background color',
+      content: formatMessage(_messages.tableMessages.backgroundColor),
       value: {
         name: 'background'
       },
       elemBefore: (0, _react2.jsx)(_backgroundColor.default, {
-        label: 'background color',
+        label: formatMessage(_messages.tableMessages.backgroundColor),
         size: "medium"
       }),
       elemAfter: (0, _react2.jsx)("div", {
@@ -178,7 +268,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
-      content: 'Header column',
+      content: formatMessage(_messages.tableMessages.headerColumn),
       value: {
         name: 'header_column'
       },
@@ -190,7 +280,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
         isChecked: (0, _utils3.checkIfHeaderColumnEnabled)(selection)
       }))
     } : {
-      content: 'Header row',
+      content: formatMessage(_messages.tableMessages.headerRow),
       value: {
         name: 'header_row'
       },
@@ -205,7 +295,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
-      content: 'Row numbers',
+      content: formatMessage(_messages.tableMessages.rowNumbers),
       value: {
         name: 'row_numbers'
       },
@@ -333,4 +423,5 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       hasSeparator: true
     }
   });
-};
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

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

@@ -10,7 +10,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _consts = require("../consts");
-var _DragMenu = require("./DragMenu");
+var _DragMenu = _interopRequireDefault(require("./DragMenu"));
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -53,7 +53,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     forcePlacement: true,
     offset: offset,
     stick: true
-  }, /*#__PURE__*/_react.default.createElement(_DragMenu.DragMenu, {
+  }, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,
     boundariesElement: boundariesElement,

package/dist/es2019/nodeviews/TableComponent.js

@@ -10,10 +10,9 @@ import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { autoScrollForElements, autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -21,7 +20,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { dropTargetExtendedWidth, tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -325,58 +324,9 @@ class TableComponent extends React.Component {
         }
       }
       if (isDragAndDropEnabled) {
-        this.dragAndDropCleanupFn = combine(autoScrollForElements({
-          element: this.wrapper,
-          canScroll: ({
-            source
-          }) => {
-            const {
-              localId,
-              type
-            } = source.data;
-            const node = getNode();
-            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-          }
-        }), autoScrollWindowForElements({
-          canScroll: ({
-            source
-          }) => {
-            const {
-              localId,
-              type
-            } = source.data;
-            const node = getNode();
-            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
-          }
-        }), unsafeOverflowAutoScrollForElements({
-          element: this.wrapper,
-          canScroll: ({
-            source
-          }) => {
-            const {
-              localId,
-              type
-            } = source.data;
-            const node = getNode();
-            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-          },
-          getOverflow: () => ({
-            fromTopEdge: {
-              top: dropTargetExtendedWidth,
-              right: dropTargetExtendedWidth,
-              left: dropTargetExtendedWidth
-            },
-            fromRightEdge: {
-              right: dropTargetExtendedWidth,
-              top: dropTargetExtendedWidth,
-              bottom: dropTargetExtendedWidth
-            },
-            fromLeftEdge: {
-              top: dropTargetExtendedWidth,
-              left: dropTargetExtendedWidth,
-              bottom: dropTargetExtendedWidth
-            }
-          })
+        this.dragAndDropCleanupFn = combine(...autoScrollerFactory({
+          tableWrapper: this.wrapper,
+          getNode
         }));
       }
     }

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

@@ -3,7 +3,9 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { findNearestCellIndexToPoint, hasMergedCellsInBetween } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
@@ -15,6 +17,161 @@ import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
+const destroyFn = (editorView, editorAnalyticsAPI) => {
+  const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
+  const rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
+    canMonitor({
+      source
+    }) {
+      const {
+        type
+      } = source.data;
+      return type === 'table-row';
+    },
+    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() {
+      // 'null' will remove the inline style
+      editorPageScrollContainer.style.setProperty('scroll-behavior', null);
+    }
+  }), autoScrollForElements({
+    element: editorPageScrollContainer,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        type
+      } = source.data;
+      return type === 'table-row';
+    }
+  })] : [];
+  return combine(...rowAutoScrollers, monitorForElements({
+    canMonitor({
+      source
+    }) {
+      const {
+        type,
+        localId,
+        indexes
+      } = source.data;
+
+      // 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;
+      }
+      const {
+        tableNode
+      } = getTablePluginState(editorView.state);
+      // 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: ({
+      location
+    }) => {
+      toggleDragMenu(false)(editorView.state, editorView.dispatch);
+    },
+    onDrag(event) {
+      const data = getDraggableDataFromEvent(event);
+      // If no data can be found then it's most like we do not want to perform any drag actions
+      if (!data) {
+        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;
+      const {
+        sourceType,
+        targetAdjustedIndex
+      } = data;
+      const dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
+      const hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+      setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
+    },
+    onDrop(event) {
+      var _cell$row, _cell$col;
+      const data = 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.
+      const {
+        hoveredCell
+      } = getTablePluginState(editorView.state);
+      const cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
+      const tr = editorView.state.tr;
+      const 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(tablePluginKey, 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$source$data, _event$source2, _event$source2$data;
+        // 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 ? void 0 : (_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$data = _event$source.data) === null || _event$source$data === void 0 ? void 0 : _event$source$data.type) === 'table-row' || (event === null || event === void 0 ? void 0 : (_event$source2 = event.source) === null || _event$source2 === void 0 ? void 0 : (_event$source2$data = _event$source2.data) === null || _event$source2$data === void 0 ? void 0 : _event$source2$data.type) === 'table-column') {
+          return clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
+        }
+        return clearDropTarget(tr)(editorView.state, editorView.dispatch);
+      }
+      const {
+        sourceType,
+        sourceIndexes,
+        targetIndex,
+        targetAdjustedIndex,
+        direction
+      } = data;
+
+      // 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 (hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN)(editorView.state.selection)) {
+        clearDropTargetWithAnalytics(editorAnalyticsAPI)(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.
+        TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
+        return;
+      }
+      const [sourceIndex] = sourceIndexes;
+      requestAnimationFrame(() => {
+        moveSourceWithAnalytics(editorAnalyticsAPI)(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') {
+          const {
+            tableRef,
+            tableNode
+          } = getTablePluginState(editorView.state);
+          if (tableRef && tableNode) {
+            insertColgroupFromNode(tableRef, tableNode);
+          }
+        }
+        editorView.focus();
+      });
+    }
+  }));
+};
 export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
@@ -93,130 +250,7 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
     },
     view: editorView => {
       return {
-        destroy: monitorForElements({
-          canMonitor({
-            source
-          }) {
-            const {
-              type,
-              localId,
-              indexes
-            } = source.data;
-
-            // 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;
-            }
-            const {
-              tableNode
-            } = getTablePluginState(editorView.state);
-            // 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: ({
-            location
-          }) => {
-            toggleDragMenu(false)(editorView.state, editorView.dispatch);
-          },
-          onDrag(event) {
-            const data = getDraggableDataFromEvent(event);
-            // If no data can be found then it's most like we do not want to perform any drag actions
-            if (!data) {
-              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;
-            const {
-              sourceType,
-              targetAdjustedIndex
-            } = data;
-            const dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
-            const hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
-            setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-          },
-          onDrop(event) {
-            var _cell$row, _cell$col;
-            const data = 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.
-            const {
-              hoveredCell
-            } = getTablePluginState(editorView.state);
-            const cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
-            const tr = editorView.state.tr;
-            const 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(tablePluginKey, 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$source$data, _event$source2, _event$source2$data;
-              // 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 ? void 0 : (_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$data = _event$source.data) === null || _event$source$data === void 0 ? void 0 : _event$source$data.type) === 'table-row' || (event === null || event === void 0 ? void 0 : (_event$source2 = event.source) === null || _event$source2 === void 0 ? void 0 : (_event$source2$data = _event$source2.data) === null || _event$source2$data === void 0 ? void 0 : _event$source2$data.type) === 'table-column') {
-                return clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
-              }
-              return clearDropTarget(tr)(editorView.state, editorView.dispatch);
-            }
-            const {
-              sourceType,
-              sourceIndexes,
-              targetIndex,
-              targetAdjustedIndex,
-              direction
-            } = data;
-
-            // 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 (hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN)(editorView.state.selection)) {
-              clearDropTargetWithAnalytics(editorAnalyticsAPI)(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.
-              TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
-              return;
-            }
-            const [sourceIndex] = sourceIndexes;
-            requestAnimationFrame(() => {
-              moveSourceWithAnalytics(editorAnalyticsAPI)(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') {
-                const {
-                  tableRef,
-                  tableNode
-                } = getTablePluginState(editorView.state);
-                if (tableRef && tableNode) {
-                  insertColgroupFromNode(tableRef, tableNode);
-                }
-              }
-              editorView.focus();
-            });
-          }
-        })
+        destroy: destroyFn(editorView, editorAnalyticsAPI)
       };
     },
     props: {

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

@@ -0,0 +1,50 @@
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
+import { dropTargetExtendedWidth } from '../../../ui/consts';
+export const autoScrollerFactory = ({
+  tableWrapper,
+  getNode
+}) => {
+  return [autoScrollForElements({
+    element: tableWrapper,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        localId,
+        type
+      } = source.data;
+      const node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+    }
+  }), unsafeOverflowAutoScrollForElements({
+    element: tableWrapper,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        localId,
+        type
+      } = source.data;
+      const node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+    },
+    getOverflow: () => ({
+      fromTopEdge: {
+        top: dropTargetExtendedWidth,
+        right: dropTargetExtendedWidth,
+        left: dropTargetExtendedWidth
+      },
+      fromRightEdge: {
+        right: dropTargetExtendedWidth,
+        top: dropTargetExtendedWidth,
+        bottom: dropTargetExtendedWidth
+      },
+      fromLeftEdge: {
+        top: dropTargetExtendedWidth,
+        left: dropTargetExtendedWidth,
+        bottom: dropTargetExtendedWidth
+      }
+    })
+  })];
+};

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

@@ -1 +1,2 @@
-export { getDraggableDataFromEvent } from './monitor';
+export { getDraggableDataFromEvent } from './monitor';
+export { autoScrollerFactory } from './autoscrollers';