@atlaskit/editor-plugin-table 16.1.9 → 16.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 16.2.0
+
+### Minor Changes
+
+- [`9ee3f2262dfcf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ee3f2262dfcf) -
+  improve performance of table floating toolbar when determine the disabled state of distribute
+  column button
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.9
 
 ### Patch Changes

package/dist/cjs/ui/toolbar.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
@@ -249,14 +252,14 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
 
     // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
     // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-    if (!isLimitedModeEnabled) {
+    if (!isLimitedModeEnabled && !(0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
       var _newResizeStateWithAn, _newResizeStateWithAn2;
       newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
       wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     }
     var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
       // When optimization is enabled, calculate on-demand when clicked
-      if (isLimitedModeEnabled) {
+      if (isLimitedModeEnabled || (0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
         if (view) {
           var resizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
           if (resizeState) {
@@ -379,6 +382,27 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
 };
+
+// Memoize the expensive DOM queries (querySelector, closestElement) separately
+// Cache key is the parent DOM node reference - stays same when typing in same cell
+var getTableWrapperFromParentImpl = function getTableWrapperFromParentImpl(parent) {
+  if (!parent) {
+    return undefined;
+  }
+
+  // These are the expensive DOM operations
+  var tableRef =
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  parent.querySelector('table') || undefined;
+  if (!tableRef) {
+    return undefined;
+  }
+  return (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+};
+
+// Create memoized version ONCE - reused across all calls
+var getMemoizedTableWrapperFromParent = (0, _memoizeOne.default)(getTableWrapperFromParentImpl);
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
@@ -432,7 +456,11 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
         var editorView = getEditorView();
-        var getDomRef = function getDomRef(editorView) {
+        var getDomRef = (0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? function (editorView) {
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
+          return getMemoizedTableWrapperFromParent(parent);
+        } : function (editorView) {
           var element;
           var domAtPos = editorView.domAtPos.bind(editorView);
           var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
@@ -649,21 +677,26 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
   var isCommentEditor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var isLimitedModeEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
   var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
-  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
-  if (!selectionOrTableRect || !editorView) {
-    return [];
-  }
+  var items = [];
   var wouldChange = true; // Default to enabled - show the button.
   var newResizeStateWithAnalytics;
-
-  // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
-  // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-  if (!isLimitedModeEnabled) {
-    var _newResizeStateWithAn3, _newResizeStateWithAn4;
-    newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
-    wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
+    if (!editorView) {
+      return [];
+    }
+  } else {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+    if (!selectionOrTableRect || !editorView) {
+      return [];
+    }
+    // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
+    // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
+    if (!isLimitedModeEnabled) {
+      var _newResizeStateWithAn3, _newResizeStateWithAn4;
+      newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+      wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+    }
   }
-  var items = [];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     items.push({
       id: 'editor.table.distributeColumns',
@@ -790,6 +823,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
     var currentLayout = tableObject.node.attrs.layout;
+    var shouldDisableLayoutOption = (0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor) : isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor);
     return _objectSpread({
       id: id,
       type: 'button',
@@ -797,7 +831,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
       title: formatMessage(layoutToMessages[value]),
       selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
       onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB, _analytics.CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
-    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
+    }, shouldDisableLayoutOption && {
       disabled: value !== 'center'
     });
   });
@@ -831,11 +865,44 @@ var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons,
     return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
   });
 };
-var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
+var isLayoutOptionDisabledImpl = function isLayoutOptionDisabledImpl(selectedNode, getEditorContainerWidth, hasEditorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
   var _getEditorContainerWi = getEditorContainerWidth(),
     lineLength = _getEditorContainerWi.lineLength;
   var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
 
+  // table may be scaled, use the scale percent to calculate the table width
+  if (hasEditorView) {
+    var tableWrapperWidth = tableContainerWidth;
+    var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+
+  // If fixed-width editor, we disable 'left-alignment' when table width is 760px.
+  // tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
+  if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
+    return true;
+  }
+  return false;
+};
+var getMemoizedIsLayoutOptionDisabled = (0, _memoizeOne.default)(isLayoutOptionDisabledImpl, function (_ref7, _ref8) {
+  var _ref9 = (0, _toArray2.default)(_ref7),
+    prevNode = _ref9[0],
+    prevRest = _ref9.slice(1);
+  var _ref0 = (0, _toArray2.default)(_ref8),
+    nextNode = _ref0[0],
+    nextRest = _ref0.slice(1);
+  // Only node needs special comparison (attrs only), rest use reference equality
+  var nodeEqual = (0, _isEqual.default)(prevNode.attrs, nextNode.attrs);
+  var restEqual = prevRest.every(function (val, idx) {
+    return val === nextRest[idx];
+  });
+  return nodeEqual && restEqual;
+});
+var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
+  var _getEditorContainerWi2 = getEditorContainerWidth(),
+    lineLength = _getEditorContainerWi2.lineLength;
+  var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
+
   // table may be scaled, use the scale percent to calculate the table width
   if (editorView) {
     var tableWrapperWidth = tableContainerWidth;

package/dist/es2019/ui/toolbar.js

@@ -5,6 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DropdownMenuExtensionItems } from '@atlaskit/editor-common/floating-toolbar';
@@ -231,14 +233,14 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
 
     // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
     // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-    if (!isLimitedModeEnabled) {
+    if (!isLimitedModeEnabled && !expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
       var _newResizeStateWithAn, _newResizeStateWithAn2;
       newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
       wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     }
     const distributeColumnWidths = (state, dispatch, view) => {
       // When optimization is enabled, calculate on-demand when clicked
-      if (isLimitedModeEnabled) {
+      if (isLimitedModeEnabled || expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
         if (view) {
           const resizeState = getNewResizeStateFromSelectedColumns(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
           if (resizeState) {
@@ -362,6 +364,27 @@ const getClosestSelectionOrTableRect = state => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
+
+// Memoize the expensive DOM queries (querySelector, closestElement) separately
+// Cache key is the parent DOM node reference - stays same when typing in same cell
+const getTableWrapperFromParentImpl = parent => {
+  if (!parent) {
+    return undefined;
+  }
+
+  // These are the expensive DOM operations
+  const tableRef =
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  parent.querySelector('table') || undefined;
+  if (!tableRef) {
+    return undefined;
+  }
+  return closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
+};
+
+// Create memoized version ONCE - reused across all calls
+const getMemoizedTableWrapperFromParent = memoizeOne(getTableWrapperFromParentImpl);
 export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
@@ -410,7 +433,11 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
     const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
     const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
     const editorView = getEditorView();
-    const getDomRef = editorView => {
+    const getDomRef = expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? editorView => {
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+      return getMemoizedTableWrapperFromParent(parent);
+    } : editorView => {
       let element;
       const domAtPos = editorView.domAtPos.bind(editorView);
       const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
@@ -605,21 +632,26 @@ const getColumnSettingItems = (editorState, editorView, {
 }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false, isLimitedModeEnabled = false) => {
   var _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
-  const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
-  if (!selectionOrTableRect || !editorView) {
-    return [];
-  }
+  const items = [];
   let wouldChange = true; // Default to enabled - show the button.
   let newResizeStateWithAnalytics;
-
-  // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
-  // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-  if (!isLimitedModeEnabled) {
-    var _newResizeStateWithAn3, _newResizeStateWithAn4;
-    newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
-    wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+  if (expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
+    if (!editorView) {
+      return [];
+    }
+  } else {
+    const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+    if (!selectionOrTableRect || !editorView) {
+      return [];
+    }
+    // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
+    // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
+    if (!isLimitedModeEnabled) {
+      var _newResizeStateWithAn3, _newResizeStateWithAn4;
+      newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+      wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+    }
   }
-  const items = [];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     items.push({
       id: 'editor.table.distributeColumns',
@@ -737,6 +769,7 @@ const getAlignmentOptionsConfig = (editorState, {
       icon
     } = alignmentIcon;
     const currentLayout = tableObject.node.attrs.layout;
+    const shouldDisableLayoutOption = expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor) : isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor);
     return {
       id: id,
       type: 'button',
@@ -744,7 +777,7 @@ const getAlignmentOptionsConfig = (editorState, {
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
       onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
-      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
+      ...(shouldDisableLayoutOption && {
         disabled: value !== 'center'
       })
     };
@@ -777,6 +810,32 @@ const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
   const selectedAlignment = selectedNode.attrs.layout;
   return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
 };
+const isLayoutOptionDisabledImpl = (selectedNode, getEditorContainerWidth, hasEditorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) => {
+  const {
+    lineLength
+  } = getEditorContainerWidth();
+  let tableContainerWidth = getTableContainerWidth(selectedNode);
+
+  // table may be scaled, use the scale percent to calculate the table width
+  if (hasEditorView) {
+    const tableWrapperWidth = tableContainerWidth;
+    const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+
+  // If fixed-width editor, we disable 'left-alignment' when table width is 760px.
+  // tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
+  if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
+    return true;
+  }
+  return false;
+};
+const getMemoizedIsLayoutOptionDisabled = memoizeOne(isLayoutOptionDisabledImpl, ([prevNode, ...prevRest], [nextNode, ...nextRest]) => {
+  // Only node needs special comparison (attrs only), rest use reference equality
+  const nodeEqual = isEqual(prevNode.attrs, nextNode.attrs);
+  const restEqual = prevRest.every((val, idx) => val === nextRest[idx]);
+  return nodeEqual && restEqual;
+});
 const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) => {
   const {
     lineLength

package/dist/esm/ui/toolbar.js

@@ -1,3 +1,4 @@
+import _toArray from "@babel/runtime/helpers/toArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -9,6 +10,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DropdownMenuExtensionItems } from '@atlaskit/editor-common/floating-toolbar';
@@ -242,14 +245,14 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
 
     // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
     // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-    if (!isLimitedModeEnabled) {
+    if (!isLimitedModeEnabled && !expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
       var _newResizeStateWithAn, _newResizeStateWithAn2;
       newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
       wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     }
     var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
       // When optimization is enabled, calculate on-demand when clicked
-      if (isLimitedModeEnabled) {
+      if (isLimitedModeEnabled || expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
         if (view) {
           var resizeState = getNewResizeStateFromSelectedColumns(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
           if (resizeState) {
@@ -372,6 +375,27 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
+
+// Memoize the expensive DOM queries (querySelector, closestElement) separately
+// Cache key is the parent DOM node reference - stays same when typing in same cell
+var getTableWrapperFromParentImpl = function getTableWrapperFromParentImpl(parent) {
+  if (!parent) {
+    return undefined;
+  }
+
+  // These are the expensive DOM operations
+  var tableRef =
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  parent.querySelector('table') || undefined;
+  if (!tableRef) {
+    return undefined;
+  }
+  return closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+};
+
+// Create memoized version ONCE - reused across all calls
+var getMemoizedTableWrapperFromParent = memoizeOne(getTableWrapperFromParentImpl);
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
@@ -425,7 +449,11 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
         var editorView = getEditorView();
-        var getDomRef = function getDomRef(editorView) {
+        var getDomRef = expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? function (editorView) {
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+          return getMemoizedTableWrapperFromParent(parent);
+        } : function (editorView) {
           var element;
           var domAtPos = editorView.domAtPos.bind(editorView);
           var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
@@ -642,21 +670,26 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
   var isCommentEditor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var isLimitedModeEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
   var pluginState = getPluginState(editorState);
-  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
-  if (!selectionOrTableRect || !editorView) {
-    return [];
-  }
+  var items = [];
   var wouldChange = true; // Default to enabled - show the button.
   var newResizeStateWithAnalytics;
-
-  // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
-  // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
-  if (!isLimitedModeEnabled) {
-    var _newResizeStateWithAn3, _newResizeStateWithAn4;
-    newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
-    wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+  if (expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
+    if (!editorView) {
+      return [];
+    }
+  } else {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+    if (!selectionOrTableRect || !editorView) {
+      return [];
+    }
+    // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
+    // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
+    if (!isLimitedModeEnabled) {
+      var _newResizeStateWithAn3, _newResizeStateWithAn4;
+      newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+      wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+    }
   }
-  var items = [];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     items.push({
       id: 'editor.table.distributeColumns',
@@ -783,6 +816,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
     var currentLayout = tableObject.node.attrs.layout;
+    var shouldDisableLayoutOption = expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true) ? getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor) : isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor);
     return _objectSpread({
       id: id,
       type: 'button',
@@ -790,7 +824,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
       onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
-    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
+    }, shouldDisableLayoutOption && {
       disabled: value !== 'center'
     });
   });
@@ -824,11 +858,44 @@ var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons,
     return icon.value === normaliseAlignment(selectedAlignment);
   });
 };
-var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
+var isLayoutOptionDisabledImpl = function isLayoutOptionDisabledImpl(selectedNode, getEditorContainerWidth, hasEditorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
   var _getEditorContainerWi = getEditorContainerWidth(),
     lineLength = _getEditorContainerWi.lineLength;
   var tableContainerWidth = getTableContainerWidth(selectedNode);
 
+  // table may be scaled, use the scale percent to calculate the table width
+  if (hasEditorView) {
+    var tableWrapperWidth = tableContainerWidth;
+    var scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+
+  // If fixed-width editor, we disable 'left-alignment' when table width is 760px.
+  // tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
+  if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
+    return true;
+  }
+  return false;
+};
+var getMemoizedIsLayoutOptionDisabled = memoizeOne(isLayoutOptionDisabledImpl, function (_ref7, _ref8) {
+  var _ref9 = _toArray(_ref7),
+    prevNode = _ref9[0],
+    prevRest = _ref9.slice(1);
+  var _ref0 = _toArray(_ref8),
+    nextNode = _ref0[0],
+    nextRest = _ref0.slice(1);
+  // Only node needs special comparison (attrs only), rest use reference equality
+  var nodeEqual = isEqual(prevNode.attrs, nextNode.attrs);
+  var restEqual = prevRest.every(function (val, idx) {
+    return val === nextRest[idx];
+  });
+  return nodeEqual && restEqual;
+});
+var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
+  var _getEditorContainerWi2 = getEditorContainerWidth(),
+    lineLength = _getEditorContainerWi2.lineLength;
+  var tableContainerWidth = getTableContainerWidth(selectedNode);
+
   // table may be scaled, use the scale percent to calculate the table width
   if (editorView) {
     var tableWrapperWidth = tableContainerWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "16.1.9",
+	"version": "16.2.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,10 +57,10 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.11.0",
+		"@atlaskit/tmp-editor-statsig": "^16.15.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.12.0",
+		"@atlaskit/tooltip": "^20.13.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5",