@atlaskit/editor-plugin-table 7.5.16 → 7.6.1

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

@@ -4,7 +4,12 @@ import type {
 } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import {
+  cloneColumn,
+  cloneRow,
+  moveColumn,
+  moveRow,
+} from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
@@ -59,7 +64,6 @@ export const setDropTarget = (
           TableDecorations.ROW_INSERT_LINE,
         );
       }
-
       return {
         type: DragAndDropActionType.SET_DROP_TARGET,
         data: {
@@ -175,3 +179,28 @@ export const toggleDragMenu = (
       return tr.setMeta('addToHistory', false);
     },
   );
+
+export const cloneSource = (
+  sourceType: DraggableType,
+  sourceIndexes: number[],
+  targetIndex: number,
+  targetDirection: 'start' | 'end',
+  tr?: Transaction,
+) =>
+  createCommand(
+    (state) => {
+      return {
+        type: DragAndDropActionType.CLEAR_DROP_TARGET,
+        data: {
+          decorationSet: DecorationSet.empty,
+        },
+      };
+    },
+    (originalTr: Transaction, state) => {
+      const nextTr = tr || originalTr;
+      const clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
+      return clone(state, sourceIndexes, targetIndex, targetDirection, {
+        selectAfterClone: true,
+      })(nextTr);
+    },
+  );

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

@@ -26,6 +26,7 @@ import { DragAndDropActionType } from './actions';
 import { clearDropTarget, setDropTarget, toggleDragMenu } from './commands';
 import {
   clearDropTargetWithAnalytics,
+  cloneSourceWithAnalytics,
   moveSourceWithAnalytics,
 } from './commands-with-analytics';
 import { DropTargetType } from './consts';
@@ -172,7 +173,9 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
           sourceIndexes,
           targetIndex,
           targetAdjustedIndex,
+          targetDirection,
           direction,
+          behaviour,
         } = data;
 
         // When we drop on a target we will know the targets row/col index for certain,
@@ -203,13 +206,24 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
         }
 
         requestAnimationFrame(() => {
-          moveSourceWithAnalytics(editorAnalyticsAPI)(
-            INPUT_METHOD.DRAG_AND_DROP,
-            sourceType,
-            sourceIndexes,
-            targetAdjustedIndex + (direction === -1 ? 0 : -1),
-            tr,
-          )(editorView.state, editorView.dispatch);
+          if (behaviour === 'clone') {
+            cloneSourceWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.DRAG_AND_DROP,
+              sourceType,
+              sourceIndexes,
+              targetIndex,
+              targetDirection,
+              tr,
+            )(editorView.state, editorView.dispatch);
+          } else {
+            moveSourceWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.DRAG_AND_DROP,
+              sourceType,
+              sourceIndexes,
+              targetAdjustedIndex + (direction === 1 ? -1 : 0),
+              tr,
+            )(editorView.state, editorView.dispatch);
+          }
 
           // force a colgroup update here, otherwise dropped columns don't have
           // the correct width immediately after the drop

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

@@ -0,0 +1,12 @@
+import { browser } from '@atlaskit/editor-common/utils';
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+
+import type { DraggableBehaviour } from '../../../types';
+
+export const getDragBehaviour = ({
+  altKey,
+  ctrlKey,
+}: Input): DraggableBehaviour => {
+  const isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
+  return isCloneModifierKeyPressed ? 'clone' : 'move';
+};

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

@@ -8,6 +8,8 @@ import type {
   DraggableTargetData,
 } from '../../../types';
 
+import { getDragBehaviour } from './getDragBehaviour';
+
 export const getDraggableDataFromEvent = ({
   location,
   source,
@@ -54,9 +56,16 @@ export const getDraggableDataFromEvent = ({
   const targetOffset =
     targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
 
-  // since only consecutive rows/cols can be moved we can assume that if the first index is greater then
-  // the target index, the then the direction of the DnD is decreasing
-  const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+  // if the min index is greater then the target index, the then the direction of the DnD is decreasing
+  // if the target is within the min/max index then we can assume that no direction exists so it will be 0.
+  const srcMin = Math.min(...sourceIndexes);
+  const srcMax = Math.max(...sourceIndexes);
+  const direction =
+    targetIndex >= srcMin && targetIndex <= srcMax
+      ? 0
+      : srcMin >= targetIndex
+      ? -1
+      : 1;
 
   return {
     sourceType,
@@ -67,6 +76,11 @@ export const getDraggableDataFromEvent = ({
     targetIndex,
     targetAdjustedIndex: targetIndex + targetOffset,
     targetClosestEdge,
+    targetDirection:
+      targetClosestEdge === 'top' || targetClosestEdge === 'left'
+        ? 'start'
+        : 'end',
     direction,
+    behaviour: getDragBehaviour(location.current.input),
   };
 };

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

package/src/ui/consts.ts

@@ -143,3 +143,5 @@ export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;
 export const colorPalletteColumns = 7;
+
+export const tableResizerWidth = 8;

package/src/utils/snapping.ts

@@ -5,9 +5,10 @@ import {
   akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
   akEditorGutterPadding,
-  akEditorMediaResizeHandlerPaddingWide,
 } from '@atlaskit/editor-shared-styles';
 
+import { tableResizerWidth } from '../ui/consts';
+
 const numberOfLanesInDefaultLayoutWidth = 12;
 
 const calculateSubSnappingWidths = (totalLanes: number, totalWidth: number) =>
@@ -34,9 +35,7 @@ export const calculateDefaultTablePreserveSnappings = (
     editorContainerWith - akEditorGutterPadding * 2 >=
     akEditorFullWidthLayoutWidth
       ? akEditorFullWidthLayoutWidth
-      : editorContainerWith -
-        akEditorGutterPadding * 2 -
-        akEditorMediaResizeHandlerPaddingWide;
+      : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
 
   return [
     ...calculateSubSnappingWidths(