@atlaskit/editor-plugin-table 7.23.0 → 7.24.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.1
+
+### Patch Changes
+
+- [#124890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124890)
+  [`04951dd1969d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/04951dd1969d5) -
+  [ux] ED-24278: Turned on table dnd in chromeless editor
+- Updated dependencies
+
+## 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/nodeviews/TableComponent.js

@@ -736,7 +736,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         tableWrapperWidth: this.state.tableWrapperWidth,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       });
       var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
@@ -764,7 +765,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
@@ -810,7 +812,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/cjs/nodeviews/TableContainer.js

@@ -297,7 +297,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref6.isCommentEditor;
+    isCommentEditor = _ref6.isCommentEditor,
+    isChromelessEditor = _ref6.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -329,7 +330,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     }),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      width: 'inherit'
+      width: 'inherit',
+      marginLeft: isChromelessEditor ? 18 : undefined
     }
   }, children);
 };

package/dist/cjs/nodeviews/lazy-node-views.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
+      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor, options.isChromelessEditor);
     };
   }
   var loader = function loader() {
@@ -34,8 +34,9 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
           dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
           pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
           isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled,
-          isCommentEditor = _getNodeViewOptions.isCommentEditor;
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
+          isCommentEditor = _getNodeViewOptions.isCommentEditor,
+          isChromelessEditor = _getNodeViewOptions.isChromelessEditor;
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor);
       };
     });
     return result;

package/dist/cjs/nodeviews/table.js

@@ -290,7 +290,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return TableView;
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
@@ -317,7 +317,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      isCommentEditor: isCommentEditor
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/plugin.js

@@ -204,8 +204,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropEnabled = _ref3.dragAndDropEnabled,
             isTableScalingEnabled = _ref3.isTableScalingEnabled,
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
-            isCommentEditor = _ref3.isCommentEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
+            isCommentEditor = _ref3.isCommentEditor,
+            isChromelessEditor = _ref3.isChromelessEditor;
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -433,7 +434,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,

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

@@ -30,7 +30,7 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 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) { (0, _defineProperty2.default)(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; }
-var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
   var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -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) {
@@ -264,7 +260,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           pluginInjectionApi: pluginInjectionApi,
           isTableAlignmentEnabled: isTableAlignmentEnabled,
-          isCommentEditor: isCommentEditor
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         }),
         tableRow: (0, _lazyNodeViews.lazyTableRowView)({
           eventDispatcher: eventDispatcher

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/types.js

@@ -81,6 +81,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner"),
   DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-column"),
   DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row-chromeless"),
   DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-wrap"),
   CONTROLS_INSERT_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-marker"),
   CONTROLS_INSERT_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-column"),
@@ -96,6 +97,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   /** drag and drop controls */
   DRAG_ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls-wrapper"),
   DRAG_ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls"),
+  DRAG_CONTROLS_CHROMELESS: "drag-controls-chromeless",
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
   DRAG_ROW_FLOATING_INSERT_DOT: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot"),
   DRAG_COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-controls"),

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/ui/FloatingInsertButton/InsertButton.js

@@ -41,12 +41,12 @@ var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDrop
   }
   return 0;
 };
-var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
+var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled, isChromelessEditor) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 4;
-  var DRAG_LINE_OFFSET = 6;
+  var DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
   var parentElement = tableRef.parentElement,
     offsetWidth = tableRef.offsetWidth;
   var parentOffsetWidth = parentElement.offsetWidth;
@@ -66,7 +66,8 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     tableRef = _ref2.tableRef,
     type = _ref2.type,
     formatMessage = _ref2.intl.formatMessage,
-    hasStickyHeaders = _ref2.hasStickyHeaders;
+    hasStickyHeaders = _ref2.hasStickyHeaders,
+    isChromelessEditor = _ref2.isChromelessEditor;
   var isRow = type === 'row';
   var content = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
@@ -76,7 +77,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     position: "top"
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _classnames))
+    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow && !isChromelessEditor), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, isRow && isChromelessEditor), _classnames))
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -100,7 +101,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: type === 'row' ? {
-      width: getInsertLineWidth(tableRef, true),
+      width: getInsertLineWidth(tableRef, true, isChromelessEditor),
       left: "var(--ds-space-150, 12px)"
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,

package/dist/cjs/ui/FloatingInsertButton/index.js

@@ -59,7 +59,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
         isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
-        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
+        isChromelessEditor = _this$props.isChromelessEditor;
 
       // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
       if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
@@ -144,7 +145,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
-        hasStickyHeaders: this.props.hasStickyHeaders || false
+        hasStickyHeaders: this.props.hasStickyHeaders || false,
+        isChromelessEditor: isChromelessEditor
       }) : /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
         type: type,
         tableRef: tableRef,
@@ -208,7 +210,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
           tableDuplicateCellColouring = _ref$tableDuplicateCe === void 0 ? false : _ref$tableDuplicateCe,
           _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
-        var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
+        var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
         var state = editorView.state,
           dispatch = editorView.dispatch;
         (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);

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

@@ -32,7 +32,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     getScrollOffset = _ref.getScrollOffset,
     tableWrapperHeight = _ref.tableWrapperHeight,
-    api = _ref.api;
+    api = _ref.api,
+    isChromelessEditor = _ref.isChromelessEditor;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
@@ -84,7 +85,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     ref: containerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS : ''),
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
     editorView: editorView,
@@ -102,7 +103,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? api : undefined
+    api: (0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? api : undefined
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/cjs/ui/TableFloatingControls/index.js

@@ -38,7 +38,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     hoveredCell = _ref.hoveredCell,
     isTableHovered = _ref.isTableHovered,
     tableWrapperWidth = _ref.tableWrapperWidth,
-    api = _ref.api;
+    api = _ref.api,
+    isChromelessEditor = _ref.isChromelessEditor;
   var _selectRow = (0, _react.useCallback)(function (row, expand) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -81,7 +82,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     return null;
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
+  var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
   var tablePos = (_findTable = (0, _utils2.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
   var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
   var shouldShowCornerControls = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);