@atlaskit/editor-plugin-table 24.2.2 → 24.2.3

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

@@ -1,3 +1,5 @@
+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 +13,62 @@ 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;
 };

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

@@ -216,12 +216,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:

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

@@ -13,6 +13,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
+import { isColumnSelectionWithMergedFirstRow, isRowSelectionWithMergedFirstColumn } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
@@ -65,8 +66,14 @@ export class FloatingInsertButton extends React.Component {
         tr
       }
     } = editorView;
-    if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
-      return null;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection() || isColumnSelectionWithMergedFirstRow(tr.selection) || isRowSelectionWithMergedFirstColumn(tr.selection))) {
+        return null;
+      }
+    } else {
+      if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
+        return null;
+      }
     }
     const tablePos = findTable(tr.selection);
     if (!tablePos) {
@@ -120,6 +127,15 @@ export class FloatingInsertButton extends React.Component {
     const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
     const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
 
+    // If row 0 has a colspan, anchor to a lower row for the real column boundary (X),
+    // then move back up to the table top (Y):
+    //   row 0: [   colspan=2   ]
+    //   row 1: [ col 1 ][ col 2 ]  ← anchor here for X
+    //          ↑ button should render at row 0/table top
+    let verticalOffsetCorrection = 0;
+    if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+    }
     // Fixed the 'add column button' not visible issue when sticky header is enabled
     // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
     // Only when inserting a column, otherwise set to undefined
@@ -137,7 +153,7 @@ export class FloatingInsertButton extends React.Component {
       allowOutOfBounds: true
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper, verticalOffsetCorrection), {
       zIndex: zIndex
     }), /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
       type: type,
@@ -147,6 +163,18 @@ export class FloatingInsertButton extends React.Component {
       isChromelessEditor: isChromelessEditor
     }));
   }
+
+  // Finds a row where `columnIndex` has real left/right cell boundaries.
+  findRowWithUnmergedColumn(tableMap, columnIndex) {
+    for (let row = 0; row < tableMap.height; row++) {
+      const pos = tableMap.map[row * tableMap.width + columnIndex];
+      const rect = tableMap.findCell(pos);
+      if (rect.left === columnIndex && rect.right === columnIndex + 1) {
+        return row;
+      }
+    }
+    return null;
+  }
   getCellPosition(type, tableNode) {
     const {
       insertColumnButtonIndex,
@@ -163,6 +191,10 @@ export class FloatingInsertButton extends React.Component {
       if (columnIndex > tableMap.width - 1) {
         return null;
       }
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        const rowWithRealColumn = this.findRowWithUnmergedColumn(tableMap, columnIndex);
+        return rowWithRealColumn === null ? null : tableMap.positionAt(rowWithRealColumn, columnIndex, tableNode);
+      }
       return tableMap.positionAt(0, columnIndex, tableNode);
     } else {
       // This condition is to make typescript happy.

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -8,15 +8,29 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { clearHoverSelection, closeActiveTableMenu, hoverCell, hoverColumns, selectColumn, selectColumns, toggleActiveTableMenu } from '../../../pm-plugins/commands';
+import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns, toggleActiveTableMenu } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
-import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
+import { getSelectedColumnIndexes, isColumnSelectionWithMergedFirstRow } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
 import { DragHandle } from '../../DragHandle';
 const getSelectedColumns = selection => {
-  if (selection instanceof CellSelection && selection.isColSelection()) {
+  if (!(selection instanceof CellSelection)) {
+    return [];
+  }
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    // New behaviour: also treat a column selection that sits below a merged first-row cell as a
+    // full column selection.
+    if (!selection.isColSelection() && !isColumnSelectionWithMergedFirstRow(selection)) {
+      return [];
+    }
+    const rect = getSelectionRect(selection);
+    return rect ? getSelectedColumnIndexes(rect) : [];
+  }
+
+  // Old behaviour: only standard column selections are recognised.
+  if (selection.isColSelection()) {
     const rect = getSelectionRect(selection);
     if (!rect) {
       return [];
@@ -125,27 +139,23 @@ export const ColumnControls = ({
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
-  const toggleDragMenuHandler = useCallback((trigger, event) => {
+  const toggleDragMenuHandler = useCallback((trigger, event, handleIndex) => {
     var _api$analytics2;
+    if (event !== null && event !== void 0 && event.shiftKey) {
+      return;
+    }
     const {
       state,
       dispatch
     } = editorView;
-    if (event !== null && event !== void 0 && event.shiftKey) {
-      // Shift-click extends the selection rather than toggling the menu, but the
-      // open drag menu would otherwise stay anchored to a stale column. Close it here
-      // for the updated menu (legacy menu closes via outside-click on its dropdown).
-      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
-      }
-      return;
-    }
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      if (colIndex !== undefined && api) {
+      // Use the clicked handle index because `hoveredCell` can point at a merged cell's first column.
+      const targetColIndex = handleIndex !== null && handleIndex !== void 0 ? handleIndex : colIndex;
+      if (targetColIndex !== undefined && api) {
         const {
           activeTableMenu: currentActiveTableMenu
         } = getTablePluginState(state);
-        const isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'column' && currentActiveTableMenu.index === colIndex;
+        const isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'column' && currentActiveTableMenu.index === targetColIndex;
         api.core.actions.execute(({
           tr
         }) => {
@@ -164,7 +174,7 @@ export const ColumnControls = ({
           }
           toggleActiveTableMenu({
             type: 'column',
-            index: colIndex,
+            index: targetColIndex,
             openedBy: trigger
           }, currentActiveTableMenu, api)({
             tr

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
+import { getColumnsWidths, getColumnsWidthsWithMergedCells } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
@@ -63,7 +63,7 @@ const TableFloatingColumnControls = ({
   if (!tableRef || !tableActive || isResizing) {
     return null;
   }
-  const colWidths = getColumnsWidths(editorView);
+  const colWidths = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? getColumnsWidthsWithMergedCells(editorView) : getColumnsWidths(editorView);
   if (stickyTop) {
     var _containerRef$current;
     const columnControlTopOffsetFromParent = '-12px';

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -7,17 +7,31 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { clearHoverSelection, closeActiveTableMenu, toggleActiveTableMenu } from '../../../pm-plugins/commands';
+import { clearHoverSelection, toggleActiveTableMenu } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
-import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
+import { getSelectedRowIndexes, isRowSelectionWithMergedFirstColumn } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
 import { dragRowControlsWidth, dropTargetExtendedWidth } from '../../consts';
 import { DragHandle } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 const getSelectedRows = selection => {
-  if (selection instanceof CellSelection && selection.isRowSelection()) {
+  if (!(selection instanceof CellSelection)) {
+    return [];
+  }
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    // New behaviour: also treat a row selection that sits to the right of a merged first-column
+    // cell as a full row selection.
+    if (!selection.isRowSelection() && !isRowSelectionWithMergedFirstColumn(selection)) {
+      return [];
+    }
+    const rect = getSelectionRect(selection);
+    return rect ? getSelectedRowIndexes(rect) : [];
+  }
+
+  // Old behaviour: only standard row selections are recognised.
+  if (selection.isRowSelection()) {
     const rect = getSelectionRect(selection);
     if (!rect) {
       return [];
@@ -78,18 +92,14 @@ export const DragControls = ({
       }
     });
   }, [editorView]);
-  const toggleDragMenuHandler = useCallback((trigger, event) => {
+  const toggleDragMenuHandler = useCallback((trigger, event, handleIndex) => {
     var _api$analytics2;
     if (event !== null && event !== void 0 && event.shiftKey) {
-      // Shift-click extends the selection rather than toggling the menu, but the
-      // open drag menu would otherwise stay anchored to a stale row. Close it here
-      // for the updated menu (legacy menu closes via outside-click on its dropdown).
-      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
-      }
       return;
     }
-    const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+
+    // Use the clicked handle index because `hoveredCell` can point at a merged cell's first row.
+    const rowIndex = handleIndex !== null && handleIndex !== void 0 ? handleIndex : hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
       if (rowIndex !== undefined && api) {
         const {
@@ -230,10 +240,17 @@ export const DragControls = ({
     if (!tableActive) {
       return null;
     }
+    const selectedAppearance = isRowSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isRowSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`, selectedRowIndexes));
+    const selectedGridRow = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ?
+    // New behaviour: always position the placeholder in the first row to avoid an invalid
+    // `NaN / span 0` grid placement (which makes the handle disappear) when no rows are selected.
+    selectedAppearance === 'placeholder' ? '1 / span 1' : `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}` :
+    // Old behaviour.
+    `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
+    handles.push(generateHandleByType('selected', selectedAppearance, selectedGridRow, selectedRowIndexes));
     if (hoveredCell && isTableHovered && rowIndex !== undefined && !selectedRowIndexes.includes(rowIndex) && rowIndex < rowHeights.length) {
       handles.push(generateHandleByType('hover', 'default', `${rowIndex + 1} / span 1`, rowIndexes));
     }

package/dist/es2019/ui/common-styles.js

@@ -6,7 +6,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { ANCHOR_VARIABLE_NAME, tableMarginTop, tableSharedStyle, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, tableMarginTop, tableSharedStyle, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
 import { akEditorTableContainerBg } from '@atlaskit/editor-shared-styles/consts';
@@ -425,6 +425,31 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		width: ${insertColumnButtonOffset + 1}px;
 	}
 
+	/* use :before element to hide table row insert dots when legacy table sticky header is activated */
+	${expValEquals('platform_editor_table_col_insert', 'isEnabled', true) ?
+// Mask geometry mirrors the drag-handle wrapper geometry from
+// editor-plugin-block-controls/src/ui/drag-handle.tsx
+// (`buttonWrapperStyles`):
+//   height = paddingTop (=calc(space.400 - 1px)) + paddingBottom (=space.200) + DRAG_HANDLE_HEIGHT
+//   width  = DRAG_HANDLE_WIDTH + paddingRight('space.150')
+`.${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY}:has(tr.sticky)::before {
+			content: ' ';
+			position: sticky;
+			pointer-events: none;
+			top: 0;
+			float: left;
+			transform: translateX(calc(-1 * (${DRAG_HANDLE_WIDTH}px + ${"var(--ds-space-150, 12px)"})));
+			margin-bottom: calc(-1 * (${"var(--ds-space-400, 32px)"} - 1px + ${"var(--ds-space-200, 16px)"} + ${"var(--ds-space-300, 24px)"}));
+			height: calc(${"var(--ds-space-400, 32px)"} - 1px + ${"var(--ds-space-200, 16px)"} + ${"var(--ds-space-300, 24px)"});
+			width: calc(${DRAG_HANDLE_WIDTH}px + ${"var(--ds-space-150, 12px)"});
+			background: linear-gradient(
+				to bottom,
+				${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"} 90%,
+				transparent
+			);
+			z-index: ${rowControlsZIndex + 5};
+		}` : ``}
+
 	/* To fix jumpiness caused in Chrome Browsers for sticky headers */
 	.${ClassName.TABLE_STICKY} .sticky + tr {
 		min-height: 0px;

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

@@ -16,9 +16,10 @@ import { getPluginState as getResizePluginState } from '../pm-plugins/table-resi
 import { deleteColumns } from '../pm-plugins/transforms/delete-columns';
 import { deleteRows } from '../pm-plugins/transforms/delete-rows';
 import { getSelectedCellInfo } from '../pm-plugins/utils/analytics';
-import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow } from '../pm-plugins/utils/column-controls';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
+import { convertHTMLCellIndexToColumnIndex, getColumnIndexByMousePosition, getColumnIndexMappedToColumnIndexInFirstRow } from '../pm-plugins/utils/column-controls';
+import { getColumnOrRowIndex, getIndexAttributeSourceElement, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
 import { getAllowAddColumnCustomStep } from '../pm-plugins/utils/get-allow-add-column-custom-step';
+import { getRowIndexByMousePosition } from '../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 import { TABLE_MENU_SELECTOR } from './TableMenu/shared/consts';
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -292,6 +293,19 @@ const handleMouseMoveDebounce = nodeViewPortalProviderAPI => rafSchedule((view,
     return false;
   }
   const element = event.target;
+  const isTableMenuUpdatesEnabled = 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
+    const tableCell = isElementInTableCell(element);
+    if (tableCell && (tableCell.rowSpan > 1 || tableCell.colSpan > 1)) {
+      const dragDropState = getDragDropPluginState(view.state);
+      if (dragDropState && !dragDropState.isDragging) {
+        trackCellLocation(view, event);
+      }
+    }
+  }
   if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     const {
       state,
@@ -300,7 +314,8 @@ const handleMouseMoveDebounce = nodeViewPortalProviderAPI => rafSchedule((view,
     const {
       insertColumnButtonIndex
     } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    const indexSourceElement = isTableMenuUpdatesEnabled ? getIndexAttributeSourceElement(element) : element;
+    const [startIndex, endIndex] = getColumnOrRowIndex(indexSourceElement);
     const positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
@@ -314,7 +329,8 @@ const handleMouseMoveDebounce = nodeViewPortalProviderAPI => rafSchedule((view,
     const {
       insertRowButtonIndex
     } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    const indexSourceElement = isTableMenuUpdatesEnabled ? getIndexAttributeSourceElement(element) : element;
+    const [startIndex, endIndex] = getColumnOrRowIndex(indexSourceElement);
     const positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? endIndex : startIndex;
     if (positionRow !== insertRowButtonIndex) {
       return showInsertRowButton(positionRow)(state, dispatch);
@@ -462,7 +478,8 @@ export const whenTableInFocus = (eventHandler, pluginInjectionApi) => (view, mou
   return eventHandler(view, mouseEvent);
 };
 const trackCellLocation = (view, mouseEvent) => {
-  var _tableElement$dataset;
+  var _tableElement$dataset, _getRowIndexByMousePo;
+  const isTableMenuUpdatesEnabled = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true);
   const target = mouseEvent.target;
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -488,13 +505,36 @@ const trackCellLocation = (view, mouseEvent) => {
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   const rowElement = closestElement(target, 'tr');
   const htmlRowIndex = rowElement && rowElement.rowIndex;
+  const rowIndex = maybeTableCell.rowSpan > 1 && mouseEvent instanceof MouseEvent && isTableMenuUpdatesEnabled ? (_getRowIndexByMousePo = getRowIndexByMousePosition(tableRef, mouseEvent, {
+    startIndex: htmlRowIndex,
+    endIndex: htmlRowIndex + maybeTableCell.rowSpan
+  })) !== null && _getRowIndexByMousePo !== void 0 ? _getRowIndexByMousePo : htmlRowIndex : htmlRowIndex;
   const tableMap = tableNode && TableMap.get(tableNode);
   let colIndex = htmlColIndex;
   if (tableMap) {
     const convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
-    colIndex = 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 = 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 = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
+    }
   }
-  hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
+  hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
 };
 export const withCellTracking = eventHandler => (view, mouseEvent) => {
   if (getDragDropPluginState(view.state) && !getDragDropPluginState(view.state).isDragging) {