@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/dist/cjs/nodeviews/TableComponent.js

@@ -32,9 +32,10 @@ var _stickyHeaders = require("../pm-plugins/sticky-headers");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils4 = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
+var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
-var _consts = require("../ui/consts");
+var _consts2 = require("../ui/consts");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 var _utils5 = require("../utils");
@@ -42,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); }; }
@@ -51,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);
@@ -62,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;
@@ -176,7 +186,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props2.getPos,
         containerWidth = _this$props2.containerWidth,
         options = _this$props2.options,
-        getEditorFeatureFlags = _this$props2.getEditorFeatureFlags;
+        isTableScalingEnabled = _this$props2.isTableScalingEnabled;
       var node = getNode();
       var state = view.state,
         dispatch = view.dispatch;
@@ -187,16 +197,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
       _this.scaleTableDebounced.cancel();
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
-        tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
       var tr = (0, _utils4.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos, tablePreserveWidth)(state.tr);
+      }, options), domAtPos, isTableScalingEnabled)(state.tr);
       dispatch(tr);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -297,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
@@ -318,13 +348,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props7.options,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
         getNode = _this$props7.getNode,
-        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+      if (isTableScalingEnabled) {
+        this.handleColgroupUpdates(true);
+      }
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         if (stickyScrollbar) {
           if (this.table) {
             this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
@@ -352,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,
@@ -370,8 +407,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
-      var _getEditorFeatureFlag4 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag4.stickyScrollbar;
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
+      var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
       if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -398,23 +436,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this2 = this,
-        _this$containerWidth;
+      var _this$containerWidth;
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
         containerWidth = _this$props9.containerWidth,
         isResizing = _this$props9.isResizing,
         view = _this$props9.view,
-        getPos = _this$props9.getPos,
-        tableRef = _this$props9.tableRef;
-      if (!tableRef) {
+        getPos = _this$props9.getPos;
+      if (!this.table) {
         return;
       }
-      var TABLE_MARGIN = 76;
 
       // Remove any widths styles after resizing preview is completed
-      tableRef.style.width = '';
-      var tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+      this.table.style.width = '';
+      var tableRenderWidth = containerWidth.width - _consts.TABLE_EDITOR_MARGIN;
       var tableNode = getNode();
       var start = getPos() || 0;
       var depth = view.state.doc.resolve(start).depth;
@@ -424,17 +460,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var tableNodeWidth = tableNode.attrs.width;
-      var tableColumnWidths = (0, _utils.calcTableColumnWidths)(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      var isTableColumnWidthsSame = false;
-      if (this.tableColumnWidths) {
-        isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every(function (width, index) {
-          return width === _this2.tableColumnWidths[index];
-        });
-      }
       var containerWidthValue = containerWidth.width;
       var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-      if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+      if (force || shouldTableScale && !isResizing && isWidthChanged) {
         var resizeState = (0, _utils4.getResizeState)({
           minWidth: _utils4.COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -442,20 +471,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           tableRef: this.table,
           start: start,
           domAtPos: view.domAtPos,
-          tablePreserveWidth: true
+          isTableScalingEnabled: true
         });
-        requestAnimationFrame(function () {
-          (0, _utils4.updateColgroup)(resizeState, _this2.table, true);
-        });
-        this.tableColumnWidths = tableColumnWidths;
-        this.containerWidth = containerWidth;
+        (0, _utils4.updateColgroup)(resizeState, this.table, tableNode, true);
       }
+      this.containerWidth = containerWidth;
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
       var _this$wrapper,
-        _this3 = this;
+        _this2 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -463,14 +489,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowColumnResizing = _this$props10.allowColumnResizing,
         isResizing = _this$props10.isResizing,
         options = _this$props10.options,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+        isTableScalingEnabled = _this$props10.isTableScalingEnabled;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tablePreserveWidth,
-        tablePreserveWidth = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var table = (0, _utils2.findTable)(view.state.selection);
-      if (tablePreserveWidth) {
+      if (isTableScalingEnabled) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
@@ -482,7 +505,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 () {
-            _this3.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
+            _this2.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -507,38 +530,48 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
           if (shouldRecreateResizeCols) {
-            (0, _utils4.insertColgroupFromNode)(this.table, currentTable, tablePreserveWidth);
+            (0, _utils4.insertColgroupFromNode)(this.table, currentTable, isTableScalingEnabled);
           }
           (0, _dom.updateControls)()(_view.state);
         }
         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 _this4 = this,
+      var _this3 = this,
         _classnames;
       var _this$props11 = this.props,
         view = _this$props11.view,
@@ -555,7 +588,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props11.getPos,
         pluginInjectionApi = _this$props11.pluginInjectionApi,
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -589,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, {
@@ -613,9 +648,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper;
-          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
-        }
+          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,9 +673,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = (0, _utils5.isTableNested)(view.state, tablePos);
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
-      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag7.stickyScrollbar,
-        tablePreserveWidth = _getEditorFeatureFlag7.tablePreserveWidth;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
@@ -650,9 +685,10 @@ 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,
-        tablePreserveWidth: tablePreserveWidth
+        isTableScalingEnabled: isTableScalingEnabled
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -663,12 +699,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper2;
-          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this4$wrapper3;
-          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
+          var _this3$wrapper3;
+          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -683,13 +719,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) {
-          _this4.wrapper = elem;
+          _this3.wrapper = elem;
           if (elem) {
-            _this4.props.contentDOM(elem);
+            _this3.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this4.table) {
-              _this4.table = tableElement;
-              _this4.createShadowSentinels(_this4.table);
+            if (tableElement !== _this3.table) {
+              _this3.table = tableElement;
+              _this3.createShadowSentinels(_this3.table);
+              _this3.observeTable(_this3.table);
             }
           }
         }
@@ -712,7 +749,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           position: 'absolute',
-          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px") : '-2px'
+          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts2.tableOverflowShadowWidthWide : _consts2.tableOverflowShadowWidth, "px") : '-2px'
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),

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,
-    tablePreserveWidth = _ref2.tablePreserveWidth;
+    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;
@@ -118,7 +117,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = tablePreserveWidth ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -136,7 +135,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
-    tablePreserveWidth: tablePreserveWidth
+    isTableScalingEnabled: isTableScalingEnabled
   };
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -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,9 +173,10 @@ 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,
-    tablePreserveWidth = _ref3.tablePreserveWidth;
+    isTableScalingEnabled = _ref3.isTableScalingEnabled;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -184,9 +185,10 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';

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;
@@ -98,7 +98,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
-    tablePreserveWidth = _ref.tablePreserveWidth;
+    isTableScalingEnabled = _ref.isTableScalingEnabled;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
@@ -145,15 +145,15 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [tablePreserveWidth, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: tablePreserveWidth ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths
+      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, tablePreserveWidth, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, containerWidth]);
   (0, _react.useEffect)(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -183,12 +183,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, tablePreserveWidth, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -206,11 +206,11 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, tablePreserveWidth ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
+    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [countFrames, tablePreserveWidth, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
@@ -246,7 +246,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
+      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled)(tr);
       var scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics2.generateResizedPayload)({
         originalNode: node,
@@ -264,7 +264,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tablePreserveWidth]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {