@atlaskit/editor-plugin-block-controls 3.0.0 → 3.1.0

package/dist/cjs/ui/drag-handle.js

@@ -30,6 +30,7 @@ var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
+var _selection = require("../pm-plugins/utils/selection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -71,6 +72,13 @@ var dragHandleButtonStyles = (0, _react2.css)({
   },
   '&:focus': {
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  },
+  '&:disabled': {
+    color: "var(--ds-icon-disabled, #8993A4)",
+    backgroundColor: 'transparent'
+  },
+  '&:hover:disabled': {
+    backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
@@ -117,7 +125,7 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
 };
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$analytics2, _api$core4;
+  var _api$core2, _api$analytics2, _api$blockControls3, _api$core4;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -137,9 +145,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     dragHandleSelected = _useState4[0],
     setDragHandleSelected = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    dragHandleDisabled = _useState6[0],
+    setDragHandleDisabled = _useState6[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
+  var multiSelectDnD = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.multiSelectDnD');
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -161,9 +175,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
   }, [anchorName, nodeType, view.dom]);
-  var handleOnClick = (0, _react.useCallback)(function () {
+  var handleOnClick = (0, _react.useCallback)(function (e) {
     var _api$core;
-    setDragHandleSelected(!dragHandleSelected);
+    if (!isMultiSelect) {
+      setDragHandleSelected(!dragHandleSelected);
+    }
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var _api$analytics;
       var tr = _ref2.tr;
@@ -171,7 +187,24 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (startPos === undefined) {
         return tr;
       }
-      tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+      var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? tr.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : tr.selection.$anchor;
+      if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
+        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+          var _api$blockControls;
+          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu()({
+            tr: tr
+          });
+        }
+      } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+        var _api$blockControls2;
+        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        tr.setSelection(selectionWithExpandedHead);
+        api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setMultiSelectPositions()({
+          tr: tr
+        });
+      }
       var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
       tr.setMeta('scrollIntoView', false);
@@ -188,14 +221,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-      var startPos = getPos();
-      if (startPos === undefined) {
-        return false;
-      }
-      api === null || api === void 0 || api.core.actions.execute(api.blockControls.commands.toggleBlockMenu());
-    }
-  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.blockControls.commands, view, getPos, nodeType]);
+  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -215,7 +241,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
-
       if (!e.repeat && e.key === ' ') {
         var _api$core3;
         var startPos = getPos();
@@ -231,9 +256,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           var $startPos = tr.doc.resolve(startPos + node.nodeSize);
           var selection = new _state.TextSelection($startPos);
           tr.setSelection(selection);
-          tr.setMeta(_main.key, {
+          !isMultiSelect && tr.setMeta(_main.key, {
             pos: startPos
-          }); ////WHERE IS THIS USED?
+          });
           return tr;
         });
       } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
@@ -244,7 +269,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         view.focus();
       }
     }
-  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, view]);
+  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -259,7 +284,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         };
       },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
-        var _api$blockControls2;
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
@@ -270,8 +294,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               return tr;
             }
             if (!tr.selection.empty && handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to) {
-              var _api$blockControls;
-              api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
+              var _api$blockControls4;
+              api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.setMultiSelectPositions()({
                 tr: tr
               });
             }
@@ -282,8 +306,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         var state = view.state;
         var doc = state.doc,
           selection = state.selection;
-        var _ref6 = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {},
-          multiSelectDnD = _ref6.multiSelectDnD;
         var sliceFrom = selection.from;
         var sliceTo = selection.to;
         if (multiSelectDnD) {
@@ -293,7 +315,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           sliceTo = Math.max(anchor, head);
         }
         var expandedSlice = doc.slice(sliceFrom, sliceTo);
-        var isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos <= sliceTo && expandedSlice.content.childCount > 1;
+        var isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
           getOffset: function getOffset() {
             if (!isDraggingMultiLine) {
@@ -340,8 +362,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref7) {
-            var container = _ref7.container;
+          render: function render(_ref6) {
+            var container = _ref6.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -377,13 +399,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
-          var _tr$getMeta, _api$blockControls3, _api$analytics3;
-          var tr = _ref8.tr;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
+          var _api$blockControls5, _api$analytics3;
+          var tr = _ref7.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          var multiSelectDnD = (_tr$getMeta = tr.getMeta(_main.key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
           if (multiSelectDnD) {
             var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, multiSelectDnD.anchor, multiSelectDnD.head);
             nodeTypes = attributes.nodeTypes;
@@ -392,7 +413,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -414,7 +435,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, multiSelectDnD, nodeType, start, view]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
     var parentNodeType;
@@ -457,12 +478,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
-  var _useState5 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    positionStyles = _useState6[0],
-    setPositionStyles = _useState6[1];
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    positionStyles = _useState8[0],
+    setPositionStyles = _useState8[1];
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
@@ -504,6 +525,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
+  (0, _react.useEffect)(function () {
+    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+      return;
+    }
+    var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? view.state.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : view.state.selection.$anchor;
+    if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+      setDragHandleDisabled(true);
+    } else {
+      setDragHandleDisabled(false);
+    }
+  }, [isMultiSelect, isShiftDown, isTopLevelNode, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, view.state.doc, view.state.selection]);
   var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
@@ -591,6 +623,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDrop: handleOnDrop,
+        disabled: dragHandleDisabled,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_primitives.Box, {
         as: "span",
@@ -598,13 +631,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, ' ', (0, _react2.jsx)(_dragHandler.default, {
+      }, (0, _react2.jsx)(_dragHandler.default, {
         label: "",
         size: "medium"
       })))
     );
   };
-  return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
+  return !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),

package/dist/es2019/blockControlsPlugin.js

@@ -5,6 +5,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { createPlugin, key } from './pm-plugins/main';
+import { selectNode } from './pm-plugins/utils/getSelection';
 import BlockMenu from './ui/block-menu';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -79,29 +80,40 @@ export const blockControlsPlugin = ({
     setMultiSelectPositions: (anchor, head) => ({
       tr
     }) => {
-      var _api$selection;
+      var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
       const {
         anchor: userAnchor,
         head: userHead
       } = tr.selection;
-      let expandedAnchor, expandedHead;
+      let $expandedAnchor, $expandedHead;
       if (anchor !== undefined && head !== undefined) {
-        expandedAnchor = tr.doc.resolve(anchor);
-        expandedHead = tr.doc.resolve(head);
+        $expandedAnchor = tr.doc.resolve(anchor);
+        $expandedHead = tr.doc.resolve(head);
       } else {
         const expandedSelection = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head);
-        expandedAnchor = expandedSelection.$anchor;
-        expandedHead = expandedSelection.$head;
+        $expandedAnchor = expandedSelection.$anchor;
+        $expandedHead = expandedSelection.$head;
       }
-      api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
+      api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.setManualSelection($expandedAnchor.pos, $expandedHead.pos)({
         tr
       });
-      // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
-      const expandedNormalisedSel = TextSelection.between(expandedAnchor, expandedHead);
-      tr.setSelection(expandedNormalisedSel);
+      const $from = $expandedAnchor.min($expandedHead);
+      const $to = $expandedAnchor.max($expandedHead);
+      let expandedNormalisedSel;
+      if ($from.nodeAfter === $to.nodeBefore) {
+        selectNode(tr, $from.pos, $expandedAnchor.node().type.name);
+        expandedNormalisedSel = tr.selection;
+      } else if (((_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.type.name) === 'mediaSingle' || ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'mediaSingle') {
+        expandedNormalisedSel = new TextSelection($expandedAnchor, $expandedHead);
+        tr.setSelection(expandedNormalisedSel);
+      } else {
+        // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
+        expandedNormalisedSel = TextSelection.between($expandedAnchor, $expandedHead);
+        tr.setSelection(expandedNormalisedSel);
+      }
       const multiSelectDnD = {
-        anchor: expandedAnchor.pos,
-        head: expandedHead.pos,
+        anchor: $expandedAnchor.pos,
+        head: $expandedHead.pos,
         textAnchor: expandedNormalisedSel.anchor,
         textHead: expandedNormalisedSel.head,
         userAnchor: userAnchor,
@@ -116,7 +128,7 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4, _key$getState$multiSe, _key$getState5;
+    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4, _key$getState$multiSe, _key$getState5, _key$getState$isShift, _key$getState6;
     if (!editorState) {
       return undefined;
     }
@@ -125,7 +137,8 @@ export const blockControlsPlugin = ({
       activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
       isDragging: (_key$getState$isDragg = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
       isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-      multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined
+      multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+      isShiftDown: (_key$getState$isShift = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
     };
   },
   contentComponent({

package/dist/es2019/editor-commands/move-node.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
-import { GapCursorSelection, expandSelectionBounds } from '@atlaskit/editor-common/selection';
+import { expandSelectionBounds, GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
@@ -52,19 +52,16 @@ const isDragLayoutColumnToTopLevel = ($from, $to) => {
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
 const getCurrentNodePos = state => {
-  var _activeNode$handleOpt;
   const {
     selection
   } = state;
-  const {
-    activeNode
-  } = key.getState(state) || {};
   let currentNodePos = -1;
 
   // There are 3 cases when a node can be moved
-  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
+  const focusedHandle = getFocusedHandle(state);
+  if (focusedHandle) {
     // 1. drag handle of the node is focused
-    currentNodePos = activeNode.pos;
+    currentNodePos = focusedHandle.pos;
   } else if (isInTable(state)) {
     if (isTableSelected(selection)) {
       var _findTable$pos, _findTable;
@@ -82,6 +79,13 @@ const getCurrentNodePos = state => {
   }
   return currentNodePos;
 };
+const getFocusedHandle = state => {
+  var _activeNode$handleOpt;
+  const {
+    activeNode
+  } = key.getState(state) || {};
+  return activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused ? activeNode : undefined;
+};
 export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
     let isParentNodeOfTypeLayout;
@@ -93,20 +97,14 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
     const isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
-    let expandedAnchor, expandedHead;
-    const pluginState = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
-    if (pluginState !== null && pluginState !== void 0 && pluginState.multiSelectDnD) {
-      expandedAnchor = pluginState.multiSelectDnD.anchor;
-      expandedHead = pluginState.multiSelectDnD.head;
-    } else {
-      const expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
-      expandedAnchor = expandedSelection.$anchor.pos;
-      expandedHead = expandedSelection.$head.pos;
-    }
-    const currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
+    const expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
+    const expandedAnchor = expandedSelection.$anchor.pos;
+    const expandedHead = expandedSelection.$head.pos;
+    const currentNodePos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       const $pos = state.doc.resolve(currentNodePos);
+      const nodeAfterPos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
       const isTopLevelNode = $pos.depth === 0;
       let moveToPos = -1;
       const nodeIndex = $pos.index();
@@ -216,7 +214,6 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         }
       } else {
         const endOfDoc = $pos.end();
-        const nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > endOfDoc) {
           return false;
         }
@@ -295,8 +292,8 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
   });
+  const slicePosition = getSelectedSlicePosition(start, tr, api);
   if (isMultiSelect) {
-    const slicePosition = getSelectedSlicePosition(start, tr, api);
     sliceFrom = slicePosition.from;
     sliceTo = slicePosition.to;
     const attributes = getMultiSelectAnalyticsAttributes(tr, sliceFrom, sliceTo);

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
@@ -29,9 +30,6 @@ export const unmountDecorations = (nodeViewPortalProviderAPI, selector, key) =>
   // as it was more responsive and causes less re-rendering
   const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
   decorationsToRemove.forEach(el => {
-    const nodeKey = el.getAttribute(key);
-    if (nodeKey) {
-      nodeViewPortalProviderAPI.remove(nodeKey);
-    }
+    ReactDOM.unmountComponentAtNode(el);
   });
 };

package/dist/es2019/pm-plugins/main.js

@@ -124,6 +124,7 @@ const destroyFn = (api, editorView) => {
           })(tr);
         }
         return tr.setMeta(key, {
+          ...tr.getMeta(key),
           isDragging: false,
           isPMDragging: false
         });
@@ -150,7 +151,7 @@ export const getDecorations = state => {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
+  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
   let {
     activeNode,
     decorations,
@@ -164,7 +165,8 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isDragging,
     isMenuOpen,
     // NOT USED
-    isPMDragging
+    isPMDragging,
+    isShiftDown
   } = currentState;
   let isActiveNodeDeleted = false;
 
@@ -188,10 +190,9 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   const meta = tr.getMeta(key);
   const resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
-    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ||
-    // For move node with shortcut, only reset when the selection changes
-    tr.selection.anchor !== multiSelectDnD.textAnchor || tr.selection.head !== multiSelectDnD.textHead ? undefined : multiSelectDnD;
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
   }
   const {
     from,
@@ -293,7 +294,8 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
-    multiSelectDnD: (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD
+    multiSelectDnD,
+    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown
   };
 };
 export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
@@ -494,6 +496,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           const pluginState = key.getState(state);
           if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
+              ...state.tr.getMeta(key),
               isPMDragging: false
             }));
           }
@@ -549,6 +552,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
+            ...view.state.tr.getMeta(key),
             isPMDragging: true
           }));
         },
@@ -560,6 +564,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           } = view;
           if ((_key$getState3 = key.getState(state)) !== null && _key$getState3 !== void 0 && _key$getState3.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
+              ...state.tr.getMeta(key),
               isPMDragging: false
             }));
           }
@@ -569,28 +574,69 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           return false;
         },
         keydown(view, event) {
-          // Command + Shift + ArrowUp to select was broken with the plugin enabled so this manually sets the selection
-          const {
-            selection,
-            doc,
-            tr
-          } = view.state;
-          const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
-          if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
-            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
-              const newSelection = TextSelection.create(doc, selection.head, 1);
-              view.dispatch(tr.setSelection(newSelection));
-              return true;
+          if (isMultiSelectEnabled) {
+            if (event.shiftKey && event.ctrlKey) {
+              //prevent holding down key combo from firing repeatedly
+              if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
+                event.preventDefault();
+                return true;
+              }
             }
-          }
-          if (event.shiftKey && event.ctrlKey) {
-            //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
-              event.preventDefault();
+
+            // Command + Shift + ArrowUp to select was broken with the plugin enabled so this manually sets the selection
+            const {
+              selection,
+              doc,
+              tr
+            } = view.state;
+            const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
+              if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+                const newSelection = TextSelection.create(doc, selection.head, 1);
+                view.dispatch(tr.setSelection(newSelection));
+                return true;
+              }
+            }
+            if (!event.repeat && event.shiftKey) {
+              view.dispatch(view.state.tr.setMeta(key, {
+                ...view.state.tr.getMeta(key),
+                isShiftDown: true
+              }));
               return true;
             }
+            return false;
+          } else {
+            // Command + Shift + ArrowUp to select was broken with the plugin enabled so this manually sets the selection
+            const {
+              selection,
+              doc,
+              tr
+            } = view.state;
+            const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
+              if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+                const newSelection = TextSelection.create(doc, selection.head, 1);
+                view.dispatch(tr.setSelection(newSelection));
+                return true;
+              }
+            }
+            if (event.shiftKey && event.ctrlKey) {
+              //prevent holding down key combo from firing repeatedly
+              if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
+                event.preventDefault();
+                return true;
+              }
+            }
           }
           return false;
+        },
+        keyup(view, event) {
+          if (!event.repeat && event.key === 'Shift') {
+            view.dispatch(view.state.tr.setMeta(key, {
+              ...view.state.tr.getMeta(key),
+              isShiftDown: false
+            }));
+          }
         }
       }
     },
@@ -616,6 +662,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const editorWidthLeft = editorContentArea.getBoundingClientRect().left;
             transaction.setMeta(key, {
+              ...transaction.getMeta(key),
               editorWidthLeft,
               editorWidthRight
             });

package/dist/es2019/pm-plugins/utils/getSelection.js

@@ -58,7 +58,7 @@ export const getSelection = (tr, start) => {
       inlineNodePos,
       inlineNodeEndPos
     } = getInlineNodePos(tr, start, nodeSize);
-    return new TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
+    return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
 export const selectNode = (tr, start, nodeType) => {