@atlaskit/editor-plugin-table 7.22.0 → 7.24.0

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

@@ -15,7 +15,7 @@ export var createTableWithWidth = function createTableWithWidth(_ref) {
     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/types/utils/analytics.d.ts

@@ -3,8 +3,9 @@ import type { HigherOrderCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
 export declare function getSelectedTableInfo(selection: Selection): {
-    table: import("prosemirror-utils").ContentNodeWithPos | undefined;
+    table: ReturnType<typeof findTable> | undefined;
     map: TableMap | undefined;
     totalRowCount: number;
     totalColumnCount: number;

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

@@ -3,8 +3,9 @@ import type { HigherOrderCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
 export declare function getSelectedTableInfo(selection: Selection): {
-    table: import("prosemirror-utils").ContentNodeWithPos | undefined;
+    table: ReturnType<typeof findTable> | undefined;
     map: TableMap | undefined;
     totalRowCount: number;
     totalColumnCount: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.22.0",
+	"version": "7.24.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,26 +30,26 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/custom-steps": "^0.5.0",
-		"@atlaskit/editor-common": "^86.7.0",
+		"@atlaskit/custom-steps": "^0.6.0",
+		"@atlaskit/editor-common": "^87.0.0",
 		"@atlaskit/editor-palette": "1.6.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
-		"@atlaskit/editor-plugin-analytics": "^1.5.0",
-		"@atlaskit/editor-plugin-content-insertion": "^1.5.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^2.0.0",
-		"@atlaskit/editor-plugin-guideline": "^1.1.0",
-		"@atlaskit/editor-plugin-selection": "^1.2.0",
-		"@atlaskit/editor-plugin-width": "^1.1.0",
-		"@atlaskit/editor-prosemirror": "4.0.1",
+		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
+		"@atlaskit/editor-plugin-analytics": "^1.6.0",
+		"@atlaskit/editor-plugin-content-insertion": "^1.6.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
+		"@atlaskit/editor-plugin-guideline": "^1.2.0",
+		"@atlaskit/editor-plugin-selection": "^1.3.0",
+		"@atlaskit/editor-plugin-width": "^1.2.0",
+		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
-		"@atlaskit/editor-tables": "^2.7.0",
+		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/menu": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/toggle": "^13.2.0",
 		"@atlaskit/tokens": "^1.56.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/plugin.tsx

@@ -294,6 +294,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				options?.isTableScalingEnabled,
 				options?.isTableAlignmentEnabled,
 				api?.analytics?.actions,
+				options?.isCommentEditor,
 			),
 		},
 

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;
 	};