@atlaskit/editor-plugin-table 5.5.3 → 5.5.5

package/src/plugins/table/commands/misc.ts

@@ -30,8 +30,10 @@ import {
   isSelectionType,
   isTableSelected,
   removeTable,
+  selectColumns as selectColumnsTransform,
   selectColumn as selectColumnTransform,
   selectionCell,
+  selectRows as selectRowsTransform,
   selectRow as selectRowTransform,
   setCellAttrs,
 } from '@atlaskit/editor-tables/utils';
@@ -487,6 +489,53 @@ export const selectColumn = (column: number, expand?: boolean) =>
       selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false),
   );
 
+export const selectColumns = (columnIndexes: number[]) =>
+  createCommand(
+    (state) => {
+      if (!columnIndexes) {
+        return false;
+      }
+      const cells = columnIndexes
+        .map((column) => getCellsInColumn(column)(state.tr.selection))
+        .flat();
+      if (
+        !cells ||
+        !cells.length ||
+        cells.some((cell) => cell && typeof cell.pos !== 'number')
+      ) {
+        return false;
+      }
+      const decorations = createColumnSelectedDecoration(
+        selectColumnsTransform(columnIndexes)(state.tr),
+      );
+
+      const decorationSet = updatePluginStateDecorations(
+        state,
+        decorations,
+        TableDecorations.COLUMN_SELECTED,
+      );
+
+      const cellsInFirstColumn = getCellsInColumn(Math.min(...columnIndexes))(
+        state.tr.selection,
+      );
+      if (!cellsInFirstColumn || cellsInFirstColumn.length === 0) {
+        return false;
+      }
+      const targetCellPosition = cellsInFirstColumn[0].pos;
+
+      return {
+        type: 'SELECT_COLUMN',
+        data: { targetCellPosition, decorationSet },
+      };
+    },
+    (tr: Transaction) => {
+      return selectColumnsTransform(columnIndexes)(tr).setMeta(
+        'addToHistory',
+        false,
+      );
+    },
+  );
+
 export const selectRow = (row: number, expand?: boolean) =>
   createCommand(
     (state) => {
@@ -501,6 +550,35 @@ export const selectRow = (row: number, expand?: boolean) =>
     (tr) => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false),
   );
 
+export const selectRows = (rowIndexes: number[]) =>
+  createCommand(
+    (state) => {
+      if (rowIndexes.length === 0) {
+        return false;
+      }
+      const cells = rowIndexes
+        .map((row) => getCellsInRow(row)(state.tr.selection))
+        .flat();
+      if (
+        !cells ||
+        !cells.length ||
+        cells.some((cell) => cell && typeof cell.pos !== 'number')
+      ) {
+        return false;
+      }
+      const cellsInFirstRow = getCellsInRow(Math.min(...rowIndexes))(
+        state.tr.selection,
+      );
+      if (!cellsInFirstRow || cellsInFirstRow.length === 0) {
+        return false;
+      }
+      const targetCellPosition = cellsInFirstRow[0].pos;
+
+      return { type: 'SET_TARGET_CELL_POSITION', data: { targetCellPosition } };
+    },
+    (tr) => selectRowsTransform(rowIndexes)(tr).setMeta('addToHistory', false),
+  );
+
 export const showInsertColumnButton = (columnIndex: number) =>
   createCommand(
     (_) =>

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -10,11 +10,10 @@ import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
-import { findNearestCellIndexToPoint } from '../../utils';
 import {
-  hasMergedCellsInColumn,
-  hasMergedCellsInRow,
-} from '../../utils/merged-cells';
+  findNearestCellIndexToPoint,
+  hasMergedCellsInBetween,
+} from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 
@@ -215,12 +214,13 @@ export const createPlugin = (
             }
 
             // If the drop target index contains merged cells then we should not allow the drop to occur.
-            const hasMergedCells =
-              sourceType === 'table-row'
-                ? hasMergedCellsInRow
-                : hasMergedCellsInColumn;
             if (
-              hasMergedCells(targetAdjustedIndex)(editorView.state.selection)
+              hasMergedCellsInBetween(
+                [targetAdjustedIndex - 1, targetAdjustedIndex],
+                sourceType === 'table-row'
+                  ? DropTargetType.ROW
+                  : DropTargetType.COLUMN,
+              )(editorView.state.selection)
             ) {
               clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
@@ -235,6 +235,8 @@ export const createPlugin = (
                 targetAdjustedIndex + (direction === -1 ? 0 : -1),
                 tr,
               )(editorView.state, editorView.dispatch);
+
+              editorView.focus();
             });
           },
         }),

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

@@ -153,9 +153,6 @@ export class FloatingInsertButton extends React.Component<
             docSize: editorView.state.doc.nodeSize,
             error: (error as any)?.toString(),
           },
-          nonPrivacySafeAttributes: {
-            errorStack: (error as any).stack || undefined,
-          },
         };
         dispatchAnalyticsEvent(payload);
       }

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

@@ -13,6 +13,7 @@ import {
   hoverCell,
   hoverColumns,
   selectColumn,
+  selectColumns,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
@@ -81,9 +82,28 @@ export const ColumnControls = ({
   const handleClick = useCallback(
     (event: MouseEvent) => {
       const { state, dispatch } = editorView;
-      selectColumn(colIndex!, event.shiftKey)(state, dispatch);
+
+      const isClickOutsideSelectedCols =
+        selectedColIndexes.length >= 1 &&
+        !selectedColIndexes.includes(colIndex!);
+
+      if (
+        !selectedColIndexes ||
+        selectedColIndexes.length === 0 ||
+        isClickOutsideSelectedCols
+      ) {
+        selectColumn(colIndex!, event.shiftKey)(state, dispatch);
+      }
+
+      if (
+        selectedColIndexes.length > 1 &&
+        selectedColIndexes.includes(colIndex!) &&
+        !event.shiftKey
+      ) {
+        selectColumns(selectedColIndexes)(state, dispatch);
+      }
     },
-    [colIndex, editorView],
+    [colIndex, selectedColIndexes, editorView],
   );
 
   const handleMouseOver = useCallback(() => {

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

@@ -50,6 +50,7 @@ type DragControlsProps = {
   canDrag?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
+  selectRows: (rowIndexes: number[]) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
 };
 
@@ -77,6 +78,7 @@ const DragControlsComponent = ({
   canDrag,
   hoverRows,
   selectRow,
+  selectRows,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const [isDragging, setIsDragging] = useState(false);
@@ -157,9 +159,26 @@ const DragControlsComponent = ({
 
   const handleClick = useCallback(
     (e: MouseEvent) => {
-      selectRow(rowIndex!, e?.shiftKey);
+      const isClickOutsideSelectedRows =
+        selectedRowIndexes.length >= 1 &&
+        !selectedRowIndexes.includes(rowIndex!);
+      if (
+        !selectedRowIndexes ||
+        selectedRowIndexes.length === 0 ||
+        isClickOutsideSelectedRows
+      ) {
+        selectRow(rowIndex!, e.shiftKey);
+      }
+
+      if (
+        selectedRowIndexes.length > 1 &&
+        selectedRowIndexes.includes(rowIndex!) &&
+        !e.shiftKey
+      ) {
+        selectRows(selectedRowIndexes);
+      }
     },
-    [rowIndex, selectRow],
+    [rowIndex, selectRow, selectRows, selectedRowIndexes],
   );
 
   const generateHandleByType = (type: HandleTypes): JSX.Element | null => {

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

@@ -6,7 +6,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
-import { hoverCell, hoverRows, selectRow } from '../../commands';
+import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
@@ -211,6 +211,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                     tableWidth={this.state.tableWrapperWidth}
                     hoverRows={this.hoverRows}
                     selectRow={this.selectRow}
+                    selectRows={this.selectRows}
                     updateCellHoverLocation={this.updateCellHoverLocation}
                     canDrag={canDrag}
                   />
@@ -256,6 +257,16 @@ export default class TableFloatingControls extends Component<Props, State> {
     selectRow(row, expand)(state, dispatch);
   };
 
+  private selectRows = (rowIndexes: number[]) => {
+    const { editorView } = this.props;
+    const { state, dispatch } = editorView;
+    // fix for issue ED-4665
+    if (browser.ie_version === 11) {
+      (editorView.dom as HTMLElement).blur();
+    }
+    selectRows(rowIndexes)(state, dispatch);
+  };
+
   private hoverRows = (rows: Array<number>, danger?: boolean) => {
     const { state, dispatch } = this.props.editorView;
     hoverRows(rows, danger)(state, dispatch);

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

@@ -79,4 +79,8 @@ export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
-export { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
+export {
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+  hasMergedCellsInBetween,
+} from './merged-cells';

package/src/plugins/table/utils/merged-cells.ts

@@ -2,6 +2,8 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 
+type MergeType = 'row' | 'column';
+
 const hasMergedCells =
   (
     indexes: number | number[],
@@ -65,3 +67,83 @@ export const hasMergedCellsInRow = (rowIndexes: number | number[]) =>
       bottom: y === index ? y + 1 : y,
     };
   });
+
+const getRect = (index: number, type: MergeType, map: TableMap) => {
+  if (type === 'column') {
+    const x = Math.max(Math.min(index, map.width - 1), 0); // clamped index
+    return {
+      left: x,
+      right: x === index ? x + 1 : x,
+      top: 0,
+      bottom: map.height,
+    };
+  } else {
+    const y = Math.max(Math.min(index, map.height - 1), 0); // clamped index
+    return {
+      left: 0,
+      right: map.width,
+      top: y,
+      bottom: y === index ? y + 1 : y,
+    };
+  }
+};
+
+export const hasMergedCellsInBetween =
+  (indexes: number[], type: MergeType) =>
+  (selection: Selection): boolean => {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+
+    const map = TableMap.get(table.node);
+    const cellPositions = new Set<number>();
+    const mergedCells = new Set<number>();
+
+    map.map.forEach((value) => {
+      if (cellPositions.has(value)) {
+        mergedCells.add(value);
+      } else {
+        cellPositions.add(value);
+      }
+    });
+
+    if (!mergedCells.size) {
+      return false;
+    }
+
+    const getMergedCellsInRect = (index: number, type: MergeType) => {
+      const rect = getRect(index, type, map);
+      const isValidRectangle = rect.left < rect.right && rect.top < rect.bottom;
+      if (!isValidRectangle) {
+        return [];
+      }
+
+      const cells = map.cellsInRect(rect);
+
+      let allCellsInRect = [];
+      if (type === 'column') {
+        allCellsInRect = map.map.filter((_, key) => key % map.width === index);
+      } else {
+        allCellsInRect = map.map.filter(
+          (_, key) => Math.floor(key / map.width) === index,
+        );
+      }
+      const mergedCell = allCellsInRect.filter((nodePos) => {
+        return !cells.includes(nodePos) // cell exists in Rect but not show in the map.cellsInRect list => merged cell
+          ? true
+          : mergedCells.has(nodePos); // cell includes in mergedCells => merged cell
+      });
+
+      return [...new Set(mergedCell)];
+    };
+
+    const mergedCellsInRectArr = indexes.map((index) =>
+      getMergedCellsInRect(index, type),
+    );
+
+    // Currently only support 2 indexes, but we can extend this to support more indexes in the future.
+    return mergedCellsInRectArr[0].some((cell) =>
+      mergedCellsInRectArr[1].includes(cell),
+    );
+  };