@atlaskit/editor-plugin-table 24.2.2 → 24.2.4

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 24.2.4
+
+### Patch Changes
+
+- [`2a5949df6125f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a5949df6125f) -
+  Under platform_editor_table_menu_updates, keep the selection toolbar suppressed after the
+  row/column drag menu closes while that drag-handle selection persists; any other selection
+  re-enables the toolbar.
+- Updated dependencies
+
+## 24.2.3
+
+### Patch Changes
+
+- [`bd776b48c8623`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd776b48c8623) -
+  [ux] Fix table drag-handle menu edge cases for merged cells in the first row/column behind the
+  `platform_editor_table_menu_updates` experiment.
+- [`e850980f5a66f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e850980f5a66f) -
+  [EDITOR-6790] Block-controls drag-handle wrapper's background is removed and instead set
+  on`::before` on `.pm-table-container.pm-table-sticky` to keep masking the row insert dots when
+  legacy sticky header is activated while also not overlapping the column insert button.
+- Updated dependencies
+
 ## 24.2.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/active-table-menu.js

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
 var _pluginKey = require("../plugin-key");
+var _selection = require("../utils/selection");
 var applyMenuUserIntent = function applyMenuUserIntent(tr, api, nextActiveTableMenu) {
-  var _api$userIntent;
-  var isRowOrColumnMenuOpen = nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column';
-  api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent(isRowOrColumnMenuOpen ? 'tableDragMenuPopupOpen' : 'default')({
+  var _api$userIntent2;
+  if (nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column') {
+    var _api$userIntent;
+    api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('tableDragMenuPopupOpen')({
+      tr: tr
+    });
+    return;
+  }
+  api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent((0, _selection.isFullRowOrColumnSelected)(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr: tr
   });
 };
-var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu(api) {
+var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu(api, options) {
   return function (_ref) {
     var tr = _ref.tr;
     var nextActiveTableMenu = {
@@ -24,7 +31,9 @@ var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTa
         activeTableMenu: nextActiveTableMenu
       }
     });
-    applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    if (!(options !== null && options !== void 0 && options.skipUserIntent)) {
+      applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    }
     if (!tr.docChanged) {
       tr.setMeta('addToHistory', false);
     }

package/dist/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -96,7 +96,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
           var _api$userIntent;
           var tr = _ref7.tr;
-          (0, _activeTableMenu.closeActiveTableMenu)(api)({
+          (0, _activeTableMenu.closeActiveTableMenu)(api, {
+            skipUserIntent: true
+          })({
             tr: tr
           });
           api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('dragging')({

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

@@ -348,7 +348,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       handleDOMEvents: {
         focus: _eventHandlers.handleFocus,
         blur: _eventHandlers.handleBlur,
-        mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
+        mousedown: (0, _eventHandlers.withCellTracking)(function (view, event) {
+          return (0, _eventHandlers.handleMouseDown)(view, event, pluginInjectionApi);
+        }),
         mouseleave: _eventHandlers.handleMouseLeave,
         mousemove: (0, _eventHandlers.whenTableInFocus)((0, _eventHandlers.handleMouseMove)(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: _eventHandlers.handleMouseEnter,

package/dist/cjs/pm-plugins/utils/column-controls.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColumnsWidths = exports.getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnDeleteButtonParams = exports.convertHTMLCellIndexToColumnIndex = exports.colWidthsForRow = void 0;
+exports.getProportionalColumnWidths = exports.getColumnsWidthsWithMergedCells = exports.getColumnsWidths = exports.getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnIndexByMousePosition = exports.getColumnDeleteButtonParams = exports.convertHTMLCellIndexToColumnIndex = exports.colWidthsForRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -40,6 +40,73 @@ var getColumnsWidths = exports.getColumnsWidths = function getColumnsWidths(view
   }
   return widths;
 };
+
+/**
+ * Splits a merged cell's rendered width by `colwidth` ratios, falling back to an even split when
+ * usable ratios are unavailable.
+ */
+var getProportionalColumnWidths = exports.getProportionalColumnWidths = function getProportionalColumnWidths(totalWidth, columnCount, ratios) {
+  var evenSplit = function evenSplit() {
+    return new Array(columnCount).fill(totalWidth / columnCount);
+  };
+  if (!ratios || ratios.length !== columnCount) {
+    return evenSplit();
+  }
+  var total = ratios.reduce(function (sum, ratio) {
+    return sum + (ratio > 0 ? ratio : 0);
+  }, 0);
+  if (total <= 0) {
+    return evenSplit();
+  }
+  return ratios.map(function (ratio) {
+    return totalWidth * ((ratio > 0 ? ratio : 0) / total);
+  });
+};
+
+/**
+ * Like `getColumnsWidths`, but fills every visual column under a first-row `colspan` so column
+ * controls can render one grid track per column.
+ */
+var getColumnsWidthsWithMergedCells = exports.getColumnsWidthsWithMergedCells = function getColumnsWidthsWithMergedCells(view) {
+  var selection = view.state.selection;
+  var table = (0, _utils3.findTable)(selection);
+  if (!table) {
+    return [];
+  }
+  var map = _tableMap.TableMap.get(table.node);
+  var domAtPos = view.domAtPos.bind(view);
+  var widths = Array.from({
+    length: map.width
+  });
+  for (var i = 0; i < map.width; i++) {
+    var _node$attrs$colspan;
+    if (map.isCellMergedTopLeft(0, i)) {
+      continue;
+    }
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var node = table.node.nodeAt(map.map[i]);
+    var pos = map.map[i] + table.start;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    var cellRef = (0, _utils2.findDomRefAtPos)(pos, domAtPos);
+    var rect = cellRef.getBoundingClientRect();
+    var measuredWidth = (rect ? rect.width : cellRef.offsetWidth) + 1;
+    var colspan = (_node$attrs$colspan = node.attrs.colspan) !== null && _node$attrs$colspan !== void 0 ? _node$attrs$colspan : 1;
+    if (colspan <= 1) {
+      widths[i] = measuredWidth;
+      continue;
+    }
+    var colwidth = Array.isArray(node.attrs.colwidth) ? node.attrs.colwidth : undefined;
+    var perColumnWidths = getProportionalColumnWidths(measuredWidth, colspan, colwidth);
+    for (var span = 0; span < colspan && i + span < map.width; span++) {
+      widths[i + span] = perColumnWidths[span];
+    }
+    i += colspan - 1;
+  }
+  return widths;
+};
 var getColumnDeleteButtonParams = exports.getColumnDeleteButtonParams = function getColumnDeleteButtonParams(columnsWidths, selection) {
   var rect = (0, _utils3.getSelectionRect)(selection);
   if (!rect) {
@@ -122,6 +189,9 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
   });
 };
 var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$useColwidthRati = _ref2.useColwidthRatios,
+    useColwidthRatios = _ref2$useColwidthRati === void 0 ? false : _ref2$useColwidthRati;
   // get the colspans
   var rowColSpans = (0, _utils.maphElem)(tr, function (cell) {
     return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
@@ -149,7 +219,7 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
     // reverse engineer cell widths from table widths
     var domBasedCellWidths = [];
     cellInfos.map(function (cell) {
-      domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(getRelativeDomCellWidths(cell)));
+      domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(useColwidthRatios ? getRelativeDomCellWidths(cell) : new Array(cell.colspan).fill(cell.width / cell.colspan)));
     });
     if (cellInfos.reduce(function (acc, cell) {
       return acc + cell.width;
@@ -173,6 +243,53 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
     return "".concat(pct, "%");
   }).join(' ');
 };
+
+/**
+ * Returns the visual column index that the mouse pointer is over within a column-spanned
+ * cell, by walking the per-column boundaries of the spanned cell and finding the column whose
+ * horizontal range contains `mouseEvent.clientX`.
+ *
+ * `<td>.cellIndex` for a cell with `colspan > 1` only resolves to the first column the cell
+ * occupies, so hovering anywhere inside a colspanned first-row cell pins the column drag handle
+ * to that first column. This resolver disambiguates which visual column the pointer is actually
+ * over so the handle/menu can target a single column.
+ *
+ * The search is restricted to columns in `[startIndex, endIndex)` (the cell's own span). The
+ * spanned cell's bounding rect is read once and split into per-column boundaries using the cell's
+ * `data-colwidth` ratios (falling back to an even split for unresized columns) — this keeps the
+ * work bounded by the colspan size and avoids measuring the whole table.
+ *
+ * Returns `undefined` when the mouse is outside the spanned range (so callers can fall back to
+ * the converted HTML column index).
+ */
+var getColumnIndexByMousePosition = exports.getColumnIndexByMousePosition = function getColumnIndexByMousePosition(cellElement, mouseEvent, columnIndexRange) {
+  var _cellElement$dataset$;
+  var startIndex = columnIndexRange.startIndex,
+    endIndex = columnIndexRange.endIndex;
+  var columnCount = endIndex - startIndex;
+  if (columnCount <= 0) {
+    return undefined;
+  }
+  var cellRect = cellElement.getBoundingClientRect();
+  if (mouseEvent.clientX < cellRect.left || mouseEvent.clientX >= cellRect.right) {
+    return undefined;
+  }
+
+  // Read DOM ratios here to avoid resolving the ProseMirror node on this mouse-move path.
+  var ratios = (_cellElement$dataset$ = cellElement.dataset.colwidth) === null || _cellElement$dataset$ === void 0 ? void 0 : _cellElement$dataset$.split(',').map(Number).filter(function (value) {
+    return !Number.isNaN(value);
+  });
+  var perColumnWidths = getProportionalColumnWidths(cellRect.width, columnCount, ratios);
+  var offsetFromLeft = mouseEvent.clientX - cellRect.left;
+  var cumulativeWidth = 0;
+  for (var column = 0; column < columnCount; column++) {
+    cumulativeWidth += perColumnWidths[column];
+    if (offsetFromLeft < cumulativeWidth) {
+      return startIndex + column;
+    }
+  }
+  return endIndex - 1;
+};
 var convertHTMLCellIndexToColumnIndex = exports.convertHTMLCellIndexToColumnIndex = function convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap) {
   // Same numbers (positions) in tableMap.map array mean that there are merged cells.
   // Cells can be merged across columns. So we need to check if the cell on the left and current cell have the same value.

package/dist/cjs/pm-plugins/utils/dom.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = exports.areAllRectsZero = void 0;
+exports.isTableDragHandleButton = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getIndexAttributeSourceElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = exports.areAllRectsZero = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../../types");
 var isCell = exports.isCell = function isCell(node) {
@@ -18,6 +18,25 @@ var isInsertRowButton = exports.isInsertRowButton = function isInsertRowButton(n
 var getColumnOrRowIndex = exports.getColumnOrRowIndex = function getColumnOrRowIndex(target) {
   return [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
 };
+
+/**
+ * Returns the element that carries the `data-start-index` / `data-end-index` attributes for a
+ * column/row control.
+ *
+ * The floating insert dot is a child of a wrapper that holds the index attributes, so when the
+ * pointer is directly over the dot the attributes are not on the event target. This walks up to
+ * the nearest ancestor that has `data-start-index`, falling back to the original element so the
+ * behaviour is unchanged when the target already carries the attributes.
+ */
+var getIndexAttributeSourceElement = exports.getIndexAttributeSourceElement = function getIndexAttributeSourceElement(target) {
+  if (target.hasAttribute('data-start-index')) {
+    return target;
+  }
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  var closestWithIndex = target.closest('[data-start-index]');
+  return closestWithIndex !== null && closestWithIndex !== void 0 ? closestWithIndex : target;
+};
 var isColumnControlsDecorations = exports.isColumnControlsDecorations = function isColumnControlsDecorations(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
 };
@@ -44,6 +63,9 @@ var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = func
 var isDragCornerButton = exports.isDragCornerButton = function isDragCornerButton(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER);
 };
+var isTableDragHandleButton = exports.isTableDragHandleButton = function isTableDragHandleButton(target) {
+  return target instanceof HTMLElement && Boolean(target.closest(".".concat(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER)));
+};
 
 /*
  * This function returns which side of a given element the mouse cursor is,

package/dist/cjs/pm-plugins/utils/row-controls.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRowsParams = exports.getRowHeights = exports.getRowDeleteButtonParams = exports.getRowClassNames = exports.copyPreviousRow = void 0;
+exports.getRowsParams = exports.getRowIndexByMousePosition = exports.getRowHeights = exports.getRowDeleteButtonParams = exports.getRowClassNames = exports.copyPreviousRow = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -85,6 +85,48 @@ var getRowsParams = exports.getRowsParams = function getRowsParams(rowsHeights)
   }
   return rows;
 };
+
+/**
+ * Returns the visual row index that the mouse pointer is over, by walking the row heights
+ * inside `tbody` and finding the row whose vertical range contains `mouseEvent.clientY`.
+ *
+ * When `rowIndexRange` is provided, the search is restricted to rows in that range (the
+ * `endIndex` is exclusive). This is the hot path used on `mousemove` when hovering over a
+ * row-spanned cell — restricting the range to `[startIndex, endIndex)` keeps the number
+ * of forced layout reads bounded by the row-span size, not the table size.
+ *
+ * Returns `undefined` when the mouse is above the search range or below it (so callers can
+ * fall back to the HTML row index).
+ */
+var getRowIndexByMousePosition = exports.getRowIndexByMousePosition = function getRowIndexByMousePosition(tableRef, mouseEvent, rowIndexRange) {
+  var _rowIndexRange$startI, _rowIndexRange$endInd;
+  var tableBody = tableRef.querySelector('tbody');
+  if (!tableBody) {
+    return undefined;
+  }
+  var rows = tableBody.children;
+  var startIndex = (_rowIndexRange$startI = rowIndexRange === null || rowIndexRange === void 0 ? void 0 : rowIndexRange.startIndex) !== null && _rowIndexRange$startI !== void 0 ? _rowIndexRange$startI : 0;
+  var endIndex = Math.min((_rowIndexRange$endInd = rowIndexRange === null || rowIndexRange === void 0 ? void 0 : rowIndexRange.endIndex) !== null && _rowIndexRange$endInd !== void 0 ? _rowIndexRange$endInd : rows.length, rows.length);
+  if (startIndex >= endIndex) {
+    return undefined;
+  }
+  var firstRowRect = rows[startIndex].getBoundingClientRect();
+  if (mouseEvent.clientY < firstRowRect.top) {
+    return undefined;
+  }
+  var rowBottom = firstRowRect.bottom;
+  if (mouseEvent.clientY < rowBottom) {
+    return startIndex;
+  }
+  for (var rowIndex = startIndex + 1; rowIndex < endIndex; rowIndex++) {
+    var rowRect = rows[rowIndex].getBoundingClientRect();
+    rowBottom = rowRect.bottom;
+    if (mouseEvent.clientY < rowBottom) {
+      return rowIndex;
+    }
+  }
+  return undefined;
+};
 var getRowClassNames = exports.getRowClassNames = function getRowClassNames(index, selection) {
   var hoveredRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var isInDanger = arguments.length > 3 ? arguments[3] : undefined;

package/dist/cjs/pm-plugins/utils/selection.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedRowIndexes = exports.getSelectedColumnIndexes = void 0;
+exports.isRowSelectionWithMergedFirstColumn = exports.isFullRowOrColumnSelected = exports.isColumnSelectionWithMergedFirstRow = exports.getSelectedRowIndexes = exports.getSelectedColumnIndexes = void 0;
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _utils = require("@atlaskit/editor-tables/utils");
 var getSelectedColumnIndexes = exports.getSelectedColumnIndexes = function getSelectedColumnIndexes(selectionRect) {
   var columnIndexes = [];
   for (var i = selectionRect.left; i < selectionRect.right; i++) {
@@ -17,4 +20,74 @@ var getSelectedRowIndexes = exports.getSelectedRowIndexes = function getSelected
     rowIndexes.push(i);
   }
   return rowIndexes;
+};
+
+/**
+ * Treats a column as fully selected when its first-row area is covered by a horizontal merge and
+ * the explicit `CellSelection` starts below that merged cell. `CellSelection.isColSelection()`
+ * returns `false` in this case because the selection does not include the merged first-row cell.
+ */
+var isColumnSelectionWithMergedFirstRow = exports.isColumnSelectionWithMergedFirstRow = function isColumnSelectionWithMergedFirstRow(selection) {
+  var rect = (0, _utils.getSelectionRect)(selection);
+  if (!rect) {
+    return false;
+  }
+  var table = (0, _utils.findTableClosestToPos)(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  var map = _tableMap.TableMap.get(table.node);
+  if (rect.bottom !== map.height || rect.top === 0) {
+    return false;
+  }
+  for (var col = rect.left; col < rect.right; col++) {
+    var topCellRect = map.findCell(map.map[col]);
+    var isHorizontallyMerged = topCellRect.right - topCellRect.left > 1;
+    var bridgesGapAboveSelection = topCellRect.bottom >= rect.top;
+    if (!isHorizontallyMerged || !bridgesGapAboveSelection) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Treats a row as fully selected when its first-column area is covered by a vertical merge and the
+ * explicit `CellSelection` starts to the right of that merged cell. `CellSelection.isRowSelection()`
+ * returns `false` in this case because the selection does not include the merged first-column cell.
+ */
+var isRowSelectionWithMergedFirstColumn = exports.isRowSelectionWithMergedFirstColumn = function isRowSelectionWithMergedFirstColumn(selection) {
+  var rect = (0, _utils.getSelectionRect)(selection);
+  if (!rect) {
+    return false;
+  }
+  var table = (0, _utils.findTableClosestToPos)(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  var map = _tableMap.TableMap.get(table.node);
+  if (rect.right !== map.width || rect.left === 0) {
+    return false;
+  }
+  for (var row = rect.top; row < rect.bottom; row++) {
+    var leftCellRect = map.findCell(map.map[row * map.width]);
+    var isVerticallyMerged = leftCellRect.bottom - leftCellRect.top > 1;
+    var bridgesGapLeftOfSelection = leftCellRect.right >= rect.left;
+    if (!isVerticallyMerged || !bridgesGapLeftOfSelection) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+var isFullRowOrColumnSelected = exports.isFullRowOrColumnSelected = function isFullRowOrColumnSelected(selection) {
+  if (!(selection instanceof _cellSelection.CellSelection)) {
+    return false;
+  }
+  return selection.isRowSelection() || selection.isColSelection() || isRowSelectionWithMergedFirstColumn(selection) || isColumnSelectionWithMergedFirstRow(selection);
 };

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

@@ -19,6 +19,7 @@ var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _activeTableMenu = require("../../pm-plugins/commands/active-table-menu");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _mergedCells = require("../../pm-plugins/utils/merged-cells");
 var _types = require("../../types");
@@ -29,7 +30,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /* eslint-disable @atlaskit/design-system/no-html-button */
 
 var DragHandleComponent = function DragHandleComponent(_ref) {
-  var isDragMenuTarget = _ref.isDragMenuTarget,
+  var api = _ref.api,
+    isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
@@ -160,6 +162,35 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   var browser = (0, _browser.getBrowserInfo)();
+
+  // Clicking the drag handle's clickable zone is a plain row/column selection (not the menu
+  // trigger), so the selection toolbar should appear. The floating menu defers closing for clicks
+  // inside the drag controls, so we close it here and reset the user intent to 'default' (in the
+  // same transaction) so the toolbar is shown.
+  var closeActiveDragMenuAndShowToolbar = (0, _react.useCallback)(function () {
+    var _api$table, _api$core;
+    if (!api) {
+      return;
+    }
+    var activeTableMenu = (_api$table = api.table) === null || _api$table === void 0 || (_api$table = _api$table.sharedState.currentState()) === null || _api$table === void 0 ? void 0 : _api$table.activeTableMenu;
+    var isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+    if (!isActiveTableMenuOpen) {
+      return;
+    }
+    (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref5) {
+      var _api$userIntent;
+      var tr = _ref5.tr;
+      (0, _activeTableMenu.closeActiveTableMenu)(api, {
+        skipUserIntent: true
+      })({
+        tr: tr
+      });
+      (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -185,7 +216,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      if (isDragMenuOpen) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        // New menu: close the open row/column menu (and show the selection toolbar).
+        closeActiveDragMenuAndShowToolbar();
+      } else if (isDragMenuOpen) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },
@@ -224,12 +258,20 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      toggleDragMenu && toggleDragMenu('mouse', e);
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
+      } else {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
     },
     onClick: onClick,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
-        toggleDragMenu && toggleDragMenu('keyboard');
+        if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+          toggleDragMenu && toggleDragMenu('keyboard', undefined, indexes[0]);
+        } else {
+          toggleDragMenu && toggleDragMenu('keyboard');
+        }
       }
     }
   }, appearance !== 'placeholder' ?

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

@@ -38,6 +38,7 @@ function getRowOptions(index) {
   });
 }
 function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+  var verticalOffsetCorrection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var options = {
     alignX: 'end',
     alignY: 'top',
@@ -48,20 +49,32 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
     // we should always set the InsertButton on the start,
     // considering the offset from the first column
     onPositionCalculated: function onPositionCalculated(position) {
+      // Move the popup upward whether the offset parent provides `top` or `bottom`.
+      var verticalCorrection;
+      if (verticalOffsetCorrection) {
+        if (position.top !== undefined) {
+          verticalCorrection = {
+            top: position.top - verticalOffsetCorrection
+          };
+        } else if (position.bottom !== undefined) {
+          verticalCorrection = {
+            bottom: position.bottom + verticalOffsetCorrection
+          };
+        }
+      }
       var left = position.left;
       if (!left) {
-        // If not left, lest skip expensive next calculations.
-        return position;
+        return _objectSpread(_objectSpread({}, position), verticalCorrection);
       }
       if (index === 0) {
-        return _objectSpread(_objectSpread({}, position), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, position), verticalCorrection), {}, {
           left: hasNumberedColumns ? HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON : HORIZONTAL_ALIGN_COLUMN_BUTTON
         });
       }
 
       // Check if current position is greater than the available container width
       var rect = tableContainer ? tableContainer.getBoundingClientRect() : null;
-      return _objectSpread(_objectSpread({}, position), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, position), verticalCorrection), {}, {
         left: rect && left > rect.width ? rect.width : left
       });
     }
@@ -78,9 +91,10 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   return options;
 }
 function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+  var verticalOffsetCorrection = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+      return getColumnOptions(index, tableContainer, hasNumberedColumns, verticalOffsetCorrection);
     case 'row':
       return getRowOptions(index);
     default: