@atlaskit/editor-plugin-table 7.25.14 → 7.25.16

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.16
+
+### Patch Changes
+
+- [#135342](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135342)
+  [`7310995594ece`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7310995594ece) -
+  [ED-24636] Group Table Resizing Steps into a single custom step
+
+## 7.25.15
+
+### Patch Changes
+
+- [`be687d5675114`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be687d5675114) -
+  [ux] Fixes a bug where scaled table viewed on a narrow screen loses scaling.
+- Updated dependencies
+
 ## 7.25.14
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -36,6 +36,9 @@
         {
             "path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-batch-attribute-updates/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-content-insertion/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -35,6 +35,9 @@
     {
       "path": "../../editor-plugin-analytics/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../editor-plugin-batch-attribute-updates/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../editor-plugin-content-insertion/afm-jira/tsconfig.json"
     },

package/dist/cjs/nodeviews/TableComponent.js

@@ -548,7 +548,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -571,14 +571,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = (0, _misc.getTableScalingPercent)(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = (0, _misc.getTableScalingPercent)(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -590,8 +594,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -620,7 +624,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -631,7 +635,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -718,7 +722,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -837,7 +841,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {

package/dist/cjs/transforms/column-width.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _styles = require("@atlaskit/editor-common/styles");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -22,10 +23,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @param start
  * @returns
  */
-var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(resizeState, table, start, _api) {
+var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(resizeState, table, start, api) {
   return function (tr) {
     var map = _tableMap.TableMap.get(table);
     var updatedCellsAttrs = {};
+    var steps = [];
 
     // calculating new attributes for each cell
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
@@ -75,12 +77,23 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
         var cell = table.nodeAt(pos);
         if (!seen[pos] && cell) {
           if (updatedCellsAttrs[pos]) {
-            tr.step(new _transform.AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
+            steps.push(new _transform.AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
           }
           seen[pos] = true;
         }
       }
     }
+    if (api !== null && api !== void 0 && api.batchAttributeUpdates && (0, _platformFeatureFlags.fg)('platform_editor_batch_steps_table')) {
+      var batchStep = api.batchAttributeUpdates.actions.batchSteps({
+        steps: steps,
+        doc: tr.doc
+      });
+      tr.step(batchStep);
+    } else {
+      steps.forEach(function (s) {
+        tr.step(s);
+      });
+    }
     return tr;
   };
 };

package/dist/es2019/nodeviews/TableComponent.js

@@ -529,7 +529,7 @@ class TableComponent extends React.Component {
       // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
       !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
       if (force || !isResizing && shouldUpdateColgroup) {
-        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -552,14 +552,18 @@ class TableComponent extends React.Component {
           shouldScaleOnColgroupUpdate = true;
         }
         let scalePercent = 1;
-        if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-          scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-        } else {
-          scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-        }
-
-        // Request animation frame required for Firefox
         requestAnimationFrame(() => {
+          var _this$props$options8, _this$props$options9;
+          // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+          // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+          // inside of getTableScalingPercent returns 0.
+          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
+            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
+          } else {
+            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
+          }
+
+          // Request animation frame required for Firefox
           updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
         });
       }

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

@@ -82,7 +82,7 @@ export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalin
   var _tableRef$parentEleme;
   const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  const renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);

package/dist/es2019/transforms/column-width.js

@@ -1,6 +1,7 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -12,9 +13,10 @@ import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
  * @param start
  * @returns
  */
-export const updateColumnWidths = (resizeState, table, start, _api) => tr => {
+export const updateColumnWidths = (resizeState, table, start, api) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {};
+  const steps = [];
 
   // calculating new attributes for each cell
   for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
@@ -67,12 +69,23 @@ export const updateColumnWidths = (resizeState, table, start, _api) => tr => {
       const cell = table.nodeAt(pos);
       if (!seen[pos] && cell) {
         if (updatedCellsAttrs[pos]) {
-          tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
+          steps.push(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
         }
         seen[pos] = true;
       }
     }
   }
+  if (api !== null && api !== void 0 && api.batchAttributeUpdates && fg('platform_editor_batch_steps_table')) {
+    const batchStep = api.batchAttributeUpdates.actions.batchSteps({
+      steps,
+      doc: tr.doc
+    });
+    tr.step(batchStep);
+  } else {
+    steps.forEach(s => {
+      tr.step(s);
+    });
+  }
   return tr;
 };
 

package/dist/esm/nodeviews/TableComponent.js

@@ -541,7 +541,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -564,14 +564,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = getTableScalingPercent(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             updateColgroup(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -583,8 +587,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -613,7 +617,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -624,7 +628,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -711,7 +715,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -830,7 +834,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_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
       , {

package/dist/esm/transforms/column-width.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -15,10 +16,11 @@ import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
  * @param start
  * @returns
  */
-export var updateColumnWidths = function updateColumnWidths(resizeState, table, start, _api) {
+export var updateColumnWidths = function updateColumnWidths(resizeState, table, start, api) {
   return function (tr) {
     var map = TableMap.get(table);
     var updatedCellsAttrs = {};
+    var steps = [];
 
     // calculating new attributes for each cell
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
@@ -68,12 +70,23 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
         var cell = table.nodeAt(pos);
         if (!seen[pos] && cell) {
           if (updatedCellsAttrs[pos]) {
-            tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
+            steps.push(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
           }
           seen[pos] = true;
         }
       }
     }
+    if (api !== null && api !== void 0 && api.batchAttributeUpdates && fg('platform_editor_batch_steps_table')) {
+      var batchStep = api.batchAttributeUpdates.actions.batchSteps({
+        steps: steps,
+        doc: tr.doc
+      });
+      tr.step(batchStep);
+    } else {
+      steps.forEach(function (s) {
+        tr.step(s);
+      });
+    }
     return tr;
   };
 };

package/dist/types/plugin.d.ts

@@ -3,6 +3,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BatchAttributeUpdatesPlugin } from '@atlaskit/editor-plugin-batch-attribute-updates';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -46,6 +47,7 @@ export type TablePlugin = NextEditorPlugin<'table', {
         WidthPlugin,
         GuidelinePlugin,
         SelectionPlugin,
+        OptionalPlugin<BatchAttributeUpdatesPlugin>,
         OptionalPlugin<AccessibilityUtilsPlugin>,
         OptionalPlugin<MediaPlugin>,
         OptionalPlugin<EditorViewModePlugin>,

package/dist/types/transforms/column-width.d.ts

@@ -11,7 +11,7 @@ import type { PluginInjectionAPI } from '../types';
  * @param start
  * @returns
  */
-export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNode, start: number, _api: PluginInjectionAPI | undefined | null) => (tr: Transaction) => Transaction;
+export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNode, start: number, api: PluginInjectionAPI | undefined | null) => (tr: Transaction) => Transaction;
 /**
  * This function is called when user inserts/deletes a column in a table to;
  * - rescale all columns (if the table did not overflow before the insertion)

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -74,7 +74,11 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                 displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
             };
             sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
-        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
+        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+            actions: {
+                batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+            };
+        }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
             dependencies: [];
             actions: {
                 ariaNotify: (message: string, ariaLiveElementAttributes?: import("@atlaskit/editor-plugin-accessibility-utils").AriaLiveElementAttributes | undefined) => void;

package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts

@@ -55,7 +55,11 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                 displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
             };
             sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
-        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
+        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+            actions: {
+                batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+            };
+        }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
             dependencies: [];
             actions: {
                 ariaNotify: (message: string, ariaLiveElementAttributes?: import("@atlaskit/editor-plugin-accessibility-utils").AriaLiveElementAttributes | undefined) => void;
@@ -137,7 +141,11 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                     displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
                 };
                 sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
-            }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
+            }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+                actions: {
+                    batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+                };
+            }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
                 dependencies: [];
                 actions: {
                     ariaNotify: (message: string, ariaLiveElementAttributes?: import("@atlaskit/editor-plugin-accessibility-utils").AriaLiveElementAttributes | undefined) => void;

package/dist/types/ui/TableFloatingControls/index.d.ts

@@ -84,7 +84,11 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                 displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
             };
             sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
-        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
+        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+            actions: {
+                batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+            };
+        }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
             dependencies: [];
             actions: {
                 ariaNotify: (message: string, ariaLiveElementAttributes?: import("@atlaskit/editor-plugin-accessibility-utils").AriaLiveElementAttributes | undefined) => void;

package/dist/types-ts4.5/plugin.d.ts

@@ -3,6 +3,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BatchAttributeUpdatesPlugin } from '@atlaskit/editor-plugin-batch-attribute-updates';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -46,6 +47,7 @@ export type TablePlugin = NextEditorPlugin<'table', {
         WidthPlugin,
         GuidelinePlugin,
         SelectionPlugin,
+        OptionalPlugin<BatchAttributeUpdatesPlugin>,
         OptionalPlugin<AccessibilityUtilsPlugin>,
         OptionalPlugin<MediaPlugin>,
         OptionalPlugin<EditorViewModePlugin>,

package/dist/types-ts4.5/transforms/column-width.d.ts

@@ -11,7 +11,7 @@ import type { PluginInjectionAPI } from '../types';
  * @param start
  * @returns
  */
-export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNode, start: number, _api: PluginInjectionAPI | undefined | null) => (tr: Transaction) => Transaction;
+export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNode, start: number, api: PluginInjectionAPI | undefined | null) => (tr: Transaction) => Transaction;
 /**
  * This function is called when user inserts/deletes a column in a table to;
  * - rescale all columns (if the table did not overflow before the insertion)

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -88,6 +88,11 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                 };
                 sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
             }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+                actions: {
+                    batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+                };
+            }, undefined>>,
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
                 dependencies: [
                 ];

package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts

@@ -69,6 +69,11 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                 };
                 sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
             }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+                actions: {
+                    batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+                };
+            }, undefined>>,
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
                 dependencies: [
                 ];
@@ -171,6 +176,11 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                     };
                     sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
                 }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+                import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+                    actions: {
+                        batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+                    };
+                }, undefined>>,
                 import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
                     dependencies: [
                     ];

package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts

@@ -98,6 +98,11 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                 };
                 sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
             }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
+                actions: {
+                    batchSteps: import("@atlaskit/editor-plugin-batch-attribute-updates").BatchStepsAction;
+                };
+            }, undefined>>,
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
                 dependencies: [
                 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.14",
+	"version": "7.25.16",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,10 +31,11 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.3.0",
+		"@atlaskit/editor-common": "^88.5.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
+		"@atlaskit/editor-plugin-batch-attribute-updates": "1.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
@@ -111,6 +112,9 @@
 		"platform.editor.table.use-increased-scaling-percent": {
 			"type": "boolean"
 		},
+		"platform_editor_batch_steps_table": {
+			"type": "boolean"
+		},
 		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableComponent.tsx

@@ -483,21 +483,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				}
 
 				let scalePercent = 1;
-				if (
-					!this.props.options?.isCommentEditor ||
-					(this.props.options?.isCommentEditor && tableNode.attrs.width)
-				) {
-					scalePercent = getTableScalingPercent(
-						tableNode,
-						this.table!,
-						shouldUseIncreasedScalingPercent,
-					);
-				} else {
-					scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
-				}
-
-				// Request animation frame required for Firefox
 				requestAnimationFrame(() => {
+					// Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+					// renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+					// inside of getTableScalingPercent returns 0.
+					if (
+						!this.props.options?.isCommentEditor ||
+						(this.props.options?.isCommentEditor && tableNode.attrs.width)
+					) {
+						scalePercent = getTableScalingPercent(
+							tableNode,
+							this.table!,
+							shouldUseIncreasedScalingPercent,
+						);
+					} else {
+						scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
+					}
+
+					// Request animation frame required for Firefox
 					updateColgroup(
 						resizeState,
 						this.table!,

package/src/plugin.tsx

@@ -28,6 +28,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BatchAttributeUpdatesPlugin } from '@atlaskit/editor-plugin-batch-attribute-updates';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -136,6 +137,7 @@ export type TablePlugin = NextEditorPlugin<
 			WidthPlugin,
 			GuidelinePlugin,
 			SelectionPlugin,
+			OptionalPlugin<BatchAttributeUpdatesPlugin>,
 			OptionalPlugin<AccessibilityUtilsPlugin>,
 			OptionalPlugin<MediaPlugin>,
 			OptionalPlugin<EditorViewModePlugin>,

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -135,7 +135,7 @@ export const getTableScalingPercent = (
 		: MAX_SCALING_PERCENT;
 
 	const tableWidth = getTableContainerElementWidth(table);
-	let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
+	const renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
 	// minus 1 here to avoid any 1px scroll in Firefox
 	let scalePercent = (renderWidth - 1) / tableWidth;
 	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);

package/src/transforms/column-width.ts

@@ -6,6 +6,7 @@ import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
 import {
@@ -30,12 +31,12 @@ export const updateColumnWidths =
 		resizeState: ResizeState,
 		table: PMNode,
 		start: number,
-		// TODO: ED-24636 To be used in a follow up change
-		_api: PluginInjectionAPI | undefined | null,
+		api: PluginInjectionAPI | undefined | null,
 	) =>
 	(tr: Transaction): Transaction => {
 		const map = TableMap.get(table);
 		const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
+		const steps: Array<AttrStep> = [];
 
 		// calculating new attributes for each cell
 		for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
@@ -89,13 +90,22 @@ export const updateColumnWidths =
 				const cell = table.nodeAt(pos);
 				if (!seen[pos] && cell) {
 					if (updatedCellsAttrs[pos]) {
-						tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
+						steps.push(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
 					}
 					seen[pos] = true;
 				}
 			}
 		}
 
+		if (api?.batchAttributeUpdates && fg('platform_editor_batch_steps_table')) {
+			const batchStep = api.batchAttributeUpdates.actions.batchSteps({ steps, doc: tr.doc });
+			tr.step(batchStep);
+		} else {
+			steps.forEach((s) => {
+				tr.step(s);
+			});
+		}
+
 		return tr;
 	};
 

package/tsconfig.app.json

@@ -51,6 +51,9 @@
 		{
 			"path": "../editor-plugin-analytics/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-batch-attribute-updates/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-content-insertion/tsconfig.app.json"
 		},