@atlaskit/editor-plugin-table 7.5.16 → 7.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.1
+
+### Patch Changes
+
+- [#83158](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83158) [`5a0749bf19ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a0749bf19ec) - Fix incorrect full width guideline snapping
+
+## 7.6.0
+
+### Minor Changes
+
+- [#83612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83612) [`25b32cbfbb7e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/25b32cbfbb7e) - [ux] Added new clone row/column behaviour to tables drag N drop. When the user holds the alt modifier during the operation the row/column will be duplicated rather then moved.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.5.16
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
+exports.moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalytics = exports.cloneSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -102,4 +102,39 @@ var moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalyticsViaShort
       return moveSourceWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };
+};
+var cloneSourceWithAnalytics = exports.cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod, sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref3) {
+      var selection = _ref3.selection;
+      var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+      var _getSelectedTableInfo4 = (0, _utils2.getSelectedTableInfo)(selection),
+        totalRowCount = _getSelectedTableInfo4.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo4.totalColumnCount;
+      return {
+        action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.CLONED_ROW : _analytics.TABLE_ACTION.CLONED_COLUMN,
+        actionSubject: _analytics.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, (0, _toConsumableArray2.default)(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) ? _analytics.TABLE_STATUS.CANCELLED : _analytics.TABLE_STATUS.SUCCESS,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _commands.cloneSource)(sourceType, sourceIndexes, targetIndex, targetDirection, tr)(state, dispatch);
+      }
+      return true;
+    });
+  };
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePluginStateDecorations = exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
+exports.updatePluginStateDecorations = exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.cloneSource = exports.clearDropTarget = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../types");
@@ -118,4 +118,20 @@ var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenu
   }, function (tr) {
     return tr.setMeta('addToHistory', false);
   });
+};
+var cloneSource = exports.cloneSource = function cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    return {
+      type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: _view.DecorationSet.empty
+      }
+    };
+  }, function (originalTr, state) {
+    var nextTr = tr || originalTr;
+    var clone = sourceType === 'table-row' ? _utils.cloneRow : _utils.cloneColumn;
+    return clone(state, sourceIndexes, targetIndex, targetDirection, {
+      selectAfterClone: true
+    })(nextTr);
+  });
 };

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

@@ -127,7 +127,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') {
@@ -144,7 +146,11 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
         return;
       }
       requestAnimationFrame(function () {
-        (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndexes, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+        if (behaviour === 'clone') {
+          (0, _commandsWithAnalytics.cloneSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndexes, targetIndex, targetDirection, tr)(editorView.state, editorView.dispatch);
+        } else {
+          (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.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/cjs/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDragBehaviour = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var getDragBehaviour = exports.getDragBehaviour = function getDragBehaviour(_ref) {
+  var altKey = _ref.altKey,
+    ctrlKey = _ref.ctrlKey;
+  var isCloneModifierKeyPressed = _utils.browser.mac ? altKey : ctrlKey;
+  return isCloneModifierKeyPressed ? 'clone' : 'move';
+};

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

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDraggableDataFromEvent = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var _getDragBehaviour = require("./getDragBehaviour");
 var getDraggableDataFromEvent = exports.getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref) {
   var _extractClosestEdge;
   var location = _ref.location,
@@ -42,9 +45,11 @@ var getDraggableDataFromEvent = exports.getDraggableDataFromEvent = function get
   // 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, (0, _toConsumableArray2.default)(sourceIndexes));
+  var srcMax = Math.max.apply(Math, (0, _toConsumableArray2.default)(sourceIndexes));
+  var direction = targetIndex >= srcMin && targetIndex <= srcMax ? 0 : srcMin >= targetIndex ? -1 : 1;
   return {
     sourceType: sourceType,
     sourceLocalId: sourceLocalId,
@@ -54,6 +59,8 @@ var getDraggableDataFromEvent = exports.getDraggableDataFromEvent = function get
     targetIndex: targetIndex,
     targetAdjustedIndex: targetIndex + targetOffset,
     targetClosestEdge: targetClosestEdge,
-    direction: direction
+    targetDirection: targetClosestEdge === 'top' || targetClosestEdge === 'left' ? 'start' : 'end',
+    direction: direction,
+    behaviour: (0, _getDragBehaviour.getDragBehaviour)(location.current.input)
   };
 };

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

@@ -8,6 +8,7 @@ exports.ColumnDropTarget = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _getDragBehaviour = require("../../../pm-plugins/drag-and-drop/utils/getDragBehaviour");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ColumnDropTarget = exports.ColumnDropTarget = function ColumnDropTarget(_ref) {
@@ -25,32 +26,56 @@ var ColumnDropTarget = exports.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 = (0, _getDragBehaviour.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 (0, _getDragBehaviour.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 = (0, _getDragBehaviour.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 (0, _closestEdge.attachClosestEdge)(data, {
           input: input,
           element: element,
-          allowedEdges: ['left', 'right']
+          allowedEdges: allowedEdges
         });
       }
     });

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _getDragBehaviour = require("../../../pm-plugins/drag-and-drop/utils/getDragBehaviour");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var RowDropTarget = function RowDropTarget(_ref) {
@@ -23,32 +24,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 = (0, _getDragBehaviour.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 (0, _getDragBehaviour.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 = (0, _getDragBehaviour.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 (0, _closestEdge.attachClosestEdge)(data, {
           input: input,
           element: element,
-          allowedEdges: ['top', 'bottom']
+          allowedEdges: allowedEdges
         });
       }
     });

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -75,4 +75,5 @@ var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTM
 var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 250;
 var dragTableInsertColumnButtonSize = exports.dragTableInsertColumnButtonSize = 16;
 var dropTargetExtendedWidth = exports.dropTargetExtendedWidth = 150;
-var colorPalletteColumns = exports.colorPalletteColumns = 7;
+var colorPalletteColumns = exports.colorPalletteColumns = 7;
+var tableResizerWidth = exports.tableResizerWidth = 8;

package/dist/cjs/utils/snapping.js

@@ -8,6 +8,7 @@ exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.d
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _consts = require("../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) {
@@ -23,7 +24,7 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
-  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();

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

@@ -4,7 +4,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 const clearDropTargetWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, sourceIndexes, status, tr) => {
   return withEditorAnalyticsAPI(({
     selection
@@ -91,4 +91,37 @@ export const moveSourceWithAnalyticsViaShortcut = editorAnalyticsAPI => (sourceT
   }
   const targetIndex = getTargetIndex(selectedIndexes, direction);
   return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
+};
+export const cloneSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, sourceIndexes, targetIndex, targetDirection, tr) => {
+  return withEditorAnalyticsAPI(({
+    selection
+  }) => {
+    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;
+  });
 };

package/dist/es2019/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';
@@ -100,4 +100,18 @@ export const toggleDragMenu = (isDragMenuOpen, direction, index, trigger = 'mous
   };
 }, tr => {
   return tr.setMeta('addToHistory', false);
+});
+export const cloneSource = (sourceType, sourceIndexes, targetIndex, targetDirection, tr) => createCommand(state => {
+  return {
+    type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    data: {
+      decorationSet: DecorationSet.empty
+    }
+  };
+}, (originalTr, state) => {
+  const nextTr = tr || originalTr;
+  const clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
+  return clone(state, sourceIndexes, targetIndex, targetDirection, {
+    selectAfterClone: true
+  })(nextTr);
 });

package/dist/es2019/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';
@@ -133,7 +133,9 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
         sourceIndexes,
         targetIndex,
         targetAdjustedIndex,
-        direction
+        targetDirection,
+        direction,
+        behaviour
       } = data;
 
       // When we drop on a target we will know the targets row/col index for certain,
@@ -151,7 +153,11 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
         return;
       }
       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/dist/es2019/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

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

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

@@ -1,4 +1,5 @@
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { getDragBehaviour } from './getDragBehaviour';
 export const getDraggableDataFromEvent = ({
   location,
   source
@@ -39,9 +40,11 @@ export const getDraggableDataFromEvent = ({
   // the new target index to be 1 index higher.
   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,
     sourceLocalId,
@@ -51,6 +54,8 @@ export const getDraggableDataFromEvent = ({
     targetIndex,
     targetAdjustedIndex: targetIndex + targetOffset,
     targetClosestEdge,
-    direction
+    targetDirection: targetClosestEdge === 'top' || targetClosestEdge === 'left' ? 'start' : 'end',
+    direction,
+    behaviour: getDragBehaviour(location.current.input)
   };
 };

package/dist/es2019/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 const ColumnDropTarget = ({
   index,
   localId,
@@ -16,33 +17,56 @@ export const ColumnDropTarget = ({
     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-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: ({
+        input
+      }) => getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
       getData({
+        source,
         input,
         element
       }) {
+        var _srcData$indexes;
         const data = {
           localId,
           type: 'table-column',
           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;
+        }, ['left', 'right']) : ['left', 'right'];
         return attachClosestEdge(data, {
           input,
           element,
-          allowedEdges: ['left', 'right']
+          allowedEdges
         });
       }
     });