@atlaskit/editor-plugin-table 5.4.12 → 5.4.13

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.13
+
+### Patch Changes
+
+- [#58379](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58379) [`985c068738e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/985c068738e8) - [ux] Add a util to convert cell index into actula colIndex to fix column drag handle position.
+- Updated dependencies
+
 ## 5.4.12
 
 ### Patch Changes

package/dist/cjs/plugins/table/event-handlers.js

@@ -348,13 +348,19 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  var colIndex = maybeTableCell.cellIndex;
+  var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = (0, _utils.closestElement)(target, 'tr');
-  var rowIndex = rowElement && rowElement.rowIndex;
+  var htmlRowIndex = rowElement && rowElement.rowIndex;
   var colHeight = tableRef.offsetHeight;
   var colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    (0, _commands.hoverCell)(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  var tableMap = tableNode && _tableMap.TableMap.get(tableNode);
+  var colIndex = htmlColIndex;
+  if (tableMap) {
+    var convertedColIndex = (0, _utils3.convertHTMLCellIndexToColumnIndex)(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = (0, _utils3.getColumnIndexMappedToColumnIndexInFirstRow)(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    (0, _commands.hoverCell)(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isColumnDeleteButtonVisible = exports.getColumnsWidths = exports.getColumnDeleteButtonParams = exports.getColumnClassNames = exports.colWidthsForRow = void 0;
+exports.isColumnDeleteButtonVisible = exports.getColumnsWidths = exports.getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnDeleteButtonParams = exports.getColumnClassNames = exports.convertHTMLCellIndexToColumnIndex = exports.colWidthsForRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -189,4 +189,66 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
   return pctWidths.map(function (pct) {
     return "".concat(pct, "%");
   }).join(' ');
+};
+var convertHTMLCellIndexToColumnIndex = exports.convertHTMLCellIndexToColumnIndex = function convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap) {
+  // Same numbers (positions) in tableMap.map array mean that there are merged cells.
+  // Cells can be merged across columns. So we need to check if the cell on the left and current cell have the same value.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var htmlColCount = 0;
+  if (htmlRowIndex === 0) {
+    for (var colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (var _colIndex = 0; _colIndex < width; _colIndex++) {
+      var currentCellMapIndex = htmlRowIndex * width + _colIndex;
+      var cellAboveMapIndex = (htmlRowIndex - 1) * width + _colIndex;
+      if (_colIndex > 0) {
+        if (map[currentCellMapIndex] !== map[currentCellMapIndex - 1] && map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return _colIndex;
+      }
+    }
+  }
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+var getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnIndexMappedToColumnIndexInFirstRow = function getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap) {
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var mapColIndexToFistRowColIndex = [];
+  var htmlColCounFirstRow = 0;
+  var colSpan = 0;
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+  for (var colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+  return mapColIndexToFistRowColIndex[convertedColIndex];
 };

package/dist/cjs/plugins/table/utils/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "containsHeaderRow", {
     return _nodes.containsHeaderRow;
   }
 });
+Object.defineProperty(exports, "convertHTMLCellIndexToColumnIndex", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.convertHTMLCellIndexToColumnIndex;
+  }
+});
 Object.defineProperty(exports, "copyPreviousRow", {
   enumerable: true,
   get: function get() {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "getColumnDeleteButtonParams", {
     return _columnControls.getColumnDeleteButtonParams;
   }
 });
+Object.defineProperty(exports, "getColumnIndexMappedToColumnIndexInFirstRow", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.getColumnIndexMappedToColumnIndexInFirstRow;
+  }
+});
 Object.defineProperty(exports, "getColumnOrRowIndex", {
   enumerable: true,
   get: function get() {

package/dist/es2019/plugins/table/event-handlers.js

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
@@ -356,13 +356,19 @@ const trackCellLocation = (view, mouseEvent) => {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  const colIndex = maybeTableCell.cellIndex;
+  const htmlColIndex = maybeTableCell.cellIndex;
   const rowElement = closestElement(target, 'tr');
-  const rowIndex = rowElement && rowElement.rowIndex;
+  const htmlRowIndex = rowElement && rowElement.rowIndex;
   const colHeight = tableRef.offsetHeight;
   const colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  const tableMap = tableNode && TableMap.get(tableNode);
+  let colIndex = htmlColIndex;
+  if (tableMap) {
+    const convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {

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

@@ -159,4 +159,66 @@ export const colWidthsForRow = tr => {
   const visualColCount = rowColSpans.reduce((acc, val) => acc + val, 0);
   const pctWidths = rowColSpans.map(cellColSpan => cellColSpan / visualColCount * 100);
   return pctWidths.map(pct => `${pct}%`).join(' ');
+};
+export const convertHTMLCellIndexToColumnIndex = (htmlColIndex, htmlRowIndex, tableMap) => {
+  // Same numbers (positions) in tableMap.map array mean that there are merged cells.
+  // Cells can be merged across columns. So we need to check if the cell on the left and current cell have the same value.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  const width = tableMap.width;
+  const map = tableMap.map;
+  let htmlColCount = 0;
+  if (htmlRowIndex === 0) {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      const currentCellMapIndex = htmlRowIndex * width + colIndex;
+      const cellAboveMapIndex = (htmlRowIndex - 1) * width + colIndex;
+      if (colIndex > 0) {
+        if (map[currentCellMapIndex] !== map[currentCellMapIndex - 1] && map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  }
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+export const getColumnIndexMappedToColumnIndexInFirstRow = (convertedColIndex, htmlRowIndex, tableMap) => {
+  const width = tableMap.width;
+  const map = tableMap.map;
+  const mapColIndexToFistRowColIndex = [];
+  let htmlColCounFirstRow = 0;
+  let colSpan = 0;
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+  for (let colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+  return mapColIndexToFistRowColIndex[convertedColIndex];
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -3,7 +3,7 @@ export { findControlsHoverDecoration, createControlsHoverDecoration, createColum
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
-export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';

package/dist/esm/plugins/table/event-handlers.js

@@ -11,7 +11,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -339,13 +339,19 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  var colIndex = maybeTableCell.cellIndex;
+  var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = closestElement(target, 'tr');
-  var rowIndex = rowElement && rowElement.rowIndex;
+  var htmlRowIndex = rowElement && rowElement.rowIndex;
   var colHeight = tableRef.offsetHeight;
   var colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  var tableMap = tableNode && TableMap.get(tableNode);
+  var colIndex = htmlColIndex;
+  if (tableMap) {
+    var convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

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

@@ -182,4 +182,66 @@ export var colWidthsForRow = function colWidthsForRow(tr) {
   return pctWidths.map(function (pct) {
     return "".concat(pct, "%");
   }).join(' ');
+};
+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.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var htmlColCount = 0;
+  if (htmlRowIndex === 0) {
+    for (var colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (var _colIndex = 0; _colIndex < width; _colIndex++) {
+      var currentCellMapIndex = htmlRowIndex * width + _colIndex;
+      var cellAboveMapIndex = (htmlRowIndex - 1) * width + _colIndex;
+      if (_colIndex > 0) {
+        if (map[currentCellMapIndex] !== map[currentCellMapIndex - 1] && map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return _colIndex;
+      }
+    }
+  }
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+export var getColumnIndexMappedToColumnIndexInFirstRow = function getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap) {
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var mapColIndexToFistRowColIndex = [];
+  var htmlColCounFirstRow = 0;
+  var colSpan = 0;
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+  for (var colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+  return mapColIndexToFistRowColIndex[convertedColIndex];
 };

package/dist/esm/plugins/table/utils/index.js

@@ -3,7 +3,7 @@ export { findControlsHoverDecoration, createControlsHoverDecoration, createColum
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
-export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';

package/dist/types/plugins/table/utils/column-controls.d.ts

@@ -1,5 +1,6 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
 export declare const isColumnDeleteButtonVisible: (selection: Selection) => boolean;
 export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {
@@ -8,3 +9,5 @@ export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number |
 } | null;
 export declare const getColumnClassNames: (index: number, selection: Selection, hoveredColumns?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
 export declare const colWidthsForRow: (tr: HTMLTableRowElement) => string;
+export declare const convertHTMLCellIndexToColumnIndex: (htmlColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
+export declare const getColumnIndexMappedToColumnIndexInFirstRow: (convertedColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;

package/dist/types/plugins/table/utils/index.d.ts

@@ -3,7 +3,7 @@ export { findControlsHoverDecoration, createControlsHoverDecoration, createColum
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
-export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/types-ts4.5/plugins/table/utils/column-controls.d.ts

@@ -1,5 +1,6 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
 export declare const isColumnDeleteButtonVisible: (selection: Selection) => boolean;
 export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {
@@ -8,3 +9,5 @@ export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number |
 } | null;
 export declare const getColumnClassNames: (index: number, selection: Selection, hoveredColumns?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
 export declare const colWidthsForRow: (tr: HTMLTableRowElement) => string;
+export declare const convertHTMLCellIndexToColumnIndex: (htmlColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
+export declare const getColumnIndexMappedToColumnIndexInFirstRow: (convertedColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;

package/dist/types-ts4.5/plugins/table/utils/index.d.ts

@@ -3,7 +3,7 @@ export { findControlsHoverDecoration, createControlsHoverDecoration, createColum
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
-export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.12",
+  "version": "5.4.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.0.0",
     "@atlaskit/custom-steps": "^0.0.6",
-    "@atlaskit/editor-common": "^76.24.0",
+    "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/__tests__/unit/utils/column-controls.ts

@@ -1,4 +1,10 @@
-import { colWidthsForRow } from '../../../plugins/table/utils/column-controls';
+import type { TableMap } from '@atlaskit/editor-tables';
+
+import {
+  colWidthsForRow,
+  convertHTMLCellIndexToColumnIndex,
+  getColumnIndexMappedToColumnIndexInFirstRow,
+} from '../../../plugins/table/utils/column-controls';
 
 const createRow = (colCount: number, childType = 'td') => {
   const tr = document.createElement('tr');
@@ -59,3 +65,141 @@ describe('table utilities', () => {
     });
   });
 });
+
+describe('table utilities - convertHTMLCellIndexToColumnIndex', () => {
+  /*
+    Table looks like this:
+     ___ _______ ___ ___ ___
+    |___|       |_A_|___|___|
+    |___|       |___|   |___|
+    |___|_______|_B_|   |___|
+    |___|___|___|___|   |___|
+    |___________|___|___|___|
+    |___________|___|_C_|___|
+    |___________|___|___|___|
+    |___|___|___|_D_|___|___|
+    |___|___|_E_____________|
+  */
+  const tableMap = {
+    width: 6,
+    height: 9,
+    map: [
+      1, 5, 5, 9, 13, 17, 23, 5, 5, 27, 31, 35, 41, 5, 5, 45, 31, 49, 55, 59,
+      63, 67, 31, 71, 77, 77, 77, 81, 31, 85, 91, 91, 91, 95, 99, 103, 109, 109,
+      109, 113, 117, 121, 127, 131, 135, 139, 143, 147, 153, 157, 161, 161, 161,
+      161,
+    ],
+  } as TableMap;
+
+  const testCases = [
+    [
+      'case A: when hovered cell is in the first row and first row has merged cells',
+      2, // htmlColIndex
+      0, // htmlRowIndex
+      3, // expected
+    ],
+    [
+      'case B: when hoverd cell is not in the first row, but the row has merged cells',
+      1,
+      2,
+      3,
+    ],
+    [
+      'case C: when a cell that is in the row above and to the left of current cell is merged',
+      3,
+      5,
+      5,
+    ],
+    [
+      'case D: when first row has merged cell and hovered cell is below merged area',
+      2,
+      7,
+      2,
+    ],
+    [
+      'case E: when first row has merged cell and hovered cell is below merged area and is part of merged area',
+      2,
+      8,
+      2,
+    ],
+  ];
+
+  describe('should convert cellIndex into colIndex correctly', () => {
+    test.each(testCases)(
+      '%s',
+      (message, htmlColIndex, htmlRowIndex, expected) => {
+        expect(
+          convertHTMLCellIndexToColumnIndex(
+            htmlColIndex as number,
+            htmlRowIndex as number,
+            tableMap,
+          ),
+        ).toEqual(expected);
+      },
+    );
+  });
+});
+
+describe('tableUtilities - getColumnIndexMappedToColumnIndexInFirstRow', () => {
+  /*
+    Table used for this tests looks like this:
+     ___ _______ ___ ___ ___ ___ ___ ___________ ___
+    |___|_______|___|___|___|___|___|___________|_D_|
+    |___|_A_|_B_|___|___|___|___|___|___|_E_|___|___|
+    |___|___|_______|___|_____C_|___|___|___|___|___|
+    |___|___|___|___|___|___|___|___|___|___|___|___|
+  */
+
+  const tableMap = {
+    width: 12,
+    height: 4,
+    map: [
+      1, 5, 5, 9, 13, 17, 21, 25, 29, 29, 29, 33, 39, 43, 47, 51, 55, 59, 63,
+      67, 71, 75, 79, 83, 89, 93, 97, 97, 101, 105, 105, 109, 113, 117, 121,
+      125, 131, 135, 139, 143, 147, 151, 155, 159, 163, 167, 171, 175,
+    ],
+  } as TableMap;
+
+  const testCases = [
+    [
+      'case A: mouse is on a cell located below merged area of the first row closer to its start',
+      2, // convertedColIndex
+      1, // htmlRowIndex
+      1, // expected
+    ],
+    [
+      'case B: mouse is on a cell located below merged area of the first row close to its end',
+      1,
+      1,
+      1,
+    ],
+    [
+      'case E: mouse is on a cell located below merged area of the first row in the middle of the merged area',
+      9,
+      1,
+      8,
+    ],
+    ['case C: mouse is on a merged cell located below the first row', 5, 2, 5],
+    [
+      'case D: mouse is on a cell in the first row that is next to a merged cell',
+      11,
+      1,
+      11,
+    ],
+  ];
+
+  describe('should adapt converted colIndex when first row has merged cells', () => {
+    test.each(testCases)(
+      '%s',
+      (message, convertedColIndex, htmlRowIndex, expected) => {
+        expect(
+          getColumnIndexMappedToColumnIndexInFirstRow(
+            convertedColIndex as number,
+            htmlRowIndex as number,
+            tableMap,
+          ),
+        ).toEqual(expected);
+      },
+    );
+  });
+});

package/src/plugins/table/event-handlers.ts

@@ -48,6 +48,8 @@ import { deleteColumns, deleteRows } from './transforms';
 import type { ElementContentRects } from './types';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import {
+  convertHTMLCellIndexToColumnIndex,
+  getColumnIndexMappedToColumnIndexInFirstRow,
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,
@@ -552,24 +554,40 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
     return;
   }
 
-  const colIndex = maybeTableCell.cellIndex;
+  const htmlColIndex = maybeTableCell.cellIndex;
   const rowElement = closestElement(
     target as HTMLElement,
     'tr',
   ) as HTMLTableRowElement;
-  const rowIndex = rowElement && rowElement.rowIndex;
+  const htmlRowIndex = rowElement && rowElement.rowIndex;
 
   const colHeight = tableRef.offsetHeight;
   const colWidth = maybeTableCell.offsetWidth;
 
+  const tableMap = tableNode && TableMap.get(tableNode);
+  let colIndex = htmlColIndex;
+  if (tableMap) {
+    const convertedColIndex = convertHTMLCellIndexToColumnIndex(
+      htmlColIndex,
+      htmlRowIndex,
+      tableMap,
+    );
+
+    colIndex = getColumnIndexMappedToColumnIndexInFirstRow(
+      convertedColIndex,
+      htmlRowIndex,
+      tableMap,
+    );
+  }
+
   if (
     hoveredCell.colIndex !== colIndex ||
-    hoveredCell.rowIndex !== rowIndex ||
+    hoveredCell.rowIndex !== htmlRowIndex ||
     hoveredCell.colWidth !== colWidth ||
     hoveredCell.colHeight !== colHeight
   ) {
     hoverCell(
-      rowIndex,
+      htmlRowIndex,
       colIndex,
       colWidth,
       colHeight,

package/src/plugins/table/utils/column-controls.ts

@@ -217,3 +217,84 @@ export const colWidthsForRow = (tr: HTMLTableRowElement) => {
 
   return pctWidths.map((pct) => `${pct}%`).join(' ');
 };
+
+export const convertHTMLCellIndexToColumnIndex = (
+  htmlColIndex: number,
+  htmlRowIndex: number,
+  tableMap: TableMap,
+): number => {
+  // 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.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  const width = tableMap.width;
+  const map = tableMap.map;
+  let htmlColCount = 0;
+
+  if (htmlRowIndex === 0) {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      const currentCellMapIndex = htmlRowIndex * width + colIndex;
+      const cellAboveMapIndex = (htmlRowIndex - 1) * width + colIndex;
+      if (colIndex > 0) {
+        if (
+          map[currentCellMapIndex] !== map[currentCellMapIndex - 1] &&
+          map[currentCellMapIndex] !== map[cellAboveMapIndex]
+        ) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  }
+
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+export const getColumnIndexMappedToColumnIndexInFirstRow = (
+  convertedColIndex: number,
+  htmlRowIndex: number,
+  tableMap: TableMap,
+): number => {
+  const width = tableMap.width;
+  const map = tableMap.map;
+  const mapColIndexToFistRowColIndex = [];
+  let htmlColCounFirstRow = 0;
+  let colSpan = 0;
+
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+
+  for (let colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+
+  return mapColIndexToFistRowColIndex[convertedColIndex];
+};

package/src/plugins/table/utils/index.ts

@@ -59,10 +59,12 @@ export {
   hasResizeHandler,
 } from './dom';
 export {
+  convertHTMLCellIndexToColumnIndex,
   getColumnsWidths,
   isColumnDeleteButtonVisible,
   getColumnDeleteButtonParams,
   getColumnClassNames,
+  getColumnIndexMappedToColumnIndexInFirstRow,
 } from './column-controls';
 export {
   getRowHeights,

package/src/__tests__/integration/block-node-selection.ts

@@ -1,165 +0,0 @@
-export {};
-it.todo('TODO: ED-15801 - Fix smart link async rendering integration test');
-// import { runBlockNodeSelectionTestSuite } from '@atlaskit/editor-test-helpers/integration/selection';
-//
-// runBlockNodeSelectionTestSuite({
-//   nodeName: 'table',
-//   editorOptions: {
-//     allowTables: {
-//       advanced: true,
-//     },
-//   },
-//   selector: 'table',
-//   adfNode: {
-//     type: 'table',
-//     attrs: {
-//       isNumberColumnEnabled: false,
-//       layout: 'default',
-//       localId: '15804638-b946-4591-b64c-beffe5122733',
-//     },
-//     content: [
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//     ],
-//   },
-//   skipTests: {
-//     'Extend selection right two characters to select [block-node] from line above with shift + arrow right': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend selection left two characters to select [block-node] from line below with shift + arrow left': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend a selection from end of the document to the start when [block-node] is the first node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Click and drag from the end to start of the document to select [block-node] when [block-node] is the first node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend a selection to the end of the document from start when [block-node] is the last node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Click and drag from start of the document to select [block-node] when [block-node] is the last node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     "Extend selection down by one line multiple times to select [block-node]'s in sequence with shift + arrow down": [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//   },
-// });