@atlaskit/editor-plugin-table 24.2.2 → 24.2.4

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 { isFullRowOrColumnSelected } 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 (isFullRowOrColumnSelected(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/FloatingTableMenu/index.js

@@ -58,9 +58,6 @@ const FloatingTableMenu = ({
     popupContentRef.current = el;
     setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
   }, [setOutsideClickTargetRef]);
-  const dismiss = useCallback(() => {
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
-  }, [api]);
   const returnFocusToDragHandle = useCallback(() => {
     // Match legacy DragMenu's closeMenu('handle') behaviour.
     const handleId = dragMenuDirection === 'row' ? '#drag-handle-button-row' : '#drag-handle-button-column';
@@ -93,9 +90,9 @@ const FloatingTableMenu = ({
   const handleEscape = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
-    dismiss();
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     returnFocusToDragHandle();
-  }, [dismiss, returnFocusToDragHandle]);
+  }, [api, returnFocusToDragHandle]);
 
   // Memoize the editor DOM reference so the provider doesn't re-bind listeners
   // on every render (the provider depends on `dom` in its effect's deps).
@@ -112,8 +109,8 @@ const FloatingTableMenu = ({
     if (target instanceof Node && (_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target) || target instanceof Element && (target.closest(DRAG_HANDLE_CONTROLS_SELECTOR) || target.closest(NESTED_DROPDOWN_SELECTOR))) {
       return;
     }
-    dismiss();
-  }, [dismiss]);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
+  }, [api]);
   if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }

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
@@ -222,6 +232,7 @@ export const ColumnControls = ({
       },
       "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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 {
@@ -205,6 +215,7 @@ export const DragControls = ({
       "data-selected-row-index": selectedRowIndexes[0],
       "data-handle-appearance": appearance
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
@@ -230,10 +241,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, isTableDragHandleButton } 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';
@@ -196,14 +197,27 @@ export const handleMouseUp = (view, mouseEvent) => {
   }
   return false;
 };
+const resetDragHandleSelectedIntentOnMouseDown = (event, api) => {
+  var _api$userIntent, _api$userIntent$share;
+  if (isTableDragHandleButton(event.target)) {
+    return;
+  }
+  if ((api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'dragHandleSelected') {
+    var _api$core, _api$userIntent2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? 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
-export const handleMouseDown = (_, event) => {
+export const handleMouseDown = (_view, event, api) => {
   const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
   if (isControl) {
     event.preventDefault();
   }
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    resetDragHandleSelectedIntentOnMouseDown(event, api);
+  }
   return isControl;
 };
 export const handleMouseOut = (view, mouseEvent) => {
@@ -292,6 +306,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 +327,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 +342,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 +491,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 +518,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) {

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

@@ -1,12 +1,19 @@
 import { pluginKey } from '../plugin-key';
+import { isFullRowOrColumnSelected } from '../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(isFullRowOrColumnSelected(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr: tr
   });
 };
-export var closeActiveTableMenu = function closeActiveTableMenu(api) {
+export var closeActiveTableMenu = function closeActiveTableMenu(api, options) {
   return function (_ref) {
     var tr = _ref.tr;
     var nextActiveTableMenu = {
@@ -18,7 +25,9 @@ export var closeActiveTableMenu = function 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/esm/pm-plugins/drag-and-drop/plugin.js

@@ -90,7 +90,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;
-          closeActiveTableMenu(api)({
+          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/esm/pm-plugins/main.js

@@ -341,7 +341,9 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: withCellTracking(handleMouseDown),
+        mousedown: withCellTracking(function (view, event) {
+          return handleMouseDown(view, event, pluginInjectionApi);
+        }),
         mouseleave: handleMouseLeave,
         mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: handleMouseEnter,