@atlaskit/editor-plugin-table 7.5.16 → 7.6.1

package/dist/es2019/ui/TableFloatingControls/RowDropTarget/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { attachClosestEdge } 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';
 const RowDropTarget = ({
   index,
   localId,
@@ -14,33 +15,56 @@ const RowDropTarget = ({
     return dropTargetForElements({
       element: dropTargetRef.current,
       canDrop({
-        source
+        source,
+        input
       }) {
         var _data$indexes, _data$indexes2;
         const data = source.data;
+        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 = data.indexes) === null || _data$indexes === void 0 ? void 0 : _data$indexes.indexOf(index)) === -1 : behaviour === 'clone';
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
           // 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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+          !!((_data$indexes2 = data.indexes) !== null && _data$indexes2 !== void 0 && _data$indexes2.length) && isDropValid
         );
       },
+      getDropEffect: ({
+        input
+      }) => getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
       getData({
+        source,
         input,
         element
       }) {
+        var _srcData$indexes;
         const data = {
           localId,
           type: 'table-row',
           targetIndex: index
         };
+        const srcData = source.data;
+        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 = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _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/dist/es2019/ui/consts.js

@@ -70,4 +70,5 @@ export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;
-export const colorPalletteColumns = 7;
+export const colorPalletteColumns = 7;
+export const tableResizerWidth = 8;

package/dist/es2019/utils/snapping.js

@@ -1,12 +1,13 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { tableResizerWidth } from '../ui/consts';
 const numberOfLanesInDefaultLayoutWidth = 12;
 const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
 
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
   return [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
 };
 export const defaultSnappingWidths = calculateDefaultSnappings();

package/dist/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -5,7 +5,7 @@ import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tab
 import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo } from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
 import { canMove, getTargetIndex } from '../../utils/drag-menu';
-import { clearDropTarget, moveSource } from './commands';
+import { clearDropTarget, cloneSource, moveSource } from './commands';
 export var clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
     return withEditorAnalyticsAPI(function (_ref) {
@@ -95,4 +95,39 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };
+};
+export var cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod, sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
+    return withEditorAnalyticsAPI(function (_ref3) {
+      var selection = _ref3.selection;
+      var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+      var _getSelectedTableInfo4 = getSelectedTableInfo(selection),
+        totalRowCount = _getSelectedTableInfo4.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo4.totalColumnCount;
+      return {
+        action: sourceType === 'table-row' ? TABLE_ACTION.CLONED_ROW : TABLE_ACTION.CLONED_COLUMN,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        attributes: {
+          inputMethod: inputMethod,
+          count: sourceIndexes.length,
+          // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
+          // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
+          distance: Math.min.apply(Math, _toConsumableArray(sourceIndexes.map(function (v) {
+            return Math.abs(targetIndex - v);
+          }))) * direction,
+          // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
+          status: sourceIndexes.includes(targetIndex) ? TABLE_STATUS.CANCELLED : TABLE_STATUS.SUCCESS,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount
+        },
+        eventType: EVENT_TYPE.TRACK
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr)(state, dispatch);
+      }
+      return true;
+    });
+  };
 };

package/dist/esm/pm-plugins/drag-and-drop/commands.js

@@ -1,5 +1,5 @@
 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 { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
@@ -112,4 +112,20 @@ export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, i
   }, function (tr) {
     return tr.setMeta('addToHistory', false);
   });
+};
+export var cloneSource = function cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
+  return createCommand(function (state) {
+    return {
+      type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty
+      }
+    };
+  }, function (originalTr, state) {
+    var nextTr = tr || originalTr;
+    var clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
+    return clone(state, sourceIndexes, targetIndex, targetDirection, {
+      selectAfterClone: true
+    })(nextTr);
+  });
 };

package/dist/esm/pm-plugins/drag-and-drop/plugin.js

@@ -12,7 +12,7 @@ import { pluginKey as tablePluginKey } from '../plugin-key';
 import { insertColgroupFromNode } from '../table-resizing/utils';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, setDropTarget, toggleDragMenu } from './commands';
-import { clearDropTargetWithAnalytics, moveSourceWithAnalytics } from './commands-with-analytics';
+import { clearDropTargetWithAnalytics, cloneSourceWithAnalytics, moveSourceWithAnalytics } from './commands-with-analytics';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -121,7 +121,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
         sourceIndexes = data.sourceIndexes,
         targetIndex = data.targetIndex,
         targetAdjustedIndex = data.targetAdjustedIndex,
-        direction = data.direction;
+        targetDirection = data.targetDirection,
+        direction = data.direction,
+        behaviour = data.behaviour;
 
       // When we drop on a target we will know the targets row/col index for certain,
       if (sourceType === 'table-row') {
@@ -138,7 +140,11 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
         return;
       }
       requestAnimationFrame(function () {
-        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/dist/esm/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -0,0 +1,7 @@
+import { browser } from '@atlaskit/editor-common/utils';
+export var getDragBehaviour = function getDragBehaviour(_ref) {
+  var altKey = _ref.altKey,
+    ctrlKey = _ref.ctrlKey;
+  var isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
+  return isCloneModifierKeyPressed ? 'clone' : 'move';
+};

package/dist/esm/pm-plugins/drag-and-drop/utils/monitor.js

@@ -1,4 +1,6 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { getDragBehaviour } from './getDragBehaviour';
 export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref) {
   var _extractClosestEdge;
   var location = _ref.location,
@@ -36,9 +38,11 @@ export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref)
   // the new target index to be 1 index higher.
   var 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
-  var 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.
+  var srcMin = Math.min.apply(Math, _toConsumableArray(sourceIndexes));
+  var srcMax = Math.max.apply(Math, _toConsumableArray(sourceIndexes));
+  var direction = targetIndex >= srcMin && targetIndex <= srcMax ? 0 : srcMin >= targetIndex ? -1 : 1;
   return {
     sourceType: sourceType,
     sourceLocalId: sourceLocalId,
@@ -48,6 +52,8 @@ export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref)
     targetIndex: targetIndex,
     targetAdjustedIndex: targetIndex + targetOffset,
     targetClosestEdge: targetClosestEdge,
-    direction: direction
+    targetDirection: targetClosestEdge === 'top' || targetClosestEdge === 'left' ? 'start' : 'end',
+    direction: direction,
+    behaviour: getDragBehaviour(location.current.input)
   };
 };

package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { attachClosestEdge } 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';
 export var ColumnDropTarget = function ColumnDropTarget(_ref) {
   var index = _ref.index,
     localId = _ref.localId,
@@ -16,32 +17,56 @@ export var ColumnDropTarget = function ColumnDropTarget(_ref) {
       element: dropTargetRef.current,
       canDrop: function canDrop(_ref2) {
         var _data$indexes, _data$indexes2;
-        var source = _ref2.source;
+        var source = _ref2.source,
+          input = _ref2.input;
         var data = source.data;
+        var behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        var isDropValid = behaviour === 'move' ? ((_data$indexes = data.indexes) === null || _data$indexes === void 0 ? void 0 : _data$indexes.indexOf(index)) === -1 : behaviour === 'clone';
         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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+          !!((_data$indexes2 = data.indexes) !== null && _data$indexes2 !== void 0 && _data$indexes2.length) && isDropValid
         );
       },
+      getDropEffect: function getDropEffect(_ref3) {
+        var input = _ref3.input;
+        return getDragBehaviour(input) === 'clone' ? 'copy' : 'move';
+      },
       getIsSticky: function getIsSticky() {
         return true;
       },
-      getData: function getData(_ref3) {
-        var input = _ref3.input,
-          element = _ref3.element;
+      getData: function getData(_ref4) {
+        var _srcData$indexes;
+        var source = _ref4.source,
+          input = _ref4.input,
+          element = _ref4.element;
         var data = {
           localId: localId,
           type: 'table-column',
           targetIndex: index
         };
+        var srcData = source.data;
+        var 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.
+        var allowedEdges = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _srcData$indexes.reduce(function (acc, v) {
+          if (v - index === -1) {
+            acc.shift();
+          }
+          if (v - index === 1) {
+            acc.pop();
+          }
+          return acc;
+        }, ['left', 'right']) : ['left', 'right'];
         return attachClosestEdge(data, {
           input: input,
           element: element,
-          allowedEdges: ['left', 'right']
+          allowedEdges: allowedEdges
         });
       }
     });

package/dist/esm/ui/TableFloatingControls/RowDropTarget/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { attachClosestEdge } 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';
 var RowDropTarget = function RowDropTarget(_ref) {
   var index = _ref.index,
     localId = _ref.localId,
@@ -14,32 +15,56 @@ var RowDropTarget = function RowDropTarget(_ref) {
       element: dropTargetRef.current,
       canDrop: function canDrop(_ref2) {
         var _data$indexes, _data$indexes2;
-        var source = _ref2.source;
+        var source = _ref2.source,
+          input = _ref2.input;
         var data = source.data;
+        var behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        var isDropValid = behaviour === 'move' ? ((_data$indexes = data.indexes) === null || _data$indexes === void 0 ? void 0 : _data$indexes.indexOf(index)) === -1 : behaviour === 'clone';
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
           // 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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+          !!((_data$indexes2 = data.indexes) !== null && _data$indexes2 !== void 0 && _data$indexes2.length) && isDropValid
         );
       },
+      getDropEffect: function getDropEffect(_ref3) {
+        var input = _ref3.input;
+        return getDragBehaviour(input) === 'clone' ? 'copy' : 'move';
+      },
       getIsSticky: function getIsSticky() {
         return true;
       },
-      getData: function getData(_ref3) {
-        var input = _ref3.input,
-          element = _ref3.element;
+      getData: function getData(_ref4) {
+        var _srcData$indexes;
+        var source = _ref4.source,
+          input = _ref4.input,
+          element = _ref4.element;
         var data = {
           localId: localId,
           type: 'table-row',
           targetIndex: index
         };
+        var srcData = source.data;
+        var 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.
+        var allowedEdges = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _srcData$indexes.reduce(function (acc, v) {
+          if (v - index === -1) {
+            acc.shift();
+          }
+          if (v - index === 1) {
+            acc.pop();
+          }
+          return acc;
+        }, ['top', 'bottom']) : ['top', 'bottom'];
         return attachClosestEdge(data, {
           input: input,
           element: element,
-          allowedEdges: ['top', 'bottom']
+          allowedEdges: allowedEdges
         });
       }
     });

package/dist/esm/ui/consts.js

@@ -70,4 +70,5 @@ export var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export var dragMenuDropdownWidth = 250;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;
-export var colorPalletteColumns = 7;
+export var colorPalletteColumns = 7;
+export var tableResizerWidth = 8;

package/dist/esm/utils/snapping.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { tableResizerWidth } from '../ui/consts';
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -16,7 +17,7 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
-  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
   return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
 };
 export var defaultSnappingWidths = calculateDefaultSnappings();

package/dist/types/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -6,3 +6,4 @@ import type { DraggableData, DraggableType } from '../../types';
 export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndexes: number[] | undefined, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (sourceType: DraggableType, direction: DraggableData['direction']) => Command;
+export declare const cloneSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => Command;

package/dist/types/pm-plugins/drag-and-drop/commands.d.ts

@@ -11,3 +11,4 @@ export declare const setDropTarget: (type: DropTargetType, index: number, hasMer
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
+export declare const cloneSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types/pm-plugins/drag-and-drop/utils/getDragBehaviour.d.ts

@@ -0,0 +1,3 @@
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { DraggableBehaviour } from '../../../types';
+export declare const getDragBehaviour: ({ altKey, ctrlKey, }: Input) => DraggableBehaviour;

package/dist/types/types.d.ts

@@ -435,6 +435,7 @@ 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;
@@ -454,7 +455,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';
 export interface MessageDescriptor {

package/dist/types/ui/consts.d.ts

@@ -58,3 +58,4 @@ export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
 export declare const colorPalletteColumns = 7;
+export declare const tableResizerWidth = 8;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -6,3 +6,4 @@ import type { DraggableData, DraggableType } from '../../types';
 export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndexes: number[] | undefined, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (sourceType: DraggableType, direction: DraggableData['direction']) => Command;
+export declare const cloneSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => Command;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands.d.ts

@@ -11,3 +11,4 @@ export declare const setDropTarget: (type: DropTargetType, index: number, hasMer
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
+export declare const cloneSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/getDragBehaviour.d.ts

@@ -0,0 +1,3 @@
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { DraggableBehaviour } from '../../../types';
+export declare const getDragBehaviour: ({ altKey, ctrlKey, }: Input) => DraggableBehaviour;

package/dist/types-ts4.5/types.d.ts

@@ -435,6 +435,7 @@ 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;
@@ -454,7 +455,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';
 export interface MessageDescriptor {

package/dist/types-ts4.5/ui/consts.d.ts

@@ -58,3 +58,4 @@ export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
 export declare const colorPalletteColumns = 7;
+export declare const tableResizerWidth = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.16",
+  "version": "7.6.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.19.0",
+    "@atlaskit/editor-common": "^78.20.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -39,7 +39,7 @@
     "@atlaskit/editor-plugin-width": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.5.0",
+    "@atlaskit/editor-tables": "^2.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",

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

@@ -26,7 +26,7 @@ import {
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
 import { canMove, getTargetIndex } from '../../utils/drag-menu';
 
-import { clearDropTarget, moveSource } from './commands';
+import { clearDropTarget, cloneSource, moveSource } from './commands';
 
 export const clearDropTargetWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -157,3 +157,58 @@ export const moveSourceWithAnalyticsViaShortcut =
       targetIndex,
     )(state, dispatch);
   };
+
+export const cloneSourceWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    inputMethod:
+      | INPUT_METHOD.TABLE_CONTEXT_MENU
+      | INPUT_METHOD.DRAG_AND_DROP
+      | INPUT_METHOD.SHORTCUT,
+    sourceType: DraggableType,
+    sourceIndexes: number[],
+    targetIndex: number,
+    targetDirection: 'start' | 'end',
+    tr?: Transaction,
+  ) => {
+    return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+      const { totalRowCount, totalColumnCount } =
+        getSelectedTableInfo(selection);
+      return {
+        action:
+          sourceType === 'table-row'
+            ? TABLE_ACTION.CLONED_ROW
+            : TABLE_ACTION.CLONED_COLUMN,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        attributes: {
+          inputMethod,
+          count: sourceIndexes.length,
+          // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
+          // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
+          distance:
+            Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) *
+            direction,
+          // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
+          status: sourceIndexes.includes(targetIndex)
+            ? TABLE_STATUS.CANCELLED
+            : TABLE_STATUS.SUCCESS,
+          totalRowCount,
+          totalColumnCount,
+        },
+        eventType: EVENT_TYPE.TRACK,
+      };
+    })(editorAnalyticsAPI)((state, dispatch) => {
+      if (dispatch) {
+        cloneSource(
+          sourceType,
+          sourceIndexes,
+          targetIndex,
+          targetDirection,
+          tr,
+        )(state, dispatch);
+      }
+      return true;
+    });
+  };