@atlaskit/editor-plugin-table 12.1.14 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-table
 
+## 12.2.0
+
+### Minor Changes
+
+- [`021fd485e1f83`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021fd485e1f83) -
+  fix table flicking issue on page load by improving table scailing and table resizer with css
+  instead of js
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.15
+
+### Patch Changes
+
+- [#199851](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199851)
+  [`a37fa5c2adf4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a37fa5c2adf4a) -
+  [ux] EDITOR-346 Clean up nested tables feature gate
+  `platform_editor_nested_tables_number_column_fixes`
+- [#200948](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/200948)
+  [`8dd9a944113d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8dd9a944113d5) -
+  Opt out of throttling rendering
+- Updated dependencies
+
 ## 12.1.14
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,120 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__editor-plugin-table/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../custom-steps/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-palette/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-accessibility-utils/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-batch-attribute-updates/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-content-insertion/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-extension/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-guideline/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-interaction/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-width/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-tables/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/menu/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/auto-scroll/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/toggle/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-rovo-extension/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -56,6 +56,9 @@
 		{
 			"path": "../../editor-plugin-interaction/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-townsquare/tsconfig.json"
 		},
@@ -77,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-townsquare/tsconfig.json"
 		},

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -23,9 +29,6 @@
 		{
 			"path": "../../custom-steps/afm-volt/tsconfig.json"
 		},
-		{
-			"path": "../../editor-common/afm-volt/tsconfig.json"
-		},
 		{
 			"path": "../../editor-palette/afm-volt/tsconfig.json"
 		},
@@ -86,6 +89,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-volt/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-volt/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-volt/tsconfig.json"
 		},
@@ -100,6 +106,9 @@
 		},
 		{
 			"path": "../../../design-system/tooltip/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-volt/tsconfig.json"
 		}
 	]
 }

package/dist/cjs/nodeviews/TableComponent.js

@@ -94,10 +94,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2.default)(this, TableComponent);
     _this = _callSuper(this, TableComponent, [props]);
-    (0, _defineProperty3.default)(_this, "state", (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({
+    (0, _defineProperty3.default)(_this, "state", (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({
       scroll: 0,
       parentWidth: undefined
-    }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined), "windowResized", false));
     (0, _defineProperty3.default)(_this, "holdCompleted", false);
     (0, _defineProperty3.default)(_this, "dispatchEventName", "tableResized-".concat(generateUniqueTableId()));
     (0, _defineProperty3.default)(_this, "handleMouseOut", function (event) {
@@ -334,6 +334,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
+    // This is a new handler for window resize events that sets the windowResized state immediately
+    // This is needed to update colgroup on window resize, to enforce the table scaling
+    (0, _defineProperty3.default)(_this, "handleWindowResizeNew", function () {
+      // Set resizing to true immediately
+      if (!_this.state.windowResized) {
+        _this.setState({
+          windowResized: true
+        });
+      }
+    });
     (0, _defineProperty3.default)(_this, "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
         getPos = _this$props6.getPos,
@@ -355,11 +365,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
       return (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
+    (0, _defineProperty3.default)(_this, "shouldUpdateColgroup", function (params) {
+      var _this$props$options, _this$props$options2;
+      var isWindowResized = params.isWindowResized,
+        isWidthChanged = params.isWidthChanged,
+        isTableWidthChanged = params.isTableWidthChanged,
+        isColumnsDistributed = params.isColumnsDistributed,
+        isTableResizedFullWidth = params.isTableResizedFullWidth,
+        isTableDisplayModeChanged = params.isTableDisplayModeChanged,
+        isNumberColumnChanged = params.isNumberColumnChanged,
+        isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
+        isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
+      var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
+      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && isFullPageEditor) {
+        return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
+      }
+      return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
+    });
     (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));
+    (0, _defineProperty3.default)(_this, "handleWindowResizeNewDebounced", (0, _rafSchd.default)(_this.handleWindowResizeNew));
     (0, _defineProperty3.default)(_this, "updateShadowStateDebounced", (0, _rafSchd.default)(_this.updateShadowState));
     var _options = props.options,
       _containerWidth = props.containerWidth,
@@ -465,11 +493,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-      if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-        this.handleColgroupUpdates(true);
-      }
-      if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
-        this.handleColgroupUpdates(true);
+      if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+        if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
+          this.handleColgroupUpdates(true);
+        }
+        if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
+          this.handleColgroupUpdates(true);
+        }
       }
       if (this.wrapper) {
         this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
@@ -521,6 +551,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           window.addEventListener('resize', this.handleWindowResizeDebounced);
         }
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
         this.handleTableResizingDebounced();
       }
       var currentStickyState = _pluginKey.pluginKey.getState(this.props.view.state);
@@ -568,11 +600,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!allowTableResizing) {
         this.handleWindowResizeDebounced.cancel();
       }
+      this.handleWindowResizeNewDebounced.cancel();
       if (!allowTableResizing && allowColumnResizing) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
+      if (allowColumnResizing) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
+      }
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -662,22 +699,32 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         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;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
       if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
-        var _this$containerWidth2, _this$props$options, _this$props$options2, _this$props$options3;
+        var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
         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 || isFullWidthModeAndLineLengthChanged;
+        var shouldUpdateColgroup = this.shouldUpdateColgroup({
+          isWindowResized: this.state.windowResized,
+          isWidthChanged: isWidthChanged,
+          isTableWidthChanged: isTableWidthChanged,
+          isColumnsDistributed: isColumnsDistributed,
+          isTableResizedFullWidth: isTableResizedFullWidth,
+          isTableDisplayModeChanged: isTableDisplayModeChanged,
+          isNumberColumnChanged: isNumberColumnChanged,
+          isNumberOfColumnsChanged: isNumberOfColumnsChanged,
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+        });
         var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
           _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
-        var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
+        var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
+        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
+          var _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
           var resizeState = (0, _resizeState.getResizeState)({
             minWidth: _consts.COLUMN_MIN_WIDTH,
             // When numbered column enabled, we need to subtract the width of the numbered column
@@ -688,16 +735,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             domAtPos: view.domAtPos.bind(view),
             isTableScalingEnabled: true,
             shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-            isCommentEditor: !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isCommentEditor)
+            isCommentEditor: !!((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isCommentEditor)
           });
           var shouldScaleOnColgroupUpdate = false;
-          if ((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
+          if ((_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
             shouldScaleOnColgroupUpdate = true;
           }
           if (isTableScalingWithFixedColumnWidthsOptionEnabled && tableNode.attrs.displayMode !== 'fixed') {
             shouldScaleOnColgroupUpdate = true;
           }
-          if ((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isTableScalingEnabled && (_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isCommentEditor) {
+          if ((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isTableScalingEnabled && (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
@@ -746,8 +793,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options8,
-        _this$props$options9,
+      var _this$props$options0,
+        _this$props$options1,
         _this$wrapper,
         _this5 = this;
       var _this$props1 = this.props,
@@ -777,18 +824,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
+      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+        shouldHandleColgroupUpdates = true;
+      }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
+      if ((_this$props$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -878,7 +928,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this6 = this,
-        _this$props$options0;
+        _this$props$options10;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -940,7 +990,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: this.state.stickyHeader,
+        stickyHeader: !this.props.limitedMode ? this.state.stickyHeader : undefined,
         tableWrapperWidth: this.state.tableWrapperWidth,
         api: pluginInjectionApi,
         isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
@@ -962,7 +1012,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: this.state.stickyHeader,
+        stickyHeader: !this.props.limitedMode ? this.state.stickyHeader : undefined,
         getEditorFeatureFlags: getEditorFeatureFlags,
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -995,15 +1045,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNested = (0, _nodes.isTableNested)(view.state, tablePos);
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
       var topOffset = 0;
-      var topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
+      var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
       var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
         _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag8 === void 0 ? false : _getEditorFeatureFlag8;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       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, (0, _defineProperty3.default)((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)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
         editorView: view,
         getPos: getPos,
         node: node
@@ -1017,6 +1067,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: allowTableResizing,
         isResizing: isResizing,
+        isWindowResized: this.state.windowResized,
         isTableScalingEnabled: isTableScalingEnabled,
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,