@atlaskit/editor-plugin-table 5.3.9 → 5.3.11

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

@@ -1,16 +1,27 @@
-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 type { CellHoverCoordinates } from '../../../types';
+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?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
   stickyTop?: number;
   localId?: string;
@@ -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,19 +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 colIndex = hoveredCell?.colIndex;
+  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}>
@@ -65,25 +104,37 @@ export const ColumnControls: React.FC<Props> = ({
           marginTop,
         }}
       >
-        {tableActive && !isResizing && Number.isFinite(colIndex) && (
-          <div
-            style={{
-              gridColumn: `${(colIndex as number) + 1} / span 1`,
-              marginTop: `-15px`,
-            }}
-            data-column-control-index={colIndex}
-            data-testid="table-floating-column-control"
-          >
-            <DragHandle
-              direction="column"
-              indexes={[colIndex!]}
-              onClick={(event) => onClick(colIndex as number, event)}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-              tableLocalId={localId || ''}
-            />
-          </div>
-        )}
+        {tableActive &&
+          !isResizing &&
+          !!hoveredCell &&
+          Number.isFinite(hoveredCell.colIndex) && (
+            <div
+              style={{
+                gridColumn: gridColumnPosition,
+                marginTop: `-15px`,
+              }}
+              data-column-control-index={hoveredCell.colIndex}
+              data-testid="table-floating-column-control"
+            >
+              <DragHandle
+                direction="column"
+                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>
+          )}
       </div>
     </div>
   );

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

@@ -10,7 +10,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates, DraggableSourceData } from '../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { getColumnsWidths, getRowHeights } from '../../utils';
 
@@ -24,10 +24,11 @@ export interface Props {
   tableRef?: HTMLTableElement;
   getNode: () => PmNode;
   tableActive?: boolean;
+  isInDanger?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
@@ -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,76 +1,145 @@
-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 type { CellHoverCoordinates } from '../../../types';
+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 = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
   tableActive?: boolean;
-  hoveredCell?: CellHoverCoordinates;
-  hoverRows?: (rows: number[], danger?: boolean) => void;
-  selectRow?: (row: number, expand: boolean) => void;
+  hoveredCell?: CellHoverMeta;
+  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,9 +5,10 @@ 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 { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
@@ -28,7 +29,7 @@ export interface Props {
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }
@@ -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)}

package/src/plugins/table/ui/icons/DragHandleIcon.tsx

@@ -1,74 +1,10 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 
-interface DragHandleIconProps {
-  backgroundColor?: string;
-  foregroundColor?: string;
-}
-
-export const DragHandleIcon = ({
-  backgroundColor,
-  foregroundColor,
-}: DragHandleIconProps) => (
-  <svg
-    width="28"
-    height="20"
-    viewBox="0 0 28 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      x="1"
-      y="1"
-      width="26"
-      height="18"
-      rx="5"
-      fill={backgroundColor || '#F1F2F4'}
-    />
-    <g clipPath="url(#clip0_125_45007)">
-      <path
-        d="M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z"
-        fill={foregroundColor || '#626F86'}
-      />
-      <path
-        d="M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z"
-        fill={foregroundColor || '#626F86'}
-      />
-      <path
-        d="M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z"
-        fill={foregroundColor || '#626F86'}
-      />
-      <path
-        d="M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z"
-        fill={foregroundColor || '#626F86'}
-      />
-      <path
-        d="M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z"
-        fill={foregroundColor || '#626F86'}
-      />
-      <path
-        d="M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z"
-        fill={foregroundColor || '#626F86'}
-      />
+export const DragHandleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" fill="none">
+    <rect width="24" height="16" rx="4" />
+    <g>
+      <path d="M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" />
     </g>
-    <rect
-      x="1"
-      y="1"
-      width="26"
-      height="18"
-      rx="5"
-      stroke="white"
-      strokeWidth="2"
-    />
-    <defs>
-      <clipPath id="clip0_125_45007">
-        <rect
-          width="16"
-          height="24"
-          fill="white"
-          transform="matrix(0 -1 1 0 2 18)"
-        />
-      </clipPath>
-    </defs>
   </svg>
 );