@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

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

@@ -1,22 +1,69 @@
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type {
+  EditorState,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
+import { TableDecorations } from '../../types';
+import {
+  createColumnInsertLine,
+  createRowInsertLine,
+  updateDecorations,
+} from '../../utils';
 
 import { DragAndDropActionType } from './actions';
 import type { DropTargetType } from './consts';
-import { createCommand } from './plugin-factory';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 
 // TODO: This command is a placeholder example. Please replace this if required.
+export const getDecorations = (state: EditorState): DecorationSet => {
+  return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
+};
+
+export const updatePluginStateDecorations = (
+  state: EditorState,
+  decorations: Decoration[],
+  key: TableDecorations,
+): DecorationSet =>
+  updateDecorations(state.doc, getDecorations(state), decorations, key);
+
 export const setDropTarget = (
   type: DropTargetType,
   index: number,
   tr?: Transaction,
 ) =>
   createCommand(
-    {
-      type: DragAndDropActionType.SET_DROP_TARGET,
-      data: {
-        type,
-        index,
-      },
+    (state) => {
+      const { dropTargetType, dropTargetIndex } = getPluginState(state);
+      if (dropTargetType === type && dropTargetIndex === index) {
+        return false;
+      }
+
+      let decorationSet = DecorationSet.empty;
+      if (type === 'column') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createColumnInsertLine(index, state.selection),
+          TableDecorations.COLUMN_INSERT_LINE,
+        );
+      } else if (type === 'row') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createRowInsertLine(index, state.selection),
+          TableDecorations.ROW_INSERT_LINE,
+        );
+      }
+
+      return {
+        type: DragAndDropActionType.SET_DROP_TARGET,
+        data: {
+          decorationSet,
+          type,
+          index,
+        },
+      };
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),
@@ -26,6 +73,9 @@ export const clearDropTarget = (tr?: Transaction) =>
   createCommand(
     {
       type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty,
+      },
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),

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

@@ -0,0 +1,35 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+import type {
+  ReadonlyTransaction,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import type { DragAndDropPluginState } from './types';
+
+type BuilderDragAndDropPluginState = (props: {
+  tr: Transaction | ReadonlyTransaction;
+  table?: ContentNodeWithPos;
+}) => (pluginState: DragAndDropPluginState) => DragAndDropPluginState;
+
+const buildPluginState =
+  (
+    builders: Array<BuilderDragAndDropPluginState>,
+  ): BuilderDragAndDropPluginState =>
+  (props) =>
+  (pluginState) => {
+    return builders.reduce(
+      (_pluginState, transform) => transform(props)(_pluginState),
+      pluginState,
+    );
+  };
+
+export const handleDocOrSelectionChanged = (
+  tr: Transaction | ReadonlyTransaction,
+  pluginState: DragAndDropPluginState,
+): DragAndDropPluginState =>
+  buildPluginState([])({
+    tr,
+    table: findTable(tr.selection),
+  })(pluginState);

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

@@ -1,8 +1,33 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 
+import { pluginKey as tablePluginKey } from '../plugin-key';
+
+import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
 
-const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer);
+export const { createPluginState, createCommand, getPluginState } =
+  pluginFactory(pluginKey, reducer, {
+    mapping: (tr, pluginState) => {
+      if (tr.docChanged) {
+        let decorationSet = pluginState.decorationSet;
+
+        const meta = tr.getMeta(tablePluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          decorationSet = meta.data.decorationSet;
+        }
+
+        if (decorationSet) {
+          decorationSet = decorationSet.map(tr.mapping, tr.doc);
+        }
 
-export { createPluginState, createCommand };
+        return {
+          ...pluginState,
+          ...{ decorationSet },
+        };
+      }
+      return pluginState;
+    },
+    onDocChanged: handleDocOrSelectionChanged,
+    onSelectionChanged: handleDocOrSelectionChanged,
+  });

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

@@ -4,29 +4,111 @@ import type {
 } from '@atlaskit/editor-common/event-dispatcher';
 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 } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import { getDraggableDataFromEvent } from './utils/monitor';
 
 export const createPlugin = (
   dispatch: Dispatch,
   eventDispatcher: EventDispatcher,
 ) => {
   return new SafePlugin({
-    state: createPluginState(dispatch, {
+    state: createPluginState(dispatch, (state) => ({
+      decorationSet: DecorationSet.empty,
       // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
       // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
-    }),
+    })),
     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: {
+      decorations: (state) => {
+        const { decorationSet } = getPluginState(state);
+        return decorationSet;
+      },
+    },
   });
 };

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/types.ts

@@ -1,6 +1,9 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
+  decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
 }

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/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';
 
@@ -239,11 +240,15 @@ export enum TableDecorations {
   CELL_CONTROLS_HOVER = 'CELL_CONTROLS_HOVER',
 
   COLUMN_CONTROLS_DECORATIONS = 'COLUMN_CONTROLS_DECORATIONS',
+  COLUMN_DROP_TARGET_DECORATIONS = 'COLUMN_DROP_TARGET_DECORATIONS',
   COLUMN_SELECTED = 'COLUMN_SELECTED',
   COLUMN_RESIZING_HANDLE = 'COLUMN_RESIZING_HANDLE',
   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',
 }
 
@@ -254,6 +259,10 @@ export const TableCssClassName = {
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
 
+  COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
+  COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
+  COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
+
   ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
   ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
   ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
@@ -324,8 +333,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 {
@@ -378,8 +394,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/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type { DraggableSourceData } from '../../../types';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getColumnsWidths, getRowHeights } from '../../../utils';
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  stickyTop?: number;
+  tableHeight?: number;
+  localId?: string;
+}
+
+export const ColumnDropTargets: React.FC<Props> = ({
+  editorView,
+  tableRef,
+  tableHeight,
+  stickyTop,
+  localId,
+}) => {
+  const colWidths = getColumnsWidths(editorView);
+  const rowHeights = useMemo(() => {
+    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+    if (tableRef && !!tableHeight) {
+      return getRowHeights(tableRef);
+    }
+    return [0];
+  }, [tableRef, tableHeight]);
+
+  if (!tableRef) {
+    return null;
+  }
+
+  const firstRow = tableRef.querySelector('tr');
+  const hasHeaderRow = firstRow
+    ? firstRow.getAttribute('data-header-row')
+    : false;
+
+  const marginTop =
+    hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+
+  return (
+    <div className={ClassName.COLUMN_DROP_TARGET_CONTROLS}>
+      <div
+        className={ClassName.COLUMN_CONTROLS_INNER}
+        data-testid="table-floating-column-controls-drop-targets"
+      >
+        {colWidths.map((width, index) => {
+          return (
+            <ColumnDropTarget
+              key={index}
+              index={index}
+              localId={localId}
+              width={width}
+              height={tableHeight}
+              marginTop={marginTop}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ColumnDropTargets;
+
+const ColumnDropTarget: React.FC<{
+  index: number;
+  localId?: string;
+  width?: number;
+  height?: number;
+  marginTop?: number;
+}> = ({ index, localId, width, height, marginTop }) => {
+  const dropTargetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop({ source }) {
+        const data = source.data as DraggableSourceData;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-column' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!data.indexes?.length &&
+          data.indexes?.indexOf(index) === -1
+        );
+      },
+      getData({ input, element }) {
+        const data = {
+          localId,
+          type: 'table-column',
+          targetIndex: index,
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['left', 'right'],
+        });
+      },
+    });
+  }, [index, localId]);
+
+  return (
+    <div
+      ref={dropTargetRef}
+      style={{
+        width: width && `${width - 1}px`,
+        height: height && `${height}px`,
+        marginTop: marginTop && `${marginTop}px`,
+      }}
+      data-drop-target-index={index}
+      data-drop-target-localid={localId}
+      data-testid="table-floating-column-controls-drop-target"
+    ></div>
+  );
+};

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

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable } from '@atlaskit/editor-tables';
+
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+
+import { ColumnDropTargets } from './ColumnDropTargets';
+
+export interface Props {
+  editorView: EditorView;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
+  selection?: Selection;
+  tableRef?: HTMLTableElement;
+  tableActive?: boolean;
+  hasHeaderRow?: boolean;
+  headerRowHeight?: number;
+  hoveredRows?: number[];
+  ordering?: TableColumnOrdering;
+  stickyHeader?: RowStickyState;
+}
+
+export const TableFloatingColumnControls: React.FC<Props> = ({
+  editorView,
+  tableRef,
+  tableActive,
+  hasHeaderRow,
+  stickyHeader,
+  selection,
+}) => {
+  const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
+    { width: 0, height: 0 },
+  );
+
+  useEffect(() => {
+    if (tableRef && window?.ResizeObserver) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          setTableRect((prev) => {
+            if (
+              prev.width !== entry.contentRect.width ||
+              prev.height !== entry.contentRect.height
+            ) {
+              return entry.contentRect;
+            }
+            return prev;
+          });
+        }
+      });
+      resizeObserver.observe(tableRef);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [tableRef]);
+
+  const selectedLocalId = useMemo(() => {
+    if (!selection) {
+      return undefined;
+    }
+
+    const tableNode = findTable(selection);
+    if (!tableNode) {
+      return undefined;
+    }
+
+    return tableNode.node.attrs.localId;
+  }, [selection]);
+
+  if (!tableRef) {
+    return null;
+  }
+
+  const stickyTop =
+    stickyHeader && stickyHeader.sticky && hasHeaderRow
+      ? stickyHeader.top
+      : undefined;
+
+  return (
+    <div
+      onMouseDown={(e) => e.preventDefault()}
+      data-testid="table-floating-column-controls-wrapper"
+    >
+      {tableActive && (
+        <ColumnDropTargets
+          editorView={editorView}
+          tableRef={tableRef}
+          stickyTop={tableActive ? stickyTop : undefined}
+          tableHeight={tableRect.height}
+          localId={selectedLocalId}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TableFloatingColumnControls;