@atlaskit/editor-plugin-table 5.7.1 → 5.7.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.2
+
+### Patch Changes
+
+- [#63416](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63416) [`cfa23683ae92`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cfa23683ae92) - update floating tool bar button
+- [#63569](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63569) [`bf5ed730bc99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf5ed730bc99) - Use start position to calculate insert column buttons to cater for merged cells
+
 ## 5.7.1
 
 ### Patch Changes

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
+exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -17,8 +17,12 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
@@ -60,16 +64,30 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(_messages.tableMessages.tableOptions),
-    hidden: options.every(function (option) {
-      return option.hidden;
-    }),
-    options: options
-  };
+  if (state.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: _preferences.default,
+      title: formatMessage(_messages.tableMessages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(_messages.tableMessages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -268,6 +286,16 @@ var getClosestSelectionRect = exports.getClosestSelectionRect = function getClos
   var selection = state.selection;
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : (0, _utils3.findCellRectClosestToPos)(selection.$from);
 };
+var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(state) {
+  var selection = state.selection;
+  var tableObject = (0, _utils3.findTable)(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var map = _tableMap.TableMap.get(tableObject.node);
+  var tableRect = new _tableMap.Rect(0, 0, map.width, map.height);
+  return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
+};
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
@@ -283,6 +311,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        var columnSettingsItems;
+        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -335,7 +365,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -390,9 +420,52 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEd
   }
   return [];
 };
-var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalyticsAPI) {
-  var _node$attrs;
+var getDistributeConfig = exports.getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (state, dispatch, editorView) {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    if (newResizeStateWithAnalytics) {
+      (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+};
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var pluginState = (0, _pluginFactory.getPluginState)(editorState);
+  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
+    return [{
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(_messages.tableMessages.distributeColumns),
+      icon: _layoutThreeEqual.default,
+      onClick: function onClick(state, dispatch, view) {
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+      },
+      disabled: !wouldChange
+    }, {
+      type: 'separator'
+    }];
+  }
+  return [];
+};
+var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
+  var _node$attrs;
+  var formatMessage = _ref5.formatMessage;
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
     targetCellPosition = _getPluginState2.targetCellPosition,
     pluginConfig = _getPluginState2.pluginConfig;

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -29,7 +29,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -104,16 +104,16 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
   }, [colIndex]);
-  var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
-    return sum + cur;
-  }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
   var generateHandleByType = function generateHandleByType(type) {
-    var _colWidths;
+    var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
     var isHover = type === 'hover';
     var isColumnsSelected = selectedColIndexes.length > 0;
+    var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
+      return sum + cur;
+    }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     var showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
@@ -121,15 +121,15 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     var gridColumnPosition = "".concat(colIndex + 1, " / span 1");
     var selectedColumnPosition = "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
     var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    var currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    var istSelecting = isColumnsSelected && !isHover;
+    var currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     return showCondition && /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
-        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -147,7 +147,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
       previewHeight: previewHeight,
-      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
@@ -181,7 +181,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       endIndex = _ref2.endIndex;
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
-        gridColumn: "".concat(index + 1, " / span 1")
+        gridColumn: "".concat(startIndex + 1, " / span 1")
       },
       "data-start-index": startIndex,
       "data-end-index": endIndex,

package/dist/es2019/toolbar.js

@@ -9,8 +9,12 @@ import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
+import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -49,14 +53,26 @@ export const getToolbarMenuConfig = (config, state, {
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(messages.tableOptions),
-    hidden: options.every(option => option.hidden),
-    options
-  };
+  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: TableOptionsIcon,
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(option => option.hidden),
+      options
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(option => option.hidden),
+      options
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -259,6 +275,16 @@ export const getClosestSelectionRect = state => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
+export const getClosestSelectionOrTableRect = state => {
+  const selection = state.selection;
+  const tableObject = findTable(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  const map = TableMap.get(tableObject.node);
+  const tableRect = new Rect(0, 0, map.width, map.height);
+  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
+};
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
@@ -272,6 +298,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+    let columnSettingsItems;
+    columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button
@@ -318,7 +346,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {
+      items: [menu, separator(menu.hidden), ...cellItems, ...columnSettingsItems, ...colorPicker, {
         type: 'extensions-placeholder',
         separator: 'end'
       }, {
@@ -372,6 +400,46 @@ const getCellItems = (pluginConfig, state, view, {
   }
   return [];
 };
+export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI) => (state, dispatch, editorView) => {
+  const selectionOrTableRect = getClosestSelectionOrTableRect(state);
+  if (!editorView || !selectionOrTableRect) {
+    return false;
+  }
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  if (newResizeStateWithAnalytics) {
+    distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+const getColumnSettingItems = (editorState, editorView, {
+  formatMessage
+}, getEditorContainerWidth, editorAnalyticsAPI) => {
+  var _newResizeStateWithAn2, _pluginState$pluginCo3;
+  const pluginState = getPluginState(editorState);
+  const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
+    return [{
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(messages.distributeColumns),
+      icon: DistributeColumnIcon,
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view),
+      disabled: !wouldChange
+    }, {
+      type: 'separator'
+    }];
+  }
+  return [];
+};
 const getColorPicker = (state, menu, {
   formatMessage
 }, editorAnalyticsAPI) => {

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -34,7 +34,7 @@ export const ColumnControls = ({
   isTableHovered,
   canDrag
 }) => {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
@@ -104,14 +104,14 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
-  const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
   const generateHandleByType = type => {
-    var _colWidths;
+    var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
     const isHover = type === 'hover';
     const isColumnsSelected = selectedColIndexes.length > 0;
+    const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     const showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
@@ -119,15 +119,15 @@ export const ColumnControls = ({
     const gridColumnPosition = `${colIndex + 1} / span 1`;
     const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
     const hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    const currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    const istSelecting = isColumnsSelected && !isHover;
+    const currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    const isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     return showCondition && /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
-        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -145,7 +145,7 @@ export const ColumnControls = ({
       forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
       previewHeight: previewHeight,
-      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
@@ -179,7 +179,7 @@ export const ColumnControls = ({
     endIndex
   }, index) => /*#__PURE__*/React.createElement("div", {
     style: {
-      gridColumn: `${index + 1} / span 1`
+      gridColumn: `${startIndex + 1} / span 1`
     },
     "data-start-index": startIndex,
     "data-end-index": endIndex,

package/dist/esm/toolbar.js

@@ -10,8 +10,12 @@ import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isRef
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
+import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -49,16 +53,30 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(messages.tableOptions),
-    hidden: options.every(function (option) {
-      return option.hidden;
-    }),
-    options: options
-  };
+  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: TableOptionsIcon,
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -257,6 +275,16 @@ export var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
+export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(state) {
+  var selection = state.selection;
+  var tableObject = findTable(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var map = TableMap.get(tableObject.node);
+  var tableRect = new Rect(0, 0, map.width, map.height);
+  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
+};
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
@@ -272,6 +300,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        var columnSettingsItems;
+        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -324,7 +354,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -379,9 +409,52 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEd
   }
   return [];
 };
-var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalyticsAPI) {
-  var _node$attrs;
+export var getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (state, dispatch, editorView) {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    if (newResizeStateWithAnalytics) {
+      distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+};
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var pluginState = getPluginState(editorState);
+  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+  var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
+    return [{
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(messages.distributeColumns),
+      icon: DistributeColumnIcon,
+      onClick: function onClick(state, dispatch, view) {
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+      },
+      disabled: !wouldChange
+    }, {
+      type: 'separator'
+    }];
+  }
+  return [];
+};
+var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
+  var _node$attrs;
+  var formatMessage = _ref5.formatMessage;
   var _getPluginState2 = getPluginState(state),
     targetCellPosition = _getPluginState2.targetCellPosition,
     pluginConfig = _getPluginState2.pluginConfig;

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -20,7 +20,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -95,16 +95,16 @@ export var ColumnControls = function ColumnControls(_ref) {
   var colIndexes = useMemo(function () {
     return [colIndex];
   }, [colIndex]);
-  var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
-    return sum + cur;
-  }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
   var generateHandleByType = function generateHandleByType(type) {
-    var _colWidths;
+    var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
     var isHover = type === 'hover';
     var isColumnsSelected = selectedColIndexes.length > 0;
+    var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
+      return sum + cur;
+    }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     var showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
@@ -112,15 +112,15 @@ export var ColumnControls = function ColumnControls(_ref) {
     var gridColumnPosition = "".concat(colIndex + 1, " / span 1");
     var selectedColumnPosition = "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
     var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    var currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    var istSelecting = isColumnsSelected && !isHover;
+    var currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     return showCondition && /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
-        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -138,7 +138,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
       previewHeight: previewHeight,
-      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
@@ -172,7 +172,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       endIndex = _ref2.endIndex;
     return /*#__PURE__*/React.createElement("div", {
       style: {
-        gridColumn: "".concat(index + 1, " / span 1")
+        gridColumn: "".concat(startIndex + 1, " / span 1")
       },
       "data-start-index": startIndex,
       "data-end-index": endIndex,

package/dist/types/toolbar.d.ts

@@ -2,9 +2,11 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
+export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

package/dist/types/types.d.ts

@@ -377,6 +377,7 @@ export interface ToolbarMenuState {
     isNumberColumnEnabled?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
+    isDragAndDropEnabled?: boolean;
 }
 export interface ToolbarMenuContext {
     formatMessage: IntlShape['formatMessage'];

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

@@ -2,9 +2,11 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
+export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

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

@@ -377,6 +377,7 @@ export interface ToolbarMenuState {
     isNumberColumnEnabled?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
+    isDragAndDropEnabled?: boolean;
 }
 export interface ToolbarMenuContext {
     formatMessage: IntlShape['formatMessage'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.1",
+  "version": "5.7.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -140,10 +140,10 @@
     "platform.editor.a11y-table-resizing_uapcv": {
       "type": "boolean"
     },
-    "platform.editor.a11y.table-selection_9uv33": {
+    "platform.editor.table.new-cell-context-menu-styling": {
       "type": "boolean"
     },
-    "platform.editor.table.new-cell-context-menu-styling": {
+    "platform.editor.a11y.table-selection_9uv33": {
       "type": "boolean"
     },
     "platform.editor.menu.group-items": {

package/src/toolbar.tsx

@@ -40,7 +40,7 @@ import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findCellRectClosestToPos,
   findTable,
@@ -48,7 +48,10 @@ import {
   isSelectionType,
   splitCell,
 } from '@atlaskit/editor-tables/utils';
+import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -131,14 +134,29 @@ export const getToolbarMenuConfig = (
     },
   ];
 
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(messages.tableOptions),
-    hidden: options.every((option) => option.hidden),
-    options,
-  };
+  if (
+    state.isDragAndDropEnabled &&
+    getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+  ) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: TableOptionsIcon,
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every((option) => option.hidden),
+      options,
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every((option) => option.hidden),
+      options,
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -399,6 +417,22 @@ export const getClosestSelectionRect = (
     : findCellRectClosestToPos(selection.$from);
 };
 
+export const getClosestSelectionOrTableRect = (
+  state: EditorState,
+): Rect | undefined => {
+  const selection = state.selection;
+  const tableObject = findTable(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  const map = TableMap.get(tableObject.node);
+  const tableRect = new Rect(0, 0, map.width, map.height);
+
+  return isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : tableRect;
+};
+
 export const getToolbarConfig =
   (
     getEditorContainerWidth: GetEditorContainerWidth,
@@ -436,6 +470,19 @@ export const getToolbarConfig =
             getEditorContainerWidth,
             editorAnalyticsAPI,
           );
+
+      let columnSettingsItems;
+      columnSettingsItems =
+        pluginState.isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+          ? getColumnSettingItems(
+              state,
+              getEditorView(),
+              intl,
+              getEditorContainerWidth,
+              editorAnalyticsAPI,
+            )
+          : [];
       const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
       // Check if we need to show confirm dialog for delete button
@@ -502,6 +549,7 @@ export const getToolbarConfig =
           menu,
           separator(menu.hidden),
           ...cellItems,
+          ...columnSettingsItems,
           ...colorPicker,
           {
             type: 'extensions-placeholder',
@@ -574,6 +622,84 @@ const getCellItems = (
   return [];
 };
 
+export const getDistributeConfig =
+  (
+    getEditorContainerWidth: GetEditorContainerWidth,
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  ): Command =>
+  (state, dispatch, editorView) => {
+    const selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
+      selectionOrTableRect,
+      state,
+      editorView.domAtPos.bind(editorView),
+      getEditorContainerWidth,
+    );
+
+    if (newResizeStateWithAnalytics) {
+      distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.FLOATING_TB,
+        newResizeStateWithAnalytics,
+      )(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+const getColumnSettingItems = (
+  editorState: EditorState,
+  editorView: EditorView | undefined | null,
+  { formatMessage }: ToolbarMenuContext,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): Array<FloatingToolbarItem<Command>> => {
+  const pluginState = getPluginState(editorState);
+  const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
+    selectionOrTableRect,
+    editorState,
+    editorView.domAtPos.bind(editorView),
+    getEditorContainerWidth,
+  );
+
+  const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
+
+  if (
+    pluginState?.pluginConfig?.allowDistributeColumns &&
+    pluginState.isDragAndDropEnabled
+  ) {
+    return [
+      {
+        id: 'editor.table.distributeColumns',
+        type: 'button',
+        title: formatMessage(messages.distributeColumns),
+        icon: DistributeColumnIcon,
+        onClick: (state, dispatch, view) =>
+          getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(
+            state,
+            dispatch,
+            view,
+          ),
+        disabled: !wouldChange,
+      },
+      {
+        type: 'separator',
+      },
+    ];
+  }
+  return [];
+};
+
 const getColorPicker = (
   state: EditorState,
   menu: FloatingToolbarItem<Command>,

package/src/types.ts

@@ -408,6 +408,7 @@ export interface ToolbarMenuState {
   isNumberColumnEnabled?: boolean;
   isTableCollapsed?: boolean;
   canCollapseTable?: boolean;
+  isDragAndDropEnabled?: boolean;
 }
 
 export interface ToolbarMenuContext {

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -154,8 +154,6 @@ export const ColumnControls = ({
     return [colIndex!];
   }, [colIndex]);
 
-  const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
-
   const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
     if (!hoveredCell || !colWidths?.length) {
       return null;
@@ -163,6 +161,7 @@ export const ColumnControls = ({
     const isHover = type === 'hover';
 
     const isColumnsSelected = selectedColIndexes.length > 0;
+    const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
     const showCondition = isHover
       ? isColumnsSelected &&
@@ -186,13 +185,13 @@ export const ColumnControls = ({
         : 'selected'
       : 'default';
 
-    const currentSelectionApprearance = isColumnsSelected
+    const currentSelectionAppearance = isColumnsSelected
       ? isInDanger
         ? 'danger'
         : 'selected'
       : hoveredAppearance;
 
-    const istSelecting = isColumnsSelected && !isHover;
+    const isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected
@@ -206,7 +205,7 @@ export const ColumnControls = ({
         <div
           key={type}
           style={{
-            gridColumn: istSelecting
+            gridColumn: isSelecting
               ? selectedColumnPosition
               : gridColumnPosition,
             display: 'flex',
@@ -228,7 +227,7 @@ export const ColumnControls = ({
             previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
             previewHeight={previewHeight}
             appearance={
-              istSelecting ? currentSelectionApprearance : hoveredAppearance
+              isSelecting ? currentSelectionAppearance : hoveredAppearance
             }
             onClick={handleClick}
             onMouseOver={handleMouseOver}
@@ -278,7 +277,7 @@ export const ColumnControls = ({
           columnParams.map(({ startIndex, endIndex }, index) => (
             <div
               style={{
-                gridColumn: `${index + 1} / span 1`,
+                gridColumn: `${startIndex + 1} / span 1`,
               }}
               data-start-index={startIndex}
               data-end-index={endIndex}
@@ -286,16 +285,6 @@ export const ColumnControls = ({
               contentEditable={false}
               key={index}
             >
-              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
-              {/* {!hasHeaderColumn && index === 0 && (
-                <div
-                  style={{
-                    left: '0px',
-                    right: 'unset',
-                  }}
-                  className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
-                />
-              )} */}
               <div
                 className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 style={columnParams.length - 1 === index ? { right: '0' } : {}}

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -310,16 +310,6 @@ const DragControlsComponent = ({
               contentEditable={false}
               key={`insert-dot-${index}`}
             >
-              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
-              {/* {!hasHeaderRow && index === 0 && (
-              <div
-                style={{
-                  top: '0px',
-                  left: token('space.075', '6px'),
-                }}
-                className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
-              />
-            )} */}
               <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
             </div>
             {isDragging && (