@atlaskit/editor-plugin-table 7.5.16 → 7.6.0

package/src/types.ts

@@ -477,6 +477,8 @@ export type TableDirection = 'row' | 'column';
  * Drag and Drop interfaces
  */
 export type DraggableType = 'table-row' | 'table-column';
+export type DraggableBehaviour = 'move' | 'clone';
+
 export interface DraggableSourceData extends Record<string, unknown> {
   type: DraggableType;
   localId: string;
@@ -498,7 +500,17 @@ export interface DraggableData {
   targetIndex: number;
   targetAdjustedIndex: number;
   targetClosestEdge: Edge;
-  direction: 1 | -1;
+  /**
+   * The target direction identifies where relative to the target index is the item being dropped. A value of 'start' would
+   * mean that the item is being inserted before the index, and 'end would be after.
+   */
+  targetDirection: 'start' | 'end';
+  /**
+   * This represents a hollistic movement direction; a value of 1 means the source->target index would shift in a positive direction.
+   * A value of 0 indicates that the target index is inside the the source indexes.
+   */
+  direction: 1 | -1 | 0;
+  behaviour: DraggableBehaviour;
 }
 
 export type HandleTypes = 'hover' | 'selected';

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  attachClosestEdge,
+  type Edge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
+import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
 import type { DraggableSourceData } from '../../../types';
 
 export interface Props {
@@ -29,8 +33,16 @@ export const ColumnDropTarget = ({
 
     return dropTargetForElements({
       element: dropTargetRef.current,
-      canDrop({ source }) {
+      canDrop({ source, input }) {
         const data = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        const isDropValid =
+          behaviour === 'move'
+            ? data.indexes?.indexOf(index) === -1
+            : behaviour === 'clone';
+
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-column' &&
@@ -38,20 +50,42 @@ export const ColumnDropTarget = ({
           data.localId === localId &&
           // Only draggables which DO NOT include this drop targets index can be dropped
           !!data.indexes?.length &&
-          data.indexes?.indexOf(index) === -1
+          isDropValid
         );
       },
+      getDropEffect: ({ input }) =>
+        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
-      getData({ input, element }) {
+      getData({ source, input, element }) {
         const data = {
           localId,
           type: 'table-column',
           targetIndex: index,
         };
+        const srcData = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+        const allowedEdges: Edge[] =
+          behaviour === 'move'
+            ? srcData.indexes?.reduce(
+                (acc, v) => {
+                  if (v - index === -1) {
+                    acc.shift();
+                  }
+                  if (v - index === 1) {
+                    acc.pop();
+                  }
+                  return acc;
+                },
+                ['left', 'right'],
+              )
+            : ['left', 'right'];
+
         return attachClosestEdge(data, {
           input,
           element,
-          allowedEdges: ['left', 'right'],
+          allowedEdges,
         });
       },
     });

package/src/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  attachClosestEdge,
+  type Edge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
+import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
 import type { DraggableSourceData } from '../../../types';
 
 export type RowDropTargetProps = {
@@ -21,8 +25,16 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
 
     return dropTargetForElements({
       element: dropTargetRef.current,
-      canDrop({ source }) {
+      canDrop({ source, input }) {
         const data = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        const isDropValid =
+          behaviour === 'move'
+            ? data.indexes?.indexOf(index) === -1
+            : behaviour === 'clone';
+
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
@@ -30,20 +42,43 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
           data.localId === localId &&
           // Only draggables which DO NOT include this drop targets index can be dropped
           !!data.indexes?.length &&
-          data.indexes?.indexOf(index) === -1
+          isDropValid
         );
       },
+      getDropEffect: ({ input }) =>
+        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
-      getData({ input, element }) {
+      getData({ source, input, element }) {
         const data = {
           localId,
           type: 'table-row',
           targetIndex: index,
         };
+
+        const srcData = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+        const allowedEdges: Edge[] =
+          behaviour === 'move'
+            ? srcData.indexes?.reduce(
+                (acc, v) => {
+                  if (v - index === -1) {
+                    acc.shift();
+                  }
+                  if (v - index === 1) {
+                    acc.pop();
+                  }
+                  return acc;
+                },
+                ['top', 'bottom'],
+              )
+            : ['top', 'bottom'];
+
         return attachClosestEdge(data, {
           input,
           element,
-          allowedEdges: ['top', 'bottom'],
+          allowedEdges,
         });
       },
     });