@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

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

@@ -5,10 +5,20 @@ import type {
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type { DraggableSourceData } from '../../types';
+import {
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+} from '../../utils/merged-cells';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import { getDraggableDataFromEvent } from './utils/monitor';
 
 export const createPlugin = (
   dispatch: Dispatch,
@@ -24,11 +34,74 @@ export const createPlugin = (
     })),
     key: pluginKey,
     view: (editorView: EditorView) => {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
-
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: monitorForElements({
+          canMonitor({ source }) {
+            const { type, localId, indexes } =
+              source.data as Partial<DraggableSourceData>;
+
+            // First; Perform any quick checks so we can abort early.
+            if (
+              !indexes ||
+              !localId ||
+              // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+              // of more then 1 item.
+              indexes.length !== 1 ||
+              !(type === 'table-row' || type === 'table-column')
+            ) {
+              return false;
+            }
+
+            const { tableNode } = getTablePluginState(editorView.state);
+            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+            // watch for changes
+            return localId === tableNode?.attrs.localId;
+          },
+          onDrag(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drag actions
+            if (!data) {
+              return;
+            }
+
+            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+            // insert location as to where the draggable will most likely be go. For example;
+            // const { sourceType, targetAdjustedIndex } = data;
+            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
+            // return editorView.dispatch(
+            //   highlight(targetAdjustedIndex)(editorView.state.tr),
+            // );
+          },
+          onDrop(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drop action
+            if (!data) {
+              return;
+            }
+
+            const { sourceType, sourceIndexes, targetAdjustedIndex } = data;
+
+            // 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)
+            ) {
+              return;
+            }
+
+            const move = sourceType === 'table-row' ? moveRow : moveColumn;
+
+            const [sourceIndex] = sourceIndexes;
+            return editorView.dispatch(
+              move(sourceIndex, targetAdjustedIndex)(editorView.state.tr),
+            );
+          },
+        }),
       };
     },
     props: {

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

@@ -11,12 +11,14 @@ export default (
     case DragAndDropActionType.SET_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index,
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
       };

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

@@ -0,0 +1 @@
+export { getDraggableDataFromEvent } from './monitor';

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

@@ -0,0 +1,72 @@
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type {
+  DraggableData,
+  DraggableSourceData,
+  DraggableTargetData,
+} from '../../../types';
+
+export const getDraggableDataFromEvent = ({
+  location,
+  source,
+}: ElementEventBasePayload): DraggableData | undefined => {
+  const destination = location.current.dropTargets.at(0);
+  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+  // the current draggable.
+  if (!destination) {
+    return undefined;
+  }
+
+  // This is the draggable elements data
+  const {
+    indexes: sourceIndexes,
+    type: sourceType,
+    localId: sourceLocalId,
+  } = source.data as DraggableSourceData;
+
+  // This is the drop target's data
+  const {
+    targetIndex,
+    type: targetType,
+    localId: targetLocalId,
+  } = destination.data as DraggableTargetData;
+
+  // Some basic check to abort early with...
+  if (
+    !sourceIndexes ||
+    targetIndex < 0 ||
+    // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+    sourceType !== targetType ||
+    // abort if the draggable is coming from a different table that the target is on.
+    sourceLocalId !== targetLocalId
+  ) {
+    return undefined;
+  }
+
+  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
+  if (sourceIndexes.length > 1) {
+    return undefined;
+  }
+
+  const targetClosestEdge =
+    extractClosestEdge(destination.data) ??
+    ((targetType === 'table-row' ? 'top' : 'left') as Edge);
+  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+  // the new target index to be 1 index higher.
+  const targetOffset =
+    targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+
+  return {
+    sourceType,
+    sourceLocalId,
+    sourceIndexes,
+    targetType,
+    targetLocalId,
+    targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge,
+  };
+};

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

@@ -14,6 +14,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 
 import type tablePlugin from './index';
 
@@ -85,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;
@@ -121,7 +125,6 @@ export interface TablePluginState {
   isBreakoutEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
-
   isDragAndDropEnabled?: boolean;
 }
 
@@ -150,7 +153,7 @@ export type TablePluginAction =
       };
     }
   | {
-      type: 'HOVER_CELLS';
+      type: 'HOVER_MERGED_CELLS';
       data: {
         decorationSet: DecorationSet;
       };
@@ -197,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';
@@ -232,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',
@@ -245,12 +250,16 @@ export enum TableDecorations {
   COLUMN_RESIZING_HANDLE_WIDGET = 'COLUMN_RESIZING_HANDLE_WIDGET',
   COLUMN_RESIZING_HANDLE_LINE = 'COLUMN_RESIZING_HANDLE_LINE',
 
+  COLUMN_INSERT_LINE = 'COLUMN_INSERT_LINE',
+  ROW_INSERT_LINE = 'ROW_INSERT_LINE',
+
   LAST_CELL_ELEMENT = 'LAST_CELL_ELEMENT',
 }
 
 export const TableCssClassName = {
   ...TableSharedCssClassName,
 
+  /** Classic controls */
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
@@ -289,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`,
@@ -329,8 +345,15 @@ export const TableCssClassName = {
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
 
+  WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
+
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
+
+  WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
 };
 
 export interface ToolbarMenuConfig {
@@ -383,8 +406,19 @@ export interface DraggableSourceData extends Record<string, unknown> {
   indexes: number[];
 }
 
-export interface DraggableTargetData extends Record<string, unknown> {
+export interface DraggableTargetData extends Record<string | symbol, unknown> {
   type: DraggableType;
   localId: string;
   targetIndex: number;
 }
+
+export interface DraggableData {
+  sourceType: DraggableType;
+  sourceLocalId: string;
+  sourceIndexes: number[];
+  targetType: DraggableType;
+  targetLocalId: string;
+  targetIndex: number;
+  targetAdjustedIndex: number;
+  targetClosestEdge: Edge;
+}

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,
+    });
   };
 }