@atlaskit/editor-plugin-table 24.2.2 → 24.2.4

package/dist/cjs/ui/event-handlers.js

@@ -29,6 +29,7 @@ var _analytics2 = require("../pm-plugins/utils/analytics");
 var _columnControls = require("../pm-plugins/utils/column-controls");
 var _dom = require("../pm-plugins/utils/dom");
 var _getAllowAddColumnCustomStep = require("../pm-plugins/utils/get-allow-add-column-custom-step");
+var _rowControls = require("../pm-plugins/utils/row-controls");
 var _types = require("../types");
 var _consts = require("./TableMenu/shared/consts");
 var isFocusingCalendar = function isFocusingCalendar(event) {
@@ -206,14 +207,27 @@ var handleMouseUp = exports.handleMouseUp = function handleMouseUp(view, mouseEv
   }
   return false;
 };
+var resetDragHandleSelectedIntentOnMouseDown = function resetDragHandleSelectedIntentOnMouseDown(event, api) {
+  var _api$userIntent;
+  if ((0, _dom.isTableDragHandleButton)(event.target)) {
+    return;
+  }
+  if ((api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragHandleSelected') {
+    var _api$core, _api$userIntent2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+  }
+};
 
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(_, event) {
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(_view, event, api) {
   var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _dom.isTableContainerOrWrapper)(event.target) || (0, _dom.isColumnControlsDecorations)(event.target) || (0, _dom.isRowControlsButton)(event.target) || (0, _dom.isDragCornerButton)(event.target)));
   if (isControl) {
     event.preventDefault();
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    resetDragHandleSelectedIntentOnMouseDown(event, api);
+  }
   return isControl;
 };
 var handleMouseOut = exports.handleMouseOut = function handleMouseOut(view, mouseEvent) {
@@ -292,12 +306,26 @@ var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalPro
       return false;
     }
     var element = event.target;
+    var isTableMenuUpdatesEnabled = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true);
+
+    // Spanned cells need mouse-position-based hover indexes; normal cells already report them.
+    if (isTableMenuUpdatesEnabled) {
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      var tableCell = (0, _utils.isElementInTableCell)(element);
+      if (tableCell && (tableCell.rowSpan > 1 || tableCell.colSpan > 1)) {
+        var dragDropState = (0, _pluginFactory.getPluginState)(view.state);
+        if (dragDropState && !dragDropState.isDragging) {
+          trackCellLocation(view, event);
+        }
+      }
+    }
     if ((0, _dom.isColumnControlsDecorations)(element) || (0, _dom.isDragColumnFloatingInsertDot)(element)) {
       var state = view.state,
         dispatch = view.dispatch;
       var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
         insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
-      var _getColumnOrRowIndex9 = (0, _dom.getColumnOrRowIndex)(element),
+      var indexSourceElement = isTableMenuUpdatesEnabled ? (0, _dom.getIndexAttributeSourceElement)(element) : element;
+      var _getColumnOrRowIndex9 = (0, _dom.getColumnOrRowIndex)(indexSourceElement),
         _getColumnOrRowIndex0 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
         startIndex = _getColumnOrRowIndex0[0],
         endIndex = _getColumnOrRowIndex0[1];
@@ -311,7 +339,8 @@ var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalPro
         _dispatch4 = view.dispatch;
       var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state3),
         insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
-      var _getColumnOrRowIndex1 = (0, _dom.getColumnOrRowIndex)(element),
+      var _indexSourceElement = isTableMenuUpdatesEnabled ? (0, _dom.getIndexAttributeSourceElement)(element) : element;
+      var _getColumnOrRowIndex1 = (0, _dom.getColumnOrRowIndex)(_indexSourceElement),
         _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex1, 2),
         _startIndex3 = _getColumnOrRowIndex10[0],
         _endIndex2 = _getColumnOrRowIndex10[1];
@@ -329,8 +358,8 @@ var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalPro
           resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
           resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
         var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
-        var tableCell = (0, _utils.closestElement)(element, 'td, th');
-        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var _tableCell = (0, _utils.closestElement)(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(_tableCell, 0);
         var rect = (0, _utils3.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
         if (rect) {
           var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
@@ -459,7 +488,8 @@ var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(even
   };
 };
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
-  var _tableElement$dataset;
+  var _tableElement$dataset, _getRowIndexByMousePo;
+  var isTableMenuUpdatesEnabled = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true);
   var target = mouseEvent.target;
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -484,13 +514,36 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var rowElement = (0, _utils.closestElement)(target, 'tr');
   var htmlRowIndex = rowElement && rowElement.rowIndex;
+  var rowIndex = maybeTableCell.rowSpan > 1 && mouseEvent instanceof MouseEvent && isTableMenuUpdatesEnabled ? (_getRowIndexByMousePo = (0, _rowControls.getRowIndexByMousePosition)(tableRef, mouseEvent, {
+    startIndex: htmlRowIndex,
+    endIndex: htmlRowIndex + maybeTableCell.rowSpan
+  })) !== null && _getRowIndexByMousePo !== void 0 ? _getRowIndexByMousePo : htmlRowIndex : htmlRowIndex;
   var tableMap = tableNode && _tableMap.TableMap.get(tableNode);
   var colIndex = htmlColIndex;
   if (tableMap) {
     var convertedColIndex = (0, _columnControls.convertHTMLCellIndexToColumnIndex)(htmlColIndex, htmlRowIndex, tableMap);
-    colIndex = (0, _columnControls.getColumnIndexMappedToColumnIndexInFirstRow)(convertedColIndex, htmlRowIndex, tableMap);
+    if (isTableMenuUpdatesEnabled) {
+      // New behaviour: the column controls grid renders one track per visual column
+      // (`getColumnsWidthsWithMergedCells`), so the hover index must be the visual column
+      // index — not the first-row-cell index. Mapping to the first-row cell would collapse
+      // every column under a merged first-row cell to the same index, leaving the drag handle
+      // stuck when hovering cells in other rows. For a colspanned cell, refine the converted
+      // (left-most) visual column to the exact visual column under the pointer.
+      colIndex = convertedColIndex;
+      if (maybeTableCell.colSpan > 1 && mouseEvent instanceof MouseEvent) {
+        var _getColumnIndexByMous;
+        colIndex = (_getColumnIndexByMous = (0, _columnControls.getColumnIndexByMousePosition)(maybeTableCell, mouseEvent, {
+          startIndex: convertedColIndex,
+          endIndex: convertedColIndex + maybeTableCell.colSpan
+        })) !== null && _getColumnIndexByMous !== void 0 ? _getColumnIndexByMous : convertedColIndex;
+      }
+    } else {
+      // Old behaviour: the legacy grid renders one track per first-row cell, so snap to the
+      // first-row column index (a merged first-row cell collapses to a single column track).
+      colIndex = (0, _columnControls.getColumnIndexMappedToColumnIndexInFirstRow)(convertedColIndex, htmlRowIndex, tableMap);
+    }
   }
-  (0, _commands.hoverCell)(htmlRowIndex, colIndex)(view.state, view.dispatch);
+  (0, _commands.hoverCell)(rowIndex, colIndex)(view.state, view.dispatch);
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler) {
   return function (view, mouseEvent) {

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

@@ -1,12 +1,19 @@
 import { pluginKey } from '../plugin-key';
+import { isFullRowOrColumnSelected } from '../utils/selection';
 const applyMenuUserIntent = (tr, api, nextActiveTableMenu) => {
-  var _api$userIntent;
-  const isRowOrColumnMenuOpen = nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column';
-  api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? 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 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('tableDragMenuPopupOpen')({
+      tr
+    });
+    return;
+  }
+  api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isFullRowOrColumnSelected(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr
   });
 };
-export const closeActiveTableMenu = api => ({
+export const closeActiveTableMenu = (api, options) => ({
   tr
 }) => {
   const nextActiveTableMenu = {
@@ -18,7 +25,9 @@ export const closeActiveTableMenu = api => ({
       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/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -98,7 +98,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
           tr
         }) => {
           var _api$userIntent;
-          closeActiveTableMenu(api)({
+          closeActiveTableMenu(api, {
+            skipUserIntent: true
+          })({
             tr
           });
           api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging')({

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

@@ -346,7 +346,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: withCellTracking(handleMouseDown),
+        mousedown: withCellTracking((view, event) => handleMouseDown(view, event, pluginInjectionApi)),
         mouseleave: handleMouseLeave,
         mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: handleMouseEnter,

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

@@ -34,6 +34,69 @@ export const 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.
+ */
+export const getProportionalColumnWidths = (totalWidth, columnCount, ratios) => {
+  const evenSplit = () => new Array(columnCount).fill(totalWidth / columnCount);
+  if (!ratios || ratios.length !== columnCount) {
+    return evenSplit();
+  }
+  const total = ratios.reduce((sum, ratio) => sum + (ratio > 0 ? ratio : 0), 0);
+  if (total <= 0) {
+    return evenSplit();
+  }
+  return ratios.map(ratio => 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.
+ */
+export const getColumnsWidthsWithMergedCells = view => {
+  const {
+    selection
+  } = view.state;
+  const table = findTable(selection);
+  if (!table) {
+    return [];
+  }
+  const map = TableMap.get(table.node);
+  const domAtPos = view.domAtPos.bind(view);
+  const widths = Array.from({
+    length: map.width
+  });
+  for (let 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
+    const node = table.node.nodeAt(map.map[i]);
+    const pos = map.map[i] + table.start;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    const cellRef = findDomRefAtPos(pos, domAtPos);
+    const rect = cellRef.getBoundingClientRect();
+    const measuredWidth = (rect ? rect.width : cellRef.offsetWidth) + 1;
+    const colspan = (_node$attrs$colspan = node.attrs.colspan) !== null && _node$attrs$colspan !== void 0 ? _node$attrs$colspan : 1;
+    if (colspan <= 1) {
+      widths[i] = measuredWidth;
+      continue;
+    }
+    const colwidth = Array.isArray(node.attrs.colwidth) ? node.attrs.colwidth : undefined;
+    const perColumnWidths = getProportionalColumnWidths(measuredWidth, colspan, colwidth);
+    for (let span = 0; span < colspan && i + span < map.width; span++) {
+      widths[i + span] = perColumnWidths[span];
+    }
+    i += colspan - 1;
+  }
+  return widths;
+};
 export const getColumnDeleteButtonParams = (columnsWidths, selection) => {
   const rect = getSelectionRect(selection);
   if (!rect) {
@@ -108,7 +171,9 @@ const getRelativeDomCellWidths = ({
   const totalCalculatedCellWidth = cellColWidths.reduce((acc, cellColWidth) => acc + cellColWidth, 0);
   return cellColWidths.map(cellColWidth => width * (cellColWidth / totalCalculatedCellWidth));
 };
-export const colWidthsForRow = tr => {
+export const colWidthsForRow = (tr, {
+  useColwidthRatios = false
+} = {}) => {
   // get the colspans
   const rowColSpans = maphElem(tr, cell => Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */));
 
@@ -132,7 +197,7 @@ export const colWidthsForRow = tr => {
     // reverse engineer cell widths from table widths
     const domBasedCellWidths = [];
     cellInfos.map(cell => {
-      domBasedCellWidths.push(...getRelativeDomCellWidths(cell));
+      domBasedCellWidths.push(...(useColwidthRatios ? getRelativeDomCellWidths(cell) : new Array(cell.colspan).fill(cell.width / cell.colspan)));
     });
     if (cellInfos.reduce((acc, cell) => acc + cell.width, 0) !== 0) {
       const newWidths = mapTableColwidthsToRow(rowColSpans, domBasedCellWidths);
@@ -146,6 +211,53 @@ export const colWidthsForRow = tr => {
   const pctWidths = rowColSpans.map(cellColSpan => cellColSpan / visualColCount * 100);
   return pctWidths.map(pct => `${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).
+ */
+export const getColumnIndexByMousePosition = (cellElement, mouseEvent, columnIndexRange) => {
+  var _cellElement$dataset$;
+  const {
+    startIndex,
+    endIndex
+  } = columnIndexRange;
+  const columnCount = endIndex - startIndex;
+  if (columnCount <= 0) {
+    return undefined;
+  }
+  const 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.
+  const ratios = (_cellElement$dataset$ = cellElement.dataset.colwidth) === null || _cellElement$dataset$ === void 0 ? void 0 : _cellElement$dataset$.split(',').map(Number).filter(value => !Number.isNaN(value));
+  const perColumnWidths = getProportionalColumnWidths(cellRect.width, columnCount, ratios);
+  const offsetFromLeft = mouseEvent.clientX - cellRect.left;
+  let cumulativeWidth = 0;
+  for (let column = 0; column < columnCount; column++) {
+    cumulativeWidth += perColumnWidths[column];
+    if (offsetFromLeft < cumulativeWidth) {
+      return startIndex + column;
+    }
+  }
+  return endIndex - 1;
+};
 export const 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/es2019/pm-plugins/utils/dom.js

@@ -6,6 +6,25 @@ export const isCell = node => {
 export const isCornerButton = node => containsClassName(node, ClassName.CONTROLS_CORNER_BUTTON);
 export const isInsertRowButton = node => containsClassName(node, ClassName.CONTROLS_INSERT_ROW) || closestElement(node, `.${ClassName.CONTROLS_INSERT_ROW}`) || containsClassName(node, ClassName.CONTROLS_BUTTON_OVERLAY) && closestElement(node, `.${ClassName.ROW_CONTROLS}`);
 export const getColumnOrRowIndex = target => [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.
+ */
+export const getIndexAttributeSourceElement = target => {
+  if (target.hasAttribute('data-start-index')) {
+    return target;
+  }
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  const closestWithIndex = target.closest('[data-start-index]');
+  return closestWithIndex !== null && closestWithIndex !== void 0 ? closestWithIndex : target;
+};
 export const isColumnControlsDecorations = node => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 export const isRowControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) || containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 export const isResizeHandleDecoration = node => containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
@@ -16,6 +35,7 @@ export const isTableContainerOrWrapper = node => containsClassName(node, ClassNa
 export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragCornerButton = node => containsClassName(node, ClassName.DRAG_CORNER_BUTTON) || containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
+export const isTableDragHandleButton = target => target instanceof HTMLElement && Boolean(target.closest(`.${ClassName.DRAG_HANDLE_BUTTON_CONTAINER}`));
 
 /*
  * This function returns which side of a given element the mouse cursor is,

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

@@ -74,6 +74,48 @@ export const 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).
+ */
+export const getRowIndexByMousePosition = (tableRef, mouseEvent, rowIndexRange) => {
+  var _rowIndexRange$startI, _rowIndexRange$endInd;
+  const tableBody = tableRef.querySelector('tbody');
+  if (!tableBody) {
+    return undefined;
+  }
+  const rows = tableBody.children;
+  const startIndex = (_rowIndexRange$startI = rowIndexRange === null || rowIndexRange === void 0 ? void 0 : rowIndexRange.startIndex) !== null && _rowIndexRange$startI !== void 0 ? _rowIndexRange$startI : 0;
+  const 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;
+  }
+  const firstRowRect = rows[startIndex].getBoundingClientRect();
+  if (mouseEvent.clientY < firstRowRect.top) {
+    return undefined;
+  }
+  let rowBottom = firstRowRect.bottom;
+  if (mouseEvent.clientY < rowBottom) {
+    return startIndex;
+  }
+  for (let rowIndex = startIndex + 1; rowIndex < endIndex; rowIndex++) {
+    const rowRect = rows[rowIndex].getBoundingClientRect();
+    rowBottom = rowRect.bottom;
+    if (mouseEvent.clientY < rowBottom) {
+      return rowIndex;
+    }
+  }
+  return undefined;
+};
 export const getRowClassNames = (index, selection, hoveredRows = [], isInDanger, isResizing) => {
   const classNames = [];
   if (isRowSelected(index)(selection) || hoveredRows.indexOf(index) > -1 && !isResizing) {

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

@@ -1,3 +1,6 @@
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTableClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 export const getSelectedColumnIndexes = selectionRect => {
   const columnIndexes = [];
   for (let i = selectionRect.left; i < selectionRect.right; i++) {
@@ -11,4 +14,74 @@ export const getSelectedRowIndexes = selectionRect => {
     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.
+ */
+export const isColumnSelectionWithMergedFirstRow = selection => {
+  const rect = getSelectionRect(selection);
+  if (!rect) {
+    return false;
+  }
+  const table = findTableClosestToPos(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  const map = TableMap.get(table.node);
+  if (rect.bottom !== map.height || rect.top === 0) {
+    return false;
+  }
+  for (let col = rect.left; col < rect.right; col++) {
+    const topCellRect = map.findCell(map.map[col]);
+    const isHorizontallyMerged = topCellRect.right - topCellRect.left > 1;
+    const 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.
+ */
+export const isRowSelectionWithMergedFirstColumn = selection => {
+  const rect = getSelectionRect(selection);
+  if (!rect) {
+    return false;
+  }
+  const table = findTableClosestToPos(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  const map = TableMap.get(table.node);
+  if (rect.right !== map.width || rect.left === 0) {
+    return false;
+  }
+  for (let row = rect.top; row < rect.bottom; row++) {
+    const leftCellRect = map.findCell(map.map[row * map.width]);
+    const isVerticallyMerged = leftCellRect.bottom - leftCellRect.top > 1;
+    const 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`.
+ */
+export const isFullRowOrColumnSelected = selection => {
+  if (!(selection instanceof CellSelection)) {
+    return false;
+  }
+  return selection.isRowSelection() || selection.isColSelection() || isRowSelectionWithMergedFirstColumn(selection) || isColumnSelectionWithMergedFirstRow(selection);
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/no-html-button */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
@@ -11,6 +11,7 @@ import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { closeActiveTableMenu } from '../../pm-plugins/commands/active-table-menu';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
 import { TableCssClassName as ClassName } from '../../types';
@@ -18,6 +19,7 @@ import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 const DragHandleComponent = ({
+  api,
   isDragMenuTarget,
   tableLocalId,
   direction = 'row',
@@ -148,6 +150,36 @@ const DragHandleComponent = ({
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   const 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.
+  const closeActiveDragMenuAndShowToolbar = useCallback(() => {
+    var _api$table, _api$table$sharedStat, _api$core;
+    if (!api) {
+      return;
+    }
+    const activeTableMenu = (_api$table = api.table) === null || _api$table === void 0 ? void 0 : (_api$table$sharedStat = _api$table.sharedState.currentState()) === null || _api$table$sharedStat === void 0 ? void 0 : _api$table$sharedStat.activeTableMenu;
+    const 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 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      var _api$userIntent;
+      closeActiveTableMenu(api, {
+        skipUserIntent: true
+      })({
+        tr
+      });
+      (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
+        tr
+      });
+      return tr;
+    });
+  }, [api]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -175,7 +207,10 @@ const DragHandleComponent = ({
       // 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 (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);
       }
     },
@@ -216,12 +251,20 @@ const DragHandleComponent = ({
       // 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 (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
+      } else {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
     },
     onClick: onClick,
     onKeyDown: e => {
       if (e.key === 'Enter' || e.key === ' ') {
-        toggleDragMenu && toggleDragMenu('keyboard');
+        if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+          toggleDragMenu && toggleDragMenu('keyboard', undefined, indexes[0]);
+        } else {
+          toggleDragMenu && toggleDragMenu('keyboard');
+        }
       }
     }
   }, appearance !== 'placeholder' ?

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

@@ -30,7 +30,9 @@ function getRowOptions(index) {
     }
   };
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns,
+// Distance between the target cell top and table top, used when anchoring to a lower-row cell.
+verticalOffsetCorrection = 0) {
   const options = {
     alignX: 'end',
     alignY: 'top',
@@ -41,16 +43,32 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
     // we should always set the InsertButton on the start,
     // considering the offset from the first column
     onPositionCalculated(position) {
+      // Move the popup upward whether the offset parent provides `top` or `bottom`.
+      let verticalCorrection;
+      if (verticalOffsetCorrection) {
+        if (position.top !== undefined) {
+          verticalCorrection = {
+            top: position.top - verticalOffsetCorrection
+          };
+        } else if (position.bottom !== undefined) {
+          verticalCorrection = {
+            bottom: position.bottom + verticalOffsetCorrection
+          };
+        }
+      }
       const {
         left
       } = position;
       if (!left) {
-        // If not left, lest skip expensive next calculations.
-        return position;
+        return {
+          ...position,
+          ...verticalCorrection
+        };
       }
       if (index === 0) {
         return {
           ...position,
+          ...verticalCorrection,
           left: hasNumberedColumns ? HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON : HORIZONTAL_ALIGN_COLUMN_BUTTON
         };
       }
@@ -59,6 +77,7 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
       const rect = tableContainer ? tableContainer.getBoundingClientRect() : null;
       return {
         ...position,
+        ...verticalCorrection,
         left: rect && left > rect.width ? rect.width : left
       };
     }
@@ -75,10 +94,10 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+function getPopupOptions(direction, index, hasNumberedColumns, tableContainer, verticalOffsetCorrection = 0) {
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+      return getColumnOptions(index, tableContainer, hasNumberedColumns, verticalOffsetCorrection);
     case 'row':
       return getRowOptions(index);
     default: