@atlaskit/editor-plugin-table 7.23.0 → 7.24.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.0
+
+### Minor Changes
+
+- [#124519](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124519)
+  [`fbd519a29db88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fbd519a29db88) -
+  Don't add merge cell and split cell options to floating toolbar if allowMergedCell is disabled or
+  undefined
+- [#124475](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124475)
+  [`f1beea7ed5546`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f1beea7ed5546) -
+  [ux] [ED-24078] This change is adding aria-labels to the Table Cell Options menu so that the
+  screenreader will announce the keyboard shortcuts to keyboard-only users. The change is feature
+  flagged behind 'platform_editor_announce_cell_options_hotkeys'.
+
+### Patch Changes
+
+- [#124231](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124231)
+  [`48ae65e0f36e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48ae65e0f36e8) -
+  Removed FF platform.editor.transform-slice-for-nested-expand
+- [#124519](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124519)
+  [`0d1225bff51ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d1225bff51ff) -
+  Use scaled amounts for new column resizing, and update logic to cater for more scenarios
+- Updated dependencies
+
 ## 7.23.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/main.js

@@ -202,11 +202,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         if (!pluginConfig.allowBackgroundColor) {
           slice = (0, _misc.transformSliceRemoveCellBackgroundColor)(slice, schema);
         }
-
-        //  If a partial paste of nested expand, paste only nested-expand's content */
-        if ((0, _platformFeatureFlags.fg)('platform.editor.transform-slice-for-nested-expand')) {
-          slice = (0, _transforms.transformSliceToRemoveOpenNestedExpand)(slice, schema);
-        }
+        slice = (0, _transforms.transformSliceToRemoveOpenNestedExpand)(slice, schema);
         return slice;
       },
       handleClick: function handleClick(_ref2, _pos, event) {

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.scaleResizeState = exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _types = require("../../../types");
 var _alignment = require("../../../utils/alignment");
@@ -38,17 +39,18 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled;
   var editorContainerWidth = getEditorContainerWidth(editorWidth);
   var isTableLeftAligned = tableNode.attrs.layout === _alignment.ALIGN_START;
+  var isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  var isOverflow = resizeState.tableWidth > resizeState.maxSize;
   var resizeAmount = isTableLeftAligned ? amount : amount * 2;
   var willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
-  var willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
+  var willResizedTableStayInOverflow = isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
   // STEP 1: Update col width
   if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
     var _tableRef$closest;
     var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     resizeAmount = amount < 0 ? amount : resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
-  }
-  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+  } else {
     var diff = -(resizeState.tableWidth - resizeState.maxSize);
     var rest = amount - diff;
     var final = isTableLeftAligned ? diff + rest : diff + rest * 2;
@@ -59,25 +61,23 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
   // STEP 2: Update table container width
   // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-  newState.maxSize = Math.round(resizeState.overflow ? willResizedTableStayInOverflow ?
+  newState.maxSize = Math.round(isOverflow ? willResizedTableStayInOverflow ?
   // CASE 1A: table will stay in overflow
   // do not grow the table because resize is happening in the overflow region
   // and the overall table container needs to be retained
-  resizeState.maxSize :
+  isNumberColumnEnabled ? resizeState.maxSize + _editorSharedStyles.akEditorTableNumberColumnWidth : resizeState.maxSize :
   // CASE 1B: table will no longer be in overflow, so adjust container width
   // ensure the table is resized without any 'big jumps' by working out
   // the difference between the new table width and the max size and adding the resize
-  resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
+  isNumberColumnEnabled ? resizeState.maxSize + _editorSharedStyles.akEditorTableNumberColumnWidth + (resizeState.tableWidth - resizeState.maxSize + _editorSharedStyles.akEditorTableNumberColumnWidth + delta) : resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
   // CASE 2: table will hit editor edge
   editorContainerWidth :
   // CASE 3: table is being resized from a non-overflow state
-  resizeState.maxSize + delta);
+  isNumberColumnEnabled ? resizeState.maxSize + _editorSharedStyles.akEditorTableNumberColumnWidth + delta : resizeState.maxSize + delta);
 
   // do not apply scaling logic because resize state is already scaled
   (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false, false);
-  if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
-    updateTablePreview(tableRef, newState.maxSize, (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
-  }
+  updateTablePreview(tableRef, newState.maxSize, (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
   return newState;
 };
 var updateTablePreview = function updateTablePreview(tableRef, newTableWidth, shouldChangeAlignment) {
@@ -105,37 +105,52 @@ var scaleResizeState = exports.scaleResizeState = function scaleResizeState(_ref
     tableRef = _ref2.tableRef,
     tableNode = _ref2.tableNode,
     editorWidth = _ref2.editorWidth;
-  // check if table is scaled, if not then avoid applying scaling values down
-  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+  var isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  var isTableScaled = isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
+
+  // Tables with number column can cause the table to be in two different states:
+  // 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
+  // avoid scaling and take the document width
+  // 2. The table sum of col widths will be the same size as max width, which happens when the table
+  // is scaled using preserve table width logic, for this apply a scaled width
+  // return early if table isn't scaled
+  if (!isTableScaled || isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth) {
     return resizeState;
   }
   var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
+  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
   var cols = resizeState.cols.map(function (col) {
     return _objectSpread(_objectSpread({}, col), {}, {
-      width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
+      minWidth: _styles.tableCellMinWidth,
+      width: Math.max(Math.round(col.width * scalePercent), _styles.tableCellMinWidth)
     });
   });
-  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
   var calculatedTableWidth = cols.reduce(function (prev, curr) {
     return prev + curr.width;
   }, 0);
 
   // using Math.round can cause the sum of col widths to be larger than the table width
-  // distribute the difference to the smallest column
+  // distribute the difference to the first column
   if (calculatedTableWidth > scaledTableWidth) {
     var diff = calculatedTableWidth - scaledTableWidth;
+    var hasDiffBeenDistributed = false;
     cols = cols.map(function (col) {
-      return col.width - diff >= col.minWidth ? _objectSpread(_objectSpread({}, col), {}, {
-        width: col.width - diff
-      }) : col;
+      if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
+        hasDiffBeenDistributed = true;
+        return _objectSpread(_objectSpread({}, col), {}, {
+          width: col.width - diff
+        });
+      }
+      return col;
     });
   }
+  var maxSize = isNumberColumnEnabled ? Math.round((resizeState.maxSize + _editorSharedStyles.akEditorTableNumberColumnWidth) * scalePercent) : Math.round(resizeState.maxSize * scalePercent);
   return _objectSpread(_objectSpread({}, resizeState), {}, {
     widths: cols.map(function (col) {
       return col.width;
     }),
     tableWidth: scaledTableWidth,
-    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    maxSize: maxSize,
     cols: cols
   });
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-logic.js

@@ -241,6 +241,9 @@ function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
     return col;
   });
   return _objectSpread(_objectSpread({}, resizeState), {}, {
+    tableWidth: updatedCols.reduce(function (acc, col) {
+      return acc + col.width;
+    }, 0),
     cols: updatedCols
   });
 }

package/dist/cjs/toolbar.js

@@ -217,19 +217,22 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     onMouseLeave: (0, _commands.clearHoverSelection)(),
     selected: false,
     disabled: false
-  }, {
-    id: 'editor.table.mergeCells',
-    title: formatMessage(_messages.tableMessages.mergeCells),
-    onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !(0, _transforms.canMergeCells)(editorState.tr)
-  }, {
-    id: 'editor.table.splitCell',
-    title: formatMessage(_messages.tableMessages.splitCell),
-    onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !(0, _utils3.splitCell)(editorState)
   }];
+  if (pluginState.pluginConfig.allowMergeCells) {
+    options.push({
+      id: 'editor.table.mergeCells',
+      title: formatMessage(_messages.tableMessages.mergeCells),
+      onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !(0, _transforms.canMergeCells)(editorState.tr)
+    }, {
+      id: 'editor.table.splitCell',
+      title: formatMessage(_messages.tableMessages.splitCell),
+      onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !(0, _utils3.splitCell)(editorState)
+    });
+  }
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
     var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;

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

@@ -215,8 +215,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props3.editorView;
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
+      var content = formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn);
       return {
-        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
+        content: content,
         value: {
           name: 'insert_column'
         },
@@ -228,7 +229,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
+        }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined,
+        'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.addColumnAfter, String(content)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createInsertRowItem", function () {
@@ -237,8 +239,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props4.editorView;
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
+      var content = formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow);
       return {
-        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
+        content: content,
         value: {
           name: 'insert_row'
         },
@@ -250,7 +253,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
+        }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined,
+        'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.addRowAfter, String(content)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearCellsItem", function () {
@@ -266,10 +270,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         left = selectionRect.left;
       var noOfColumns = right - left;
       var noOfRows = bottom - top;
+      var content = formatMessage(_messages.tableMessages.clearCells, {
+        0: Math.max(noOfColumns, noOfRows)
+      });
       return {
-        content: formatMessage(_messages.tableMessages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
+        content: content,
         value: {
           name: 'clear'
         },
@@ -285,7 +290,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           label: formatMessage(_messages.tableMessages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined
+        })) : undefined,
+        'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.backspace, String(content)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDeleteColumnItem", function () {

package/dist/es2019/pm-plugins/main.js

@@ -194,11 +194,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         if (!pluginConfig.allowBackgroundColor) {
           slice = transformSliceRemoveCellBackgroundColor(slice, schema);
         }
-
-        //  If a partial paste of nested expand, paste only nested-expand's content */
-        if (fg('platform.editor.transform-slice-for-nested-expand')) {
-          slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
-        }
+        slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
         return slice;
       },
       handleClick: ({

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

@@ -1,6 +1,6 @@
 // Resize a given column by an amount from the current state
-
-import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../../../types';
 import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../../utils/alignment';
 import { getTableScalingPercent } from './misc';
@@ -29,46 +29,45 @@ export const resizeColumnAndTable = ({
 }) => {
   const editorContainerWidth = getEditorContainerWidth(editorWidth);
   const isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+  const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  const isOverflow = resizeState.tableWidth > resizeState.maxSize;
   let resizeAmount = isTableLeftAligned ? amount : amount * 2;
   const willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
-  const willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
+  const willResizedTableStayInOverflow = isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
   // STEP 1: Update col width
   if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
     var _tableRef$closest;
     const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     resizeAmount = amount < 0 ? amount : resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
-  }
-  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+  } else {
     const diff = -(resizeState.tableWidth - resizeState.maxSize);
     const rest = amount - diff;
     const final = isTableLeftAligned ? diff + rest : diff + rest * 2;
     resizeAmount = final;
   }
-  let newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
 
   // STEP 2: Update table container width
   // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
   const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-  newState.maxSize = Math.round(resizeState.overflow ? willResizedTableStayInOverflow ?
+  newState.maxSize = Math.round(isOverflow ? willResizedTableStayInOverflow ?
   // CASE 1A: table will stay in overflow
   // do not grow the table because resize is happening in the overflow region
   // and the overall table container needs to be retained
-  resizeState.maxSize :
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth : resizeState.maxSize :
   // CASE 1B: table will no longer be in overflow, so adjust container width
   // ensure the table is resized without any 'big jumps' by working out
   // the difference between the new table width and the max size and adding the resize
-  resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + (resizeState.tableWidth - resizeState.maxSize + akEditorTableNumberColumnWidth + delta) : resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
   // CASE 2: table will hit editor edge
   editorContainerWidth :
   // CASE 3: table is being resized from a non-overflow state
-  resizeState.maxSize + delta);
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + delta : resizeState.maxSize + delta);
 
   // do not apply scaling logic because resize state is already scaled
   updateColgroup(newState, tableRef, tableNode, false, false);
-  if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
-    updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
-  }
+  updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
   return newState;
 };
 const updateTablePreview = (tableRef, newTableWidth, shouldChangeAlignment) => {
@@ -95,34 +94,51 @@ export const scaleResizeState = ({
   tableNode,
   editorWidth
 }) => {
-  // check if table is scaled, if not then avoid applying scaling values down
-  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+  const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  const isTableScaled = isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
+
+  // Tables with number column can cause the table to be in two different states:
+  // 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
+  // avoid scaling and take the document width
+  // 2. The table sum of col widths will be the same size as max width, which happens when the table
+  // is scaled using preserve table width logic, for this apply a scaled width
+  // return early if table isn't scaled
+  if (!isTableScaled || isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth) {
     return resizeState;
   }
   const scalePercent = getTableScalingPercent(tableNode, tableRef);
-  let cols = resizeState.cols.map(col => ({
-    ...col,
-    width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
-  }));
   const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+  let cols = resizeState.cols.map(col => {
+    return {
+      ...col,
+      minWidth: tableCellMinWidth,
+      width: Math.max(Math.round(col.width * scalePercent), tableCellMinWidth)
+    };
+  });
   const calculatedTableWidth = cols.reduce((prev, curr) => prev + curr.width, 0);
 
   // using Math.round can cause the sum of col widths to be larger than the table width
-  // distribute the difference to the smallest column
+  // distribute the difference to the first column
   if (calculatedTableWidth > scaledTableWidth) {
     const diff = calculatedTableWidth - scaledTableWidth;
+    let hasDiffBeenDistributed = false;
     cols = cols.map(col => {
-      return col.width - diff >= col.minWidth ? {
-        ...col,
-        width: col.width - diff
-      } : col;
+      if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
+        hasDiffBeenDistributed = true;
+        return {
+          ...col,
+          width: col.width - diff
+        };
+      }
+      return col;
     });
   }
+  const maxSize = isNumberColumnEnabled ? Math.round((resizeState.maxSize + akEditorTableNumberColumnWidth) * scalePercent) : Math.round(resizeState.maxSize * scalePercent);
   return {
     ...resizeState,
     widths: cols.map(col => col.width),
     tableWidth: scaledTableWidth,
-    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    maxSize,
     cols
   };
 };

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

@@ -211,6 +211,7 @@ export function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
   });
   return {
     ...resizeState,
+    tableWidth: updatedCols.reduce((acc, col) => acc + col.width, 0),
     cols: updatedCols
   };
 }

package/dist/es2019/toolbar.js

@@ -199,19 +199,22 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
-  }, {
-    id: 'editor.table.mergeCells',
-    title: formatMessage(messages.mergeCells),
-    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !canMergeCells(editorState.tr)
-  }, {
-    id: 'editor.table.splitCell',
-    title: formatMessage(messages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !splitCell(editorState)
   }];
+  if (pluginState.pluginConfig.allowMergeCells) {
+    options.push({
+      id: 'editor.table.mergeCells',
+      title: formatMessage(messages.mergeCells),
+      onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !canMergeCells(editorState.tr)
+    }, {
+      id: 'editor.table.splitCell',
+      title: formatMessage(messages.splitCell),
+      onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !splitCell(editorState)
+    });
+  }
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
     const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;

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

@@ -208,8 +208,9 @@ export class ContextualMenu extends Component {
       const {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
+      const content = formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn);
       return {
-        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
+        content,
         value: {
           name: 'insert_column'
         },
@@ -221,7 +222,8 @@ export class ContextualMenu extends Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: elementBeforeIconStyles
-        }, jsx(AddColRightIcon, null)) : undefined
+        }, jsx(AddColRightIcon, null)) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addColumnAfter, String(content)) : undefined
       };
     });
     _defineProperty(this, "createInsertRowItem", () => {
@@ -234,8 +236,9 @@ export class ContextualMenu extends Component {
       const {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
+      const content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
       return {
-        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
+        content,
         value: {
           name: 'insert_row'
         },
@@ -247,7 +250,8 @@ export class ContextualMenu extends Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: elementBeforeIconStyles
-        }, jsx(AddRowBelowIcon, null)) : undefined
+        }, jsx(AddRowBelowIcon, null)) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addRowAfter, String(content)) : undefined
       };
     });
     _defineProperty(this, "createClearCellsItem", () => {
@@ -269,10 +273,11 @@ export class ContextualMenu extends Component {
       } = selectionRect;
       const noOfColumns = right - left;
       const noOfRows = bottom - top;
+      const content = formatMessage(messages.clearCells, {
+        0: Math.max(noOfColumns, noOfRows)
+      });
       return {
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
+        content,
         value: {
           name: 'clear'
         },
@@ -288,7 +293,8 @@ export class ContextualMenu extends Component {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined
+        })) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(backspace, String(content)) : undefined
       };
     });
     _defineProperty(this, "createDeleteColumnItem", () => {

package/dist/esm/pm-plugins/main.js

@@ -195,11 +195,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         if (!pluginConfig.allowBackgroundColor) {
           slice = transformSliceRemoveCellBackgroundColor(slice, schema);
         }
-
-        //  If a partial paste of nested expand, paste only nested-expand's content */
-        if (fg('platform.editor.transform-slice-for-nested-expand')) {
-          slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
-        }
+        slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
         return slice;
       },
       handleClick: function handleClick(_ref2, _pos, event) {

package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Resize a given column by an amount from the current state
-
-import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../../../types';
 import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../../utils/alignment';
 import { getTableScalingPercent } from './misc';
@@ -33,17 +33,18 @@ export var resizeColumnAndTable = function resizeColumnAndTable(_ref) {
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled;
   var editorContainerWidth = getEditorContainerWidth(editorWidth);
   var isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+  var isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  var isOverflow = resizeState.tableWidth > resizeState.maxSize;
   var resizeAmount = isTableLeftAligned ? amount : amount * 2;
   var willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
-  var willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
+  var willResizedTableStayInOverflow = isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
   // STEP 1: Update col width
   if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
     var _tableRef$closest;
     var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     resizeAmount = amount < 0 ? amount : resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
-  }
-  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+  } else {
     var diff = -(resizeState.tableWidth - resizeState.maxSize);
     var rest = amount - diff;
     var final = isTableLeftAligned ? diff + rest : diff + rest * 2;
@@ -54,25 +55,23 @@ export var resizeColumnAndTable = function resizeColumnAndTable(_ref) {
   // STEP 2: Update table container width
   // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-  newState.maxSize = Math.round(resizeState.overflow ? willResizedTableStayInOverflow ?
+  newState.maxSize = Math.round(isOverflow ? willResizedTableStayInOverflow ?
   // CASE 1A: table will stay in overflow
   // do not grow the table because resize is happening in the overflow region
   // and the overall table container needs to be retained
-  resizeState.maxSize :
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth : resizeState.maxSize :
   // CASE 1B: table will no longer be in overflow, so adjust container width
   // ensure the table is resized without any 'big jumps' by working out
   // the difference between the new table width and the max size and adding the resize
-  resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + (resizeState.tableWidth - resizeState.maxSize + akEditorTableNumberColumnWidth + delta) : resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
   // CASE 2: table will hit editor edge
   editorContainerWidth :
   // CASE 3: table is being resized from a non-overflow state
-  resizeState.maxSize + delta);
+  isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + delta : resizeState.maxSize + delta);
 
   // do not apply scaling logic because resize state is already scaled
   updateColgroup(newState, tableRef, tableNode, false, false);
-  if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
-    updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
-  }
+  updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
   return newState;
 };
 var updateTablePreview = function updateTablePreview(tableRef, newTableWidth, shouldChangeAlignment) {
@@ -100,37 +99,52 @@ export var scaleResizeState = function scaleResizeState(_ref2) {
     tableRef = _ref2.tableRef,
     tableNode = _ref2.tableNode,
     editorWidth = _ref2.editorWidth;
-  // check if table is scaled, if not then avoid applying scaling values down
-  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+  var isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+  var isTableScaled = isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
+
+  // Tables with number column can cause the table to be in two different states:
+  // 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
+  // avoid scaling and take the document width
+  // 2. The table sum of col widths will be the same size as max width, which happens when the table
+  // is scaled using preserve table width logic, for this apply a scaled width
+  // return early if table isn't scaled
+  if (!isTableScaled || isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth) {
     return resizeState;
   }
   var scalePercent = getTableScalingPercent(tableNode, tableRef);
+  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
   var cols = resizeState.cols.map(function (col) {
     return _objectSpread(_objectSpread({}, col), {}, {
-      width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
+      minWidth: tableCellMinWidth,
+      width: Math.max(Math.round(col.width * scalePercent), tableCellMinWidth)
     });
   });
-  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
   var calculatedTableWidth = cols.reduce(function (prev, curr) {
     return prev + curr.width;
   }, 0);
 
   // using Math.round can cause the sum of col widths to be larger than the table width
-  // distribute the difference to the smallest column
+  // distribute the difference to the first column
   if (calculatedTableWidth > scaledTableWidth) {
     var diff = calculatedTableWidth - scaledTableWidth;
+    var hasDiffBeenDistributed = false;
     cols = cols.map(function (col) {
-      return col.width - diff >= col.minWidth ? _objectSpread(_objectSpread({}, col), {}, {
-        width: col.width - diff
-      }) : col;
+      if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
+        hasDiffBeenDistributed = true;
+        return _objectSpread(_objectSpread({}, col), {}, {
+          width: col.width - diff
+        });
+      }
+      return col;
     });
   }
+  var maxSize = isNumberColumnEnabled ? Math.round((resizeState.maxSize + akEditorTableNumberColumnWidth) * scalePercent) : Math.round(resizeState.maxSize * scalePercent);
   return _objectSpread(_objectSpread({}, resizeState), {}, {
     widths: cols.map(function (col) {
       return col.width;
     }),
     tableWidth: scaledTableWidth,
-    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    maxSize: maxSize,
     cols: cols
   });
 };

package/dist/esm/pm-plugins/table-resizing/utils/resize-logic.js

@@ -231,6 +231,9 @@ export function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
     return col;
   });
   return _objectSpread(_objectSpread({}, resizeState), {}, {
+    tableWidth: updatedCols.reduce(function (acc, col) {
+      return acc + col.width;
+    }, 0),
     cols: updatedCols
   });
 }

package/dist/esm/toolbar.js

@@ -209,19 +209,22 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
-  }, {
-    id: 'editor.table.mergeCells',
-    title: formatMessage(messages.mergeCells),
-    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !canMergeCells(editorState.tr)
-  }, {
-    id: 'editor.table.splitCell',
-    title: formatMessage(messages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !splitCell(editorState)
   }];
+  if (pluginState.pluginConfig.allowMergeCells) {
+    options.push({
+      id: 'editor.table.mergeCells',
+      title: formatMessage(messages.mergeCells),
+      onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !canMergeCells(editorState.tr)
+    }, {
+      id: 'editor.table.splitCell',
+      title: formatMessage(messages.splitCell),
+      onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+      selected: false,
+      disabled: !splitCell(editorState)
+    });
+  }
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
     var newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;

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

@@ -208,8 +208,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         editorView = _this$props3.editorView;
       var _getPluginState3 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
+      var content = formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn);
       return {
-        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
+        content: content,
         value: {
           name: 'insert_column'
         },
@@ -221,7 +222,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: elementBeforeIconStyles
-        }, jsx(AddColRightIcon, null)) : undefined
+        }, jsx(AddColRightIcon, null)) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addColumnAfter, String(content)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createInsertRowItem", function () {
@@ -230,8 +232,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         editorView = _this$props4.editorView;
       var _getPluginState4 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
+      var content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
       return {
-        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
+        content: content,
         value: {
           name: 'insert_row'
         },
@@ -243,7 +246,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: elementBeforeIconStyles
-        }, jsx(AddRowBelowIcon, null)) : undefined
+        }, jsx(AddRowBelowIcon, null)) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addRowAfter, String(content)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createClearCellsItem", function () {
@@ -259,10 +263,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         left = selectionRect.left;
       var noOfColumns = right - left;
       var noOfRows = bottom - top;
+      var content = formatMessage(messages.clearCells, {
+        0: Math.max(noOfColumns, noOfRows)
+      });
       return {
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
+        content: content,
         value: {
           name: 'clear'
         },
@@ -278,7 +283,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined
+        })) : undefined,
+        'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(backspace, String(content)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDeleteColumnItem", function () {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.23.0",
+	"version": "7.24.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^86.8.0",
+		"@atlaskit/editor-common": "^87.0.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
@@ -105,9 +105,6 @@
 		"platform_editor_lazy-node-views": {
 			"type": "boolean"
 		},
-		"platform.editor.transform-slice-for-nested-expand": {
-			"type": "boolean"
-		},
 		"platform.editor.table.use-shared-state-hook": {
 			"type": "boolean"
 		},
@@ -125,6 +122,9 @@
 		},
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
+		},
+		"platform_editor_announce_cell_options_hotkeys": {
+			"type": "boolean"
 		}
 	}
 }

package/src/pm-plugins/main.ts

@@ -294,10 +294,7 @@ export const createPlugin = (
 					slice = transformSliceRemoveCellBackgroundColor(slice, schema);
 				}
 
-				//  If a partial paste of nested expand, paste only nested-expand's content */
-				if (fg('platform.editor.transform-slice-for-nested-expand')) {
-					slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
-				}
+				slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
 
 				return slice;
 			},

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,9 +1,11 @@
 // Resize a given column by an amount from the current state
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { type EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import {
 	akEditorFullWidthLayoutWidth,
 	akEditorGutterPaddingDynamic,
+	akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
 
 import { TableCssClassName as ClassName } from '../../../types';
@@ -86,12 +88,13 @@ export const resizeColumnAndTable = ({
 }: ResizeColumnAndTable): ResizeState => {
 	const editorContainerWidth = getEditorContainerWidth(editorWidth);
 	const isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+	const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+	const isOverflow = resizeState.tableWidth > resizeState.maxSize;
 	let resizeAmount = isTableLeftAligned ? amount : amount * 2;
-
 	const willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
 
 	const willResizedTableStayInOverflow =
-		resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
+		isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
 	// STEP 1: Update col width
 	if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
@@ -100,54 +103,58 @@ export const resizeColumnAndTable = ({
 			amount < 0
 				? amount
 				: resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth!) / 2;
-	}
-
-	if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+	} else {
 		const diff = -(resizeState.tableWidth - resizeState.maxSize);
 		const rest = amount - diff;
 		const final = isTableLeftAligned ? diff + rest : diff + rest * 2;
 		resizeAmount = final;
 	}
 
-	let newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+	const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
 
 	// STEP 2: Update table container width
 	// columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
 	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
 
 	newState.maxSize = Math.round(
-		resizeState.overflow
+		isOverflow
 			? willResizedTableStayInOverflow
 				? // CASE 1A: table will stay in overflow
 					// do not grow the table because resize is happening in the overflow region
 					// and the overall table container needs to be retained
-					resizeState.maxSize
+					isNumberColumnEnabled
+					? resizeState.maxSize + akEditorTableNumberColumnWidth
+					: resizeState.maxSize
 				: // CASE 1B: table will no longer be in overflow, so adjust container width
 					// ensure the table is resized without any 'big jumps' by working out
 					// the difference between the new table width and the max size and adding the resize
-					resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta)
+					isNumberColumnEnabled
+					? resizeState.maxSize +
+						akEditorTableNumberColumnWidth +
+						(resizeState.tableWidth - resizeState.maxSize + akEditorTableNumberColumnWidth + delta)
+					: resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta)
 			: willTableHitEditorEdge
 				? // CASE 2: table will hit editor edge
 					editorContainerWidth
 				: // CASE 3: table is being resized from a non-overflow state
-					resizeState.maxSize + delta,
+					isNumberColumnEnabled
+					? resizeState.maxSize + akEditorTableNumberColumnWidth + delta
+					: resizeState.maxSize + delta,
 	);
 
 	// do not apply scaling logic because resize state is already scaled
 	updateColgroup(newState, tableRef, tableNode, false, false);
 
-	if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
-		updateTablePreview(
-			tableRef,
+	updateTablePreview(
+		tableRef,
+		newState.maxSize,
+		shouldChangeAlignmentToCenterResized(
+			isTableAlignmentEnabled,
+			tableNode,
+			lineLength,
 			newState.maxSize,
-			shouldChangeAlignmentToCenterResized(
-				isTableAlignmentEnabled,
-				tableNode,
-				lineLength,
-				newState.maxSize,
-			),
-		);
-	}
+		),
+	);
 
 	return newState;
 };
@@ -184,34 +191,55 @@ export const scaleResizeState = ({
 	tableNode,
 	editorWidth,
 }: TableReferences & { resizeState: ResizeState; editorWidth: number }): ResizeState => {
-	// check if table is scaled, if not then avoid applying scaling values down
-	if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+	const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+	const isTableScaled =
+		isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
+
+	// Tables with number column can cause the table to be in two different states:
+	// 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
+	// avoid scaling and take the document width
+	// 2. The table sum of col widths will be the same size as max width, which happens when the table
+	// is scaled using preserve table width logic, for this apply a scaled width
+	// return early if table isn't scaled
+	if (!isTableScaled || (isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth)) {
 		return resizeState;
 	}
 
 	const scalePercent = getTableScalingPercent(tableNode, tableRef);
-	let cols = resizeState.cols.map((col) => ({
-		...col,
-		width: Math.round(Math.max(col.width * scalePercent, col.minWidth)),
-	}));
-
 	const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+	let cols = resizeState.cols.map((col) => {
+		return {
+			...col,
+			minWidth: tableCellMinWidth,
+			width: Math.max(Math.round(col.width * scalePercent), tableCellMinWidth),
+		};
+	});
+
 	const calculatedTableWidth = cols.reduce((prev, curr) => prev + curr.width, 0);
 
 	// using Math.round can cause the sum of col widths to be larger than the table width
-	// distribute the difference to the smallest column
+	// distribute the difference to the first column
 	if (calculatedTableWidth > scaledTableWidth) {
 		const diff = calculatedTableWidth - scaledTableWidth;
+		let hasDiffBeenDistributed = false;
 		cols = cols.map((col) => {
-			return col.width - diff >= col.minWidth ? { ...col, width: col.width - diff } : col;
+			if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
+				hasDiffBeenDistributed = true;
+				return { ...col, width: col.width - diff };
+			}
+			return col;
 		});
 	}
 
+	const maxSize = isNumberColumnEnabled
+		? Math.round((resizeState.maxSize + akEditorTableNumberColumnWidth) * scalePercent)
+		: Math.round(resizeState.maxSize * scalePercent);
+
 	return {
 		...resizeState,
 		widths: cols.map((col) => col.width),
 		tableWidth: scaledTableWidth,
-		maxSize: Math.round(resizeState.maxSize * scalePercent),
+		maxSize,
 		cols,
 	};
 };

package/src/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -283,6 +283,7 @@ export function updateAffectedColumn(
 
 	return {
 		...resizeState,
+		tableWidth: updatedCols.reduce((acc, col) => acc + col.width, 0),
 		cols: updatedCols,
 	};
 }

package/src/toolbar.tsx

@@ -292,22 +292,27 @@ export const getToolbarCellOptionsConfig = (
 			selected: false,
 			disabled: false,
 		},
-		{
-			id: 'editor.table.mergeCells',
-			title: formatMessage(messages.mergeCells),
-			onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-			selected: false,
-			disabled: !canMergeCells(editorState.tr),
-		},
-		{
-			id: 'editor.table.splitCell',
-			title: formatMessage(messages.splitCell),
-			onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-			selected: false,
-			disabled: !splitCell(editorState),
-		},
 	];
 
+	if (pluginState.pluginConfig.allowMergeCells) {
+		options.push(
+			{
+				id: 'editor.table.mergeCells',
+				title: formatMessage(messages.mergeCells),
+				onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+				selected: false,
+				disabled: !canMergeCells(editorState.tr),
+			},
+			{
+				id: 'editor.table.splitCell',
+				title: formatMessage(messages.splitCell),
+				onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+				selected: false,
+				disabled: !splitCell(editorState),
+			},
+		);
+	}
+
 	if (pluginState?.pluginConfig?.allowDistributeColumns) {
 		const newResizeStateWithAnalytics = editorView
 			? getNewResizeStateFromSelectedColumns(

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -370,11 +370,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			editorView,
 		} = this.props;
 		const { isDragAndDropEnabled } = getPluginState(editorView.state);
+		const content = formatMessage(
+			isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
+		);
 
 		return {
-			content: formatMessage(
-				isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
-			),
+			content,
 			value: { name: 'insert_column' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
@@ -384,6 +385,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					<AddColRightIcon />
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(addColumnAfter, String(content))
+				: undefined,
 		} as MenuItem;
 	};
 
@@ -393,9 +397,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			editorView,
 		} = this.props;
 		const { isDragAndDropEnabled } = getPluginState(editorView.state);
+		const content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
 
 		return {
-			content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
+			content,
 			value: { name: 'insert_row' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
@@ -405,6 +410,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					<AddRowBelowIcon />
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(addRowAfter, String(content))
+				: undefined,
 		} as MenuItem;
 	};
 
@@ -419,10 +427,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const noOfColumns = right - left;
 		const noOfRows = bottom - top;
 
+		const content = formatMessage(messages.clearCells, {
+			0: Math.max(noOfColumns, noOfRows),
+		});
+
 		return {
-			content: formatMessage(messages.clearCells, {
-				0: Math.max(noOfColumns, noOfRows),
-			}),
+			content,
 			value: { name: 'clear' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
@@ -436,6 +446,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					/>
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(backspace, String(content))
+				: undefined,
 		} as MenuItem;
 	};