@atlaskit/editor-plugin-table 5.3.10 → 5.3.12

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -435,12 +435,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       </div>
     );
 
-    const colControls = (
+    const colControls = isDragAndDropEnabled ? (
       <TableFloatingColumnControls
         editorView={view}
         tableRef={tableRef}
         getNode={getNode}
         tableActive={tableActive}
+        isInDanger={isInDanger}
         hoveredRows={hoveredRows}
         hoveredCell={hoveredCell}
         isResizing={isResizing}
@@ -452,7 +453,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
         getEditorFeatureFlags={this.props.getEditorFeatureFlags}
       />
-    );
+    ) : null;
 
     const shadowPadding =
       allowControls && tableActive ? -tableToolbarSize : tableMarginSides;

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

@@ -4,7 +4,12 @@ import type {
 } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import {
+  moveColumn,
+  moveRow,
+  selectColumn,
+  selectRow,
+} from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType } from '../../types';
 import { TableDecorations } from '../../types';
@@ -109,7 +114,10 @@ export const moveSource = (
         return tr.setMeta('addToHistory', false);
       }
 
-      const move = sourceType === 'table-row' ? moveRow : moveColumn;
-      return move(sourceIndex, targetIndex)(tr);
+      const isTableRow = sourceType === 'table-row';
+      const move = isTableRow ? moveRow : moveColumn;
+      const newTr = move(sourceIndex, targetIndex)(tr);
+      const select = isTableRow ? selectRow : selectColumn;
+      return select(targetIndex)(newTr);
     },
   );

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

@@ -1,18 +1,17 @@
 import type { MouseEventHandler } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 
+import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
-import { N200, N700 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
 
-type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
+type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
 type DragHandleProps = {
   tableLocalId: string;
@@ -20,39 +19,24 @@ type DragHandleProps = {
   previewWidth?: number;
   previewHeight?: number;
   direction?: 'column' | 'row';
-  state?: DragHandleState;
+  appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
 };
 
-const mapStateToProps = (state: DragHandleState) => {
-  switch (state) {
-    case 'danger':
-    case 'disabled':
-    case 'selected':
-    case 'default':
-    default:
-      return {
-        backgroundColor: token('color.background.accent.gray.subtlest', N200),
-        foregroundColor: token('color.icon.subtle', N700),
-      };
-  }
-};
-
 export const DragHandle = ({
   tableLocalId,
   direction = 'row',
-  state = 'default',
+  appearance = 'default',
   indexes,
   previewWidth,
   previewHeight,
-  onClick,
   onMouseOver,
   onMouseOut,
+  onClick,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
-  const iconProps = mapStateToProps(state);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
@@ -92,18 +76,18 @@ export const DragHandle = ({
 
   return (
     <button
-      className={ClassName.DRAG_HANDLE_BUTTON_CONTAINER}
+      className={classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance)}
       ref={dragHandleDivRef}
       style={{
-        backgroundColor: `${token('elevation.surface', 'white')}`,
-        borderRadius: '4px',
-        border: `2px solid ${token('elevation.surface', 'white')}`,
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
         pointerEvents: 'auto',
       }}
       data-testid="table-floating-column-controls-drag-handle"
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
+      onClick={onClick}
     >
-      <DragHandleIcon {...iconProps} />
+      <DragHandleIcon />
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&

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

@@ -1,14 +1,25 @@
-import React from 'react';
+import type { MouseEvent } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 
+import {
+  clearHoverSelection,
+  hoverColumns,
+  selectColumn,
+} from '../../../commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
+import { getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
-export interface Props {
+export interface ColumnControlsProps {
   editorView: EditorView;
   tableActive?: boolean;
+  isInDanger?: boolean;
   tableRef: HTMLTableElement;
   hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
@@ -18,7 +29,18 @@ export interface Props {
   colWidths?: (number | undefined)[];
 }
 
-export const ColumnControls: React.FC<Props> = ({
+const getSelectedColumns = (selection: Selection) => {
+  if (selection instanceof CellSelection && selection.isColSelection()) {
+    const rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return getSelectedColumnIndexes(rect);
+  }
+  return [];
+};
+
+export const ColumnControls = ({
   editorView,
   tableActive,
   tableRef,
@@ -26,12 +48,23 @@ export const ColumnControls: React.FC<Props> = ({
   isResizing,
   stickyTop,
   localId,
+  isInDanger,
   rowHeights,
   colWidths,
-}) => {
-  if (!tableRef) {
-    return null;
-  }
+}: ColumnControlsProps) => {
+  const widths =
+    colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
+    '0px';
+  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
@@ -41,17 +74,25 @@ export const ColumnControls: React.FC<Props> = ({
   const marginTop =
     hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
 
-  const widths =
-    colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
-    '0px';
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      const { state, dispatch } = editorView;
+      selectColumn(colIndex!, event.shiftKey)(state, dispatch);
+    },
+    [colIndex, editorView],
+  );
 
-  const onClick = (
-    index: number,
-    event: React.MouseEvent<Element, MouseEvent>,
-  ) => {};
+  const handleMouseOver = useCallback(() => {
+    const { state, dispatch } = editorView;
+    hoverColumns([colIndex!])(state, dispatch);
+  }, [colIndex, editorView]);
 
-  const onMouseOver = () => {};
-  const onMouseOut = () => {};
+  const handleMouseOut = useCallback(() => {
+    if (tableActive) {
+      const { state, dispatch } = editorView;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
 
   return (
     <div className={ClassName.COLUMN_CONTROLS_WITH_DRAG}>
@@ -69,7 +110,7 @@ export const ColumnControls: React.FC<Props> = ({
           Number.isFinite(hoveredCell.colIndex) && (
             <div
               style={{
-                gridColumn: `${(hoveredCell.colIndex as number) + 1} / span 1`,
+                gridColumn: gridColumnPosition,
                 marginTop: `-15px`,
               }}
               data-column-control-index={hoveredCell.colIndex}
@@ -77,15 +118,20 @@ export const ColumnControls: React.FC<Props> = ({
             >
               <DragHandle
                 direction="column"
-                indexes={[hoveredCell.colIndex!]}
-                onClick={(event) =>
-                  onClick(hoveredCell.colIndex as number, event)
-                }
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
                 tableLocalId={localId || ''}
+                indexes={[hoveredCell.colIndex!]}
                 previewWidth={hoveredCell.colWidth}
                 previewHeight={hoveredCell.colHeight}
+                appearance={
+                  selectedColIndexes.includes(hoveredCell.colIndex!)
+                    ? isInDanger
+                      ? 'danger'
+                      : 'selected'
+                    : 'default'
+                }
+                onClick={handleClick}
+                onMouseOver={handleMouseOver}
+                onMouseOut={handleMouseOut}
               />
             </div>
           )}

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

@@ -24,6 +24,7 @@ export interface Props {
   tableRef?: HTMLTableElement;
   getNode: () => PmNode;
   tableActive?: boolean;
+  isInDanger?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
@@ -43,6 +44,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   isResizing,
   stickyHeader,
   selection,
+  isInDanger,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -132,6 +134,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         tableActive={tableActive}
         stickyTop={tableActive ? stickyTop : undefined}
         localId={currentNodeLocalId}
+        isInDanger={isInDanger}
         rowHeights={rowHeights}
         colWidths={colWidths}
       />

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

@@ -6,8 +6,7 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
 
-import { clearHoverSelection, hoverCell } from '../../../commands';
-import { getPluginState } from '../../../pm-plugins/plugin-factory';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
 import { tableBorderColor } from '../../consts';
@@ -19,6 +18,7 @@ export interface Props {
   hoverRows: (rows: number[], danger?: boolean) => void;
   hoveredRows?: number[];
   selectRow: (row: number, expand: boolean) => void;
+  updateCellHoverLocation: (rowIndex: number) => void;
   hasHeaderRow?: boolean;
   isInDanger?: boolean;
   isResizing?: boolean;
@@ -28,8 +28,13 @@ export interface Props {
 
 export default class NumberColumn extends Component<Props, any> {
   render() {
-    const { tableRef, hasHeaderRow, isDragAndDropEnabled, tableActive } =
-      this.props;
+    const {
+      tableRef,
+      hasHeaderRow,
+      isDragAndDropEnabled,
+      tableActive,
+      updateCellHoverLocation,
+    } = this.props;
     const rowHeights = getRowHeights(tableRef);
 
     return (
@@ -54,7 +59,7 @@ export default class NumberColumn extends Component<Props, any> {
               className={this.getClassNames(index, true)}
               data-index={index}
               style={this.getCellStyles(index, rowHeight)}
-              onMouseOver={() => this.updateDragHandleLocation(index)}
+              onMouseOver={() => updateCellHoverLocation(index)}
             >
               {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
             </div>
@@ -109,16 +114,6 @@ export default class NumberColumn extends Component<Props, any> {
     }
   };
 
-  private updateDragHandleLocation = (rowIndex: number) => {
-    const { editorView, tableActive } = this.props;
-    const { state, dispatch } = editorView;
-    const { hoveredCell } = getPluginState(state);
-
-    if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-      hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
-    }
-  };
-
   private getCellStyles = (index: number, rowHeight: number) => {
     const { stickyTop, hasHeaderRow } = this.props;
     if (stickyTop && hasHeaderRow && index === 0) {

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

@@ -1,14 +1,18 @@
-import React from 'react';
+import type { MouseEvent } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { injectIntl } from 'react-intl-next';
 import type { WrappedComponentProps } from 'react-intl-next';
 
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { findTable } from '@atlaskit/editor-tables/utils';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
 
+import { clearHoverSelection } from '../../../commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights } from '../../../utils';
+import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 type DragControlsProps = {
@@ -16,61 +20,126 @@ type DragControlsProps = {
   tableRef: HTMLTableElement;
   tableActive?: boolean;
   hoveredCell?: CellHoverMeta;
-  hoverRows?: (rows: number[], danger?: boolean) => void;
-  selectRow?: (row: number, expand: boolean) => void;
+  isInDanger?: boolean;
+  hoverRows: (rows: number[], danger?: boolean) => void;
+  selectRow: (row: number, expand: boolean) => void;
+  updateCellHoverLocation: (rowIndex: number) => void;
+};
+
+const getSelectedRows = (selection: Selection) => {
+  if (selection instanceof CellSelection && selection.isRowSelection()) {
+    const rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return getSelectedRowIndexes(rect);
+  }
+  return [];
 };
 
 const DragControlsComponent = ({
   tableRef,
   hoveredCell,
-  hoverRows,
-  selectRow,
   tableActive,
   editorView,
+  isInDanger,
+  hoverRows,
+  selectRow,
+  updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const rowHeights = getRowHeights(tableRef);
-  const heights = rowHeights
-    .map((height, index) => `${height - 1}px`)
-    .join(' ');
+  const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
+  const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
-
-  const onClick = (
-    index: number,
-    event: React.MouseEvent<Element, MouseEvent>,
-  ) => {};
-
-  const onMouseOver = () => {};
-  const onMouseOut = () => {};
-
   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 getLocalId = () => {
     const tableNode = findTable(editorView.state.selection);
     return tableNode?.node?.attrs?.localId || '';
   };
 
+  const handleMouseOut = useCallback(() => {
+    if (tableActive) {
+      const { state, dispatch } = editorView;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      // avoid updating if event target is drag handle
+      if (
+        !(e.nativeEvent.target as Element).classList.contains(
+          ClassName.ROW_CONTROLS_WITH_DRAG,
+        )
+      ) {
+        return;
+      }
+
+      const hoverHeight = e.nativeEvent.offsetY;
+      let totalHeight = 0;
+      const rowIndex = rowHeights.findIndex((row) => {
+        totalHeight += row;
+        return hoverHeight <= totalHeight;
+      });
+
+      updateCellHoverLocation(rowIndex);
+    },
+    [updateCellHoverLocation, rowHeights],
+  );
+
+  const handleMouseOver = useCallback(() => {
+    hoverRows([rowIndex!]);
+  }, [hoverRows, rowIndex]);
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      selectRow(rowIndex!, e?.shiftKey);
+    },
+    [rowIndex, selectRow],
+  );
+
   return (
     <div
       className={ClassName.ROW_CONTROLS_WITH_DRAG}
       style={{
         gridTemplateRows: heights,
       }}
+      onMouseMove={handleMouseMove}
     >
-      {rowIndex !== undefined && Number.isFinite(rowIndex) && (
+      {Number.isFinite(rowIndex) && (
         <div
           style={{
-            gridRow: `${(rowIndex as number) + 1} / span 1`,
+            gridRow: gridRowPosition,
             display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
         >
           <DragHandle
-            onClick={(event) => onClick(rowIndex as number, event)}
-            onMouseOver={onMouseOver}
-            onMouseOut={onMouseOut}
             tableLocalId={getLocalId()}
-            indexes={[rowIndex]}
+            indexes={[rowIndex!]}
             previewWidth={rowWidth}
-            previewHeight={rowHeights[rowIndex]}
+            previewHeight={rowHeights[rowIndex!]}
+            appearance={
+              selectedRowIndexes.includes(rowIndex!)
+                ? isInDanger
+                  ? 'danger'
+                  : 'selected'
+                : 'default'
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
           />
         </div>
       )}

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

@@ -5,7 +5,8 @@ import { browser } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
-import { hoverRows, selectRow } from '../../commands';
+import { hoverCell, hoverRows, selectRow } from '../../commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
 import { isSelectionUpdated } from '../../utils';
@@ -145,6 +146,7 @@ export default class TableFloatingControls extends Component<Props, State> {
             isInDanger={isInDanger}
             isResizing={isResizing}
             selectRow={this.selectRow}
+            updateCellHoverLocation={this.updateCellHoverLocation}
             stickyTop={stickyTop}
             isDragAndDropEnabled={isDragAndDropEnabled}
           />
@@ -157,8 +159,11 @@ export default class TableFloatingControls extends Component<Props, State> {
                 tableRef={tableRef}
                 hoveredCell={hoveredCell}
                 editorView={editorView}
+                tableActive={tableActive}
+                isInDanger={isInDanger}
                 hoverRows={this.hoverRows}
                 selectRow={this.selectRow}
+                updateCellHoverLocation={this.updateCellHoverLocation}
               />
             ) : (
               <>
@@ -204,4 +209,15 @@ export default class TableFloatingControls extends Component<Props, State> {
     const { state, dispatch } = this.props.editorView;
     hoverRows(rows, danger)(state, dispatch);
   };
+
+  // re-use across numbered columns and row controls
+  private updateCellHoverLocation = (rowIndex: number) => {
+    const { editorView, tableActive } = this.props;
+    const { state, dispatch } = editorView;
+    const { hoveredCell } = getPluginState(state);
+
+    if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+      hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+    }
+  };
 }

package/src/plugins/table/ui/common-styles.ts

@@ -249,7 +249,7 @@ const tableRowControlStyles = () => {
           position: absolute;
           margin-top: ${tableMarginTop}px;
           left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex};
+          z-index: ${rowControlsZIndex + 4};
         }
       `
     : css`
@@ -705,14 +705,77 @@ export const tableStyles = (
       align-items: center;
       position: absolute;
       left: -4px;
+      z-index: ${akEditorUnitZIndex};
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
-      width: max-content;
       padding: 0;
-      border: none;
-      background: none;
+
+      border-radius: 6px;
+      width: max-content;
+      height: max-content;
+      border: 2px solid ${token('elevation.surface', N0)};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        rect {
+          //
+          fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
+        }
+        g {
+          fill: ${token('color.icon.subtle', '#626F86')};
+        }
+      }
+
+      &:hover {
+        svg {
+          rect {
+            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+          }
+          g {
+            fill: ${token('color.icon.inverse', '#FFF')};
+          }
+        }
+      }
+
+      &.selected {
+        svg {
+          rect {
+            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+          }
+          g {
+            fill: ${token('color.icon.inverse', '#FFF')};
+          }
+        }
+      }
+
+      &.danger {
+        svg {
+          rect {
+            fill: ${token(
+              'color.background.accent.red.subtler.pressed',
+              '#F87462',
+            )};
+          }
+          g {
+            fill: ${token('color.border.inverse', '#FFF')};
+          }
+        }
+      }
+
+      &.disabled {
+        svg {
+          rect {
+            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
+          }
+          g {
+            fill: ${token('color.border.inverse', '#FFF')};
+          }
+        }
+      }
     }
 
     ${floatingColumnControls(props)}