@atlaskit/editor-plugin-table 15.2.0 → 15.2.2

package/dist/es2019/nodeviews/TableContainer.js

@@ -6,8 +6,6 @@ import { 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -79,8 +77,8 @@ const AlignmentTableContainer = ({
   }, [alignment]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "table-alignment-container",
-    "data-ssr-placeholder": expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? `table-${node.attrs.localId}` : undefined,
-    "data-ssr-placeholder-replace": expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? `table-${node.attrs.localId}` : undefined
+    "data-ssr-placeholder": `table-${node.attrs.localId}`,
+    "data-ssr-placeholder-replace": `table-${node.attrs.localId}`
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: style
@@ -97,8 +95,8 @@ const AlignmentTableContainerWrapper = ({
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "table-alignment-container",
-      "data-ssr-placeholder": expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? `table-${node.attrs.localId}` : undefined,
-      "data-ssr-placeholder-replace": expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? `table-${node.attrs.localId}` : undefined,
+      "data-ssr-placeholder": `table-${node.attrs.localId}`,
+      "data-ssr-placeholder-replace": `table-${node.attrs.localId}`,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         display: 'flex',
@@ -123,7 +121,7 @@ const getPadding = containerWidth => {
     exposure: true
   }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
-const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
+export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
   node,
@@ -140,8 +138,10 @@ const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
   isTableWithFixedColumnWidthsOptionEnabled,
   isTableAlignmentEnabled,
   shouldUseIncreasedScalingPercent,
-  isCommentEditor
+  isCommentEditor,
+  isChromelessEditor
 }) => {
+  const tableWidth = getTableContainerWidth(node);
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
@@ -203,185 +203,6 @@ const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
-  const tableWidth = getTableContainerWidth(node);
-  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;
-  }
-  // Fix for HOT-119925: Ensure table width is properly constrained and responsive
-  // For wide tables, ensure they don't exceed container width and can be scrolled
-  const calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
-
-  // Ensure minimum width for usability while respecting container constraints
-  const width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
-  if (!isResizing) {
-    tableWidthRef.current = width;
-  }
-  const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
-  const tableResizerProps = {
-    width,
-    maxWidth: maxResizerWidth,
-    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: {
-      width: tableWidthRef.current,
-      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
-  }, /*#__PURE__*/React.createElement(TableResizer, _extends({}, tableResizerProps, {
-    disabled: isLivePageViewMode
-  }), /*#__PURE__*/React.createElement(InnerContainer, {
-    className: className,
-    node: node
-  }, children))));
-});
-const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
-  children,
-  className,
-  node,
-  containerWidth,
-  lineLength,
-  editorView,
-  getPos,
-  tableRef,
-  isResizing,
-  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 {
-    tableState,
-    editorViewModeState
-  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector);
-  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;
   const {
     width,
@@ -512,7 +333,6 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
     node: node
   }, children))));
 });
-export const ResizableTableContainer = componentWithCondition(() => expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true), ResizableTableContainerNext, ResizableTableContainerLegacy);
 export const TableContainer = ({
   children,
   node,
@@ -537,7 +357,6 @@ export const TableContainer = ({
   isCommentEditor,
   isChromelessEditor
 }) => {
-  var _node$attrs$width;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -571,7 +390,7 @@ export const TableContainer = ({
     isDragAndDropEnabled
   } = getPluginState(editorView.state);
   const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
-  const resizableTableWidth = expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, 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%'})`;
+  const resizableTableWidth = isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/nodeviews/TableResizer.js

@@ -414,15 +414,8 @@ export const TableResizer = ({
   }, [editorView, getPos, node, isCommentEditor, widthToWidest, isToolbarAIFCEnabled, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
-    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;
-      }
+    if (newWidth < resizerMinWidth) {
+      return;
     }
     handleResizeStop({
       width: width,
@@ -433,7 +426,7 @@ export const TableResizer = ({
       width: step,
       height: 0
     });
-  }, [width, handleResizeStop, maxWidth, resizerMinWidth]);
+  }, [width, handleResizeStop, resizerMinWidth]);
   const handleEscape = useCallback(() => {
     editorView === null || editorView === void 0 ? void 0 : editorView.focus();
   }, [editorView]);

package/dist/es2019/nodeviews/table.js

@@ -6,7 +6,6 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -121,7 +120,7 @@ export default class TableView extends ReactNodeView {
       if (this.view.state.selection.visible) {
         selectionBookmark = this.view.state.selection.getBookmark();
       }
-      if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+      if (this.dom) {
         this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${this.node.attrs.localId}`);
         this.dom.setAttribute('data-ssr-placeholder-replace', `table-nodeview-${this.node.attrs.localId}`);
       }

package/dist/es2019/nodeviews/toDOM.js

@@ -1,10 +1,8 @@
 import kebabCase from 'lodash/kebabCase';
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { generateColgroup, generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
+import { 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';
@@ -13,19 +11,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
   return {
     ...tableNode,
     toDOM: node => {
-      var _node$attrs$width;
-      const gutterPadding = () => {
-        if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
-          exposure: true
-        })) {
-          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
-        } else {
-          return `${akEditorGutterPaddingDynamic() * 2}px`;
-        }
-      };
       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,
@@ -33,22 +20,16 @@ export const tableNodeSpecWithFixedToDOM = config => {
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
         'data-table-width': node.attrs.width,
-        ...(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && {
-          'data-ssr-placeholder': `table-${node.attrs.localId}`,
-          'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
-        })
+        'data-ssr-placeholder': `table-${node.attrs.localId}`,
+        'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
       };
 
       // 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%'})`;
+      const resizableTableWidth = isFullPageEditor ? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
       let colgroup = '';
       if (config.allowColumnResizing) {
-        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)];
-        }
+        colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
       }
 
       // For Chromeless editor, and nested tables in full page editor
@@ -97,7 +78,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
         'data-testid': 'sticky-sentinel-bottom'
       }]];
       const tableContainerDiv = expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
-      if (!config.tableResizingEnabled || expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested) {
+      if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',
           'data-prosemirror-initial-toDOM-render': 'true',
@@ -114,7 +95,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
         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})`
+          width: `var(--ak-editor-table-width)`
         })
       }, ['div', {
         class: 'resizer-item display-handle',
@@ -125,8 +106,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
           '--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
           '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
-          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})`
+          maxWidth: getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
+          width: getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor)
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { insideTable, isSSR } from '@atlaskit/editor-common/core-utils';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
@@ -7,7 +7,6 @@ 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,36 +51,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     return editorView.state;
   };
   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()) {
-      return undefined;
-    }
     return {
       table: tableView({
         portalProviderAPI,

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

@@ -1,7 +1,6 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getSelectedTableInfo } from '../../utils/analytics';
 import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
@@ -80,7 +79,7 @@ export const getResizeState = ({
 
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled, scalePercent) => {
-  const cols = expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col') : tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
+  const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col');
   const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
       updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.

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

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -96,7 +95,7 @@ export default class NumberColumn extends Component {
       updateCellHoverLocation
     } = this.props;
     const rowHeights = getRowHeights(tableRef);
-    if (isSSR() && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+    if (isSSR()) {
       return /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.NUMBERED_COLUMN,
@@ -122,9 +121,7 @@ export default class NumberColumn extends Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        ...(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) ? {
-          visibility: 'visible'
-        } : {})
+        visibility: 'visible'
       },
       contentEditable: false
     }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ?

package/dist/es2019/ui/common-styles.js

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
-import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
@@ -849,9 +849,10 @@ export const baseTableStyles = props => {
 		box-sizing: border-box;
 		margin-top: -1px;
 		padding-bottom: 2px;
-		padding: 10px 2px;
+		padding: ${expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(10) : `10px`}
+			2px;
 		text-align: center;
-		font-size: ${relativeFontSizeToBase16(14)};
+		font-size: ${expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(14) : relativeFontSizeToBase16(14)};
 		background-color: ${tableHeaderCellBackgroundColor};
 		color: ${tableTextColor};
 		border-color: ${tableBorderColor};

package/dist/esm/nodeviews/TableComponentLegacy.js

@@ -357,7 +357,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
         isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
       var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
-      if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && isFullPageEditor) {
+      if (isFullPageEditor) {
         return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
       }
       return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
@@ -441,10 +441,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         });
-        if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-          window.addEventListener('resize', this.handleWindowResizeNewDebounced);
-        }
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
       }
     }
   }, {
@@ -459,9 +457,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowTableResizing = _this$props7.allowTableResizing,
         eventDispatcher = _this$props7.eventDispatcher,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
-        getNode = _this$props7.getNode,
-        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+        getNode = _this$props7.getNode;
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -474,17 +470,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-      if (!expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-          this.handleColgroupUpdates(true);
-        }
-        if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
-          this.handleColgroupUpdates(true);
-        }
-      }
       if (this.wrapper) {
         this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
           var _iterator2 = _createForOfIteratorHelper(entries),
@@ -589,10 +574,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
-      }
+
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -682,7 +666,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerLineLength = containerWidth.lineLength;
       var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
       var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
       if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
         var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
         var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
@@ -701,9 +685,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
           isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
         });
-        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-          _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
         var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
@@ -787,9 +771,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var table = findTable(view.state.selection);
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
       if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -800,7 +784,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+      if (this.state.windowResized) {
         shouldHandleColgroupUpdates = true;
       }
       if (shouldHandleColgroupUpdates) {
@@ -1015,9 +999,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
       var topOffset = 0;
       var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
-      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag8 === void 0 ? false : _getEditorFeatureFlag8;
+      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766