@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,14 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -159,7 +162,7 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
 const getPadding = containerWidth => {
   return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
-export const ResizableTableContainer = /*#__PURE__*/React.memo(({
+const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
   children,
   className,
   node,
@@ -352,6 +355,254 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     node: node
   }, children)) : null));
 });
+const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
+  children,
+  className,
+  node,
+  containerWidth,
+  lineLength,
+  editorView,
+  getPos,
+  tableRef,
+  isResizing,
+  isWindowResized,
+  pluginInjectionApi,
+  tableWrapperHeight,
+  isWholeTableInDanger,
+  isTableScalingEnabled,
+  isTableWithFixedColumnWidthsOptionEnabled,
+  isTableAlignmentEnabled,
+  shouldUseIncreasedScalingPercent,
+  isCommentEditor,
+  isChromelessEditor
+}) => {
+  const tableWidth = getTableContainerWidth(node);
+  const containerRef = useRef(null);
+  const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const [resizing, setIsResizing] = useState(false);
+  const [tableMaxWidthForFullPageOnLoad, setTableMaxWidthForFullPageOnLoad] = useState(tableWidth);
+  const {
+    tableState,
+    editorViewModeState
+  } = useSharedState(pluginInjectionApi);
+  const isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+  const mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  const updateContainerHeight = useCallback(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
+    const 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' ? `${height + 40.5}px` : 'auto';
+    } else {
+      var _containerRef$current4;
+      const stickyHeaderHeight = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto';
+    }
+  }, []);
+  const onResizeStart = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+  const onResizeStop = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+  const updateWidth = useCallback(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 !== `${width}px`) {
+      containerRef.current.style.width = `${width}px`;
+    }
+  }, []);
+  const displayGuideline = useCallback(guidelines => {
+    var _pluginInjectionApi$g4, _pluginInjectionApi$g5, _pluginInjectionApi$g6;
+    return (_pluginInjectionApi$g4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g5 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g5 === void 0 ? void 0 : (_pluginInjectionApi$g6 = _pluginInjectionApi$g5.actions) === null || _pluginInjectionApi$g6 === void 0 ? void 0 : _pluginInjectionApi$g6.displayGuideline(editorView)({
+      guidelines
+    })) !== null && _pluginInjectionApi$g4 !== void 0 ? _pluginInjectionApi$g4 : false;
+  }, [pluginInjectionApi, editorView]);
+  const attachAnalyticsEvent = useCallback(payload => {
+    var _pluginInjectionApi$a3;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent(payload);
+  }, [pluginInjectionApi]);
+  const displayGapCursor = useCallback(toggle => {
+    var _pluginInjectionApi$c3, _pluginInjectionApi$c4, _pluginInjectionApi$s2;
+    return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
+  const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
+  let responsiveContainerWidth = 0;
+  const resizeHandleSpacing = 12;
+  const 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;
+  }
+  const width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+  }
+  const 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
+  const tableResizerItemWidth = useMemo(() => {
+    // 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
+  const tableResizerContainerWidth = useMemo(() => {
+    return getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled);
+  }, [node, isTableScalingEnabled]);
+
+  // CSS Solution for table resizer max width
+  const tableResizerMaxWidth = React.useMemo(() => {
+    const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
+    const 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(() => {
+    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
+      const computedStyle = window.getComputedStyle(containerRef.current.firstElementChild);
+      const containerWidth = computedStyle.maxWidth ? parseFloat(computedStyle.maxWidth) : tableWidth;
+      setTableMaxWidthForFullPageOnLoad(Math.min(containerWidth, tableWidth));
+    }
+  }, [tableWidthRef, tableWidth, isFullPageAppearance]);
+  const tableResizerProps = {
+    width: tableResizerItemWidth,
+    maxWidth: tableResizerMaxWidth,
+    containerWidth,
+    lineLength,
+    updateWidth,
+    editorView,
+    getPos,
+    node,
+    tableRef,
+    displayGuideline,
+    attachAnalyticsEvent,
+    displayGapCursor,
+    isTableAlignmentEnabled,
+    isFullWidthModeEnabled,
+    isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled,
+    isWholeTableInDanger,
+    shouldUseIncreasedScalingPercent,
+    pluginInjectionApi,
+    onResizeStart,
+    onResizeStop,
+    isCommentEditor
+  };
+  const 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 : `${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 const ResizableTableContainer = componentWithCondition(() => expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true), ResizableTableContainerNext, ResizableTableContainerLegacy);
 export const TableContainer = ({
   children,
   node,
@@ -366,6 +617,7 @@ export const TableContainer = ({
   isNested,
   tableWrapperHeight,
   isResizing,
+  isWindowResized,
   pluginInjectionApi,
   isWholeTableInDanger,
   isTableResizingEnabled,
@@ -395,13 +647,15 @@ export const TableContainer = ({
       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);
   }
   const {

package/dist/es2019/nodeviews/TableResizer.js

@@ -404,8 +404,15 @@ export const TableResizer = ({
   }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const 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/es2019/nodeviews/table.js

@@ -64,10 +64,17 @@ export default class TableView extends ReactNodeView {
     this.handleRef = node => this._handleTableRef(node);
   }
   getContentDOM() {
+    var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
+    const isNested = isTableNested(this.view.state, this.getPos());
     const 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
     }).toDOM(this.node);
     const rendered = DOMSerializer.renderSpec(document, tableDOMStructure);
     if (rendered.dom) {
@@ -374,6 +381,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     allowTableResizing,
     allowTableAlignment
   } = getPluginConfig(pluginConfig);
+  const isTableFixedColumnWidthsOptionEnabled = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
   return new TableView({
     node,
     view,
@@ -391,7 +400,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isTableScalingEnabled,
       // same as options.isTableScalingEnabled
       isCommentEditor,
-      isChromelessEditor
+      isChromelessEditor,
+      shouldUseIncreasedScalingPercent
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/dist/es2019/nodeviews/toDOM.js

@@ -3,14 +3,16 @@ 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 const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   return {
     ...tableNode,
     toDOM: node => {
+      var _node$attrs$width;
       const gutterPadding = () => {
         if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
           return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
@@ -20,6 +22,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
       };
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const tableMinWidth = getResizerMinWidth(node);
+      const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
+      const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -27,10 +31,20 @@ export const tableNodeSpecWithFixedToDOM = config => {
         '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
+      const 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)), ${(_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : '100%'})`;
       let colgroup = '';
       if (config.allowColumnResizing) {
-        colgroup = ['colgroup', {}, ...generateColgroup(node)];
+        if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+          colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
+        } else {
+          colgroup = ['colgroup', {}, ...generateColgroup(node)];
+        }
       }
+
+      // For Chromeless editor, and nested tables in full page editor
       const tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -57,31 +71,33 @@ export const tableNodeSpecWithFixedToDOM = config => {
         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];
       }
-      const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
       const tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: `width: min(calc(100cqw - ${gutterPadding()}), ${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 - ${gutterPadding()}), ${tableWidthAttribute})`
+        })
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': `${gutterPadding()}`,
           '--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
           '--ak-editor-table-min-width': `${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)), ${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)), ${tableWidthAttribute})`
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -7,6 +7,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';
@@ -50,30 +51,63 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     }
     return editorView.state;
   };
-  const nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: tableView({
-      portalProviderAPI,
-      eventDispatcher,
-      getEditorContainerWidth,
-      getEditorFeatureFlags,
-      dispatchAnalyticsEvent,
-      pluginInjectionApi,
-      isCommentEditor,
-      isChromelessEditor
-    }),
-    tableRow: tableRowView({
-      eventDispatcher,
-      pluginInjectionApi
-    }),
-    tableCell: tableCellView({
-      eventDispatcher,
-      pluginInjectionApi
-    }),
-    tableHeader: tableHeaderView({
-      eventDispatcher,
-      pluginInjectionApi
-    })
+  const 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,
+          eventDispatcher,
+          getEditorContainerWidth,
+          getEditorFeatureFlags,
+          dispatchAnalyticsEvent,
+          pluginInjectionApi,
+          isCommentEditor,
+          isChromelessEditor
+        }),
+        tableRow: tableRowView({
+          eventDispatcher,
+          pluginInjectionApi
+        }),
+        tableCell: tableCellView({
+          eventDispatcher,
+          pluginInjectionApi
+        }),
+        tableHeader: tableHeaderView({
+          eventDispatcher,
+          pluginInjectionApi
+        })
+      };
+    }
+    if (isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')) {
+      return undefined;
+    }
+    return {
+      table: tableView({
+        portalProviderAPI,
+        eventDispatcher,
+        getEditorContainerWidth,
+        getEditorFeatureFlags,
+        dispatchAnalyticsEvent,
+        pluginInjectionApi,
+        isCommentEditor,
+        isChromelessEditor
+      }),
+      tableRow: tableRowView({
+        eventDispatcher,
+        pluginInjectionApi
+      }),
+      tableCell: tableCellView({
+        eventDispatcher,
+        pluginInjectionApi
+      }),
+      tableHeader: tableHeaderView({
+        eventDispatcher,
+        pluginInjectionApi
+      })
+    };
   };
+  const nodeViews = getNodeView();
   return new SafePlugin({
     state: state,
     key: pluginKey,

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

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