@atlaskit/editor-plugin-table 5.8.2 → 5.8.3

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

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
 import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
@@ -7,7 +7,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';
@@ -19,6 +21,148 @@ 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';
+var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
+  var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var rowAutoScrollers = editorPageScrollContainer ? [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);
+    }
+  }), autoScrollForElements({
+    element: editorPageScrollContainer,
+    canScroll: function canScroll(_ref3) {
+      var source = _ref3.source;
+      var _ref4 = source.data,
+        type = _ref4.type;
+      return type === 'table-row';
+    }
+  })] : [];
+  return combine.apply(void 0, rowAutoScrollers.concat([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 = getTablePluginState(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;
+      toggleDragMenu(false)(editorView.state, editorView.dispatch);
+    },
+    onDrag: function onDrag(event) {
+      var 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;
+      var sourceType = data.sourceType,
+        targetAdjustedIndex = data.targetAdjustedIndex;
+      var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
+      var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+      setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
+    },
+    onDrop: function onDrop(event) {
+      var _cell$row, _cell$col;
+      var 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.
+      var _getTablePluginState2 = getTablePluginState(editorView.state),
+        hoveredCell = _getTablePluginState2.hoveredCell;
+      var cell = 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(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$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 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);
+      }
+      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 (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;
+      }
+      var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
+        sourceIndex = _sourceIndexes[0];
+      requestAnimationFrame(function () {
+        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') {
+          var _getTablePluginState3 = getTablePluginState(editorView.state),
+            tableRef = _getTablePluginState3.tableRef,
+            tableNode = _getTablePluginState3.tableNode;
+          if (tableRef && tableNode) {
+            insertColgroupFromNode(tableRef, tableNode);
+          }
+        }
+        editorView.focus();
+      });
+    }
+  })]));
+};
 export var createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
   return new SafePlugin({
     state: createPluginState(dispatch, function (state) {
@@ -34,12 +178,12 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
     }),
     key: pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _getTablePluginState = getTablePluginState(oldState),
-        oldTargetCellPosition = _getTablePluginState.targetCellPosition,
-        oldTableNode = _getTablePluginState.tableNode;
-      var _getTablePluginState2 = getTablePluginState(newState),
-        newTargetCellPosition = _getTablePluginState2.targetCellPosition,
-        newTableNode = _getTablePluginState2.tableNode;
+      var _getTablePluginState4 = getTablePluginState(oldState),
+        oldTargetCellPosition = _getTablePluginState4.targetCellPosition,
+        oldTableNode = _getTablePluginState4.tableNode;
+      var _getTablePluginState5 = getTablePluginState(newState),
+        newTargetCellPosition = _getTablePluginState5.targetCellPosition,
+        newTableNode = _getTablePluginState5.tableNode;
       var _getPluginState = getPluginState(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex,
@@ -93,121 +237,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
     },
     view: function view(editorView) {
       return {
-        destroy: 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 = getTablePluginState(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;
-            toggleDragMenu(false)(editorView.state, editorView.dispatch);
-          },
-          onDrag: function onDrag(event) {
-            var 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;
-            var sourceType = data.sourceType,
-              targetAdjustedIndex = data.targetAdjustedIndex;
-            var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
-            var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
-            setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-          },
-          onDrop: function onDrop(event) {
-            var _cell$row, _cell$col;
-            var 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.
-            var _getTablePluginState4 = getTablePluginState(editorView.state),
-              hoveredCell = _getTablePluginState4.hoveredCell;
-            var cell = 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(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$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 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);
-            }
-            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 (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;
-            }
-            var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
-              sourceIndex = _sourceIndexes[0];
-            requestAnimationFrame(function () {
-              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') {
-                var _getTablePluginState5 = getTablePluginState(editorView.state),
-                  tableRef = _getTablePluginState5.tableRef,
-                  tableNode = _getTablePluginState5.tableNode;
-                if (tableRef && tableNode) {
-                  insertColgroupFromNode(tableRef, tableNode);
-                }
-              }
-              editorView.focus();
-            });
-          }
-        })
+        destroy: destroyFn(editorView, editorAnalyticsAPI)
       };
     },
     props: {

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

@@ -0,0 +1,47 @@
+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 var autoScrollerFactory = function autoScrollerFactory(_ref) {
+  var tableWrapper = _ref.tableWrapper,
+    getNode = _ref.getNode;
+  return [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';
+    }
+  }), 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: dropTargetExtendedWidth,
+          right: dropTargetExtendedWidth,
+          left: dropTargetExtendedWidth
+        },
+        fromRightEdge: {
+          right: dropTargetExtendedWidth,
+          top: dropTargetExtendedWidth,
+          bottom: dropTargetExtendedWidth
+        },
+        fromLeftEdge: {
+          top: dropTargetExtendedWidth,
+          left: dropTargetExtendedWidth,
+          bottom: dropTargetExtendedWidth
+        }
+      };
+    }
+  })];
+};

package/dist/esm/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/types/pm-plugins/drag-and-drop/utils/autoscrollers.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+type AutoScrollerFactory = {
+    tableWrapper: HTMLElement;
+    getNode: () => PmNode;
+};
+export declare const autoScrollerFactory: ({ tableWrapper, getNode, }: AutoScrollerFactory) => import("@atlaskit/pragmatic-drag-and-drop/types").CleanupFn[];
+export {};

package/dist/types/pm-plugins/drag-and-drop/utils/index.d.ts

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

package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/autoscrollers.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+type AutoScrollerFactory = {
+    tableWrapper: HTMLElement;
+    getNode: () => PmNode;
+};
+export declare const autoScrollerFactory: ({ tableWrapper, getNode, }: AutoScrollerFactory) => import("@atlaskit/pragmatic-drag-and-drop/types").CleanupFn[];
+export {};

package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.8.2",
+  "version": "5.8.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -31,15 +31,11 @@ import {
 } 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 type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
 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 type {
   RowStickyState,
@@ -57,10 +53,9 @@ import {
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import type { DraggableSourceData, PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import {
-  dropTargetExtendedWidth,
   tableOverflowShadowWidth,
   tableOverflowShadowWidthWide,
 } from '../ui/consts';
@@ -198,48 +193,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       if (isDragAndDropEnabled) {
         this.dragAndDropCleanupFn = combine(
-          autoScrollForElements({
-            element: this.wrapper,
-            canScroll: ({ source }) => {
-              const { localId, type } =
-                source.data as Partial<DraggableSourceData>;
-              const node = getNode();
-              return localId === node?.attrs.localId && type === 'table-column';
-            },
-          }),
-          autoScrollWindowForElements({
-            canScroll: ({ source }) => {
-              const { localId, type } =
-                source.data as Partial<DraggableSourceData>;
-              const node = getNode();
-              return localId === node?.attrs.localId && type === 'table-row';
-            },
-          }),
-          unsafeOverflowAutoScrollForElements({
-            element: this.wrapper,
-            canScroll: ({ source }) => {
-              const { localId, type } =
-                source.data as Partial<DraggableSourceData>;
-              const node = getNode();
-              return localId === 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,
-              },
-            }),
+          ...autoScrollerFactory({
+            tableWrapper: this.wrapper,
+            getNode,
           }),
         );
       }