@atlaskit/editor-plugin-table 5.8.1 → 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/esm/ui/FloatingInsertButton/InsertButton.js

@@ -74,7 +74,7 @@ export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref
     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/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.1",
+  "version": "5.8.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/visual-regression/sticky-header.ts

@@ -42,8 +42,7 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    // FIXME: This test was automatically skipped due to failure on 26/07/2023: https://product-fabric.atlassian.net/browse/ED-19223
-    it.skip('should align with table cell when active', async () => {
+    it('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);

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,
           }),
         );
       }