@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.7
+
+### Patch Changes
+
+- [#80086](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80086) [`c30ac781b469`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c30ac781b469) - Add keyboard support Cmd-A to select whole table
+- [#81017](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81017) [`df5a993963d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df5a993963d9) - prevent scaled table columns being resized below min width
+
+## 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/commands/selection.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shiftArrowUpFromTable = exports.selectRows = exports.selectColumns = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
+exports.shiftArrowUpFromTable = exports.selectRows = exports.selectColumns = exports.modASelectTable = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -419,4 +419,26 @@ var shiftArrowUpFromTable = exports.shiftArrowUpFromTable = function shiftArrowU
       return false;
     };
   };
+};
+var modASelectTable = exports.modASelectTable = function modASelectTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      if (!table) {
+        return false;
+      }
+      var $from = selection.$from,
+        $to = selection.$to;
+      var tableSelected = (0, _utils.isTableSelected)(selection);
+      if (!tableSelected && $from.pos > table.start + 1 && $to.pos < table.start + table.node.nodeSize) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

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) {
@@ -400,7 +436,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this$containerWidth;
+      var _this$containerWidth,
+        _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
@@ -423,7 +460,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (depth !== 0) {
         return;
       }
-      var tableNodeWidth = tableNode.attrs.width;
+      var tableNodeWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
       var containerWidthValue = containerWidth.width;
       var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
@@ -437,7 +474,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           domAtPos: view.domAtPos,
           isTableScalingEnabled: true
         });
-        (0, _utils4.updateColgroup)(resizeState, this.table, tableNode, true);
+
+        // Request animation frame required for Firefox
+        requestAnimationFrame(function () {
+          (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, true);
+        });
       }
       this.containerWidth = containerWidth;
     }
@@ -445,7 +486,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
       var _this$wrapper,
-        _this2 = this;
+        _this3 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -469,7 +510,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this2.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
+            _this3.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -500,32 +541,42 @@ 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);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this,
+      var _this4 = this,
         _classnames;
       var _this$props11 = this.props,
         view = _this$props11.view,
@@ -577,7 +628,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, {
@@ -601,9 +653,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper;
-          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
-        }
+          var _this4$wrapper;
+          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$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 +690,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
@@ -650,12 +704,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper2;
-          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
+          var _this4$wrapper2;
+          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this3$wrapper3;
-          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
+          var _this4$wrapper3;
+          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -670,13 +724,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this3.wrapper = elem;
+          _this4.wrapper = elem;
           if (elem) {
-            _this3.props.contentDOM(elem);
+            _this4.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this3.table) {
-              _this3.table = tableElement;
-              _this3.createShadowSentinels(_this3.table);
+            if (tableElement !== _this4.table) {
+              _this4.table = tableElement;
+              _this4.createShadowSentinels(_this4.table);
+              _this4.observeTable(_this4.table);
             }
           }
         }