@atlaskit/editor-plugin-table 14.2.3 → 14.2.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 14.2.4
+
+### Patch Changes
+
+- [`6759639cbc48a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6759639cbc48a) -
+  Optimized table resizing in full page mode by bundling layout calculations and clean up old
+  expensive layout calculations
+
 ## 14.2.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -1069,7 +1069,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: allowTableResizing,
         isResizing: isResizing,
-        isWindowResized: this.state.windowResized,
         isTableScalingEnabled: isTableScalingEnabled,
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,

package/dist/cjs/nodeviews/TableContainer.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -336,7 +335,6 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
     isResizing = _ref5.isResizing,
-    isWindowResized = _ref5.isWindowResized,
     pluginInjectionApi = _ref5.pluginInjectionApi,
     tableWrapperHeight = _ref5.tableWrapperHeight,
     isWholeTableInDanger = _ref5.isWholeTableInDanger,
@@ -353,10 +351,6 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     resizing = _useState4[0],
     setIsResizing = _useState4[1];
-  var _useState5 = (0, _react.useState)(tableWidth),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    tableMaxWidthForFullPageOnLoad = _useState6[0],
-    setTableMaxWidthForFullPageOnLoad = _useState6[1];
   var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['table', 'editorViewMode'], selector),
     tableState = _useSharedPluginState3.tableState,
     editorViewModeState = _useSharedPluginState3.editorViewModeState;
@@ -415,74 +409,65 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
     return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
   }, [pluginInjectionApi]);
   var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
-  var responsiveContainerWidth = 0;
-  var resizeHandleSpacing = 12;
-  var padding = getPadding(containerWidth);
-  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
-  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
-  // issues when viwport width is less than full width Editor's width. To detect avoid them
-  // we need to use lineLength to defined responsiveWidth instead of containerWidth
-  // (which does not get updated when Mac setting changes) in Full-width editor.
-  if (isFullWidthModeEnabled) {
-    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
-    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
-    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
+  var _useMemo = (0, _react.useMemo)(function () {
+      var responsiveContainerWidth = 0;
+      var resizeHandleSpacing = 12;
+      var padding = getPadding(containerWidth);
+      // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+      // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+      // issues when viwport width is less than full width Editor's width. To detect avoid them
+      // we need to use lineLength to defined responsiveWidth instead of containerWidth
+      // (which does not get updated when Mac setting changes) in Full-width editor.
+      if (isFullWidthModeEnabled) {
+        // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+        // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+        // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+        responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
-    // platform_editor_table_fw_numcol_overflow_fix:
-    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
-    // width. rAF col-sizing then runs before the number-column padding and
-    // the final shrink, so column widths are locked in wrong.
-    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
-    // for that first frame—no flash, no premature rAF.
-    //
-    // Type clean-up comes later:
-    // 1) ship this runtime guard (quick fix, no breakage);
-    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
-    if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
-      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+        // platform_editor_table_fw_numcol_overflow_fix:
+        // lineLength is undefined on first paint → width: NaN → wrapper expands to page
+        // width. rAF col-sizing then runs before the number-column padding and
+        // the final shrink, so column widths are locked in wrong.
+        // With the flag ON, if the value isn’t finite we fall back to gutterWidth
+        // for that first frame—no flash, no premature rAF.
+        //
+        // Type clean-up comes later:
+        // 1) ship this runtime guard (quick fix, no breakage);
+        // 2) TODO: widen lineLength to `number|undefined` and remove this block.
+        if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
+          if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+            responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+          }
+        }
+      } else if (isCommentEditor) {
+        responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
+      } else {
+        // 76 is currently an accepted padding value considering the spacing for resizer handle
+        // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
+        // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
+        // padding left = padding right = akEditorGutterPadding = 32
+        responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
       }
-    }
-  } else if (isCommentEditor) {
-    responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
-  } else {
-    // 76 is currently an accepted padding value considering the spacing for resizer handle
-    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
-    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
-    // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
-  }
 
-  // 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
-  var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+      // 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
+      var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
 
-  // Ensure minimum width for usability while respecting container constraints
-  var width = (0, _expValEquals.expValEquals)('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
-  if (!isResizing) {
-    tableWidthRef.current = width;
-  }
-  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
-
-  // CSS solution for table resizer item width
-  // The `width` is used for .resizer-item in <TableResizer>, and it has to be a number
-  // So we can't use min(var(--ak-editor-table-width), ${tableWidth}px) here
-  // We get the correct width from CSS value on page load
-  // After window resize, we use the width from plugin state
-  // After table resize, the table width attribute is used
-  var tableResizerItemWidth = (0, _react.useMemo)(function () {
-    // if not on full page editor, we just rely on the width calculated from plugin state
-    // if on full page editor and after window resize, we use the width from plugin state
-    if (!isFullPageAppearance || isFullPageAppearance && isWindowResized) {
-      return width;
-    }
-    if (isResizing) {
-      return tableWidth;
+      // Ensure minimum width for usability while respecting container constraints
+      var width = (0, _expValEquals.expValEquals)('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
+      var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
+      return {
+        width: width,
+        maxResizerWidth: maxResizerWidth
+      };
+    }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
+    width = _useMemo.width,
+    maxResizerWidth = _useMemo.maxResizerWidth;
+  (0, _react.useEffect)(function () {
+    if (!isResizing) {
+      tableWidthRef.current = width;
     }
-    // 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]);
+  }, [width, isResizing]);
 
   // CSS Solution for table resizer container width
   var tableResizerContainerWidth = (0, _react.useMemo)(function () {
@@ -497,21 +482,11 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
     // when not resizing, maxWidth is calculated based on the container width via CSS
     return !isResizing ? nonResizingMaxWidth : maxResizerWidth;
   }, [isCommentEditor, isChromelessEditor, isTableScalingEnabled, isResizing, maxResizerWidth]);
-
-  // on SSR, the width would be the default state, which is tableWidth
-  // but because we have maxWidth set to the editor container width via CSS
-  // So it would work just fine
-  (0, _react.useEffect)(function () {
-    var _containerRef$current5;
-    if (!(0, _coreUtils.isSSR)() && isFullPageAppearance && (_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.firstElementChild) {
-      // get the computed value of max-width from '.resizer-item', because it uses `cqw` unit in CSS
-      var computedStyle = window.getComputedStyle(containerRef.current.firstElementChild);
-      var _containerWidth = computedStyle.maxWidth ? parseFloat(computedStyle.maxWidth) : tableWidth;
-      setTableMaxWidthForFullPageOnLoad(Math.min(_containerWidth, tableWidth));
-    }
-  }, [tableWidthRef, tableWidth, isFullPageAppearance]);
   var tableResizerProps = {
-    width: tableResizerItemWidth,
+    // 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 still have to use JS to calculate width
+    width: width,
     maxWidth: tableResizerMaxWidth,
     containerWidth: containerWidth,
     lineLength: lineLength,
@@ -599,7 +574,6 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     isNested = _ref6.isNested,
     tableWrapperHeight = _ref6.tableWrapperHeight,
     isResizing = _ref6.isResizing,
-    isWindowResized = _ref6.isWindowResized,
     pluginInjectionApi = _ref6.pluginInjectionApi,
     isWholeTableInDanger = _ref6.isWholeTableInDanger,
     isTableResizingEnabled = _ref6.isTableResizingEnabled,
@@ -628,7 +602,6 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
       tableRef: tableRef,
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
-      isWindowResized: isWindowResized,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,

package/dist/es2019/nodeviews/TableComponent.js

@@ -1045,7 +1045,6 @@ class TableComponent extends React.Component {
       tableWrapperHeight: this.state.tableWrapperHeight,
       isTableResizingEnabled: allowTableResizing,
       isResizing: isResizing,
-      isWindowResized: this.state.windowResized,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
       isWholeTableInDanger: isWholeTableInDanger,

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,6 @@ 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 { 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';
@@ -329,7 +328,6 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
   getPos,
   tableRef,
   isResizing,
-  isWindowResized,
   pluginInjectionApi,
   tableWrapperHeight,
   isWholeTableInDanger,
@@ -344,7 +342,6 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
-  const [tableMaxWidthForFullPageOnLoad, setTableMaxWidthForFullPageOnLoad] = useState(tableWidth);
   const {
     tableState,
     editorViewModeState
@@ -404,74 +401,66 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
     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;
+  const {
+    width,
+    maxResizerWidth
+  } = useMemo(() => {
+    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;
+      // 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;
     }
-  } 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 = expValEquals('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
-  if (!isResizing) {
-    tableWidthRef.current = width;
-  }
-  const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+    // 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);
 
-  // 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;
+    // Ensure minimum width for usability while respecting container constraints
+    const width = expValEquals('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
+    const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+    return {
+      width,
+      maxResizerWidth
+    };
+  }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
+  useEffect(() => {
+    if (!isResizing) {
+      tableWidthRef.current = width;
     }
-    // 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]);
+  }, [width, isResizing]);
 
   // CSS Solution for table resizer container width
   const tableResizerContainerWidth = useMemo(() => {
@@ -486,21 +475,11 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
     // 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,
+    // 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 still have to use JS to calculate width
+    width,
     maxWidth: tableResizerMaxWidth,
     containerWidth,
     lineLength,
@@ -587,7 +566,6 @@ export const TableContainer = ({
   isNested,
   tableWrapperHeight,
   isResizing,
-  isWindowResized,
   pluginInjectionApi,
   isWholeTableInDanger,
   isTableResizingEnabled,
@@ -617,7 +595,6 @@ export const TableContainer = ({
       tableRef: tableRef,
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
-      isWindowResized: isWindowResized,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,

package/dist/esm/nodeviews/TableComponent.js

@@ -1063,7 +1063,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: allowTableResizing,
         isResizing: isResizing,
-        isWindowResized: this.state.windowResized,
         isTableScalingEnabled: isTableScalingEnabled,
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,

package/dist/esm/nodeviews/TableContainer.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { 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';
@@ -327,7 +326,6 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
     isResizing = _ref5.isResizing,
-    isWindowResized = _ref5.isWindowResized,
     pluginInjectionApi = _ref5.pluginInjectionApi,
     tableWrapperHeight = _ref5.tableWrapperHeight,
     isWholeTableInDanger = _ref5.isWholeTableInDanger,
@@ -344,10 +342,6 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     _useState4 = _slicedToArray(_useState3, 2),
     resizing = _useState4[0],
     setIsResizing = _useState4[1];
-  var _useState5 = useState(tableWidth),
-    _useState6 = _slicedToArray(_useState5, 2),
-    tableMaxWidthForFullPageOnLoad = _useState6[0],
-    setTableMaxWidthForFullPageOnLoad = _useState6[1];
   var _useSharedPluginState3 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
     tableState = _useSharedPluginState3.tableState,
     editorViewModeState = _useSharedPluginState3.editorViewModeState;
@@ -406,74 +400,65 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
   }, [pluginInjectionApi]);
   var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
-  var responsiveContainerWidth = 0;
-  var resizeHandleSpacing = 12;
-  var padding = getPadding(containerWidth);
-  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
-  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
-  // issues when viwport width is less than full width Editor's width. To detect avoid them
-  // we need to use lineLength to defined responsiveWidth instead of containerWidth
-  // (which does not get updated when Mac setting changes) in Full-width editor.
-  if (isFullWidthModeEnabled) {
-    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
-    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
-    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
+  var _useMemo = useMemo(function () {
+      var responsiveContainerWidth = 0;
+      var resizeHandleSpacing = 12;
+      var padding = getPadding(containerWidth);
+      // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+      // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+      // issues when viwport width is less than full width Editor's width. To detect avoid them
+      // we need to use lineLength to defined responsiveWidth instead of containerWidth
+      // (which does not get updated when Mac setting changes) in Full-width editor.
+      if (isFullWidthModeEnabled) {
+        // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+        // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+        // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+        responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
-    // platform_editor_table_fw_numcol_overflow_fix:
-    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
-    // width. rAF col-sizing then runs before the number-column padding and
-    // the final shrink, so column widths are locked in wrong.
-    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
-    // for that first frame—no flash, no premature rAF.
-    //
-    // Type clean-up comes later:
-    // 1) ship this runtime guard (quick fix, no breakage);
-    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
-    if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
-      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+        // 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;
       }
-    }
-  } 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
-  var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+      // 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
+      var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
 
-  // Ensure minimum width for usability while respecting container constraints
-  var width = expValEquals('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
-  if (!isResizing) {
-    tableWidthRef.current = width;
-  }
-  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
-
-  // CSS solution for table resizer item width
-  // The `width` is used for .resizer-item in <TableResizer>, and it has to be a number
-  // So we can't use min(var(--ak-editor-table-width), ${tableWidth}px) here
-  // We get the correct width from CSS value on page load
-  // After window resize, we use the width from plugin state
-  // After table resize, the table width attribute is used
-  var tableResizerItemWidth = useMemo(function () {
-    // if not on full page editor, we just rely on the width calculated from plugin state
-    // if on full page editor and after window resize, we use the width from plugin state
-    if (!isFullPageAppearance || isFullPageAppearance && isWindowResized) {
-      return width;
-    }
-    if (isResizing) {
-      return tableWidth;
+      // Ensure minimum width for usability while respecting container constraints
+      var width = expValEquals('platform_editor_table_container_width_fix', 'isEnabled', true) ? Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300)) : calculatedWidth;
+      var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+      return {
+        width: width,
+        maxResizerWidth: maxResizerWidth
+      };
+    }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
+    width = _useMemo.width,
+    maxResizerWidth = _useMemo.maxResizerWidth;
+  useEffect(function () {
+    if (!isResizing) {
+      tableWidthRef.current = width;
     }
-    // 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]);
+  }, [width, isResizing]);
 
   // CSS Solution for table resizer container width
   var tableResizerContainerWidth = useMemo(function () {
@@ -488,21 +473,11 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     // when not resizing, maxWidth is calculated based on the container width via CSS
     return !isResizing ? nonResizingMaxWidth : maxResizerWidth;
   }, [isCommentEditor, isChromelessEditor, isTableScalingEnabled, isResizing, maxResizerWidth]);
-
-  // on SSR, the width would be the default state, which is tableWidth
-  // but because we have maxWidth set to the editor container width via CSS
-  // So it would work just fine
-  useEffect(function () {
-    var _containerRef$current5;
-    if (!isSSR() && isFullPageAppearance && (_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.firstElementChild) {
-      // get the computed value of max-width from '.resizer-item', because it uses `cqw` unit in CSS
-      var computedStyle = window.getComputedStyle(containerRef.current.firstElementChild);
-      var _containerWidth = computedStyle.maxWidth ? parseFloat(computedStyle.maxWidth) : tableWidth;
-      setTableMaxWidthForFullPageOnLoad(Math.min(_containerWidth, tableWidth));
-    }
-  }, [tableWidthRef, tableWidth, isFullPageAppearance]);
   var tableResizerProps = {
-    width: tableResizerItemWidth,
+    // 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 still have to use JS to calculate width
+    width: width,
     maxWidth: tableResizerMaxWidth,
     containerWidth: containerWidth,
     lineLength: lineLength,
@@ -590,7 +565,6 @@ export var TableContainer = function TableContainer(_ref6) {
     isNested = _ref6.isNested,
     tableWrapperHeight = _ref6.tableWrapperHeight,
     isResizing = _ref6.isResizing,
-    isWindowResized = _ref6.isWindowResized,
     pluginInjectionApi = _ref6.pluginInjectionApi,
     isWholeTableInDanger = _ref6.isWholeTableInDanger,
     isTableResizingEnabled = _ref6.isTableResizingEnabled,
@@ -619,7 +593,6 @@ export var TableContainer = function TableContainer(_ref6) {
       tableRef: tableRef,
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
-      isWindowResized: isWindowResized,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,

package/dist/types/nodeviews/TableContainer.d.ts

@@ -16,7 +16,6 @@ type ResizableTableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableWithFixedColumnWidthsOptionEnabled?: boolean;
     isWholeTableInDanger?: boolean;
-    isWindowResized?: boolean;
     lineLength: number;
     node: PMNode;
     pluginInjectionApi?: PluginInjectionAPI;
@@ -41,12 +40,11 @@ type TableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableWithFixedColumnWidthsOptionEnabled?: boolean;
     isWholeTableInDanger?: boolean;
-    isWindowResized?: boolean;
     node: PMNode;
     pluginInjectionApi?: PluginInjectionAPI;
     shouldUseIncreasedScalingPercent?: boolean;
     tableRef: HTMLTableElement;
     tableWrapperHeight?: number;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, isWindowResized, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -16,7 +16,6 @@ type ResizableTableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableWithFixedColumnWidthsOptionEnabled?: boolean;
     isWholeTableInDanger?: boolean;
-    isWindowResized?: boolean;
     lineLength: number;
     node: PMNode;
     pluginInjectionApi?: PluginInjectionAPI;
@@ -41,12 +40,11 @@ type TableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableWithFixedColumnWidthsOptionEnabled?: boolean;
     isWholeTableInDanger?: boolean;
-    isWindowResized?: boolean;
     node: PMNode;
     pluginInjectionApi?: PluginInjectionAPI;
     shouldUseIncreasedScalingPercent?: boolean;
     tableRef: HTMLTableElement;
     tableWrapperHeight?: number;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, isWindowResized, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "14.2.3",
+	"version": "14.2.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"