@atlaskit/editor-plugin-table 12.1.14 → 12.2.0

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -1,9 +1,10 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { COLUMN_MIN_WIDTH } from './consts';
-import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
+import { COLUMN_MIN_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+import { getScalingPercentForTableWithoutWidth, getTableContainerElementWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
  * than the table and table wrapper elements. This is necessary as there is no longer
@@ -11,6 +12,73 @@ import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '.
  * overflow.
  */
 export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
+const generateColStyle = (fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, hasTableBeenResized) => {
+  const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
+  const maxScaledRatio = 1 - maxScalingPercent;
+  const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // for nested tables, or chromeless editor, which used non resizable table container
+  if (isNested || isChromelessEditor) {
+    if (hasTableBeenResized) {
+      return `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`;
+    }
+    return `width: ${tableCellMinWidth}px)`;
+  }
+  if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
+    const scaledPercent = isNumberColumnEnabled ? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})` : `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+    return `width: max(calc(${fixedColWidth}px * ${maxScaledRatio}), calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+  }
+  // table resized to full-width in comment editor
+  // it doesn't have a width attribute, and cols has been resized
+  if (hasTableBeenResized) {
+    const scaledPercent = isNumberColumnEnabled ? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})` : `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+    return `width: max(calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+  }
+  return `width: ${tableCellMinWidth}px`;
+};
+export const generateColgroupFromNode = (table, isCommentEditor, isChromelessEditor, isNested, isTableScalingEnabled, shouldUseIncreasedScalingPercent) => {
+  const cols = [];
+  const map = TableMap.get(table);
+  const isTableHasWidth = !!table.attrs.width;
+  const isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
+  const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  table.content.firstChild.content.forEach(cell => {
+    const colspan = cell.attrs.colspan || 1;
+    // if the table has been resized
+    if (Array.isArray(cell.attrs.colwidth)) {
+      cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+        // existing logic for calculating the width of the column
+        const fixedColWidth = getColWidthFix(width, map.width);
+        const tableWidth = isFullPageEditor || !isFullPageEditor && isTableHasWidth ? getTableContainerElementWidth(table) : calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+        if (isTableScalingEnabled) {
+          cols.push(['col', {
+            style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, true)
+          }]);
+        } else {
+          cols.push(['col', {
+            style: `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`
+          }]);
+        }
+      });
+    } else {
+      // columns has not been resized, so distribute the width evenly
+      cols.push(...Array.from({
+        length: colspan
+      }, _ => {
+        const tableWidth = getTableContainerElementWidth(table);
+        const columnWidth = tableWidth / map.width || 0;
+        const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+        return ['col', {
+          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+        }];
+      }));
+    }
+  });
+  return cols;
+};
 export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) => {
   const cols = [];
   const map = TableMap.get(table);
@@ -32,6 +100,7 @@ export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPerce
           scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
         }
         cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+          // existing logic for calculating the width of the column
           const fixedColWidth = getColWidthFix(width, map.width);
           const scaledWidth = fixedColWidth * scalePercent;
           const finalWidth = Math.max(scaledWidth, tableCellMinWidth);

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -4,7 +4,7 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
-import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_MAX_WIDTH } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
@@ -85,6 +85,75 @@ export const getTableElementWidth = table => {
 export const getTableContainerElementWidth = table => {
   return getTableContainerWidth(table);
 };
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export const getTableResizerContainerMaxWidthInCSS = (isCommentEditor, isChromelessEditor, isTableScalingEnabled) => {
+  const maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${TABLE_MAX_WIDTH}px)` : `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${TABLE_MAX_WIDTH}px)`;
+  return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export const getTableResizerItemWidth = (node, isCommentEditor, isChromelessEditor) => {
+  const tableWidthAttribute = getTableContainerWidth(node);
+  if (!node.attrs.width && (isCommentEditor || isChromelessEditor)) {
+    // width undefined would make .resizer-item width to be `auto`
+    return undefined;
+  }
+  return tableWidthAttribute;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export const getTableResizerItemWidthInCSS = (node, isCommentEditor, isChromelessEditor) => {
+  const tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
+  return tableWidthAttribute ? `${tableWidthAttribute}px` : 'auto';
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export const getTableResizerContainerForFullPageWidthInCSS = (node, isTableScalingEnabled) => {
+  const tableWidth = getTableContainerElementWidth(node);
+  // for full page appearance
+  if (isTableScalingEnabled) {
+    return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${tableWidth}px)`;
+  }
+  return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${tableWidth}px)`;
+};
 export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalingPercent) => {
   var _tableRef$parentEleme;
   const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;

package/dist/es2019/tablePlugin.js

@@ -228,19 +228,29 @@ const tablePlugin = ({
       }) : insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes() {
-      var _options$tableOptions2;
+      var _options$tableOptions2, _options$getEditorFea3;
       const {
         allowColumnResizing
       } = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions);
       // TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
       const isNestingSupported = Boolean(options === null || options === void 0 ? void 0 : (_options$tableOptions2 = options.tableOptions) === null || _options$tableOptions2 === void 0 ? void 0 : _options$tableOptions2.allowNestedTables);
+      const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
+      const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+      options === null || options === void 0 ? void 0 : options.isCommentEditor));
+      const isTableScalingEnabled = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
+      const isCommentEditor = options === null || options === void 0 ? void 0 : options.isCommentEditor;
+      const isChromelessEditor = options === null || options === void 0 ? void 0 : options.isChromelessEditor;
       return isNestingSupported ? [{
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported
+          isNestingSupported,
+          isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent,
+          isCommentEditor,
+          isChromelessEditor
         })
       }, {
         name: 'tableHeader',
@@ -257,7 +267,11 @@ const tablePlugin = ({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported
+          isNestingSupported,
+          isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent,
+          isCommentEditor,
+          isChromelessEditor
         })
       }, {
         name: 'tableHeader',

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -79,19 +78,11 @@ export default class NumberColumn extends Component {
         tableActive
       } = this.props;
       const isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      if (fg('platform_editor_nested_tables_number_column_fixes')) {
-        return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-          [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-          [ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
-          [ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive
-        });
-      } else {
-        return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-          [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-          [ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
-          [ClassName.HOVERED_CELL_ACTIVE]: isActive
-        });
-      }
+      return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+        [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+        [ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
+        [ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive
+      });
     });
   }
   render() {

package/dist/esm/nodeviews/TableComponent.js

@@ -88,10 +88,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, TableComponent);
     _this = _callSuper(this, TableComponent, [props]);
-    _defineProperty(_this, "state", _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    _defineProperty(_this, "state", _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       scroll: 0,
       parentWidth: undefined
-    }, ShadowEvent.SHOW_BEFORE_SHADOW, false), ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    }, ShadowEvent.SHOW_BEFORE_SHADOW, false), ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined), "windowResized", false));
     _defineProperty(_this, "holdCompleted", false);
     _defineProperty(_this, "dispatchEventName", "tableResized-".concat(generateUniqueTableId()));
     _defineProperty(_this, "handleMouseOut", function (event) {
@@ -328,6 +328,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
+    _defineProperty(_this, "handleWindowResizeNew", function () {
+      // Set resizing to true immediately
+      if (!_this.state.windowResized) {
+        _this.setState({
+          windowResized: true
+        });
+      }
+    });
     _defineProperty(_this, "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
         getPos = _this$props6.getPos,
@@ -349,11 +359,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
       return getLayoutSize(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
+    _defineProperty(_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 (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;
+    });
     _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));
+    _defineProperty(_this, "handleWindowResizeNewDebounced", rafSchedule(_this.handleWindowResizeNew));
     _defineProperty(_this, "updateShadowStateDebounced", rafSchedule(_this.updateShadowState));
     var _options = props.options,
       _containerWidth = props.containerWidth,
@@ -459,11 +487,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 (!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) {
@@ -515,6 +545,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 = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -562,11 +594,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
@@ -656,22 +693,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 && 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 || 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 = 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 || 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 = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             // When numbered column enabled, we need to subtract the width of the numbered column
@@ -682,16 +729,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;
@@ -740,8 +787,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,
@@ -771,18 +818,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 (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+        shouldHandleColgroupUpdates = true;
+      }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
         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) {
@@ -872,7 +922,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,
@@ -934,7 +984,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
@@ -956,7 +1006,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,
@@ -989,15 +1039,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNested = 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.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_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(selection !== null && selection !== void 0 ? selection : view.state.selection)), ClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
+        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection)), ClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
         editorView: view,
         getPos: getPos,
         node: node
@@ -1011,6 +1061,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,