@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

package/dist/esm/nodeviews/TableContainer.js

@@ -3,14 +3,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
+import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
 import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
 import { TableCssClassName as ClassName } from '../types';
 import { getAlignmentStyle } from './table-container-styles';
@@ -152,7 +155,7 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
 var getPadding = function getPadding(containerWidth) {
   return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
-export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
+var ResizableTableContainerLegacy = /*#__PURE__*/React.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
     node = _ref4.node,
@@ -346,28 +349,283 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     node: node
   }, children)) : null));
 });
-export var TableContainer = function TableContainer(_ref5) {
+var ResizableTableContainerNext = /*#__PURE__*/React.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 = getTableContainerWidth(node);
+  var containerRef = useRef(null);
+  var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = useState(tableWidth),
+    _useState6 = _slicedToArray(_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 = 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 = useCallback(function () {
+    setIsResizing(true);
+  }, []);
+  var onResizeStop = useCallback(function () {
+    setIsResizing(false);
+  }, []);
+  var updateWidth = 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 = 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 = 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 = 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 (fg('platform_editor_table_fw_numcol_overflow_fix')) {
+      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+      }
+    }
+  } else if (isCommentEditor) {
+    responsiveContainerWidth = containerWidth - 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, 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 = 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 = useMemo(function () {
+    return getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled);
+  }, [node, isTableScalingEnabled]);
+
+  // CSS Solution for table resizer max width
+  var tableResizerMaxWidth = React.useMemo(function () {
+    var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
+    var nonResizingMaxWidth = isFullPageAppearance ? 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
+  useEffect(function () {
+    var _containerRef$current5;
+    if (!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.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
+  }, /*#__PURE__*/React.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: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, fg('platform_editor_live_page_prevent_table_recreation') ? null : isLivePageViewMode ? /*#__PURE__*/React.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.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)), fg('platform_editor_live_page_prevent_table_recreation') ?
+  /*#__PURE__*/
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  React.createElement(TableResizer, _extends({}, tableResizerProps, {
+    disabled: isLivePageViewMode
+  }), /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)) : null));
+});
+export var ResizableTableContainer = componentWithCondition(function () {
+  return expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true);
+}, ResizableTableContainerNext, ResizableTableContainerLegacy);
+export var 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.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -387,13 +645,15 @@ export var 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 = getPluginState(editorView.state),

package/dist/esm/nodeviews/TableResizer.js

@@ -397,8 +397,15 @@ export var TableResizer = function TableResizer(_ref) {
   }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
-    if (newWidth > maxWidth || newWidth < resizerMinWidth) {
-      return;
+    if (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/esm/nodeviews/table.js

@@ -82,10 +82,17 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return _createClass(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
+      var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
+      var isNested = isTableNested(this.view.state, this.getPos());
       var tableDOMStructure = 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 = DOMSerializer.renderSpec(document, tableDOMStructure);
       if (rendered.dom) {
@@ -403,6 +410,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
     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,
@@ -420,7 +429,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
       isCommentEditor: isCommentEditor,
-      isChromelessEditor: isChromelessEditor
+      isChromelessEditor: isChromelessEditor,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/esm/nodeviews/toDOM.js

@@ -8,13 +8,15 @@ import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
+import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
 import { getAlignmentStyle } from './table-container-styles';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
+      var _node$attrs$width;
       var gutterPadding = function gutterPadding() {
         if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
           return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
@@ -29,6 +31,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
       }).join(';');
       var tableMinWidth = 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,
@@ -36,10 +40,20 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         '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 = expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? isFullPageEditor ? 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(_toConsumableArray(generateColgroup(node)));
+        if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+          colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
+        } else {
+          colgroup = ['colgroup', {}].concat(_toConsumableArray(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,
@@ -66,31 +80,33 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }]];
-      if (!config.tableResizingEnabled) {
+      if (!config.tableResizingEnabled || 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: 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: 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: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': "".concat(gutterPadding()),
           '--ak-editor-table-max-width': "".concat(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: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
+          width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor) : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -10,6 +10,7 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { tableCellView, tableHeaderView, tableRowView, tableView } from '../nodeviews/table-node-views';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { TableCssClassName as ClassName } from '../types';
@@ -52,30 +53,63 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     }
     return editorView.state;
   };
-  var nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: tableView({
-      portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      getEditorContainerWidth: getEditorContainerWidth,
-      getEditorFeatureFlags: getEditorFeatureFlags,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      pluginInjectionApi: pluginInjectionApi,
-      isCommentEditor: isCommentEditor,
-      isChromelessEditor: isChromelessEditor
-    }),
-    tableRow: tableRowView({
-      eventDispatcher: eventDispatcher,
-      pluginInjectionApi: pluginInjectionApi
-    }),
-    tableCell: tableCellView({
-      eventDispatcher: eventDispatcher,
-      pluginInjectionApi: pluginInjectionApi
-    }),
-    tableHeader: 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 (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+      return {
+        table: tableView({
+          portalProviderAPI: portalProviderAPI,
+          eventDispatcher: eventDispatcher,
+          getEditorContainerWidth: getEditorContainerWidth,
+          getEditorFeatureFlags: getEditorFeatureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          pluginInjectionApi: pluginInjectionApi,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
+        }),
+        tableRow: tableRowView({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        }),
+        tableCell: tableCellView({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        }),
+        tableHeader: tableHeaderView({
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
+        })
+      };
+    }
+    if (isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')) {
+      return undefined;
+    }
+    return {
+      table: tableView({
+        portalProviderAPI: portalProviderAPI,
+        eventDispatcher: eventDispatcher,
+        getEditorContainerWidth: getEditorContainerWidth,
+        getEditorFeatureFlags: getEditorFeatureFlags,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi,
+        isCommentEditor: isCommentEditor,
+        isChromelessEditor: isChromelessEditor
+      }),
+      tableRow: tableRowView({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      }),
+      tableCell: tableCellView({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      }),
+      tableHeader: tableHeaderView({
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi
+      })
+    };
   };
+  var nodeViews = getNodeView();
   return new SafePlugin({
     state: state,
     key: pluginKey,