@atlaskit/editor-plugin-table 8.4.5 → 8.4.7

package/dist/es2019/index.js

@@ -1 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 export { default as tablesPlugin } from './tablePlugin';

package/dist/es2019/nodeviews/TableComponent.js

@@ -329,6 +329,9 @@ class TableComponent extends React.Component {
     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.
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -487,6 +490,7 @@ class TableComponent extends React.Component {
     }
   }
   handleColgroupUpdates(force = false) {
+    var _this$containerWidth;
     const {
       getNode,
       containerWidth,
@@ -519,18 +523,21 @@ class TableComponent extends React.Component {
     const isTableSquashed = tableRenderWidth < tableNodeWidth;
     const isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
     const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
+    const {
+      width: containerWidthValue,
+      lineLength: containerLineLength
+    } = containerWidth;
+    const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
+    const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
     const 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;
-      const {
-        width: containerWidthValue
-      } = containerWidth;
-      const 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;
+      const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
       const wasTableResized = hasTableBeenResized(this.node);
       const isTableResized = hasTableBeenResized(tableNode);
       const isColumnsDistributed = wasTableResized && !isTableResized;
       const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
+      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || isFullWidthModeAndLineLengthChanged;
       const {
         tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags();
@@ -577,6 +584,9 @@ class TableComponent extends React.Component {
         });
       }
     }
+    if (isFullWidthModeAndLineLengthChanged) {
+      this.updateColGroupFromFullWidthChange = false;
+    }
     this.tableNodeWidth = tableNodeWidth;
     this.wasResizing = isResizing;
     this.containerWidth = containerWidth;

package/dist/es2019/nodeviews/table.js

@@ -6,6 +6,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
@@ -262,6 +263,7 @@ export default class TableView extends ReactNodeView {
   }
 }
 export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) => {
+  var _pluginInjectionApi$t;
   const {
     pluginConfig,
     isFullWidthModeEnabled,
@@ -269,6 +271,9 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     isDragAndDropEnabled,
     isTableScalingEnabled // same as options.isTableScalingEnabled
   } = getPluginState(view.state);
+
+  // Use shared state for isFullWidthModeEnabled and wasFullWidthModeEnabled for most up-to-date values
+  const tableState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t = pluginInjectionApi.table) === null || _pluginInjectionApi$t === void 0 ? void 0 : _pluginInjectionApi$t.sharedState.currentState();
   const {
     allowColumnResizing,
     allowControls,
@@ -286,8 +291,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     eventDispatcher,
     getPos: getPos,
     options: {
-      isFullWidthModeEnabled,
-      wasFullWidthModeEnabled,
+      isFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix') ? tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled : isFullWidthModeEnabled,
+      wasFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix') ? tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled : wasFullWidthModeEnabled,
       isDragAndDropEnabled,
       isTableScalingEnabled,
       // same as options.isTableScalingEnabled

package/dist/es2019/pm-plugins/commands/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';

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

@@ -1,2 +1,5 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export const pluginKey = new PluginKey('tablePlugin');

package/dist/es2019/types/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;

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

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/consts.js

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';

package/dist/esm/index.js

@@ -1 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 export { default as tablesPlugin } from './tablePlugin';

package/dist/esm/nodeviews/OverflowShadowsObserver.js

@@ -93,7 +93,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
     this.wrapper = wrapper;
     this.init();
   }
-  _createClass(OverflowShadowsObserver, [{
+  return _createClass(OverflowShadowsObserver, [{
     key: "updateStickyShadowsHeightIfChanged",
     value: function updateStickyShadowsHeightIfChanged() {
       if (!this.isSticky) {
@@ -122,5 +122,4 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       }
     }
   }]);
-  return OverflowShadowsObserver;
 }();

package/dist/esm/nodeviews/TableCell.js

@@ -1,12 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
@@ -37,12 +36,10 @@ function delayUntilIdle(cb) {
 }
 var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = /*#__PURE__*/function (_TableNodeView) {
-  _inherits(TableCell, _TableNodeView);
-  var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
     _classCallCheck(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)`
@@ -54,7 +51,7 @@ var TableCell = /*#__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
-    _defineProperty(_assertThisInitialized(_this), "destroy", function () {
+    _defineProperty(_this, "destroy", function () {
       if (_this.delayHandle && typeof window !== 'undefined') {
         var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
         // eslint-disable-next-line compat/compat
@@ -82,7 +79,8 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
     }
     return _this;
   }
-  _createClass(TableCell, [{
+  _inherits(TableCell, _TableNodeView);
+  return _createClass(TableCell, [{
     key: "update",
     value: function update(node) {
       var didUpdate = this.updateNodeView(node);
@@ -140,6 +138,5 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
       return false;
     }
   }]);
-  return TableCell;
 }(TableNodeView);
 export { TableCell as default };

package/dist/esm/nodeviews/TableComponent.js

@@ -1,17 +1,16 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 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) { _defineProperty(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 = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
 import classnames from 'classnames';
@@ -63,30 +62,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) {
-  _inherits(TableComponent, _React$Component);
-  var _super = _createSuper(TableComponent);
   function TableComponent(props) {
-    var _defineProperty2;
     var _this;
     _classCallCheck(this, TableComponent);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "state", (_defineProperty2 = {
+    _this = _callSuper(this, TableComponent, [props]);
+    _defineProperty(_this, "state", _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       scroll: 0,
       parentWidth: undefined
-    }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty(_defineProperty2, "tableWrapperWidth", undefined), _defineProperty(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function (event) {
+    }, ShadowEvent.SHOW_BEFORE_SHADOW, false), ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    _defineProperty(_this, "handleMouseOut", function (event) {
       if (!isTableInFocus(_this.props.view)) {
         return false;
       }
       return handleMouseOut(_this.props.view, event);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function (event) {
+    _defineProperty(_this, "handleMouseOver", function (event) {
       if (!isTableInFocus(_this.props.view)) {
         return false;
       }
       return withCellTracking(handleMouseOver)(_this.props.view, event);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
+    _defineProperty(_this, "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
       var tr = _this.props.view.state.tr;
@@ -94,13 +90,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mouseEnterTable', [tableId, node, pos]);
       _this.props.view.dispatch(tr);
     });
-    _defineProperty(_assertThisInitialized(_this), "updateShadowState", function (shadowKey, value) {
+    _defineProperty(_this, "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
       }
       _this.setState(_defineProperty({}, shadowKey, value));
     });
-    _defineProperty(_assertThisInitialized(_this), "createShadowSentinels", function (table) {
+    _defineProperty(_this, "createShadowSentinels", function (table) {
       if (table) {
         var shadowSentinelLeft = document.createElement('span');
         shadowSentinelLeft.className = ClassName.TABLE_SHADOW_SENTINEL_LEFT;
@@ -110,7 +106,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         table.prepend(shadowSentinelRight);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "onStickyState", function (state) {
+    _defineProperty(_this, "onStickyState", function (state) {
       var pos = _this.props.getPos();
       if (!isValidPosition(pos, _this.props.view.state)) {
         return;
@@ -125,8 +121,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "prevTableState", null);
-    _defineProperty(_assertThisInitialized(_this), "handleScroll", function (event) {
+    _defineProperty(_this, "prevTableState", null);
+    _defineProperty(_this, "handleScroll", function (event) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
       }
@@ -144,7 +140,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
-    _defineProperty(_assertThisInitialized(_this), "handleTableResizing", function () {
+    _defineProperty(_this, "handleTableResizing", function () {
       var _this$props = _this.props,
         getNode = _this$props.getNode,
         containerWidth = _this$props.containerWidth,
@@ -207,7 +203,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _this.layoutSize = layoutSize;
     });
     // Function gets called when table is nested.
-    _defineProperty(_assertThisInitialized(_this), "scaleTable", function (scaleOptions) {
+    _defineProperty(_this, "scaleTable", function (scaleOptions) {
       var isUserTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _this$props2 = _this.props,
         view = _this$props2.view,
@@ -240,7 +236,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       dispatch(tr);
     });
-    _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
+    _defineProperty(_this, "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
       var _this$state;
       var _this$props3 = _this.props,
         dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
@@ -264,7 +260,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         _this.isInitialOverflowSent = true;
       }, initialOverflowCaptureTimeroutDelay);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleAutoSize", function () {
+    _defineProperty(_this, "handleAutoSize", function () {
       if (_this.table) {
         var _this$props4 = _this.props,
           view = _this$props4.view,
@@ -281,7 +277,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleWindowResize", function () {
+    _defineProperty(_this, "handleWindowResize", function () {
       var _this$props5 = _this.props,
         getNode = _this$props5.getNode,
         containerWidth = _this$props5.containerWidth;
@@ -295,7 +291,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "getParentNodeWidth", function () {
+    _defineProperty(_this, "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
         getPos = _this$props6.getPos,
         containerWidth = _this$props6.containerWidth,
@@ -308,25 +304,28 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
       return parentNodeWith;
     });
-    _defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
+    _defineProperty(_this, "updateParentWidth", function (width) {
       _this.setState({
         parentWidth: width
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
+    _defineProperty(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
       return getLayoutSize(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
-    _defineProperty(_assertThisInitialized(_this), "scaleTableDebounced", rafSchedule(_this.scaleTable));
-    _defineProperty(_assertThisInitialized(_this), "handleTableResizingDebounced", rafSchedule(_this.handleTableResizing));
-    _defineProperty(_assertThisInitialized(_this), "handleScrollDebounced", rafSchedule(_this.handleScroll));
-    _defineProperty(_assertThisInitialized(_this), "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
-    _defineProperty(_assertThisInitialized(_this), "handleWindowResizeDebounced", rafSchedule(_this.handleWindowResize));
+    _defineProperty(_this, "scaleTableDebounced", rafSchedule(_this.scaleTable));
+    _defineProperty(_this, "handleTableResizingDebounced", rafSchedule(_this.handleTableResizing));
+    _defineProperty(_this, "handleScrollDebounced", rafSchedule(_this.handleScroll));
+    _defineProperty(_this, "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
+    _defineProperty(_this, "handleWindowResizeDebounced", rafSchedule(_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;
@@ -368,7 +367,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     }
     return _this;
   }
-  _createClass(TableComponent, [{
+  _inherits(TableComponent, _React$Component);
+  return _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$table,
@@ -515,7 +515,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,
@@ -548,16 +549,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isTableSquashed = tableRenderWidth < tableNodeWidth;
       var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
       var isNumberOfColumnsChanged = 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 && 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 = hasTableBeenResized(this.node);
         var isTableResized = 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;
@@ -604,6 +608,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      if (isFullWidthModeAndLineLengthChanged) {
+        this.updateColGroupFromFullWidthChange = false;
+      }
       this.tableNodeWidth = tableNodeWidth;
       this.wasResizing = isResizing;
       this.containerWidth = containerWidth;
@@ -742,8 +749,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,
@@ -867,7 +873,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _classnames)),
+        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(view.state.selection))),
         editorView: view,
         getPos: getPos,
         node: node,
@@ -987,7 +993,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return TableComponent;
 }(React.Component);
 _defineProperty(TableComponent, "displayName", 'TableComponent');
 export default injectIntl(TableComponent);

package/dist/esm/nodeviews/TableRow.js

@@ -1,11 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -27,17 +26,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 = /*#__PURE__*/function (_TableNodeView) {
-  _inherits(TableRow, _TableNodeView);
-  var _super = _createSuper(TableRow);
   function TableRow(node, view, getPos, eventDispatcher) {
     var _this;
     _classCallCheck(this, TableRow);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    _defineProperty(_assertThisInitialized(_this), "colControlsOffset", 0);
-    _defineProperty(_assertThisInitialized(_this), "focused", false);
-    _defineProperty(_assertThisInitialized(_this), "topPosEditorElement", 0);
-    _defineProperty(_assertThisInitialized(_this), "sentinels", {});
-    _defineProperty(_assertThisInitialized(_this), "sentinelData", {
+    _this = _callSuper(this, TableRow, [node, view, getPos, eventDispatcher]);
+    _defineProperty(_this, "colControlsOffset", 0);
+    _defineProperty(_this, "focused", false);
+    _defineProperty(_this, "topPosEditorElement", 0);
+    _defineProperty(_this, "sentinels", {});
+    _defineProperty(_this, "sentinelData", {
       top: {
         isIntersecting: false,
         boundingClientRect: null,
@@ -49,19 +46,19 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         rootBounds: null
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "listening", false);
-    _defineProperty(_assertThisInitialized(_this), "padding", 0);
-    _defineProperty(_assertThisInitialized(_this), "top", 0);
+    _defineProperty(_this, "listening", false);
+    _defineProperty(_this, "padding", 0);
+    _defineProperty(_this, "top", 0);
     /**
      * Methods
      */
-    _defineProperty(_assertThisInitialized(_this), "headerRowMouseScrollEnd", debounce(function () {
+    _defineProperty(_this, "headerRowMouseScrollEnd", debounce(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
-    _defineProperty(_assertThisInitialized(_this), "headerRowMouseScroll", throttle(function () {
+    _defineProperty(_this, "headerRowMouseScroll", throttle(function () {
       if (_this.isSticky) {
         _this.dom.classList.add('no-pointer-events');
         _this.headerRowMouseScrollEnd();
@@ -84,7 +81,8 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
   /**
    * Variables
    */
-  _createClass(TableRow, [{
+  _inherits(TableRow, _TableNodeView);
+  return _createClass(TableRow, [{
     key: "update",
     value:
     /**
@@ -577,6 +575,5 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
       }
     }
   }]);
-  return TableRow;
 }(TableNodeView);
 export { TableRow as default };

package/dist/esm/nodeviews/TableStickyScrollbar.js

@@ -25,7 +25,7 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       this.init();
     }
   }
-  _createClass(TableStickyScrollbar, [{
+  return _createClass(TableStickyScrollbar, [{
     key: "dispose",
     value: function dispose() {
       if (this.stickyScrollbarContainerElement) {
@@ -142,5 +142,4 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       }
     }
   }]);
-  return TableStickyScrollbar;
 }();