@atlaskit/editor-plugin-table 5.8.1 → 5.8.3

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';

package/dist/es2019/ui/FloatingInsertButton/InsertButton.js

@@ -81,7 +81,7 @@ export const InsertButtonForDragAndDrop = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.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.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,

package/dist/esm/nodeviews/TableComponent.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -20,10 +21,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';
@@ -31,7 +31,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';
@@ -320,55 +320,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (isDragAndDropEnabled) {
-          this.dragAndDropCleanupFn = combine(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';
-            }
-          }), 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';
-            }
-          }), 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: dropTargetExtendedWidth,
-                  right: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth
-                },
-                fromRightEdge: {
-                  right: dropTargetExtendedWidth,
-                  top: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                },
-                fromLeftEdge: {
-                  top: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                }
-              };
-            }
-          }));
+          this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
+            tableWrapper: this.wrapper,
+            getNode: getNode
+          })));
         }
       }
       if (allowColumnResizing) {