@atlaskit/editor-plugin-table 7.4.1 → 7.4.3

package/src/ui/DragHandle/index.tsx

@@ -8,7 +8,9 @@ import { injectIntl } from 'react-intl-next';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { token } from '@atlaskit/tokens';
@@ -16,9 +18,9 @@ import { token } from '@atlaskit/tokens';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
-import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import type { CellHoverMeta, TableDirection } from '../../types';
+import { findDuplicatePosition, hasMergedCellsInSelection } from '../../utils';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
@@ -37,6 +39,7 @@ type DragHandleProps = {
   forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
+  hoveredCell?: CellHoverMeta;
   direction?: TableDirection;
   appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
@@ -62,6 +65,7 @@ const DragHandleComponent = ({
   onMouseOver,
   onMouseOut,
   toggleDragMenu,
+  hoveredCell,
   onClick,
   editorView,
   intl: { formatMessage },
@@ -83,13 +87,64 @@ const DragHandleComponent = ({
   const isRowHandleHovered = isRow && hoveredRows.length > 0;
   const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
 
-  const hasMergedCells = useMemo(
-    () =>
-      isRow
-        ? hasMergedCellsInRow(indexes[0])(selection)
-        : hasMergedCellsInColumn(indexes[0])(selection),
-    [indexes, isRow, selection],
-  );
+  const hasMergedCells = useMemo(() => {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+
+    const map = TableMap.get(table?.node);
+
+    if (!map.hasMergedCells() || indexes.length < 1) {
+      return false;
+    }
+
+    const { mapByColumn, mapByRow } = map;
+
+    // this handle when hover to first column or row which has merged cells.
+    if (
+      hoveredCell &&
+      hoveredCell.rowIndex !== undefined &&
+      hoveredCell.colIndex !== undefined &&
+      selection instanceof TextSelection
+    ) {
+      const { rowIndex, colIndex } = hoveredCell;
+
+      const mergedPositionInRow = findDuplicatePosition(mapByRow[rowIndex]);
+      const mergedPositionInCol = findDuplicatePosition(mapByColumn[colIndex]);
+
+      const hasMergedCellsInFirstRowOrColumn =
+        direction === 'column'
+          ? mergedPositionInRow.includes(mapByRow[0][colIndex])
+          : mergedPositionInCol.includes(mapByColumn[0][rowIndex]);
+
+      const isHoveredOnFirstRowOrColumn =
+        direction === 'column'
+          ? hoveredCell.rowIndex === 0 && hasMergedCellsInFirstRowOrColumn
+          : hoveredCell.colIndex === 0 && hasMergedCellsInFirstRowOrColumn;
+
+      if (isHoveredOnFirstRowOrColumn) {
+        const mergedSizes =
+          direction === 'column'
+            ? mapByRow[0].filter((el: number) => el === mapByRow[0][colIndex])
+                .length
+            : mapByColumn[0].filter(
+                (el: number) => el === mapByColumn[0][rowIndex],
+              ).length;
+
+        const mergedSelection = hasMergedCellsInSelection(
+          direction === 'column'
+            ? [colIndex, colIndex + mergedSizes - 1]
+            : [rowIndex, rowIndex + mergedSizes - 1],
+          direction,
+        )(selection);
+
+        return mergedSelection;
+      }
+    }
+
+    return hasMergedCellsInSelection(indexes, direction)(selection);
+  }, [indexes, selection, direction, hoveredCell]);
 
   const handleIconProps = {
     forceDefaultHandle,

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -217,6 +217,7 @@ export const ColumnControls = ({
           direction="column"
           tableLocalId={localId || ''}
           indexes={indexes}
+          hoveredCell={hoveredCell}
           previewWidth={previewWidth}
           forceDefaultHandle={!isHover}
           previewHeight={previewHeight}

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -227,6 +227,7 @@ const DragControlsComponent = ({
           previewWidth={tableWidth}
           previewHeight={previewHeight}
           appearance={appearance}
+          hoveredCell={hoveredCell}
           onClick={handleClick}
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}

package/src/utils/analytics.ts

@@ -144,7 +144,6 @@ export const generateResizeFrameRatePayloads = (props: {
   docSize: number;
   frameRateSamples: number[];
   originalNode: PMNode;
-  experiments?: Record<string, boolean | undefined>;
 }): TableEventPayload[] => {
   const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(
     props.frameRateSamples,
@@ -158,7 +157,6 @@ export const generateResizeFrameRatePayloads = (props: {
       nodeSize: props.originalNode.nodeSize,
       docSize: props.docSize,
       isInitialSample: index === 0,
-      experiments: props.experiments,
     },
   }));
 };

package/src/utils/index.ts

@@ -82,4 +82,7 @@ export {
   hasMergedCellsInColumn,
   hasMergedCellsInRow,
   hasMergedCellsInBetween,
+  hasMergedCellsInSelection,
+  findDuplicatePosition,
+  checkEdgeHasMergedCells,
 } from './merged-cells';

package/src/utils/merged-cells.ts

@@ -225,3 +225,107 @@ export const hasMergedCellsWithRowNextToRowIndex = (
 
   return false;
 };
+
+export const hasMergedCellsInSelection =
+  (indexes: number[], type: MergeType) =>
+  (selection: Selection): boolean => {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+
+    const map = TableMap.get(table.node);
+
+    if (!map.hasMergedCells()) {
+      return false;
+    }
+
+    return checkEdgeHasMergedCells(indexes, map, type);
+  };
+
+/**
+ * handle table map by preprocess table's map row or column.
+ *
+ * @param map TableMap
+ * @returns object including mapByRow and mapByColumn
+ */
+export const getTableMapByRowOrColumn = (map: TableMap) => {
+  let mapByRow = Array(map.height);
+  let mapByColumn = Array(map.width);
+
+  const mapCopy = [...map.map];
+
+  for (let i = 0; i < mapCopy.length; i++) {
+    const columnIndex = i % map.width;
+    mapByColumn[columnIndex] = [
+      ...(mapByColumn[columnIndex] ?? []),
+      mapCopy[i],
+    ];
+    const rowIndex = Math.trunc(i / map.width);
+    mapByRow[rowIndex] = [...(mapByRow[rowIndex] ?? []), mapCopy[i]];
+  }
+
+  return { mapByRow, mapByColumn };
+};
+
+/**
+ * this check the selection has merged cells with previous/next col or row.
+ *
+ * @param indexes - this get the indexes of the selection,e.g. [0,1] for selecting first two rows or columns.
+ * @param tableMap  - this return a TableMap object.
+ * @param direction - check selection is selected by row or column
+ * @returns boolean
+ */
+export const checkEdgeHasMergedCells = (
+  indexes: number[],
+  tableMap: TableMap,
+  direction: 'row' | 'column',
+): boolean => {
+  const { mapByRow, mapByColumn } = getTableMapByRowOrColumn(tableMap);
+  const map = 'row' === direction ? mapByRow : mapByColumn;
+  const lengthLimiter = direction === 'row' ? tableMap.width : tableMap.height;
+
+  let minIndex = Math.min(...indexes);
+  let maxIndex = Math.max(...indexes);
+  let isTopSideHaveMergedCells = false;
+  let isBottomSideHaveMergedCells = false;
+  let isOldMinIndex = !map[minIndex - 1] && !map[minIndex];
+  let isOldMaxIndex = !map[maxIndex + 1] && !map[maxIndex];
+
+  if (minIndex > 0 && !isOldMinIndex) {
+    const prevSelectionSet = map[minIndex - 1];
+    const minSelectionSet = map[minIndex];
+    for (let i = 0; i < lengthLimiter; i++) {
+      if (prevSelectionSet[i] === minSelectionSet[i]) {
+        isTopSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+
+  if (maxIndex < map.length - 1 && !isOldMaxIndex) {
+    const afterSelectionSet = map[maxIndex + 1];
+    const maxSelectionSet = map[maxIndex];
+
+    for (let i = 0; i < lengthLimiter; i++) {
+      if (afterSelectionSet[i] === maxSelectionSet[i]) {
+        isBottomSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+  return isTopSideHaveMergedCells || isBottomSideHaveMergedCells;
+};
+
+/**
+ * this function will find the duplicate position in the array(table map position array).
+ *
+ * @param array this usually be the array including positions of the table map.
+ * @returns []
+ */
+export const findDuplicatePosition = (array: number[]): number[] => {
+  if (!array) {
+    return [];
+  }
+  return array.filter((item, index) => array.indexOf(item) !== index);
+};