@atlaskit/editor-plugin-table 7.5.5 → 7.5.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.6
+
+### Patch Changes
+
+- [#72764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72764) [`1a23abba80b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a23abba80b0) - Minor performance improvements to reduce reflows and re-renders
+
 ## 7.5.5
 
 ### Patch Changes

package/dist/cjs/event-handlers.js

@@ -8,6 +8,7 @@ exports.handleMouseUp = exports.handleMouseOver = exports.handleMouseOut = expor
 exports.handleTripleClick = handleTripleClick;
 exports.withCellTracking = exports.whenTableInFocus = exports.isTableInFocus = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state5 = require("@atlaskit/editor-prosemirror/state");
@@ -257,7 +258,10 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
   }
   return false;
 };
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event, elementContentRects) {
+
+// IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
+// need to access the mouse event offset position and also the target clientWidth vallue.
+var handleMouseMoveDebounce = (0, _rafSchd.default)(function (view, event, offsetX) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -266,13 +270,12 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
+      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
+    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }
@@ -292,7 +295,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     }
   }
   if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
@@ -317,6 +320,19 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     }
   }
   return false;
+});
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+  // in the deferred callback handler.
+  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+  handleMouseMoveDebounce(view, event, _utils.browser.gecko ? event.offsetX : NaN);
+  return false;
 };
 function handleTripleClick(view, pos) {
   var state = view.state,
@@ -392,12 +408,12 @@ var isTableInFocus = exports.isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
+var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler) {
   return function (view, mouseEvent) {
     if (!isTableInFocus(view)) {
       return false;
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
@@ -427,11 +443,11 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   }
   (0, _commands.hoverCell)(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
-var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
+var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler) {
   return function (view, mouseEvent) {
     if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled && !(0, _pluginFactory.getPluginState)(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };

package/dist/cjs/nodeviews/OverflowShadowsObserver.js

@@ -8,6 +8,7 @@ exports.OverflowShadowsObserver = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -49,8 +50,13 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
     });
     (0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
       var _this$table, _this$table2;
+      if (_this.isSticky === isSticky) {
+        return;
+      }
       _this.isSticky = !!isSticky;
 
+      // reset height
+      _this.stickyRowHeight = 0;
       // update sticky shadows
       _this.updateStickyShadowsHeightIfChanged();
       _this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
@@ -67,8 +73,8 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    (0, _defineProperty2.default)(this, "updateStickyShadows", function (stickyRowHeight) {
-      var _this$wrapper, _this$wrapper2, _this$wrapper3;
+    (0, _defineProperty2.default)(this, "updateStickyShadows", (0, _rafSchd.default)(function (stickyRowHeight) {
+      var _this$wrapper;
       if (!_this.isSticky) {
         return;
       }
@@ -76,14 +82,21 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
       if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-      var heightStyleOrCompute = "".concat(stickyRowHeight || stickyCell.clientHeight + 1, "px");
-      // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-      var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
-      var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
-      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
-      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
-    });
+
+      // Reflow Warning! - stickyCell.clientHeight
+      var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+      if (newStickyRowHeight !== _this.stickyRowHeight) {
+        var _this$wrapper2, _this$wrapper3;
+        _this.stickyRowHeight = newStickyRowHeight;
+        var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
+        // Use getElementsByClassName here for a live node list to capture
+        // sticky shadows
+        var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
+        var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
+        (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
+        (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
+      }
+    }));
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
@@ -99,11 +112,7 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
       if (!stickyCell) {
         return;
       }
-      var newStickyRowHeight = stickyCell.clientHeight + 1;
-      if (newStickyRowHeight === this.stickyRowHeight) {
-        this.stickyRowHeight = newStickyRowHeight;
-        this.updateStickyShadows(this.stickyRowHeight);
-      }
+      this.updateStickyShadows();
     }
   }, {
     key: "getStickyCell",

package/dist/cjs/nodeviews/TableCell.js

@@ -11,9 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _uuid = _interopRequireDefault(require("uuid"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -22,26 +20,10 @@ var DEFAULT_ROW_SPAN = 1;
 var TableCell = exports.default = /*#__PURE__*/function (_ref) {
   (0, _inherits2.default)(TableCell, _ref);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher, observer) {
-    var _this;
+  function TableCell(node, view, getPos, eventDispatcher) {
     (0, _classCallCheck2.default)(this, TableCell);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    _this.observer = observer;
-    var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
-    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-    if (observer) {
-      _this.contentDOM.id = (0, _uuid.default)();
-      observer.observe(_this.contentDOM);
-    }
-    return _this;
+    return _super.call(this, node, view, getPos, eventDispatcher);
   }
-
-  // @ts-ignore
-
-  // @ts-ignore
   (0, _createClass2.default)(TableCell, [{
     key: "update",
     value: function update(node) {
@@ -51,17 +33,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_ref) {
       }
       return didUpdate;
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this.observer) {
-        this.observer.unobserve(this.contentDOM);
-      }
-    }
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
-      var _this2 = this;
+      var _this = this;
       if (this.node.type !== node.type) {
         return false;
       }
@@ -92,10 +67,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_ref) {
           var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
             key = _ref5[0],
             value = _ref5[1];
-          return _this2.dom.setAttribute(key, value || '');
+          return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {
-          return _this2.dom.removeAttribute(key);
+          return _this.dom.removeAttribute(key);
         });
         return true;
       }

package/dist/cjs/nodeviews/TableComponent.js

@@ -43,6 +43,9 @@ var _ExternalDropTargets = require("./ExternalDropTargets");
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 var _TableContainer = require("./TableContainer");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
 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) { (0, _defineProperty3.default)(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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -52,6 +55,12 @@ var isIE11 = _utils.browser.ie_version === 11;
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // To make sure we capture the last update, we use setTimeout.
 var initialOverflowCaptureTimeroutDelay = 300;
+
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+var isOverflowAnalyticsEnabled = false;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -63,7 +72,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
       scroll: 0,
       parentWidth: undefined
-    }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
+    }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperWidth", undefined), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
@@ -295,6 +304,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled
     });
+    _this.resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var entry = _step.value;
+          _this.setState(function (prev) {
+            var _entry$contentRect, _entry$contentRect2;
+            return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === ((_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) && (prev === null || prev === void 0 ? void 0 : prev.tableWrapperHeight) === ((_entry$contentRect2 = entry.contentRect) === null || _entry$contentRect2 === void 0 ? void 0 : _entry$contentRect2.height) ? prev : _objectSpread(_objectSpread({}, prev), {}, {
+              tableWrapperWidth: entry.contentRect.width,
+              tableWrapperHeight: entry.contentRect.height
+            });
+          });
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
 
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -354,12 +386,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.onStickyState(currentStickyState);
       }
       eventDispatcher.on(_stickyHeaders.pluginKey.key, this.onStickyState);
-      var initialIsOveflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      if (isOverflowAnalyticsEnabled) {
+        var initialIsOveflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$resizeObserver;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -372,6 +407,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
       var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
       if (stickyScrollbar) {
@@ -500,26 +536,36 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         this.handleTableResizingDebounced();
       }
-      var newIsOverflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-      var prevIsOverflowing = prevState[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[_types.ShadowEvent.SHOW_AFTER_SHADOW];
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
+      if (isOverflowAnalyticsEnabled) {
+        var newIsOverflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        var prevIsOverflowing = prevState[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        if (this.initialOverflowCaptureTimerId) {
+          clearTimeout(this.initialOverflowCaptureTimerId);
+        }
+        if (!this.isInitialOverflowSent) {
+          this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+        }
+        if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+          var _this$state2;
+          var _this$props$view = this.props.view,
+            dispatch = _this$props$view.dispatch,
+            tr = _this$props$view.state.tr;
+          dispatch(tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+          }));
+        }
       }
-      if (!this.isInitialOverflowSent) {
-        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-      }
-      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-        var _this$state2;
-        var _this$props$view = this.props.view,
-          dispatch = _this$props$view.dispatch,
-          tr = _this$props$view.state.tr;
-        dispatch(tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_STATE_CHANGED, {
-          isOverflowing: newIsOverflowing,
-          wasOverflowing: prevIsOverflowing,
-          editorWidth: this.props.containerWidth.width || 0,
-          width: this.node.attrs.width || 0,
-          parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-        }));
+    }
+  }, {
+    key: "observeTable",
+    value: function observeTable(table) {
+      if (table) {
+        var _this$resizeObserver2;
+        (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 || _this$resizeObserver2.observe(table);
       }
     }
   }, {
@@ -577,7 +623,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: this.state.stickyHeader
+        stickyHeader: this.state.stickyHeader,
+        tableWrapperWidth: this.state.tableWrapperWidth
       });
       var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
@@ -603,7 +650,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getScrollOffset: function getScrollOffset() {
           var _this3$wrapper;
           return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
-        }
+        },
+        tableWrapperHeight: this.state.tableWrapperHeight
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
@@ -637,6 +685,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
+        tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
         isTableScalingEnabled: isTableScalingEnabled
@@ -677,6 +726,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             if (tableElement !== _this3.table) {
               _this3.table = tableElement;
               _this3.createShadowSentinels(_this3.table);
+              _this3.observeTable(_this3.table);
             }
           }
         }

package/dist/cjs/nodeviews/TableContainer.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableContainer = exports.ResizableTableContainer = exports.InnerContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
@@ -54,9 +55,14 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi,
-    isTableScalingEnabled = _ref2.isTableScalingEnabled;
+    isTableScalingEnabled = _ref2.isTableScalingEnabled,
+    tableWrapperHeight = _ref2.tableWrapperHeight;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    resizing = _useState2[0],
+    setIsResizing = _useState2[1];
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -64,31 +70,24 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     //    consistently fetch and refactor below
     var stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
     if (!stickyHeaders || stickyHeaders.length < 1) {
-      var _containerRef$current2;
       // when starting to drag, we need to keep the original space,
       // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
       //    1px is border width but collapse make it 0.5.
       // -- When sticky header appear, we should add first row height but reduce
       //    collapsed border
-      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.setProperty('height', typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto');
+      return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
     } else {
-      var _containerRef$current3, _containerRef$current4;
-      var stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
-      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 || _containerRef$current4.style.setProperty('height', typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto');
+      var _containerRef$current2;
+      var stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
     }
   }, []);
-  var resizeObserverRef = (0, _react.useRef)(new ResizeObserver(function (entries) {
-    updateContainerHeight(entries[entries.length - 1].contentRect.height);
-  }));
   var onResizeStart = (0, _react.useCallback)(function () {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
+    setIsResizing(true);
+  }, []);
   var onResizeStop = (0, _react.useCallback)(function () {
-    updateContainerHeight('auto');
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
+    setIsResizing(false);
+  }, []);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -151,7 +150,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: tableWidthRef.current
+      width: tableWidthRef.current,
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -173,6 +173,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    tableWrapperHeight = _ref3.tableWrapperHeight,
     isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi,
     isTableScalingEnabled = _ref3.isTableScalingEnabled;
@@ -184,6 +185,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled

package/dist/cjs/nodeviews/TableResizer.js

@@ -65,7 +65,7 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = (0, _utils3.getColgroupChildrenLength)(node);
-  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils3.COLUMN_MIN_WIDTH : 3 * _utils3.COLUMN_MIN_WIDTH;
+  var minColumnWidth = Math.min(3, currentColumnCount) * _utils3.COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;

package/dist/cjs/plugin.js

@@ -57,11 +57,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
-    var defaultState = {
+    var _api$width$sharedStat, _api$width, _document$body$offset, _document;
+    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

package/dist/cjs/pm-plugins/main.js

@@ -33,7 +33,6 @@ var _pluginKey = require("./plugin-key");
 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) { (0, _defineProperty2.default)(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; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
-  var _window;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     isTableHovered: false,
@@ -50,15 +49,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
   }, _defaultTableSelection.defaultHoveredCell), _defaultTableSelection.defaultTableSelection), {}, {
     getIntl: getIntl
   }));
-  var elementContentRects = {};
-  var observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function (entries) {
-    entries.forEach(function (entry) {
-      if (!entry.target.id) {
-        return;
-      }
-      elementContentRects[entry.target.id] = entry.contentRect;
-    });
-  }) : undefined;
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   var invalidTableIds = [];
@@ -161,11 +151,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           } else if (pluginState.isResizeHandleWidgetAdded) {
             (0, _misc.removeResizeHandleDecorations)()(state, dispatch);
           }
-        },
-        destroy: function destroy() {
-          if (observer) {
-            observer.disconnect();
-          }
         }
       };
     },
@@ -271,10 +256,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           return new _TableRow.default(node, view, getPos, eventDispatcher);
         },
         tableCell: function tableCell(node, view, getPos) {
-          return new _TableCell.default(node, view, getPos, eventDispatcher, observer);
+          return new _TableCell.default(node, view, getPos, eventDispatcher);
         },
         tableHeader: function tableHeader(node, view, getPos) {
-          return new _TableCell.default(node, view, getPos, eventDispatcher, observer);
+          return new _TableCell.default(node, view, getPos, eventDispatcher);
         }
       },
       handleDOMEvents: {
@@ -284,7 +269,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         mouseover: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
         mouseleave: _eventHandlers.handleMouseLeave,
         mouseout: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
-        mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove, elementContentRects),
+        mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove),
         mouseenter: _eventHandlers.handleMouseEnter,
         mouseup: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseUp),
         click: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleClick))