@atlaskit/editor-plugin-table 7.22.0 → 7.24.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @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
+
+- [#124209](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124209)
+  [`8aa1792f12ed3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8aa1792f12ed3) -
+  bump @atlaskit/editor-prosemirror to 5.0.0, bump @atlaskit/adf-schema to 40.1.0
+
+### Patch Changes
+
+- [#122783](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122783)
+  [`c64ead15aa9d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c64ead15aa9d7) -
+  [ux] Enabled table alignment in comment editor
+- Updated dependencies
+
 ## 7.22.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -169,7 +169,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
       return [{

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/cjs/utils/create.js

@@ -22,7 +22,7 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
     if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
       attrsOverrides.tableWidth = _utils2.TABLE_MAX_WIDTH;
     }
-    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+    if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
       attrsOverrides.layout = 'align-start';
     }
     if (isCommentEditor && isTableResizingEnabled) {

package/dist/es2019/plugin.js

@@ -159,7 +159,7 @@ const tablesPlugin = ({
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes() {
       return [{

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/es2019/utils/create.js

@@ -12,7 +12,7 @@ export const createTableWithWidth = ({
   if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
     attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
   }
-  if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+  if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
     attrsOverrides.layout = 'align-start';
   }
   if (isCommentEditor && isTableResizingEnabled) {

package/dist/esm/plugin.js

@@ -162,7 +162,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
       return [{

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) {