@atlaskit/editor-plugin-table 12.1.14 → 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/TableRow.js

@@ -21,8 +21,23 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 // if too short it would trigger too many dom updates.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 export default class TableRow extends TableNodeView {
-  constructor(node, view, getPos, eventDispatcher) {
+  constructor(node, view, getPos, eventDispatcher, api) {
+    var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2;
     super(node, view, getPos, eventDispatcher);
+    _defineProperty(this, "cleanup", () => {
+      if (this.isStickyHeaderEnabled) {
+        this.unsubscribe();
+        this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
+        const tree = getTree(this.dom);
+        if (tree) {
+          this.makeRowHeaderNotSticky(tree.table, true);
+        }
+        this.emitOff(false);
+      }
+      if (this.tableContainerObserver) {
+        this.tableContainerObserver.disconnect();
+      }
+    });
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
     _defineProperty(this, "topPosEditorElement", 0);
@@ -63,6 +78,11 @@ export default class TableRow extends TableNodeView {
       pluginConfig
     } = getPluginState(view.state);
     this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    if (api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode$shar !== void 0 && (_api$limitedMode$shar2 = _api$limitedMode$shar.limitedModePluginKey.getState(view.state)) !== null && _api$limitedMode$shar2 !== void 0 && _api$limitedMode$shar2.documentSizeBreachesThreshold) {
+      this.isStickyHeaderEnabled = false;
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      document.addEventListener('limited-mode-activated', this.cleanup);
+    }
     const pos = this.getPos();
     this.isInNestedTable = false;
     if (pos) {
@@ -138,6 +158,9 @@ export default class TableRow extends TableNodeView {
       }
       this.emitOff(true);
     }
+
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    document.removeEventListener('limited-mode-activated', this.cleanup);
     if (this.tableContainerObserver) {
       this.tableContainerObserver.disconnect();
     }

package/dist/es2019/nodeviews/table-node-views.js

@@ -21,6 +21,6 @@ export const tableHeaderView = options => {
 };
 export const tableRowView = options => {
   return (node, view, getPos) => {
-    return new TableRow(node, view, getPos, options.eventDispatcher);
+    return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
   };
 };

package/dist/es2019/nodeviews/table.js

@@ -50,7 +50,9 @@ const handleInlineTableWidth = (table, width) => {
 };
 export default class TableView extends ReactNodeView {
   constructor(props) {
-    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
+    // @portal-render-immediately
+    true);
     _defineProperty(this, "getNode", () => {
       return this.node;
     });
@@ -62,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) {
@@ -169,6 +178,7 @@ export default class TableView extends ReactNodeView {
     }
   }
   render(props, forwardRef) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3;
     if (fg('platform_editor_table_use_shared_state_hook_fg')) {
       return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
         forwardRef: forwardRef,
@@ -214,11 +224,12 @@ export default class TableView extends ReactNodeView {
         tableWidthPluginState: tableWidthPluginKey,
         widthPlugin: fakePluginKey,
         mediaState: fakeMediaPluginKey,
-        tableDragAndDropState: tableDragAndDropPluginKey
+        tableDragAndDropState: tableDragAndDropPluginKey,
+        limitedModePlugin: (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.limitedMode) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.sharedState.currentState()) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.limitedModePluginKey
       },
       editorView: props.view,
       render: pluginStates => {
-        var _props$options;
+        var _props$options, _pluginStates$limited, _pluginStates$limited2;
         const {
           tableResizingPluginState,
           tableWidthPluginState,
@@ -287,7 +298,8 @@ export default class TableView extends ReactNodeView {
           contentDOM: forwardRef,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-          pluginInjectionApi: props.pluginInjectionApi
+          pluginInjectionApi: props.pluginInjectionApi,
+          limitedMode: (_pluginStates$limited = (_pluginStates$limited2 = pluginStates.limitedModePlugin) === null || _pluginStates$limited2 === void 0 ? void 0 : _pluginStates$limited2.documentSizeBreachesThreshold) !== null && _pluginStates$limited !== void 0 ? _pluginStates$limited : false
         });
       }
     });
@@ -369,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,
@@ -386,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,29 +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
-    }),
-    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,