@atlaskit/editor-plugin-table 8.4.4 → 8.4.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- Updated dependencies
+
 ## 8.4.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -334,6 +334,9 @@ var TableComponent = /*#__PURE__*/function (_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.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -522,7 +525,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 +559,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 +618,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      if (isFullWidthModeAndLineLengthChanged) {
+        this.updateColGroupFromFullWidthChange = false;
+      }
       this.tableNodeWidth = tableNodeWidth;
       this.wasResizing = isResizing;
       this.containerWidth = containerWidth;

package/dist/cjs/nodeviews/table.js

@@ -22,6 +22,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");
@@ -297,12 +298,16 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   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 +324,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/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/esm/nodeviews/TableComponent.js

@@ -327,6 +327,9 @@ var TableComponent = /*#__PURE__*/function (_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.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -515,7 +518,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 +552,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 +611,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      if (isFullWidthModeAndLineLengthChanged) {
+        this.updateColGroupFromFullWidthChange = false;
+      }
       this.tableNodeWidth = tableNodeWidth;
       this.wasResizing = isResizing;
       this.containerWidth = containerWidth;

package/dist/esm/nodeviews/table.js

@@ -17,6 +17,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';
@@ -291,12 +292,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 }(ReactNodeView);
 export { TableView as default };
 export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) {
+  var _pluginInjectionApi$t;
   var _getPluginState2 = 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 = getPluginConfig(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing,
     allowControls = _getPluginConfig.allowControls,
@@ -313,8 +318,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: {
-      isFullWidthModeEnabled: isFullWidthModeEnabled,
-      wasFullWidthModeEnabled: 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: isDragAndDropEnabled,
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "8.4.4",
+	"version": "8.4.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^96.3.0",
+		"@atlaskit/editor-common": "^96.4.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-plugin-content-insertion": "^1.11.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
-		"@atlaskit/editor-plugin-selection": "^1.5.0",
+		"@atlaskit/editor-plugin-selection": "^1.6.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
@@ -51,10 +51,10 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.23.0",
+		"@atlaskit/tmp-editor-statsig": "^2.25.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.4.0",
-		"@atlaskit/tooltip": "^18.9.0",
+		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5",
@@ -137,6 +137,9 @@
 		},
 		"platform_editor_ed_25642": {
 			"type": "boolean"
+		},
+		"platform_editor_table_overflow_in_full_width_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -173,6 +173,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private wrapperWidth?: number;
 	private wrapperReisizeObserver?: ResizeObserver;
 
+	private updateColGroupFromFullWidthChange?: boolean;
+
 	private dragAndDropCleanupFn?: CleanupFn;
 
 	constructor(props: ComponentProps) {
@@ -180,8 +182,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const { options, containerWidth, getNode } = props;
 		this.node = getNode();
 		this.containerWidth = containerWidth;
+
 		this.isInitialOverflowSent = false;
 
+		if (!this.updateColGroupFromFullWidthChange) {
+			this.updateColGroupFromFullWidthChange =
+				options?.isFullWidthModeEnabled && !options?.wasFullWidthModeEnabled;
+		}
+
 		// store table size using previous full-width mode so can detect if it has changed.
 		const isFullWidthModeEnabled = options ? options.wasFullWidthModeEnabled : false;
 		this.layoutSize = this.tableNodeLayoutSize(this.node, containerWidth.width, {
@@ -429,6 +437,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
 		const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
 
+		const { width: containerWidthValue, lineLength: containerLineLength } = containerWidth;
+		const isLineLengthChanged = this.containerWidth?.lineLength !== containerLineLength;
+
+		const isFullWidthModeAndLineLengthChanged =
+			this.updateColGroupFromFullWidthChange &&
+			isLineLengthChanged &&
+			fg('platform_editor_table_overflow_in_full_width_fix');
+
 		const maybeScale =
 			isTableSquashed ||
 			isTableWidthChanged ||
@@ -436,14 +452,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isNumberColumnChanged ||
 			isNumberOfColumnsChanged;
 
-		if (force || maybeScale) {
-			const { width: containerWidthValue } = containerWidth;
+		if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
 			const isWidthChanged = this.containerWidth?.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 ||
@@ -451,7 +465,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isTableWidthChanged ||
 				isTableDisplayModeChanged ||
 				isNumberColumnChanged ||
-				isNumberOfColumnsChanged;
+				isNumberOfColumnsChanged ||
+				isFullWidthModeAndLineLengthChanged;
 
 			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
@@ -523,6 +538,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				});
 			}
 		}
+
+		if (isFullWidthModeAndLineLengthChanged) {
+			this.updateColGroupFromFullWidthChange = false;
+		}
+
 		this.tableNodeWidth = tableNodeWidth;
 		this.wasResizing = isResizing;
 		this.containerWidth = containerWidth;

package/src/nodeviews/table.tsx

@@ -19,6 +19,7 @@ import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state'
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 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';
@@ -382,6 +383,10 @@ export const createTableView = (
 		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?.table?.sharedState.currentState();
+
 	const { allowColumnResizing, allowControls, allowTableResizing, allowTableAlignment } =
 		getPluginConfig(pluginConfig);
 
@@ -396,8 +401,12 @@ export const createTableView = (
 		eventDispatcher,
 		getPos: getPos as getPosHandlerNode,
 		options: {
-			isFullWidthModeEnabled,
-			wasFullWidthModeEnabled,
+			isFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix')
+				? tableState?.isFullWidthModeEnabled
+				: isFullWidthModeEnabled,
+			wasFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix')
+				? tableState?.wasFullWidthModeEnabled
+				: wasFullWidthModeEnabled,
 			isDragAndDropEnabled,
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
 			isCommentEditor,