@atlaskit/editor-plugin-table 5.5.2 → 5.5.4

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -12,9 +13,10 @@ import {
   hoverCell,
   hoverColumns,
   selectColumn,
+  selectColumns,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -69,14 +71,6 @@ export const ColumnControls = ({
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex!)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex! + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
-
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow
     ? firstRow.getAttribute('data-header-row')
@@ -88,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(() => {
@@ -143,6 +156,114 @@ export const ColumnControls = ({
 
   const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
+  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
+    if (!hoveredCell || !colWidths?.length) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isColumnsSelected = selectedColIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isColumnsSelected &&
+        !selectedColIndexes.includes(colIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedColIndexes.length < colWidths?.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridColumnPosition = `${colIndex! + 1} / span 1`;
+    const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${
+      selectedColIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedColIndexes.includes(colIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionApprearance = isColumnsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const istSelecting = isColumnsSelected && !isHover;
+
+    // this indexes are used to calculate the drag and drop source
+    const indexes = isColumnsSelected
+      ? isHover
+        ? colIndexes
+        : selectedColIndexes
+      : colIndexes;
+
+    return (
+      showCondition && (
+        <div
+          key={type}
+          style={{
+            gridColumn: istSelecting
+              ? selectedColumnPosition
+              : gridColumnPosition,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 'fit-content',
+            placeSelf: 'center',
+            zIndex: 99,
+          }}
+          data-column-control-index={hoveredCell.colIndex}
+          data-testid={
+            isHover
+              ? 'table-floating-column-control-hover'
+              : 'table-floating-column-control'
+          }
+        >
+          <DragHandle
+            direction="column"
+            tableLocalId={localId || ''}
+            indexes={indexes}
+            forceDefaultHandle={isHover ? false : isColumnsSelected}
+            previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+            previewHeight={previewHeight}
+            appearance={
+              istSelecting ? currentSelectionApprearance : hoveredAppearance
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+            onMouseUp={handleMouseUp}
+            editorView={editorView}
+            canDrag={canDrag}
+          />
+        </div>
+      )
+    );
+  };
+
+  const columnHandles = (hoveredCell: CellHoverMeta | undefined) => {
+    if (!hoveredCell) {
+      return null;
+    }
+
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+
+    const sortedHandles = [
+      generateHandleByType('hover'),
+      generateHandleByType('selected'),
+    ];
+
+    return hoveredCell.colIndex < selectedColIndexes[0]
+      ? sortedHandles
+      : sortedHandles.reverse();
+  };
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -185,45 +306,9 @@ export const ColumnControls = ({
             </div>
           ))}
         {tableActive &&
-          !isResizing &&
           isTableHovered &&
-          !!hoveredCell &&
-          Number.isFinite(hoveredCell.colIndex) && (
-            <div
-              style={{
-                gridColumn: gridColumnPosition,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: 'fit-content',
-                placeSelf: 'center',
-                zIndex: 99,
-              }}
-              data-column-control-index={hoveredCell.colIndex}
-              data-testid="table-floating-column-control"
-            >
-              <DragHandle
-                direction="column"
-                tableLocalId={localId || ''}
-                indexes={colIndexes}
-                previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
-                previewHeight={previewHeight}
-                appearance={
-                  selectedColIndexes.includes(hoveredCell.colIndex!)
-                    ? isInDanger
-                      ? 'danger'
-                      : 'selected'
-                    : 'default'
-                }
-                onClick={handleClick}
-                onMouseOver={handleMouseOver}
-                onMouseOut={handleMouseOut}
-                onMouseUp={handleMouseUp}
-                editorView={editorView}
-                canDrag={canDrag}
-              />
-            </div>
-          )}
+          !isResizing &&
+          columnHandles(hoveredCell)}
       </div>
     </div>
   );

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

@@ -81,9 +81,9 @@ export default class NumberColumn extends Component<Props, any> {
     );
   }
 
-  private hoverRows = (index: number) =>
-    this.props.tableActive ? this.props.hoverRows([index]) : null;
-
+  private hoverRows = (index: number) => {
+    return this.props.tableActive ? this.props.hoverRows([index]) : null;
+  };
   private selectRow = (
     index: number,
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, {
   Fragment,
@@ -22,7 +23,11 @@ import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
-import type { CellHoverMeta, DraggableSourceData } from '../../../types';
+import type {
+  CellHoverMeta,
+  DraggableSourceData,
+  HandleTypes,
+} from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
@@ -45,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;
 };
 
@@ -72,6 +78,7 @@ const DragControlsComponent = ({
   canDrag,
   hoverRows,
   selectRow,
+  selectRows,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const [isDragging, setIsDragging] = useState(false);
@@ -116,14 +123,6 @@ const DragControlsComponent = ({
 
   const rowIndex = hoveredCell?.rowIndex;
 
-  const gridRowPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex!)) {
-      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    }
-    return `${rowIndex! + 1} / span 1`;
-  }, [rowIndex, selectedRowIndexes]);
-
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const { state, dispatch } = editorView;
@@ -160,11 +159,133 @@ 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 => {
+    if (!hoveredCell) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isRowsSelected = selectedRowIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isRowsSelected &&
+        !selectedRowIndexes.includes(rowIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedRowIndexes.length < rowHeights.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridRowPosition = `${rowIndex! + 1} / span 1`;
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    const selectedRowPosition = `${selectedRowIndexes[0] + 1} / span ${
+      selectedRowIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedRowIndexes.includes(rowIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionAppearance = isRowsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const isSelecting = isRowsSelected && !isHover;
+
+    const indexes = isRowsSelected
+      ? isHover
+        ? rowIndexes
+        : selectedRowIndexes
+      : rowIndexes;
+
+    return (
+      showCondition && (
+        <div
+          key={type}
+          style={{
+            gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+            gridColumn: '2',
+            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+            width: '9px',
+            position: 'relative',
+            right: '-0.5px',
+          }}
+          data-testid={
+            isHover
+              ? 'table-floating-row-drag-handle-hover'
+              : 'table-floating-row-drag-handle'
+          }
+        >
+          <DragHandle
+            direction="row"
+            tableLocalId={currentNodeLocalId}
+            indexes={indexes}
+            forceDefaultHandle={isHover ? false : isRowsSelected}
+            previewWidth={tableWidth}
+            previewHeight={rowHeights[rowIndex!]}
+            appearance={
+              isSelecting ? currentSelectionAppearance : hoveredAppearance
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+            onMouseUp={onMouseUp}
+            editorView={editorView}
+            canDrag={canDrag}
+          />
+        </div>
+      )
+    );
+  };
+
+  const rowHandles = (hoveredCell: CellHoverMeta | undefined) => {
+    if (!hoveredCell) {
+      return null;
+    }
+
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+
+    const sortedHandles = [
+      generateHandleByType('hover'),
+      generateHandleByType('selected'),
+    ];
+
+    return hoveredCell.rowIndex < selectedRowIndexes[0]
+      ? sortedHandles
+      : sortedHandles.reverse();
+  };
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -221,39 +342,11 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && isTableHovered && Number.isFinite(rowIndex) && (
-        <div
-          style={{
-            gridRow: gridRowPosition,
-            gridColumn: '2',
-            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-            width: '9px',
-            position: 'relative',
-            right: '-0.5px',
-          }}
-          data-testid="table-floating-row-drag-handle"
-        >
-          <DragHandle
-            tableLocalId={currentNodeLocalId}
-            indexes={rowIndexes}
-            previewWidth={tableWidth}
-            previewHeight={rowHeights[rowIndex!]}
-            appearance={
-              selectedRowIndexes.includes(rowIndex!)
-                ? isInDanger
-                  ? 'danger'
-                  : 'selected'
-                : 'default'
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={onMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )}
+      {tableActive &&
+        isTableHovered &&
+        !isResizing &&
+        Number.isFinite(rowIndex) &&
+        rowHandles(hoveredCell)}
     </div>
   );
 };

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