@atlaskit/editor-plugin-table 12.1.14 → 12.2.0

package/dist/cjs/pm-plugins/main.js

@@ -15,6 +15,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tableNodeViews = require("../nodeviews/table-node-views");
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _types = require("../types");
@@ -59,29 +60,63 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     }
     return editorView.state;
   };
-  var nodeViews = (0, _coreUtils.isSSR)() && (0, _platformFeatureFlags.fg)('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: (0, _tableNodeViews.tableView)({
-      portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      getEditorContainerWidth: getEditorContainerWidth,
-      getEditorFeatureFlags: getEditorFeatureFlags,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      pluginInjectionApi: pluginInjectionApi,
-      isCommentEditor: isCommentEditor,
-      isChromelessEditor: isChromelessEditor
-    }),
-    tableRow: (0, _tableNodeViews.tableRowView)({
-      eventDispatcher: eventDispatcher
-    }),
-    tableCell: (0, _tableNodeViews.tableCellView)({
-      eventDispatcher: eventDispatcher,
-      pluginInjectionApi: pluginInjectionApi
-    }),
-    tableHeader: (0, _tableNodeViews.tableHeaderView)({
-      eventDispatcher: eventDispatcher,
-      pluginInjectionApi: pluginInjectionApi
-    })
+  var getNodeView = function getNodeView() {
+    // Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
+    if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+      return {
+        table: (0, _tableNodeViews.tableView)({
+          portalProviderAPI: portalProviderAPI,
+          eventDispatcher: eventDispatcher,
+          getEditorContainerWidth: getEditorContainerWidth,
+          getEditorFeatureFlags: getEditorFeatureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          pluginInjectionApi: pluginInjectionApi,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
+        }),
+        tableRow: (0, _tableNodeViews.tableRowView)({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        }),
+        tableCell: (0, _tableNodeViews.tableCellView)({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        }),
+        tableHeader: (0, _tableNodeViews.tableHeaderView)({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        })
+      };
+    }
+    if ((0, _coreUtils.isSSR)() && (0, _platformFeatureFlags.fg)('platform_editor_table_fallback_to_dom_on_ssr')) {
+      return undefined;
+    }
+    return {
+      table: (0, _tableNodeViews.tableView)({
+        portalProviderAPI: portalProviderAPI,
+        eventDispatcher: eventDispatcher,
+        getEditorContainerWidth: getEditorContainerWidth,
+        getEditorFeatureFlags: getEditorFeatureFlags,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi,
+        isCommentEditor: isCommentEditor,
+        isChromelessEditor: isChromelessEditor
+      }),
+      tableRow: (0, _tableNodeViews.tableRowView)({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      }),
+      tableCell: (0, _tableNodeViews.tableCellView)({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      }),
+      tableHeader: (0, _tableNodeViews.tableHeaderView)({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      })
+    };
   };
+  var nodeViews = getNodeView();
   return new _safePlugin.SafePlugin({
     state: state,
     key: _pluginKey.pluginKey,

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

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroup = void 0;
+exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroupFromNode = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _consts = require("./consts");
 var _misc = require("./misc");
@@ -21,6 +22,75 @@ var _misc = require("./misc");
 var getColWidthFix = exports.getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
   return colwidth - 1 / tableColumnCount;
 };
+var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, hasTableBeenResized) {
+  var maxScalingPercent = shouldUseIncreasedScalingPercent ? _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : _consts.MAX_SCALING_PERCENT;
+  var maxScaledRatio = 1 - maxScalingPercent;
+  var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // for nested tables, or chromeless editor, which used non resizable table container
+  if (isNested || isChromelessEditor) {
+    if (hasTableBeenResized) {
+      return "width: max(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)");
+    }
+    return "width: ".concat(_styles.tableCellMinWidth, "px)");
+  }
+  if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
+    var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
+    return "width: max(calc(".concat(fixedColWidth, "px * ").concat(maxScaledRatio, "), calc(").concat(fixedColWidth, " * ").concat(scaledPercent, "), ").concat(_styles.tableCellMinWidth, "px)");
+  }
+  // table resized to full-width in comment editor
+  // it doesn't have a width attribute, and cols has been resized
+  if (hasTableBeenResized) {
+    var _scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
+    return "width: max(calc(".concat(fixedColWidth, " * ").concat(_scaledPercent, "), ").concat(_styles.tableCellMinWidth, "px)");
+  }
+  return "width: ".concat(_styles.tableCellMinWidth, "px");
+};
+var generateColgroupFromNode = exports.generateColgroupFromNode = function generateColgroupFromNode(table, isCommentEditor, isChromelessEditor, isNested, isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
+  var cols = [];
+  var map = _tableMap.TableMap.get(table);
+  var isTableHasWidth = !!table.attrs.width;
+  var isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
+  var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  table.content.firstChild.content.forEach(function (cell) {
+    var colspan = cell.attrs.colspan || 1;
+    // if the table has been resized
+    if (Array.isArray(cell.attrs.colwidth)) {
+      cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+        // existing logic for calculating the width of the column
+        var fixedColWidth = getColWidthFix(width, map.width);
+        var tableWidth = isFullPageEditor || !isFullPageEditor && isTableHasWidth ? (0, _misc.getTableContainerElementWidth)(table) : (0, _utils.calcTableColumnWidths)(table).reduce(function (sum, width) {
+          return 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(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)")
+          }]);
+        }
+      });
+    } else {
+      // columns has not been resized, so distribute the width evenly
+      cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
+        length: colspan
+      }, function (_) {
+        var tableWidth = (0, _misc.getTableContainerElementWidth)(table);
+        var columnWidth = tableWidth / map.width || 0;
+        var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+        return ['col', {
+          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+        }];
+      })));
+    }
+  });
+  return cols;
+};
 var generateColgroup = exports.generateColgroup = function generateColgroup(table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
   var cols = [];
   var map = _tableMap.TableMap.get(table);
@@ -42,6 +112,7 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
           scalePercent = (0, _misc.getTableScalingPercent)(table, tableRef, shouldUseIncreasedScalingPercent);
         }
         cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          // existing logic for calculating the width of the column
           var fixedColWidth = getColWidthFix(width, map.width);
           var scaledWidth = fixedColWidth * scalePercent;
           var finalWidth = Math.max(scaledWidth, _styles.tableCellMinWidth);

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.currentColWidth = currentColWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = exports.getStaticTableScalingPercent = exports.getScalingPercentForTableWithoutWidth = void 0;
+exports.getTableScalingPercent = exports.getTableResizerItemWidthInCSS = exports.getTableResizerItemWidth = exports.getTableResizerContainerMaxWidthInCSS = exports.getTableResizerContainerForFullPageWidthInCSS = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = exports.getStaticTableScalingPercent = exports.getScalingPercentForTableWithoutWidth = void 0;
 exports.pointsAtCell = pointsAtCell;
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -93,6 +93,75 @@ var getTableElementWidth = exports.getTableElementWidth = function getTableEleme
 var getTableContainerElementWidth = exports.getTableContainerElementWidth = function getTableContainerElementWidth(table) {
   return (0, _nodeWidth.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
+ */
+var getTableResizerContainerMaxWidthInCSS = exports.getTableResizerContainerMaxWidthInCSS = function getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled) {
+  var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(_consts.TABLE_MAX_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(_consts.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.
+ */
+var getTableResizerItemWidth = exports.getTableResizerItemWidth = function getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor) {
+  var tableWidthAttribute = (0, _nodeWidth.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.
+ */
+var getTableResizerItemWidthInCSS = exports.getTableResizerItemWidthInCSS = function getTableResizerItemWidthInCSS(node, isCommentEditor, isChromelessEditor) {
+  var tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
+  return tableWidthAttribute ? "".concat(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.
+ */
+var getTableResizerContainerForFullPageWidthInCSS = exports.getTableResizerContainerForFullPageWidthInCSS = function getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) {
+  var tableWidth = getTableContainerElementWidth(node);
+  // for full page appearance
+  if (isTableScalingEnabled) {
+    return "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(tableWidth, "px)");
+  }
+  return "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(tableWidth, "px)");
+};
 var getTableScalingPercent = exports.getTableScalingPercent = function getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent) {
   var _tableRef$parentEleme;
   var maxScalingPercent = shouldUseIncreasedScalingPercent ? _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : _consts.MAX_SCALING_PERCENT;

package/dist/cjs/tablePlugin.js

@@ -240,18 +240,28 @@ var tablePlugin = function tablePlugin(_ref) {
       } : (0, _insert.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 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
-      var _options$tableOptions2;
+      var _options$tableOptions2, _options$getEditorFea3;
       var _pluginConfig = (0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions),
         allowColumnResizing = _pluginConfig.allowColumnResizing;
       // TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
       var isNestingSupported = Boolean(options === null || options === void 0 || (_options$tableOptions2 = options.tableOptions) === null || _options$tableOptions2 === void 0 ? void 0 : _options$tableOptions2.allowNestedTables);
+      var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
+      var 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));
+      var isTableScalingEnabled = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
+      var isCommentEditor = options === null || options === void 0 ? void 0 : options.isCommentEditor;
+      var isChromelessEditor = options === null || options === void 0 ? void 0 : options.isChromelessEditor;
       return isNestingSupported ? [{
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported: isNestingSupported
+          isNestingSupported: isNestingSupported,
+          isTableScalingEnabled: isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         })
       }, {
         name: 'tableHeader',
@@ -268,7 +278,11 @@ var tablePlugin = function tablePlugin(_ref) {
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported: isNestingSupported
+          isNestingSupported: isNestingSupported,
+          isTableScalingEnabled: isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         })
       }, {
         name: 'tableHeader',

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

@@ -13,10 +13,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
@@ -94,11 +93,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         isResizing = _this$props4.isResizing,
         tableActive = _this$props4.tableActive;
       var isActive = (0, _utils.isRowSelected)(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_number_column_fixes')) {
-        return (0, _classnames3.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableActive && isActive && isInDanger), _types.TableCssClassName.HOVERED_CELL_ACTIVE, tableActive && isActive));
-      } else {
-        return (0, _classnames3.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), _types.TableCssClassName.HOVERED_CELL_ACTIVE, isActive));
-      }
+      return (0, _classnames2.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableActive && isActive && isInDanger), _types.TableCssClassName.HOVERED_CELL_ACTIVE, tableActive && isActive));
     });
     return _this;
   }

package/dist/es2019/nodeviews/TableComponent.js

@@ -78,7 +78,8 @@ class TableComponent extends React.Component {
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
       [ShadowEvent.SHOW_AFTER_SHADOW]: false,
       tableWrapperWidth: undefined,
-      tableWrapperHeight: undefined
+      tableWrapperHeight: undefined,
+      windowResized: false
     });
     _defineProperty(this, "holdCompleted", false);
     _defineProperty(this, "dispatchEventName", `tableResized-${generateUniqueTableId()}`);
@@ -330,6 +331,16 @@ class TableComponent extends 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", () => {
+      // Set resizing to true immediately
+      if (!this.state.windowResized) {
+        this.setState({
+          windowResized: true
+        });
+      }
+    });
     _defineProperty(this, "getParentNodeWidth", () => {
       const {
         getPos,
@@ -352,11 +363,31 @@ class TableComponent extends React.Component {
       });
     });
     _defineProperty(this, "tableNodeLayoutSize", (node, containerWidth, options) => getLayoutSize(node.attrs.layout, containerWidth || this.props.containerWidth.width, options || this.props.options || {}));
+    _defineProperty(this, "shouldUpdateColgroup", params => {
+      var _this$props$options, _this$props$options2;
+      const {
+        isWindowResized,
+        isWidthChanged,
+        isTableWidthChanged,
+        isColumnsDistributed,
+        isTableResizedFullWidth,
+        isTableDisplayModeChanged,
+        isNumberColumnChanged,
+        isNumberOfColumnsChanged,
+        isFullWidthModeAndLineLengthChanged
+      } = params;
+      const 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));
     const {
       options: _options,
@@ -445,11 +476,13 @@ class TableComponent extends React.Component {
     const {
       tableWithFixedColumnWidthsOption = false
     } = getEditorFeatureFlags();
-    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(entries => {
@@ -492,6 +525,8 @@ class TableComponent extends 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();
     }
     const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -538,11 +573,16 @@ class TableComponent extends 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
@@ -629,22 +669,32 @@ class TableComponent extends React.Component {
     } = 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;
+    const 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;
       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 || isFullWidthModeAndLineLengthChanged;
+      const shouldUpdateColgroup = this.shouldUpdateColgroup({
+        isWindowResized: this.state.windowResized,
+        isWidthChanged,
+        isTableWidthChanged,
+        isColumnsDistributed,
+        isTableResizedFullWidth,
+        isTableDisplayModeChanged,
+        isNumberColumnChanged,
+        isNumberOfColumnsChanged,
+        isFullWidthModeAndLineLengthChanged
+      });
       const {
         tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags();
-      const isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-      const 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);
+      const isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
+      const 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;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           // When numbered column enabled, we need to subtract the width of the numbered column
@@ -655,25 +705,25 @@ class TableComponent extends React.Component {
           domAtPos: view.domAtPos.bind(view),
           isTableScalingEnabled: true,
           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)
         });
         let 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;
         }
         let scalePercent = 1;
         requestAnimationFrame(() => {
-          var _this$props$options8, _this$props$options9;
+          var _this$props$options0, _this$props$options1;
           // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
           // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
           // inside of getTableScalingPercent returns 0.
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
+          if (!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor) || (_this$props$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && tableNode.attrs.width) {
             scalePercent = getTableScalingPercent(tableNode,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -711,7 +761,7 @@ class TableComponent extends React.Component {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   componentDidUpdate(_, prevState) {
-    var _this$props$options0, _this$props$options1, _this$wrapper2;
+    var _this$props$options10, _this$props$options11, _this$wrapper2;
     const {
       view,
       getNode,
@@ -743,18 +793,21 @@ class TableComponent extends React.Component {
       shouldHandleColgroupUpdates = true;
     }
     const isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor);
+    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.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$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
+    if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
       this.removeInlineTableWidth();
     }
     if ((_this$wrapper2 = this.wrapper) !== null && _this$wrapper2 !== void 0 && _this$wrapper2.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -844,7 +897,7 @@ class TableComponent extends React.Component {
     }
   }
   render() {
-    var _this$props$options10;
+    var _this$props$options12;
     const {
       view,
       getNode,
@@ -909,7 +962,7 @@ class TableComponent extends 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
@@ -931,7 +984,7 @@ class TableComponent extends 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,
@@ -962,17 +1015,17 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
     const topOffset = 0;
-    const topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
+    const topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
     const {
       tableWithFixedColumnWidthsOption = false
     } = getEditorFeatureFlags();
-    const shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
+    const shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.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, {
         [ClassName.WITH_CONTROLS]: allowControls && tableActive,
-        [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
+        [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
@@ -990,6 +1043,7 @@ class TableComponent extends React.Component {
       tableWrapperHeight: this.state.tableWrapperHeight,
       isTableResizingEnabled: allowTableResizing,
       isResizing: isResizing,
+      isWindowResized: this.state.windowResized,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
       isWholeTableInDanger: isWholeTableInDanger,