@atlaskit/editor-plugin-table 5.3.1 → 5.3.2

package/src/plugins/table/event-handlers.ts

@@ -33,6 +33,7 @@ import {
   clearHoverSelection,
   hideInsertColumnOrRowButton,
   hideResizeHandleLine,
+  hoverCell,
   hoverColumns,
   selectColumn,
   setEditorFocus,
@@ -275,14 +276,21 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   const { state, dispatch } = view;
-  const { insertColumnButtonIndex, insertRowButtonIndex } =
-    getPluginState(state);
+  const {
+    insertColumnButtonIndex,
+    insertRowButtonIndex,
+    isDragAndDropEnabled,
+  } = getPluginState(state);
 
   const target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
 
+  if (isDragAndDropEnabled) {
+    hoverCell(undefined, undefined)(state, dispatch);
+  }
+
   if (
     (typeof insertColumnButtonIndex !== 'undefined' ||
       typeof insertRowButtonIndex !== 'undefined') &&
@@ -498,3 +506,42 @@ export const whenTableInFocus =
 
     return eventHandler(view, mouseEvent, elementContentRects);
   };
+
+const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
+  const target = mouseEvent.target;
+  const maybeTableCell = isElementInTableCell(
+    target as HTMLElement,
+  ) as HTMLTableCellElement | null;
+
+  if (!maybeTableCell) {
+    return;
+  }
+
+  const colIndex = maybeTableCell.cellIndex;
+  const rowElement = closestElement(
+    target as HTMLElement,
+    'tr',
+  ) as HTMLTableRowElement;
+  const rowIndex = rowElement && rowElement.rowIndex;
+  const { hoveredCell } = getPluginState(view.state);
+
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
+    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  }
+};
+
+export const withCellTracking =
+  (
+    eventHandler: (
+      view: EditorView,
+      mouseEvent: Event,
+      elementContentRects?: ElementContentRects,
+    ) => boolean,
+    elementContentRects?: ElementContentRects,
+  ) =>
+  (view: EditorView, mouseEvent: Event): boolean => {
+    if (getPluginState(view.state).isDragAndDropEnabled) {
+      trackCellLocation(view, mouseEvent);
+    }
+    return eventHandler(view, mouseEvent, elementContentRects);
+  };

package/src/plugins/table/index.tsx

@@ -196,8 +196,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               getIntl,
               breakoutEnabled,
-              fullWidthEnabled,
               tableResizingEnabled,
+              fullWidthEnabled,
               wasFullWidthEnabled,
               dragAndDropEnabled,
               editorAnalyticsAPI,

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

@@ -403,7 +403,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
     // doesn't work well with WithPluginState
-    const { isInDanger, hoveredRows } = getPluginState(view.state);
+    const { isInDanger, hoveredRows, hoveredCell } = getPluginState(view.state);
 
     const tableRef = this.table || undefined;
     const headerRow = tableRef
@@ -418,10 +418,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           tableRef={tableRef}
           tableActive={tableActive}
           hoveredRows={hoveredRows}
+          hoveredCell={hoveredCell}
           isInDanger={isInDanger}
           isResizing={isResizing}
           isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
           isHeaderRowEnabled={isHeaderRowEnabled}
+          isDragAndDropEnabled={options?.isDragAndDropEnabled}
           ordering={ordering}
           isHeaderColumnEnabled={isHeaderColumnEnabled}
           hasHeaderRow={hasHeaderRow}
@@ -429,7 +431,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           selection={view.state.selection}
           headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
           stickyHeader={this.state.stickyHeader}
-          getEditorFeatureFlags={this.props.getEditorFeatureFlags}
         />
       </div>
     );

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

@@ -352,6 +352,7 @@ export const createTableView = (
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
+    isDragAndDropEnabled,
   } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
@@ -368,6 +369,7 @@ export const createTableView = (
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
+      isDragAndDropEnabled,
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/plugins/table/nodeviews/types.ts

@@ -1,11 +1,11 @@
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import type { PluginInjectionAPI } from '../types';
 
@@ -14,6 +14,7 @@ export type TableOptions = {
   isFullWidthModeEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -1,11 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import {
+import type {
   EditorState,
-  PluginKey,
   // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
@@ -30,6 +30,7 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
   const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
   const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing
@@ -38,7 +39,8 @@ export const handleDocOrSelectionChanged = (
   } else if (
     tr.docChanged ||
     tr.selection instanceof CellSelection ||
-    changedResizing
+    changedResizing ||
+    tr.getMeta(tablePluginKey)?.type === 'HOVER_CELL'
   ) {
     return buildColumnControlsDecorations({
       decorationSet,
@@ -69,6 +71,12 @@ export const createPlugin = () => {
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
+        const previousHover = tablePluginKey.getState(oldState)?.hoveredCell;
+        const newHover = tablePluginKey.getState(newState)?.hoveredCell;
+        const changedCellHover =
+          previousHover?.colIndex !== newHover?.colIndex ||
+          previousHover?.rowIndex !== newHover?.rowIndex;
+
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
@@ -76,7 +84,8 @@ export const createPlugin = () => {
         if (
           tr.docChanged ||
           tr.selectionSet ||
-          tr.getMeta(tableWidthPluginKey)
+          tr.getMeta(tableWidthPluginKey) ||
+          changedCellHover
         ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -1,9 +1,9 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
@@ -15,9 +15,10 @@ import {
   findControlsHoverDecoration,
   updateDecorations,
 } from '../../../utils/decoration';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 
 import { composeDecorations } from './compose-decorations';
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
   tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -49,13 +50,17 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   tr,
 }): DecorationSet => {
   const table = findTable(tr.selection);
-  if (!table) {
+  const meta = tr.getMeta(tablePluginKey);
+
+  // avoid re-drawing state if dnd decorations don't need to be updated
+  if (!table && meta?.type !== 'HOVER_CELL') {
     return decorationSet;
   }
+
   return updateDecorations(
     tr.doc,
     decorationSet,
-    createColumnControlsDecoration(tr.selection),
+    createColumnControlsDecoration(tr.selection, meta?.data?.hoveredCell),
     TableDecorations.COLUMN_CONTROLS_DECORATIONS,
   );
 };

package/src/plugins/table/pm-plugins/default-table-selection.ts

@@ -2,3 +2,13 @@ export const defaultTableSelection = {
   hoveredColumns: [],
   hoveredRows: [],
 };
+
+/**
+ * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
+ *
+ * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
+ * when doc changes.
+ */
+export const defaultHoveredCell = {
+  hoveredCell: { rowIndex: undefined, colIndex: undefined },
+};

package/src/plugins/table/pm-plugins/main.ts

@@ -63,6 +63,7 @@ import {
   handleMouseOver,
   handleTripleClick,
   whenTableInFocus,
+  withCellTracking,
 } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
@@ -85,7 +86,10 @@ import {
 } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
 
-import { defaultTableSelection } from './default-table-selection';
+import {
+  defaultHoveredCell,
+  defaultTableSelection,
+} from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
@@ -99,8 +103,8 @@ export const createPlugin = (
   getEditorFeatureFlags: GetEditorFeatureFlags,
   getIntl: () => IntlShape,
   breakoutEnabled?: boolean,
-  fullWidthModeEnabled?: boolean,
   tableResizingEnabled?: boolean,
+  fullWidthModeEnabled?: boolean,
   previousFullWidthModeEnabled?: boolean,
   dragAndDropEnabled?: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
@@ -117,6 +121,7 @@ export const createPlugin = (
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled,
+    ...defaultHoveredCell,
     ...defaultTableSelection,
     getIntl,
   });
@@ -375,8 +380,8 @@ export const createPlugin = (
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: handleMouseDown,
-        mouseover: whenTableInFocus(handleMouseOver),
+        mousedown: withCellTracking(handleMouseDown),
+        mouseover: whenTableInFocus(withCellTracking(handleMouseOver)),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),

package/src/plugins/table/reducer.ts

@@ -145,7 +145,8 @@ export default (
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
     case 'HOVER_TABLE':
-    case 'HOVER_CELLS':
+    case 'HOVER_MERGED_CELLS':
+    case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
       return { ...pluginState, ...action.data };

package/src/plugins/table/types.ts

@@ -86,10 +86,13 @@ export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
  */
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 
+export type CellHoverCoordinates = { colIndex?: number; rowIndex?: number };
+
 export interface TablePluginState {
   editorHasFocus?: boolean;
   hoveredColumns: number[];
   hoveredRows: number[];
+  hoveredCell: CellHoverCoordinates;
   pluginConfig: PluginConfig;
   isHeaderColumnEnabled: boolean;
   isHeaderRowEnabled: boolean;
@@ -122,7 +125,6 @@ export interface TablePluginState {
   isBreakoutEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
-
   isDragAndDropEnabled?: boolean;
 }
 
@@ -151,7 +153,7 @@ export type TablePluginAction =
       };
     }
   | {
-      type: 'HOVER_CELLS';
+      type: 'HOVER_MERGED_CELLS';
       data: {
         decorationSet: DecorationSet;
       };
@@ -198,6 +200,7 @@ export type TablePluginAction =
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
   | { type: 'HIDE_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
+  | { type: 'HOVER_CELL'; data: CellHoverCoordinates }
   | { type: 'SET_TARGET_CELL_POSITION'; data: { targetCellPosition?: number } }
   | {
       type: 'SELECT_COLUMN';
@@ -233,6 +236,7 @@ export type ColumnResizingPluginAction =
     };
 
 export enum TableDecorations {
+  /** Classic controls */
   ALL_CONTROLS_HOVER = 'CONTROLS_HOVER',
   ROW_CONTROLS_HOVER = 'ROW_CONTROLS_HOVER',
   COLUMN_CONTROLS_HOVER = 'COLUMN_CONTROLS_HOVER',
@@ -255,6 +259,7 @@ export enum TableDecorations {
 export const TableCssClassName = {
   ...TableSharedCssClassName,
 
+  /** Classic controls */
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
@@ -293,8 +298,15 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
+  /** Controls with drag handle */
+  COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: `${tablePrefixSelector}-column-controls-decoration-with-drag`,
+
+  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+
+  /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
+  NUMBERED_COLUMN_BUTTON_DISABLED: `${tablePrefixSelector}-numbered-column__button-disabled`,
 
   HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,

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

@@ -0,0 +1,57 @@
+import type { MouseEventHandler } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { token } from '@atlaskit/tokens';
+
+type DragHandleProps = {
+  tableLocalId: string;
+  indexes: number[];
+  direction?: 'column' | 'row';
+  onClick?: MouseEventHandler;
+  onMouseOver?: MouseEventHandler;
+  onMouseOut?: MouseEventHandler;
+};
+
+// TODO: use for now, in future replace with custom @atlaskit/icon/glyph/drag-handler
+// width is too large (24px), should be 16px
+export const DragHandle = ({
+  tableLocalId,
+  direction = 'row',
+  indexes,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+}: DragHandleProps) => {
+  const dragHandleDivRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const dragHandleDivRefCurrent = dragHandleDivRef.current;
+    if (dragHandleDivRefCurrent) {
+      return draggable({
+        element: dragHandleDivRefCurrent,
+        getInitialData() {
+          return {
+            localId: tableLocalId,
+            type: `table-${direction}`,
+            indexes,
+          };
+        },
+      });
+    }
+  }, [tableLocalId, direction, indexes]);
+  return (
+    <div
+      ref={dragHandleDivRef}
+      style={{
+        backgroundColor: `${token('elevation.surface', 'white')}`,
+        borderRadius: '4px',
+        border: `2px solid ${token('elevation.surface', 'white')}`,
+        transform: direction === 'column' ? 'rotate(90deg)' : 'none',
+      }}
+    >
+      <DragHandleButton label="blah" />
+    </div>
+  );
+};

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

@@ -1,12 +1,16 @@
 import React, { Component } from 'react';
 
+import classnames from 'classnames';
+
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
 
-import { clearHoverSelection } from '../../../commands';
+import { clearHoverSelection, hoverCell } from '../../../commands';
+import { getPluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
+import { tableBorderColor } from '../../consts';
 
 export interface Props {
   editorView: EditorView;
@@ -19,11 +23,13 @@ export interface Props {
   isInDanger?: boolean;
   isResizing?: boolean;
   stickyTop?: number;
+  isDragAndDropEnabled?: boolean;
 }
 
 export default class NumberColumn extends Component<Props, any> {
   render() {
-    const { tableRef, hasHeaderRow } = this.props;
+    const { tableRef, hasHeaderRow, isDragAndDropEnabled, tableActive } =
+      this.props;
     const rowHeights = getRowHeights(tableRef);
 
     return (
@@ -34,30 +40,38 @@ export default class NumberColumn extends Component<Props, any> {
             hasHeaderRow && this.props.stickyTop !== undefined
               ? rowHeights[0]
               : undefined,
+          borderLeft:
+            isDragAndDropEnabled && tableActive
+              ? `1px solid ${tableBorderColor()}`
+              : undefined,
         }}
         contentEditable={false}
       >
-        {rowHeights.map((rowHeight, index) => (
-          <div
-            key={`wrapper-${index}`}
-            className={this.getClassNames(index)}
-            data-index={index}
-            style={{
-              height: rowHeight,
-              top:
-                this.props.stickyTop !== undefined &&
-                hasHeaderRow &&
-                index === 0
-                  ? `${this.props.stickyTop}px`
-                  : undefined,
-            }}
-            onClick={(event) => this.selectRow(index, event)}
-            onMouseOver={() => this.hoverRows(index)}
-            onMouseOut={this.clearHoverSelection}
-          >
-            {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
-          </div>
-        ))}
+        {rowHeights.map((rowHeight, index) =>
+          isDragAndDropEnabled ? (
+            <div
+              key={`wrapper-${index}`}
+              className={this.getClassNames(index, true)}
+              data-index={index}
+              style={this.getCellStyles(index, rowHeight)}
+              onMouseOver={() => this.updateDragHandleLocation(index)}
+            >
+              {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
+            </div>
+          ) : (
+            <div
+              key={`wrapper-${index}`}
+              className={this.getClassNames(index)}
+              data-index={index}
+              style={this.getCellStyles(index, rowHeight)}
+              onClick={(event) => this.selectRow(index, event)}
+              onMouseOver={() => this.hoverRows(index)}
+              onMouseOut={this.clearHoverSelection}
+            >
+              {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
+            </div>
+          ),
+        )}
       </div>
     );
   }
@@ -95,15 +109,39 @@ export default class NumberColumn extends Component<Props, any> {
     }
   };
 
-  private getClassNames = (index: number) => {
+  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) {
+      return {
+        height: rowHeight,
+        top: `${stickyTop}px`,
+      };
+    }
+    return {
+      height: rowHeight,
+    };
+  };
+
+  private getClassNames = (index: number, isButtonDisabled = false) => {
     const { hoveredRows, editorView, isInDanger, isResizing } = this.props;
     const isActive =
       isRowSelected(index)(editorView.state.selection) ||
       ((hoveredRows || []).indexOf(index) !== -1 && !isResizing);
-    return [
-      ClassName.NUMBERED_COLUMN_BUTTON,
-      isActive ? ClassName.HOVERED_CELL_ACTIVE : '',
-      isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : '',
-    ].join(' ');
+
+    return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+      [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+      [ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
+      [ClassName.HOVERED_CELL_ACTIVE]: isActive,
+    });
   };
 }