@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

package/dist/cjs/nodeviews/TableContainer.js

@@ -11,14 +11,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
+var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _alignment = require("../pm-plugins/utils/alignment");
 var _types = require("../types");
 var _tableContainerStyles = require("./table-container-styles");
@@ -161,7 +164,7 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
 var getPadding = function getPadding(containerWidth) {
   return containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
 };
-var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
+var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
     node = _ref4.node,
@@ -355,28 +358,283 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children)) : null));
 });
-var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
+var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_ref5) {
   var children = _ref5.children,
-    node = _ref5.node,
     className = _ref5.className,
-    _ref5$containerWidth = _ref5.containerWidth,
-    editorWidth = _ref5$containerWidth.width,
-    lineLength = _ref5$containerWidth.lineLength,
+    node = _ref5.node,
+    containerWidth = _ref5.containerWidth,
+    lineLength = _ref5.lineLength,
     editorView = _ref5.editorView,
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
-    isNested = _ref5.isNested,
-    tableWrapperHeight = _ref5.tableWrapperHeight,
     isResizing = _ref5.isResizing,
+    isWindowResized = _ref5.isWindowResized,
     pluginInjectionApi = _ref5.pluginInjectionApi,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
     isWholeTableInDanger = _ref5.isWholeTableInDanger,
-    isTableResizingEnabled = _ref5.isTableResizingEnabled,
     isTableScalingEnabled = _ref5.isTableScalingEnabled,
     isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
     isCommentEditor = _ref5.isCommentEditor,
     isChromelessEditor = _ref5.isChromelessEditor;
+  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
+  var containerRef = (0, _react.useRef)(null);
+  var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    resizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = (0, _react.useState)(tableWidth),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    tableMaxWidthForFullPageOnLoad = _useState6[0],
+    setTableMaxWidthForFullPageOnLoad = _useState6[1];
+  var _useSharedState2 = useSharedState(pluginInjectionApi),
+    tableState = _useSharedState2.tableState,
+    editorViewModeState = _useSharedState2.editorViewModeState;
+  var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+  var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var updateContainerHeight = (0, _react.useCallback)(function (height) {
+    var _containerRef$current3;
+    // current StickyHeader State is not stable to be fetch.
+    // we need to update stickyHeader plugin to make sure state can be
+    //    consistently fetch and refactor below
+    var stickyHeaders = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByClassName('pm-table-sticky');
+    if (!stickyHeaders || stickyHeaders.length < 1) {
+      // when starting to drag, we need to keep the original space,
+      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+      //    1px is border width but collapse make it 0.5.
+      // -- When sticky header appear, we should add first row height but reduce
+      //    collapsed border
+      return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
+    } else {
+      var _containerRef$current4;
+      var stickyHeaderHeight = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
+    }
+  }, []);
+  var onResizeStart = (0, _react.useCallback)(function () {
+    setIsResizing(true);
+  }, []);
+  var onResizeStop = (0, _react.useCallback)(function () {
+    setIsResizing(false);
+  }, []);
+  var updateWidth = (0, _react.useCallback)(function (width) {
+    if (!containerRef.current) {
+      return;
+    }
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== "".concat(width, "px")) {
+      containerRef.current.style.width = "".concat(width, "px");
+    }
+  }, []);
+  var displayGuideline = (0, _react.useCallback)(function (guidelines) {
+    var _pluginInjectionApi$g3, _pluginInjectionApi$g4;
+    return (_pluginInjectionApi$g3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g4 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g4 === void 0 || (_pluginInjectionApi$g4 = _pluginInjectionApi$g4.actions) === null || _pluginInjectionApi$g4 === void 0 ? void 0 : _pluginInjectionApi$g4.displayGuideline(editorView)({
+      guidelines: guidelines
+    })) !== null && _pluginInjectionApi$g3 !== void 0 ? _pluginInjectionApi$g3 : false;
+  }, [pluginInjectionApi, editorView]);
+  var attachAnalyticsEvent = (0, _react.useCallback)(function (payload) {
+    var _pluginInjectionApi$a3;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent(payload);
+  }, [pluginInjectionApi]);
+  var displayGapCursor = (0, _react.useCallback)(function (toggle) {
+    var _pluginInjectionApi$c3, _pluginInjectionApi$c4, _pluginInjectionApi$s2;
+    return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
+  }, [pluginInjectionApi]);
+  var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
+  var responsiveContainerWidth = 0;
+  var resizeHandleSpacing = 12;
+  var padding = getPadding(containerWidth);
+  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+  // issues when viwport width is less than full width Editor's width. To detect avoid them
+  // we need to use lineLength to defined responsiveWidth instead of containerWidth
+  // (which does not get updated when Mac setting changes) in Full-width editor.
+  if (isFullWidthModeEnabled) {
+    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
+
+    // platform_editor_table_fw_numcol_overflow_fix:
+    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
+    // width. rAF col-sizing then runs before the number-column padding and
+    // the final shrink, so column widths are locked in wrong.
+    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
+    // for that first frame—no flash, no premature rAF.
+    //
+    // Type clean-up comes later:
+    // 1) ship this runtime guard (quick fix, no breakage);
+    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
+    if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
+      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+      }
+    }
+  } else if (isCommentEditor) {
+    responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
+  } else {
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
+    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
+    // padding left = padding right = akEditorGutterPadding = 32
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
+  }
+  var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+  }
+  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
+
+  // CSS solution for table resizer item width
+  // The `width` is used for .resizer-item in <TableResizer>, and it has to be a number
+  // So we can't use min(var(--ak-editor-table-width), ${tableWidth}px) here
+  // We get the correct width from CSS value on page load
+  // After window resize, we use the width from plugin state
+  // After table resize, the table width attribute is used
+  var tableResizerItemWidth = (0, _react.useMemo)(function () {
+    // if not on full page editor, we just rely on the width calculated from plugin state
+    // if on full page editor and after window resize, we use the width from plugin state
+    if (!isFullPageAppearance || isFullPageAppearance && isWindowResized) {
+      return width;
+    }
+    if (isResizing) {
+      return tableWidth;
+    }
+    // if on full page editor and on page load, we use the computed value from CSS
+    return Math.min(tableWidth, tableMaxWidthForFullPageOnLoad);
+  }, [isWindowResized, isResizing, isFullPageAppearance, tableMaxWidthForFullPageOnLoad, tableWidth, width]);
+
+  // CSS Solution for table resizer container width
+  var tableResizerContainerWidth = (0, _react.useMemo)(function () {
+    return (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, isTableScalingEnabled);
+  }, [node, isTableScalingEnabled]);
+
+  // CSS Solution for table resizer max width
+  var tableResizerMaxWidth = _react.default.useMemo(function () {
+    var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
+    var nonResizingMaxWidth = isFullPageAppearance ? (0, _misc.getTableResizerContainerMaxWidthInCSS)(isCommentEditor, isChromelessEditor, isTableScalingEnabled) : maxResizerWidth;
+    // isResizing is needed, otherwise we can't resize table.
+    // when not resizing, maxWidth is calculated based on the container width via CSS
+    return !isResizing ? nonResizingMaxWidth : maxResizerWidth;
+  }, [isCommentEditor, isChromelessEditor, isTableScalingEnabled, isResizing, maxResizerWidth]);
+
+  // on SSR, the width would be the default state, which is tableWidth
+  // but because we have maxWidth set to the editor container width via CSS
+  // So it would work just fine
+  (0, _react.useEffect)(function () {
+    var _containerRef$current5;
+    if (!(0, _coreUtils.isSSR)() && isFullPageAppearance && (_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.firstElementChild) {
+      // get the computed value of max-width from '.resizer-item', because it uses `cqw` unit in CSS
+      var computedStyle = window.getComputedStyle(containerRef.current.firstElementChild);
+      var _containerWidth = computedStyle.maxWidth ? parseFloat(computedStyle.maxWidth) : tableWidth;
+      setTableMaxWidthForFullPageOnLoad(Math.min(_containerWidth, tableWidth));
+    }
+  }, [tableWidthRef, tableWidth, isFullPageAppearance]);
+  var tableResizerProps = {
+    width: tableResizerItemWidth,
+    maxWidth: tableResizerMaxWidth,
+    containerWidth: containerWidth,
+    lineLength: lineLength,
+    updateWidth: updateWidth,
+    editorView: editorView,
+    getPos: getPos,
+    node: node,
+    tableRef: tableRef,
+    displayGuideline: displayGuideline,
+    attachAnalyticsEvent: attachAnalyticsEvent,
+    displayGapCursor: displayGapCursor,
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    isTableScalingEnabled: isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
+    isWholeTableInDanger: isWholeTableInDanger,
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+    pluginInjectionApi: pluginInjectionApi,
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
+    isCommentEditor: isCommentEditor
+  };
+  var isLivePageViewMode = mode === 'view';
+  return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      '--ak-editor-table-gutter-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2)',
+      '--ak-editor-table-width': isFullPageAppearance ? tableResizerContainerWidth : "".concat(tableWidthRef.current, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      width: 'var(--ak-editor-table-width)',
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
+      position: isLivePageViewMode ? 'relative' : 'unset'
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, (0, _platformFeatureFlags.fg)('platform_editor_live_page_prevent_table_recreation') ? null : isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
+    className: className,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      width: 'inherit'
+    }
+  }, children) :
+  /*#__PURE__*/
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  _react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)), (0, _platformFeatureFlags.fg)('platform_editor_live_page_prevent_table_recreation') ?
+  /*#__PURE__*/
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  _react.default.createElement(_TableResizer.TableResizer, (0, _extends2.default)({}, tableResizerProps, {
+    disabled: isLivePageViewMode
+  }), /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)) : null));
+});
+var ResizableTableContainer = exports.ResizableTableContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true);
+}, ResizableTableContainerNext, ResizableTableContainerLegacy);
+var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
+  var children = _ref6.children,
+    node = _ref6.node,
+    className = _ref6.className,
+    _ref6$containerWidth = _ref6.containerWidth,
+    editorWidth = _ref6$containerWidth.width,
+    lineLength = _ref6$containerWidth.lineLength,
+    editorView = _ref6.editorView,
+    getPos = _ref6.getPos,
+    tableRef = _ref6.tableRef,
+    isNested = _ref6.isNested,
+    tableWrapperHeight = _ref6.tableWrapperHeight,
+    isResizing = _ref6.isResizing,
+    isWindowResized = _ref6.isWindowResized,
+    pluginInjectionApi = _ref6.pluginInjectionApi,
+    isWholeTableInDanger = _ref6.isWholeTableInDanger,
+    isTableResizingEnabled = _ref6.isTableResizingEnabled,
+    isTableScalingEnabled = _ref6.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
+    isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
+    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref6.isCommentEditor,
+    isChromelessEditor = _ref6.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -396,13 +654,15 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
       tableRef: tableRef,
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
+      isWindowResized: isWindowResized,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-      isCommentEditor: isCommentEditor
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor
     }, children);
   }
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),

package/dist/cjs/nodeviews/TableResizer.js

@@ -406,8 +406,15 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
-    if (newWidth > maxWidth || newWidth < resizerMinWidth) {
-      return;
+    if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+      if (newWidth < resizerMinWidth) {
+        return;
+      }
+    } else {
+      // maxWidth when platform_editor_tables_scaling_css off is always a number
+      if (newWidth > maxWidth || newWidth < resizerMinWidth) {
+        return;
+      }
     }
     handleResizeStop({
       width: width,

package/dist/cjs/nodeviews/table.js

@@ -89,10 +89,17 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   return (0, _createClass2.default)(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
+      var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
+      var isNested = (0, _nodes.isTableNested)(this.view.state, this.getPos());
       var tableDOMStructure = (0, _toDOM.tableNodeSpecWithFixedToDOM)({
         allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
         tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
-        getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth
+        getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth,
+        isTableScalingEnabled: (_this$reactComponentP = this.reactComponentProps.options) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.isTableScalingEnabled,
+        shouldUseIncreasedScalingPercent: (_this$reactComponentP2 = this.reactComponentProps.options) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.shouldUseIncreasedScalingPercent,
+        isCommentEditor: (_this$reactComponentP3 = this.reactComponentProps.options) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.isCommentEditor,
+        isChromelessEditor: (_this$reactComponentP4 = this.reactComponentProps.options) === null || _this$reactComponentP4 === void 0 ? void 0 : _this$reactComponentP4.isChromelessEditor,
+        isNested: isNested
       }).toDOM(this.node);
       var rendered = _model.DOMSerializer.renderSpec(document, tableDOMStructure);
       if (rendered.dom) {
@@ -409,6 +416,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
     allowControls = _getPluginConfig.allowControls,
     allowTableResizing = _getPluginConfig.allowTableResizing,
     allowTableAlignment = _getPluginConfig.allowTableAlignment;
+  var isTableFixedColumnWidthsOptionEnabled = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
+  var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
   return new TableView({
     node: node,
     view: view,
@@ -426,7 +435,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
       isCommentEditor: isCommentEditor,
-      isChromelessEditor: isChromelessEditor
+      isChromelessEditor: isChromelessEditor,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/nodeviews/toDOM.js

@@ -15,6 +15,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
+var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _tableContainerStyles = require("./table-container-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -22,6 +23,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
+      var _node$attrs$width;
       var gutterPadding = function gutterPadding() {
         if ((0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
           return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
@@ -36,6 +38,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
       var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
+      var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
+      var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -43,10 +47,20 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         'data-table-local-id': node.attrs.localId,
         'data-table-width': node.attrs.width
       };
+
+      // This would be used for table scaling in colgroup CSS
+      // cqw, or px is well supported
+      var resizableTableWidth = (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))" : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : '100%', ")");
       var colgroup = '';
       if (config.allowColumnResizing) {
-        colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroup)(node)));
+        if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+          colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
+        } else {
+          colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroup)(node)));
+        }
       }
+
+      // For Chromeless editor, and nested tables in full page editor
       var tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -73,31 +87,33 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }]];
-      if (!config.tableResizingEnabled) {
+      if (!config.tableResizingEnabled || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',
           'data-prosemirror-initial-toDOM-render': 'true'
         }, tableContainerDiv];
       }
-      var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
       var tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ");")
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          '--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
+          '--ak-editor-table-width': resizableTableWidth,
+          width: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? "var(--ak-editor-table-width)" : "min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ")")
+        })
       }, ['div', {
         class: 'resizer-item display-handle',
         style: (0, _lazyNodeView.convertToInlineCss)({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': "".concat(gutterPadding()),
           '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
-          maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
+          maxWidth: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
+          width: (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) ? (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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,30 +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,
-      pluginInjectionApi: pluginInjectionApi
-    }),
-    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,