@atlaskit/editor-plugin-table 24.2.1 → 24.2.3

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;
@@ -456,12 +481,13 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	tr.${ClassName.NATIVE_STICKY} {
 		position: sticky;
 		top: ${tableMarginTop}px;
-		z-index: calc(${akEditorTableCellOnStickyHeaderZIndex} - 5);
+		z-index: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : `calc(${akEditorTableCellOnStickyHeaderZIndex} - 5)`};
 		box-shadow:
 			inset -1px 1px ${tableBorderColor},
 			inset 1px -1px ${tableBorderColor};
 
 		&.${ClassName.NATIVE_STICKY_ACTIVE} {
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `z-index: ${nativeStickyHeaderZIndex};` : ''}
 			box-shadow:
 				inset -1px 1px ${tableBorderColor},
 				inset 1px -1px ${tableBorderColor},

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) {

package/dist/es2019/ui/rounded-table-styles.js

@@ -374,7 +374,7 @@ const roundedTableStickyHeaderCornerMaskStyles = () => css`
 		sticky / fallback layout. The masks belong to the wrapper of the table
 		that owns the sticky row, never to an ancestor wrapper.
 	*/
-	.${ClassName.TABLE_NODE_WRAPPER}:has(> table > tbody > tr.${ClassName.NATIVE_STICKY})
+	.${ClassName.TABLE_NODE_WRAPPER}:has(> table > tbody > tr.${ClassName.NATIVE_STICKY_ACTIVE})
 		> .${ClassName.TABLE_CORNER_MASK},
 		.${ClassName.TABLE_NODE_WRAPPER}:has(> table.${ClassName.TABLE_STICKY} > tbody > tr.sticky)
 		> .${ClassName.TABLE_CORNER_MASK} {

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

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

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

@@ -12,6 +12,25 @@ export var isInsertRowButton = function isInsertRowButton(node) {
 export var getColumnOrRowIndex = function getColumnOrRowIndex(target) {
   return [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
 };
+
+/**
+ * Returns the element that carries the `data-start-index` / `data-end-index` attributes for a
+ * column/row control.
+ *
+ * The floating insert dot is a child of a wrapper that holds the index attributes, so when the
+ * pointer is directly over the dot the attributes are not on the event target. This walks up to
+ * the nearest ancestor that has `data-start-index`, falling back to the original element so the
+ * behaviour is unchanged when the target already carries the attributes.
+ */
+export var getIndexAttributeSourceElement = function getIndexAttributeSourceElement(target) {
+  if (target.hasAttribute('data-start-index')) {
+    return target;
+  }
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  var closestWithIndex = target.closest('[data-start-index]');
+  return closestWithIndex !== null && closestWithIndex !== void 0 ? closestWithIndex : target;
+};
 export var isColumnControlsDecorations = function isColumnControlsDecorations(node) {
   return containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 };

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

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

package/dist/esm/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 var getSelectedColumnIndexes = function getSelectedColumnIndexes(selectionRect) {
   var columnIndexes = [];
   for (var i = selectionRect.left; i < selectionRect.right; i++) {
@@ -11,4 +13,62 @@ export var getSelectedRowIndexes = function 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 var isColumnSelectionWithMergedFirstRow = function isColumnSelectionWithMergedFirstRow(selection) {
+  var rect = getSelectionRect(selection);
+  if (!rect) {
+    return false;
+  }
+  var table = findTableClosestToPos(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  var map = TableMap.get(table.node);
+  if (rect.bottom !== map.height || rect.top === 0) {
+    return false;
+  }
+  for (var col = rect.left; col < rect.right; col++) {
+    var topCellRect = map.findCell(map.map[col]);
+    var isHorizontallyMerged = topCellRect.right - topCellRect.left > 1;
+    var bridgesGapAboveSelection = topCellRect.bottom >= rect.top;
+    if (!isHorizontallyMerged || !bridgesGapAboveSelection) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Treats a row as fully selected when its first-column area is covered by a vertical merge and the
+ * explicit `CellSelection` starts to the right of that merged cell. `CellSelection.isRowSelection()`
+ * returns `false` in this case because the selection does not include the merged first-column cell.
+ */
+export var isRowSelectionWithMergedFirstColumn = function isRowSelectionWithMergedFirstColumn(selection) {
+  var rect = getSelectionRect(selection);
+  if (!rect) {
+    return false;
+  }
+  var table = findTableClosestToPos(selection.$anchorCell);
+  if (!table) {
+    return false;
+  }
+  var map = TableMap.get(table.node);
+  if (rect.right !== map.width || rect.left === 0) {
+    return false;
+  }
+  for (var row = rect.top; row < rect.bottom; row++) {
+    var leftCellRect = map.findCell(map.map[row * map.width]);
+    var isVerticallyMerged = leftCellRect.bottom - leftCellRect.top > 1;
+    var bridgesGapLeftOfSelection = leftCellRect.right >= rect.left;
+    if (!isVerticallyMerged || !bridgesGapLeftOfSelection) {
+      return false;
+    }
+  }
+  return true;
 };

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

@@ -215,12 +215,20 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      toggleDragMenu && toggleDragMenu('mouse', e);
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
+      } else {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
     },
     onClick: onClick,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
-        toggleDragMenu && toggleDragMenu('keyboard');
+        if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+          toggleDragMenu && toggleDragMenu('keyboard', undefined, indexes[0]);
+        } else {
+          toggleDragMenu && toggleDragMenu('keyboard');
+        }
       }
     }
   }, appearance !== 'placeholder' ?

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

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

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

@@ -20,6 +20,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';
@@ -73,8 +74,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var tr = editorView.state.tr;
-      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;
+        }
       }
       var tablePos = findTable(tr.selection);
       if (!tablePos) {
@@ -128,6 +135,15 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var 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
+      var 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
@@ -145,7 +161,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_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,
@@ -155,6 +171,20 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         isChromelessEditor: isChromelessEditor
       }));
     }
+
+    // Finds a row where `columnIndex` has real left/right cell boundaries.
+  }, {
+    key: "findRowWithUnmergedColumn",
+    value: function findRowWithUnmergedColumn(tableMap, columnIndex) {
+      for (var row = 0; row < tableMap.height; row++) {
+        var pos = tableMap.map[row * tableMap.width + columnIndex];
+        var rect = tableMap.findCell(pos);
+        if (rect.left === columnIndex && rect.right === columnIndex + 1) {
+          return row;
+        }
+      }
+      return null;
+    }
   }, {
     key: "getCellPosition",
     value: function getCellPosition(type, tableNode) {
@@ -172,6 +202,10 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         if (columnIndex > tableMap.width - 1) {
           return null;
         }
+        if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+          var 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.