@atlaskit/editor-plugin-table 5.3.28 → 5.3.30

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -6,7 +6,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, dropTargetExtendedWidth, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, disabledCell, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
@@ -611,7 +611,7 @@ export const tableStyles = props => {
       display: grid;
       align-items: center;
       position: absolute;
-      left: -4px;
+      left: -${dropTargetExtendedWidth + 4}px;
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {

package/dist/es2019/plugins/table/ui/consts.js

@@ -102,8 +102,10 @@ export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
+export const dropTargetsZIndex = 14;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
-export const dragMenuDropdownWidth = 240;
+export const dragMenuDropdownWidth = 240;
+export const dropTargetExtendedWidth = 150;

package/dist/esm/plugins/table/nodeviews/ExternalDropTargets.js

@@ -0,0 +1,65 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { tableMarginTop } from '@atlaskit/editor-common/styles';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';
+import { ColumnDropTarget } from '../ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget';
+import { getColumnsWidths } from '../utils';
+export var ExternalDropTargets = function ExternalDropTargets(_ref) {
+  var editorView = _ref.editorView,
+    node = _ref.node,
+    getScrollOffset = _ref.getScrollOffset,
+    getTableWrapperWidth = _ref.getTableWrapperWidth;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  useEffect(function () {
+    return monitorForElements({
+      canMonitor: function canMonitor(_ref2) {
+        var source = _ref2.source;
+        var _ref3 = source.data,
+          type = _ref3.type,
+          indexes = _ref3.indexes,
+          localId = _ref3.localId;
+        return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
+      },
+      onDragStart: function onDragStart() {
+        setIsDragging(true);
+      },
+      onDrop: function onDrop() {
+        setIsDragging(false);
+      }
+    });
+  }, [currentNodeLocalId, editorView]);
+  if (!isDragging) {
+    return null;
+  }
+  var colWidths = getColumnsWidths(editorView);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: getTableWrapperWidth(),
+      overflow: 'hidden',
+      position: 'absolute',
+      top: "-".concat(dropTargetExtendedWidth - tableMarginTop, "px"),
+      pointerEvents: 'auto',
+      zIndex: "".concat(dropTargetsZIndex)
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      // move drop targets based on table wrapper scroll
+      marginLeft: "-".concat(getScrollOffset(), "px")
+    }
+  }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {
+    return /*#__PURE__*/React.createElement(ColumnDropTarget, {
+      key: index,
+      index: index,
+      localId: currentNodeLocalId,
+      width: width,
+      height: dropTargetExtendedWidth,
+      marginTop: 0
+    });
+  })));
+};

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -21,6 +21,9 @@ import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-co
 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 { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+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 { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -29,10 +32,11 @@ 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 { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import { dropTargetExtendedWidth, tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
+import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
@@ -302,7 +306,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
-        options = _this$props7.options;
+        options = _this$props7.options,
+        isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
+        getNode = _this$props7.getNode;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
@@ -312,6 +318,56 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
           }
         }
+        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;
+              var node = getNode();
+              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId);
+            },
+            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
+                }
+              };
+            }
+          }));
+        }
       }
       if (allowColumnResizing) {
         /**
@@ -339,10 +395,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
-        options = _this$props8.options;
+        options = _this$props8.options,
+        isDragAndDropEnabled = _this$props8.isDragAndDropEnabled;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
+      if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
+        this.dragAndDropCleanupFn();
+      }
       if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -545,7 +605,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
-      }), allowControls && rowControls, isDragAndDropEnabled && allowControls && colControls, /*#__PURE__*/React.createElement("div", {
+      }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
+        editorView: view,
+        node: node,
+        getScrollOffset: function getScrollOffset() {
+          var _this2$wrapper;
+          return ((_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.scrollLeft) || 0;
+        },
+        getTableWrapperWidth: function getTableWrapperWidth() {
+          var _this2$wrapper2;
+          return ((_this2$wrapper2 = _this2.wrapper) === null || _this2$wrapper2 === void 0 ? void 0 : _this2$wrapper2.clientWidth) || 760;
+        }
+      }), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
@@ -567,7 +638,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+      }, allowControls && colControls), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
           height: MAX_BROWSER_SCROLLBAR_HEIGHT,

package/dist/esm/plugins/table/nodeviews/TableRow.js

@@ -11,8 +11,6 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -43,6 +41,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
     _defineProperty(_assertThisInitialized(_this), "listening", false);
     _defineProperty(_assertThisInitialized(_this), "padding", 0);
     _defineProperty(_assertThisInitialized(_this), "top", 0);
+    /**
+     * Methods
+     */
     _defineProperty(_assertThisInitialized(_this), "headerRowMouseScrollEnd", debounce(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -58,27 +59,20 @@ var TableRow = /*#__PURE__*/function (_ref) {
     _this.isHeaderRow = supportedHeaderRow(node);
     _this.isSticky = false;
     var _getPluginState = getPluginState(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+      pluginConfig = _getPluginState.pluginConfig;
     _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
     if (_this.isHeaderRow) {
       _this.dom.setAttribute('data-header-row', 'true');
       if (_this.isStickyHeaderEnabled) {
         _this.subscribe();
       }
     }
-    if (_this.isDragAndDropEnabled) {
-      _this.addDropTarget(_this.contentDOM);
-    }
     return _this;
   }
 
   /**
    * Variables
    */
-
-  // @ts-ignore
   _createClass(TableRow, [{
     key: "update",
     value:
@@ -117,7 +111,6 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = getTree(this.dom);
@@ -126,9 +119,6 @@ var TableRow = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
-
-      // If a drop target cleanup method has been set then we should call it.
-      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -155,72 +145,6 @@ var TableRow = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
-
-    /**
-     * Methods
-     */
-  }, {
-    key: "addDropTarget",
-    value: function addDropTarget(element) {
-      var _this2 = this;
-      var pos = this.getPos();
-      if (!Number.isFinite(pos)) {
-        return;
-      }
-      if (this.dropTargetCleanup) {
-        this.dropTargetCleanup();
-      }
-      this.dropTargetCleanup = dropTargetForElements({
-        element: element,
-        canDrop: function canDrop(_ref2) {
-          var _data$indexes, _data$indexes2;
-          var source = _ref2.source;
-          var data = source.data;
-          var _this2$getCurrentData = _this2.getCurrentData(),
-            localId = _this2$getCurrentData.localId,
-            targetIndex = _this2$getCurrentData.targetIndex;
-          return (
-            // Only draggables of row type can be dropped on this target
-            data.type === 'table-row' &&
-            // Only draggables which came from the same table can be dropped on this target
-            data.localId === localId &&
-            // Only draggables which DO NOT include this drop targets index can be dropped
-            !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
-          );
-        },
-        getIsSticky: function getIsSticky() {
-          return true;
-        },
-        getData: function getData(_ref3) {
-          var input = _ref3.input,
-            element = _ref3.element;
-          var _this2$getCurrentData2 = _this2.getCurrentData(),
-            localId = _this2$getCurrentData2.localId,
-            targetIndex = _this2$getCurrentData2.targetIndex;
-          var data = {
-            localId: localId,
-            type: 'table-row',
-            targetIndex: targetIndex
-          };
-          return attachClosestEdge(data, {
-            input: input,
-            element: element,
-            allowedEdges: ['top', 'bottom']
-          });
-        }
-      });
-    }
-  }, {
-    key: "getCurrentData",
-    value: function getCurrentData() {
-      var resolvedPos = this.view.state.doc.resolve(this.getPos());
-      var targetIndex = resolvedPos.index();
-      var localId = resolvedPos.parent.attrs.localId;
-      return {
-        targetIndex: targetIndex,
-        localId: localId
-      };
-    }
   }, {
     key: "subscribe",
     value: function subscribe() {
@@ -269,7 +193,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this3 = this;
+      var _this2 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -286,15 +210,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var _getTree;
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = getTree(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
         if (tableContainer) {
-          _this3.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
-          _this3.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
-          [_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
+          _this2.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
+          _this2.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
+          [_this2.sentinels.top, _this2.sentinels.bottom].forEach(function (el) {
             // skip if already observed for another row on this table
             if (el && !el.dataset.isObserved) {
               el.dataset.isObserved = 'true';
-              _this3.intersectionObserver.observe(el);
+              _this2.intersectionObserver.observe(el);
             }
           });
         }
@@ -306,27 +230,27 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this4 = this;
+      var _this3 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = getTree(_this4.dom);
+        var tree = getTree(_this3.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this4$editorScrollab;
+          var _this3$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
-          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
-            _this4.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
+            _this3.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-            if (_this4.sentinels.bottom &&
+            if (_this3.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-              _this4.stickyRowHeight = newHeight;
-              _this4.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+              _this3.stickyRowHeight = newHeight;
+              _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
               updateTableMargin(table);
             }
           }
@@ -336,9 +260,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this5 = this;
+      var _this4 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var tree = getTree(_this5.dom);
+        var tree = getTree(_this4.dom);
         if (!tree) {
           return;
         }
@@ -361,28 +285,28 @@ var TableRow = /*#__PURE__*/function (_ref) {
             var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               var _entry$rootBounds3;
-              tree && _this5.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
-              _this5.lastStickyTimestamp = Date.now();
+              tree && _this4.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+              _this4.lastStickyTimestamp = Date.now();
             } else {
-              table && _this5.makeRowHeaderNotSticky(table);
+              table && _this4.makeRowHeaderNotSticky(table);
             }
           }
           if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
             var _entry$rootBounds4;
-            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this5.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
+            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
               // Not a perfect solution, but need to this code specific for FireFox ED-19177
               if (browser.gecko) {
-                if (_this5.lastStickyTimestamp && Date.now() - _this5.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
-                  _this5.makeRowHeaderNotSticky(table);
+                if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                  _this4.makeRowHeaderNotSticky(table);
                 }
               } else {
-                _this5.makeRowHeaderNotSticky(table);
+                _this4.makeRowHeaderNotSticky(table);
               }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
               var _entry$rootBounds5;
-              tree && _this5.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
-              _this5.lastStickyTimestamp = Date.now();
+              tree && _this4.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+              _this4.lastStickyTimestamp = Date.now();
             }
           }
           return;
@@ -457,12 +381,12 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this6 = this;
+      var _this5 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this6.intersectionObserver) {
-            _this6.intersectionObserver.unobserve(el);
-            _this6.intersectionObserver.observe(el);
+          if (el && _this5.intersectionObserver) {
+            _this5.intersectionObserver.unobserve(el);
+            _this5.intersectionObserver.observe(el);
           }
         });
       }
@@ -471,7 +395,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this7 = this;
+        _this6 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -508,7 +432,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this7.refireIntersectionObservers();
+          _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "".concat(domTop, "px");

package/dist/esm/plugins/table/nodeviews/TableStickyScrollbar.js

@@ -27,7 +27,7 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
         this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
         this.handleScrollDebounced.cancel();
       }
-      this.deleteIntesactionObserver();
+      this.deleteIntersectionObserver();
     }
   }, {
     key: "scrollLeft",
@@ -73,10 +73,10 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
             return;
           }
           if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
-            _this2.sentenialBottomCallback(entry);
+            _this2.sentinelBottomCallback(entry);
           }
           if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
-            _this2.sentenialTopCallback(entry);
+            _this2.sentinelTopCallback(entry);
           }
         });
       }, {
@@ -89,8 +89,8 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       });
     }
   }, {
-    key: "deleteIntesactionObserver",
-    value: function deleteIntesactionObserver() {
+    key: "deleteIntersectionObserver",
+    value: function deleteIntersectionObserver() {
       if (this.intersectionObserver) {
         if (this.sentinels.bottom) {
           this.intersectionObserver.unobserve(this.sentinels.bottom);
@@ -99,16 +99,16 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "sentenialBottomCallback",
-    value: function sentenialBottomCallback(entry) {
+    key: "sentinelBottomCallback",
+    value: function sentinelBottomCallback(entry) {
       var _entry$rootBounds2;
       var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
       this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
       this.toggle();
     }
   }, {
-    key: "sentenialTopCallback",
-    value: function sentenialTopCallback(entry) {
+    key: "sentinelTopCallback",
+    value: function sentinelTopCallback(entry) {
       var _entry$rootBounds3;
       var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
       this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';

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

@@ -4,7 +4,6 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { DragAndDropActionType } from './actions';
@@ -88,15 +87,9 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
           },
           onDragStart: function onDragStart(_ref3) {
             var location = _ref3.location;
-            autoScroller.start({
-              input: location.current.input
-            });
             toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag: function onDrag(event) {
-            autoScroller.updateInput({
-              input: event.location.current.input
-            });
             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) {
@@ -112,7 +105,6 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
-            autoScroller.stop();
             var data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -52,7 +52,8 @@ export var ColumnDropTarget = function ColumnDropTarget(_ref) {
       width: width && "".concat(width - 1, "px"),
       height: height && "".concat(height, "px"),
       marginTop: marginTop && "".concat(marginTop, "px"),
-      pointerEvents: 'auto'
+      pointerEvents: 'auto',
+      flexShrink: 0
     },
     "data-drop-target-index": index,
     "data-drop-target-localid": localId,

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -3,7 +3,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useEffect, useMemo, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
@@ -95,11 +94,10 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
   }
   var colWidths = getColumnsWidths(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  var mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
   if (!tableActive) {
     return null;
   }
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
@@ -121,6 +119,6 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     localId: currentNodeLocalId,
     rowHeights: rowHeights,
     colWidths: colWidths
-  })), mountTo);
+  }));
 };
 export default TableFloatingColumnControls;