@atlaskit/editor-plugin-table 5.3.1 → 5.3.3

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/DragPreview/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+
+import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+
+const boxStyles = xcss({
+  borderColor: 'color.border.focused',
+  borderStyle: 'solid',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.outline',
+  backgroundColor: 'color.blanket.selected',
+});
+
+export const DragPreview = ({
+  direction,
+  width,
+  height,
+}: {
+  direction: 'column' | 'row';
+  width: number;
+  height: number;
+}) => {
+  let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+  let marginTop = direction === 'row' ? height / 2 - 14 : -10;
+  let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+  return (
+    <Box
+      xcss={boxStyles}
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+      }}
+    >
+      <DragInMotionIcon
+        style={{
+          position: 'absolute',
+          marginLeft: `${marginLeft}px`,
+          marginTop: `${marginTop}px`,
+          transform: transform,
+        }}
+      />
+    </Box>
+  );
+};

package/src/plugins/table/ui/Icons/DragInMotionIcon.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+interface DragInMotionIconProps {
+  style?: React.CSSProperties;
+}
+
+export const DragInMotionIcon = ({ style }: DragInMotionIconProps) => (
+  <svg
+    width="28"
+    height="20"
+    viewBox="0 0 28 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      fill={token('color.background.accent.blue.subtle', '#579DFF')}
+    />
+    <rect
+      x="9"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="13"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="17"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      stroke={token('color.border.inverse', '#FFFFFF')}
+      strokeWidth="2"
+    />
+  </svg>
+);