@atlaskit/editor-plugin-table 5.4.11 → 5.4.13

package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,6 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -31,15 +29,15 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
+      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, jsx(item.icon, {
+      }, /*#__PURE__*/React.createElement(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? jsx("div", {
+      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
     });
@@ -131,7 +129,7 @@ export var DragMenu = function DragMenu(_ref) {
   if (!menuItems) {
     return null;
   }
-  return jsx(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -89,14 +89,11 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
   var colWidths = getColumnsWidths(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  if (!tableActive) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"

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.11",
+  "version": "5.4.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,9 +27,9 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^34.0.1",
-    "@atlaskit/custom-steps": "^0.0.5",
-    "@atlaskit/editor-common": "^76.24.0",
+    "@atlaskit/adf-schema": "^35.0.0",
+    "@atlaskit/custom-steps": "^0.0.6",
+    "@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/ui/DragHandle/index.tsx

@@ -134,26 +134,35 @@ export const DragHandle = ({
   ]);
 
   return (
-    <button
-      className={classnames(
-        ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
-        appearance,
-        isDragAndDropEnabled &&
-          hasMergedCells &&
-          ClassName.DRAG_HANDLE_DISABLED,
-      )}
-      ref={dragHandleDivRef}
-      style={{
-        transform: direction === 'column' ? 'none' : 'rotate(90deg)',
-        pointerEvents: 'auto',
-      }}
-      data-testid="table-floating-column-controls-drag-handle"
-      onMouseOver={onMouseOver}
-      onMouseOut={onMouseOut}
-      onMouseUp={onMouseUp}
-      onClick={onClick}
-    >
-      <HandleIconComponent {...handleIconProps} />
+    <>
+      <button
+        className={classnames(
+          ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+          ClassName.CONTROLS_BUTTON,
+          appearance,
+          {
+            [ClassName.DRAG_HANDLE_DISABLED]:
+              isDragAndDropEnabled && hasMergedCells,
+          },
+        )}
+        ref={dragHandleDivRef}
+        style={{
+          transform: direction === 'column' ? 'none' : 'rotate(90deg)',
+          pointerEvents: 'auto',
+        }}
+        data-testid="table-floating-column-controls-drag-handle"
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+        onMouseUp={(e) => {
+          // 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();
+          onMouseUp && onMouseUp(e);
+        }}
+        onClick={onClick}
+      >
+        <HandleIconComponent {...handleIconProps} />
+      </button>
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&
@@ -165,6 +174,6 @@ export const DragHandle = ({
           />,
           previewContainer,
         )}
-    </button>
+    </>
   );
 };

package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx

@@ -108,7 +108,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     return [0];
   }, [tableRef, tableRect.height]);
 
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
 
@@ -119,10 +119,6 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
       ? stickyHeader.top
       : undefined;
 
-  if (!tableActive) {
-    return null;
-  }
-
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}

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,