@atlaskit/editor-plugin-table 7.25.15 → 7.25.16

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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/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.15",
+	"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.4.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/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/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"
 		},