@atlaskit/editor-plugin-table 8.4.5 → 8.4.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 8.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.4.6
+
+### Patch Changes
+
+- [#176217](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176217)
+  [`38f5a9c8db167`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/38f5a9c8db167) -
+  ED-25953 Fix table overflow when page changes from full page to full width
+
 ## 8.4.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/OverflowShadowsObserver.js

@@ -100,7 +100,7 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
     this.wrapper = wrapper;
     this.init();
   }
-  (0, _createClass2.default)(OverflowShadowsObserver, [{
+  return (0, _createClass2.default)(OverflowShadowsObserver, [{
     key: "updateStickyShadowsHeightIfChanged",
     value: function updateStickyShadowsHeightIfChanged() {
       if (!this.isSticky) {
@@ -129,5 +129,4 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
       }
     }
   }]);
-  return OverflowShadowsObserver;
 }();

package/dist/cjs/nodeviews/TableCell.js

@@ -8,16 +8,15 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
@@ -44,12 +43,10 @@ function delayUntilIdle(cb) {
 }
 var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
-  (0, _inherits2.default)(TableCell, _TableNodeView);
-  var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
     (0, _classCallCheck2.default)(this, TableCell);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
+    _this = _callSuper(this, TableCell, [node, view, getPos, eventDispatcher]);
 
     // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
     // Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
@@ -61,7 +58,7 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
     // This is a workaround to fix those cases on the fly. Note it is super specific on purpose
     // so that it just fixes the heading token (other tokens should be unaffected)
     // At some point in the future
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "destroy", function () {
+    (0, _defineProperty2.default)(_this, "destroy", function () {
       if (_this.delayHandle && typeof window !== 'undefined') {
         var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
         // eslint-disable-next-line compat/compat
@@ -89,7 +86,8 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
     }
     return _this;
   }
-  (0, _createClass2.default)(TableCell, [{
+  (0, _inherits2.default)(TableCell, _TableNodeView);
+  return (0, _createClass2.default)(TableCell, [{
     key: "update",
     value: function update(node) {
       var didUpdate = this.updateNodeView(node);
@@ -147,5 +145,4 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       return false;
     }
   }]);
-  return TableCell;
 }(_TableNodeViewBase.default);

package/dist/cjs/nodeviews/TableComponent.js

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
@@ -52,7 +51,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var isIE11 = _utils.browser.ie_version === 11;
 // When table is inserted via paste, keyboard shortcut or quickInsert,
@@ -70,30 +69,27 @@ var isOverflowAnalyticsEnabled = false;
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(TableComponent, _React$Component);
-  var _super = _createSuper(TableComponent);
   function TableComponent(props) {
-    var _defineProperty2;
     var _this;
     (0, _classCallCheck2.default)(this, TableComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
+    _this = _callSuper(this, TableComponent, [props]);
+    (0, _defineProperty3.default)(_this, "state", (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({
       scroll: 0,
       parentWidth: undefined
-    }, (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), "handleMouseOut", function (event) {
+    }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    (0, _defineProperty3.default)(_this, "handleMouseOut", function (event) {
       if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
         return false;
       }
       return (0, _eventHandlers.handleMouseOut)(_this.props.view, event);
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOver", function (event) {
+    (0, _defineProperty3.default)(_this, "handleMouseOver", function (event) {
       if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
         return false;
       }
       return (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseOver)(_this.props.view, event);
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function () {
+    (0, _defineProperty3.default)(_this, "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
       var tr = _this.props.view.state.tr;
@@ -101,13 +97,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mouseEnterTable', [tableId, node, pos]);
       _this.props.view.dispatch(tr);
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
+    (0, _defineProperty3.default)(_this, "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
       }
       _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "createShadowSentinels", function (table) {
+    (0, _defineProperty3.default)(_this, "createShadowSentinels", function (table) {
       if (table) {
         var shadowSentinelLeft = document.createElement('span');
         shadowSentinelLeft.className = _types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT;
@@ -117,7 +113,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         table.prepend(shadowSentinelRight);
       }
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
+    (0, _defineProperty3.default)(_this, "onStickyState", function (state) {
       var pos = _this.props.getPos();
       if (!(0, _utils.isValidPosition)(pos, _this.props.view.state)) {
         return;
@@ -132,8 +128,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "prevTableState", null);
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (event) {
+    (0, _defineProperty3.default)(_this, "prevTableState", null);
+    (0, _defineProperty3.default)(_this, "handleScroll", function (event) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
       }
@@ -151,7 +147,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
+    (0, _defineProperty3.default)(_this, "handleTableResizing", function () {
       var _this$props = _this.props,
         getNode = _this$props.getNode,
         containerWidth = _this$props.containerWidth,
@@ -214,7 +210,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _this.layoutSize = layoutSize;
     });
     // Function gets called when table is nested.
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTable", function (scaleOptions) {
+    (0, _defineProperty3.default)(_this, "scaleTable", function (scaleOptions) {
       var isUserTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _this$props2 = _this.props,
         view = _this$props2.view,
@@ -247,7 +243,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       dispatch(tr);
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
+    (0, _defineProperty3.default)(_this, "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
       var _this$state;
       var _this$props3 = _this.props,
         dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
@@ -271,7 +267,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         _this.isInitialOverflowSent = true;
       }, initialOverflowCaptureTimeroutDelay);
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSize", function () {
+    (0, _defineProperty3.default)(_this, "handleAutoSize", function () {
       if (_this.table) {
         var _this$props4 = _this.props,
           view = _this$props4.view,
@@ -288,7 +284,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResize", function () {
+    (0, _defineProperty3.default)(_this, "handleWindowResize", function () {
       var _this$props5 = _this.props,
         getNode = _this$props5.getNode,
         containerWidth = _this$props5.containerWidth;
@@ -302,7 +298,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeWidth", function () {
+    (0, _defineProperty3.default)(_this, "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
         getPos = _this$props6.getPos,
         containerWidth = _this$props6.containerWidth,
@@ -315,25 +311,28 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var parentNodeWith = (0, _nodeWidth.getParentNodeWidth)(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
       return parentNodeWith;
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateParentWidth", function (width) {
+    (0, _defineProperty3.default)(_this, "updateParentWidth", function (width) {
       _this.setState({
         parentWidth: width
       });
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
+    (0, _defineProperty3.default)(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
       return (0, _utils4.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
+    (0, _defineProperty3.default)(_this, "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
+    (0, _defineProperty3.default)(_this, "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
+    (0, _defineProperty3.default)(_this, "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
+    (0, _defineProperty3.default)(_this, "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
+    (0, _defineProperty3.default)(_this, "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
     var _options = props.options,
       _containerWidth = props.containerWidth,
       _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
     _this.isInitialOverflowSent = false;
+    if (!_this.updateColGroupFromFullWidthChange) {
+      _this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
+    }
 
     // store table size using previous full-width mode so can detect if it has changed.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -375,7 +374,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     }
     return _this;
   }
-  (0, _createClass2.default)(TableComponent, [{
+  (0, _inherits2.default)(TableComponent, _React$Component);
+  return (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$table,
@@ -522,7 +522,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this3 = this;
+      var _this$containerWidth,
+        _this3 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -555,16 +556,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isTableSquashed = tableRenderWidth < tableNodeWidth;
       var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
       var isNumberOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(tableNode, this.node);
+      var containerWidthValue = containerWidth.width,
+        containerLineLength = containerWidth.lineLength;
+      var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
+      var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
       var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged;
-      if (force || maybeScale) {
-        var _this$containerWidth, _this$props$options, _this$props$options2, _this$props$options3;
-        var containerWidthValue = containerWidth.width;
-        var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+      if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
+        var _this$containerWidth2, _this$props$options, _this$props$options2, _this$props$options3;
+        var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
         var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
         var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || isFullWidthModeAndLineLengthChanged;
         var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
           _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
@@ -611,6 +615,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      if (isFullWidthModeAndLineLengthChanged) {
+        this.updateColGroupFromFullWidthChange = false;
+      }
       this.tableNodeWidth = tableNodeWidth;
       this.wasResizing = isResizing;
       this.containerWidth = containerWidth;
@@ -749,8 +756,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this5 = this,
         _this$state$stickyHea2,
         _this$state$stickyHea3,
-        _this$props$options10,
-        _classnames;
+        _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
         getNode = _this$props12.getNode,
@@ -874,7 +880,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        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)),
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection))),
         editorView: view,
         getPos: getPos,
         node: node,
@@ -994,7 +1000,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return TableComponent;
 }(_react.default.Component);
 (0, _defineProperty3.default)(TableComponent, "displayName", 'TableComponent');
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableComponent);

package/dist/cjs/nodeviews/TableRow.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
@@ -25,7 +24,7 @@ var _nodes = require("../pm-plugins/utils/nodes");
 var _types = require("../types");
 var _consts = require("../ui/consts");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -34,17 +33,15 @@ var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
-  (0, _inherits2.default)(TableRow, _TableNodeView);
-  var _super = _createSuper(TableRow);
   function TableRow(node, view, getPos, eventDispatcher) {
     var _this;
     (0, _classCallCheck2.default)(this, TableRow);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "colControlsOffset", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focused", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "topPosEditorElement", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sentinels", {});
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sentinelData", {
+    _this = _callSuper(this, TableRow, [node, view, getPos, eventDispatcher]);
+    (0, _defineProperty2.default)(_this, "colControlsOffset", 0);
+    (0, _defineProperty2.default)(_this, "focused", false);
+    (0, _defineProperty2.default)(_this, "topPosEditorElement", 0);
+    (0, _defineProperty2.default)(_this, "sentinels", {});
+    (0, _defineProperty2.default)(_this, "sentinelData", {
       top: {
         isIntersecting: false,
         boundingClientRect: null,
@@ -56,19 +53,19 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         rootBounds: null
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listening", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padding", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "top", 0);
+    (0, _defineProperty2.default)(_this, "listening", false);
+    (0, _defineProperty2.default)(_this, "padding", 0);
+    (0, _defineProperty2.default)(_this, "top", 0);
     /**
      * Methods
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
+    (0, _defineProperty2.default)(_this, "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
     // When the header is sticky, the header row is set to position: fixed
     // This prevents mouse wheel scrolling on the scroll-parent div when user's mouse is hovering the header row.
     // This fix sets pointer-events: none on the header row briefly to avoid this behaviour
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScroll", (0, _throttle.default)(function () {
+    (0, _defineProperty2.default)(_this, "headerRowMouseScroll", (0, _throttle.default)(function () {
       if (_this.isSticky) {
         _this.dom.classList.add('no-pointer-events');
         _this.headerRowMouseScrollEnd();
@@ -91,7 +88,8 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   /**
    * Variables
    */
-  (0, _createClass2.default)(TableRow, [{
+  (0, _inherits2.default)(TableRow, _TableNodeView);
+  return (0, _createClass2.default)(TableRow, [{
     key: "update",
     value:
     /**
@@ -584,5 +582,4 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
       }
     }
   }]);
-  return TableRow;
 }(_TableNodeViewBase.default);

package/dist/cjs/nodeviews/TableStickyScrollbar.js

@@ -32,7 +32,7 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       this.init();
     }
   }
-  (0, _createClass2.default)(TableStickyScrollbar, [{
+  return (0, _createClass2.default)(TableStickyScrollbar, [{
     key: "dispose",
     value: function dispose() {
       if (this.stickyScrollbarContainerElement) {
@@ -149,5 +149,4 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       }
     }
   }]);
-  return TableStickyScrollbar;
 }();

package/dist/cjs/nodeviews/table.js

@@ -8,11 +8,10 @@ exports.default = exports.createTableView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-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 _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +21,7 @@ var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _dragAndDrop = require("../pm-plugins/drag-and-drop");
@@ -33,8 +33,9 @@ var _tableWidth = require("../pm-plugins/table-width");
 var _utils2 = require("../pm-plugins/utils");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 var tableAttributes = function tableAttributes(node) {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -74,23 +75,22 @@ var toDOM = function toDOM(node, props) {
   return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(TableView, _ReactNodeView);
-  var _super = _createSuper(TableView);
   function TableView(props) {
     var _this;
     (0, _classCallCheck2.default)(this, TableView);
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNode", function () {
+    _this = _callSuper(this, TableView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    (0, _defineProperty2.default)(_this, "getNode", function () {
       return _this.node;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasHoveredRows", false);
+    (0, _defineProperty2.default)(_this, "hasHoveredRows", false);
     _this.getPos = props.getPos;
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
     return _this;
   }
-  (0, _createClass2.default)(TableView, [{
+  (0, _inherits2.default)(TableView, _ReactNodeView);
+  return (0, _createClass2.default)(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
@@ -291,18 +291,21 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         this.resizeObserver.disconnect();
       }
       (_this$eventDispatcher = this.eventDispatcher) === null || _this$eventDispatcher === void 0 || _this$eventDispatcher.emit('TABLE_DELETED', this.node);
-      (0, _get2.default)((0, _getPrototypeOf2.default)(TableView.prototype), "destroy", this).call(this);
+      _superPropGet(TableView, "destroy", this, 3)([]);
     }
   }]);
-  return TableView;
 }(_reactNodeView.default);
 var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) {
+  var _pluginInjectionApi$t;
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
     isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
     isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
+
+  // Use shared state for isFullWidthModeEnabled and wasFullWidthModeEnabled for most up-to-date values
+  var tableState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t = pluginInjectionApi.table) === null || _pluginInjectionApi$t === void 0 ? void 0 : _pluginInjectionApi$t.sharedState.currentState();
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing,
     allowControls = _getPluginConfig.allowControls,
@@ -319,8 +322,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: {
-      isFullWidthModeEnabled: isFullWidthModeEnabled,
-      wasFullWidthModeEnabled: wasFullWidthModeEnabled,
+      isFullWidthModeEnabled: (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix') ? tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled : isFullWidthModeEnabled,
+      wasFullWidthModeEnabled: (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix') ? tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled : wasFullWidthModeEnabled,
       isDragAndDropEnabled: isDragAndDropEnabled,
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled

package/dist/cjs/pm-plugins/plugin-key.js

@@ -5,4 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 var pluginKey = exports.pluginKey = new _state.PluginKey('tablePlugin');

package/dist/cjs/pm-plugins/table-resizing/plugin.js

@@ -28,10 +28,9 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
     }),
     props: {
       attributes: function attributes(state) {
-        var _classnames;
         var pluginState = (0, _pluginFactory2.getPluginState)(state);
         return {
-          class: (0, _classnames2.default)(_types.TableCssClassName.RESIZING_PLUGIN, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.RESIZE_CURSOR, pluginState.resizeHandlePos !== null), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.IS_RESIZING, !!pluginState.dragging), _classnames))
+          class: (0, _classnames2.default)(_types.TableCssClassName.RESIZING_PLUGIN, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.RESIZE_CURSOR, pluginState.resizeHandlePos !== null), _types.TableCssClassName.IS_RESIZING, !!pluginState.dragging))
         };
       },
       handleDOMEvents: {

package/dist/cjs/types/index.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _adfSchema = require("@atlaskit/adf-schema");
 var _styles = require("@atlaskit/editor-common/styles");
 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; }
+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; } /* eslint-disable @atlaskit/editor/no-re-export */ // Entry file in package.json
 var RESIZE_HANDLE_AREA_DECORATION_GAP = exports.RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 
 /**