@atlaskit/editor-plugin-table 10.5.12 → 10.6.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 10.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.6.0
+
+### Minor Changes
+
+- [#134914](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134914)
+  [`4395d5ae9ba96`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4395d5ae9ba96) -
+  ED-27326 Add distribute columns to cell controls
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.5.12
 
 ### Patch Changes

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -36,9 +36,12 @@ var _tableCellMerge = _interopRequireDefault(require("@atlaskit/icon/core/table-
 var _tableCellSplit = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-split"));
 var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
 var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
+var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
 var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
 var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
@@ -179,6 +182,20 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         };
       }
     });
+    // Used in the NewContextMenuItems object
+    (0, _defineProperty2.default)(_this, "newDistributeColumnsItem", function () {
+      var formatMessage = _this.props.intl.formatMessage;
+      return _this.createDistributeColumnsItemInternal({
+        elemBefore: (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableColumnsDistribute.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(_messages.tableMessages.distributeColumns),
+          LEGACY_fallbackIcon: _MergeCellsIcon.MergeCellsIcon
+        }))
+      });
+    });
     (0, _defineProperty2.default)(_this, "createMergeSplitCellItems", function () {
       var _this$props2 = _this.props,
         allowMergeCells = _this$props2.allowMergeCells,
@@ -372,33 +389,37 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         })) : undefined
       };
     });
-    (0, _defineProperty2.default)(_this, "createDistributeColumnsItem", function () {
+    (0, _defineProperty2.default)(_this, "createDistributeColumnsItemInternal", function (partialMenuItem) {
+      var _newResizeState$chang;
       var _this$props8 = _this.props,
         selectionRect = _this$props8.selectionRect,
-        formatMessage = _this$props8.intl.formatMessage,
         editorView = _this$props8.editorView,
         getEditorContainerWidth = _this$props8.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags,
+        formatMessage = _this$props8.intl.formatMessage;
       var _getPluginState8 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
-        allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
+        _getPluginState8$isTa = _getPluginState8.isTableScalingEnabled,
+        isTableScalingEnabled = _getPluginState8$isTa === void 0 ? false : _getPluginState8$isTa;
+      var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
+      var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
+      var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
+      return _objectSpread({
+        content: formatMessage(_messages.tableMessages.distributeColumns),
+        value: {
+          name: 'distribute_columns'
+        },
+        isDisabled: !wouldChange
+      }, partialMenuItem);
+    });
+    (0, _defineProperty2.default)(_this, "createDistributeColumnsItem", function () {
+      var editorView = _this.props.editorView;
+      var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled,
+        allowDistributeColumns = _getPluginState9.pluginConfig.allowDistributeColumns;
       if (allowDistributeColumns && !isDragAndDropEnabled) {
-        var _newResizeState$chang;
-        var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
-          _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
-          isTableScalingEnabled = _getPluginState9$isTa === void 0 ? false : _getPluginState9$isTa;
-        var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-          _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
-        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
-        var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        return {
-          content: formatMessage(_messages.tableMessages.distributeColumns),
-          value: {
-            name: 'distribute_columns'
-          },
-          isDisabled: !wouldChange
-        };
+        return _this.createDistributeColumnsItemInternal();
       }
       return null;
     });
@@ -467,6 +488,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       (_items$0$items = items[0].items).push.apply(_items$0$items, (0, _toConsumableArray2.default)(mergeSplitCellItems));
       items[1].items.push(insertColumnItem);
       items[1].items.push(insertRowItem);
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
+        items[1].items.push(_this.newDistributeColumnsItem());
+      }
       items[1].items.push(clearCellsItem);
       items[1].items.push(deleteColumnItem);
       items[1].items.push(deleteRowItem);

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -28,9 +28,12 @@ import TableCellMergeIcon from '@atlaskit/icon/core/table-cell-merge';
 import TableCellSplitIcon from '@atlaskit/icon/core/table-cell-split';
 import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
 import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -165,6 +168,24 @@ export class ContextualMenu extends Component {
         };
       }
     });
+    // Used in the NewContextMenuItems object
+    _defineProperty(this, "newDistributeColumnsItem", () => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      return this.createDistributeColumnsItemInternal({
+        elemBefore: jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnsDistributeIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.distributeColumns),
+          LEGACY_fallbackIcon: MergeCellsIcon
+        }))
+      });
+    });
     _defineProperty(this, "createMergeSplitCellItems", () => {
       const {
         allowMergeCells,
@@ -390,15 +411,37 @@ export class ContextualMenu extends Component {
         })) : undefined
       };
     });
-    _defineProperty(this, "createDistributeColumnsItem", () => {
+    _defineProperty(this, "createDistributeColumnsItemInternal", partialMenuItem => {
+      var _newResizeState$chang;
       const {
         selectionRect,
+        editorView,
+        getEditorContainerWidth,
+        getEditorFeatureFlags,
         intl: {
           formatMessage
+        }
+      } = this.props;
+      const {
+        isTableScalingEnabled = false
+      } = getPluginState(editorView.state);
+      const {
+        tableWithFixedColumnWidthsOption = false
+      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+      const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
+      const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
+      return {
+        content: formatMessage(messages.distributeColumns),
+        value: {
+          name: 'distribute_columns'
         },
-        editorView,
-        getEditorContainerWidth,
-        getEditorFeatureFlags
+        isDisabled: !wouldChange,
+        ...partialMenuItem
+      };
+    });
+    _defineProperty(this, "createDistributeColumnsItem", () => {
+      const {
+        editorView
       } = this.props;
       const {
         isDragAndDropEnabled,
@@ -407,22 +450,7 @@ export class ContextualMenu extends Component {
         }
       } = getPluginState(editorView.state);
       if (allowDistributeColumns && !isDragAndDropEnabled) {
-        var _newResizeState$chang;
-        const {
-          isTableScalingEnabled = false
-        } = getPluginState(editorView.state);
-        const {
-          tableWithFixedColumnWidthsOption = false
-        } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
-        const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        return {
-          content: formatMessage(messages.distributeColumns),
-          value: {
-            name: 'distribute_columns'
-          },
-          isDisabled: !wouldChange
-        };
+        return this.createDistributeColumnsItemInternal();
       }
       return null;
     });
@@ -496,6 +524,9 @@ export class ContextualMenu extends Component {
       items[0].items.push(...mergeSplitCellItems);
       items[1].items.push(insertColumnItem);
       items[1].items.push(insertRowItem);
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
+        items[1].items.push(this.newDistributeColumnsItem());
+      }
       items[1].items.push(clearCellsItem);
       items[1].items.push(deleteColumnItem);
       items[1].items.push(deleteRowItem);

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -38,9 +38,12 @@ import TableCellMergeIcon from '@atlaskit/icon/core/table-cell-merge';
 import TableCellSplitIcon from '@atlaskit/icon/core/table-cell-split';
 import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
 import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -172,6 +175,20 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         };
       }
     });
+    // Used in the NewContextMenuItems object
+    _defineProperty(_this, "newDistributeColumnsItem", function () {
+      var formatMessage = _this.props.intl.formatMessage;
+      return _this.createDistributeColumnsItemInternal({
+        elemBefore: jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnsDistributeIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.distributeColumns),
+          LEGACY_fallbackIcon: MergeCellsIcon
+        }))
+      });
+    });
     _defineProperty(_this, "createMergeSplitCellItems", function () {
       var _this$props2 = _this.props,
         allowMergeCells = _this$props2.allowMergeCells,
@@ -365,33 +382,37 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         })) : undefined
       };
     });
-    _defineProperty(_this, "createDistributeColumnsItem", function () {
+    _defineProperty(_this, "createDistributeColumnsItemInternal", function (partialMenuItem) {
+      var _newResizeState$chang;
       var _this$props8 = _this.props,
         selectionRect = _this$props8.selectionRect,
-        formatMessage = _this$props8.intl.formatMessage,
         editorView = _this$props8.editorView,
         getEditorContainerWidth = _this$props8.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags,
+        formatMessage = _this$props8.intl.formatMessage;
       var _getPluginState8 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
-        allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
+        _getPluginState8$isTa = _getPluginState8.isTableScalingEnabled,
+        isTableScalingEnabled = _getPluginState8$isTa === void 0 ? false : _getPluginState8$isTa;
+      var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
+      var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
+      var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
+      return _objectSpread({
+        content: formatMessage(messages.distributeColumns),
+        value: {
+          name: 'distribute_columns'
+        },
+        isDisabled: !wouldChange
+      }, partialMenuItem);
+    });
+    _defineProperty(_this, "createDistributeColumnsItem", function () {
+      var editorView = _this.props.editorView;
+      var _getPluginState9 = getPluginState(editorView.state),
+        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled,
+        allowDistributeColumns = _getPluginState9.pluginConfig.allowDistributeColumns;
       if (allowDistributeColumns && !isDragAndDropEnabled) {
-        var _newResizeState$chang;
-        var _getPluginState9 = getPluginState(editorView.state),
-          _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
-          isTableScalingEnabled = _getPluginState9$isTa === void 0 ? false : _getPluginState9$isTa;
-        var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-          _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
-        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
-        var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        return {
-          content: formatMessage(messages.distributeColumns),
-          value: {
-            name: 'distribute_columns'
-          },
-          isDisabled: !wouldChange
-        };
+        return _this.createDistributeColumnsItemInternal();
       }
       return null;
     });
@@ -460,6 +481,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       (_items$0$items = items[0].items).push.apply(_items$0$items, _toConsumableArray(mergeSplitCellItems));
       items[1].items.push(insertColumnItem);
       items[1].items.push(insertRowItem);
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
+        items[1].items.push(_this.newDistributeColumnsItem());
+      }
       items[1].items.push(clearCellsItem);
       items[1].items.push(deleteColumnItem);
       items[1].items.push(deleteRowItem);

package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -42,12 +42,14 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;
+    private newDistributeColumnsItem;
     private createMergeSplitCellItems;
     private createInsertColumnItem;
     private createInsertRowItem;
     private createClearCellsItem;
     private createDeleteColumnItem;
     private createDeleteRowItem;
+    private createDistributeColumnsItemInternal;
     private createDistributeColumnsItem;
     private createSortColumnItems;
     private createOriginalContextMenuItems;

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -42,12 +42,14 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;
+    private newDistributeColumnsItem;
     private createMergeSplitCellItems;
     private createInsertColumnItem;
     private createInsertRowItem;
     private createClearCellsItem;
     private createDeleteColumnItem;
     private createDeleteRowItem;
+    private createDistributeColumnsItemInternal;
     private createDistributeColumnsItem;
     private createSortColumnItems;
     private createOriginalContextMenuItems;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.5.12",
+	"version": "10.6.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-extension": "5.2.0",
+		"@atlaskit/editor-plugin-extension": "5.2.1",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -194,6 +194,9 @@
 		},
 		"platform_editor_controls_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableResizer.tsx

@@ -589,7 +589,6 @@ export const TableResizer = ({
 							: node.attrs.layout,
 				});
 
-
 				// Ignored via go/ees005
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				const newNode = tr.doc.nodeAt(pos)!;

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -51,9 +51,12 @@ import TableCellMergeIcon from '@atlaskit/icon/core/table-cell-merge';
 import TableCellSplitIcon from '@atlaskit/icon/core/table-cell-split';
 import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
 import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import {
 	clearHoverSelection,
@@ -314,6 +317,25 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		}
 	};
 
+	// Used in the NewContextMenuItems object
+	private newDistributeColumnsItem = () => {
+		const {
+			intl: { formatMessage },
+		} = this.props;
+		return this.createDistributeColumnsItemInternal({
+			elemBefore: (
+				<Box xcss={elementBeforeIconStyles}>
+					<TableColumnsDistributeIcon
+						color="currentColor"
+						spacing="spacious"
+						label={formatMessage(messages.distributeColumns)}
+						LEGACY_fallbackIcon={MergeCellsIcon}
+					/>
+				</Box>
+			),
+		});
+	};
+
 	private createMergeSplitCellItems = () => {
 		const {
 			allowMergeCells,
@@ -515,40 +537,47 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		} as MenuItem;
 	};
 
-	private createDistributeColumnsItem = () => {
+	private createDistributeColumnsItemInternal = (partialMenuItem?: Partial<MenuItem>) => {
 		const {
 			selectionRect,
-			intl: { formatMessage },
 			editorView,
 			getEditorContainerWidth,
 			getEditorFeatureFlags,
+			intl: { formatMessage },
 		} = this.props;
+
+		const { isTableScalingEnabled = false } = getPluginState(editorView.state);
+		const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags
+			? getEditorFeatureFlags()
+			: {};
+
+		const newResizeState = getNewResizeStateFromSelectedColumns(
+			selectionRect,
+			editorView.state,
+			editorView.domAtPos.bind(editorView),
+			getEditorContainerWidth,
+			isTableScalingEnabled,
+			tableWithFixedColumnWidthsOption,
+		);
+
+		const wouldChange = newResizeState?.changed ?? false;
+
+		return {
+			content: formatMessage(messages.distributeColumns),
+			value: { name: 'distribute_columns' },
+			isDisabled: !wouldChange,
+			...partialMenuItem,
+		} as MenuItem;
+	};
+
+	private createDistributeColumnsItem = () => {
+		const { editorView } = this.props;
 		const {
 			isDragAndDropEnabled,
 			pluginConfig: { allowDistributeColumns },
 		} = getPluginState(editorView.state);
 		if (allowDistributeColumns && !isDragAndDropEnabled) {
-			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
-			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags
-				? getEditorFeatureFlags()
-				: {};
-
-			const newResizeState = getNewResizeStateFromSelectedColumns(
-				selectionRect,
-				editorView.state,
-				editorView.domAtPos.bind(editorView),
-				getEditorContainerWidth,
-				isTableScalingEnabled,
-				tableWithFixedColumnWidthsOption,
-			);
-
-			const wouldChange = newResizeState?.changed ?? false;
-
-			return {
-				content: formatMessage(messages.distributeColumns),
-				value: { name: 'distribute_columns' },
-				isDisabled: !wouldChange,
-			} as MenuItem;
+			return this.createDistributeColumnsItemInternal();
 		}
 		return null;
 	};
@@ -637,6 +666,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		items[0].items.push(...mergeSplitCellItems);
 		items[1].items.push(insertColumnItem);
 		items[1].items.push(insertRowItem);
+		if (
+			editorExperiment('platform_editor_controls', 'variant1') &&
+			fg('platform_editor_controls_patch_2')
+		) {
+			items[1].items.push(this.newDistributeColumnsItem());
+		}
 		items[1].items.push(clearCellsItem);
 		items[1].items.push(deleteColumnItem);
 		items[1].items.push(deleteRowItem);