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

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

@@ -1,3 +1,4 @@
+import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { key } from '../main';
 export const getMultiSelectionIfPosInside = (api, pos, tr) => {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
@@ -10,7 +11,7 @@ export const getMultiSelectionIfPosInside = (api, pos, tr) => {
     const multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
 
     // We subtract one as the handle position is before the node
-    return pos >= multiFrom - 1 && pos <= multiTo ? {
+    return pos >= multiFrom - 1 && pos < multiTo ? {
       anchor: multiSelectDnD.anchor,
       head: multiSelectDnD.head
     } : {};
@@ -29,12 +30,41 @@ export const getSelectedSlicePosition = (handlePos, tr, api) => {
     head
   } = getMultiSelectionIfPosInside(api, handlePos, tr);
   const inSelection = anchor !== undefined && head !== undefined;
-  const from = inSelection ? Math.min(anchor, head) : handlePos;
+  const from = inSelection ? Math.min(anchor || 0, head || 0) : handlePos;
   const activeNode = tr.doc.nodeAt(handlePos);
   const activeNodeEndPos = handlePos + ((_activeNode$nodeSize = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeSize) !== null && _activeNode$nodeSize !== void 0 ? _activeNode$nodeSize : 1);
-  const to = inSelection ? Math.max(anchor, head) : activeNodeEndPos;
+  const to = inSelection ? Math.max(anchor || 0, head || 0) : activeNodeEndPos;
   return {
     from,
     to
   };
+};
+
+/**
+ * Takes a position and expands the selection to encompass the node at that position. Ignores empty or out of range selections.
+ * Ignores positions that are in text blocks (i.e. not start of a node)
+ * @returns TextSelection if expanded, otherwise returns Selection that was passed in.
+ */
+export const expandSelectionHeadToNodeAtPos = (selection, nodePos) => {
+  const doc = selection.$anchor.doc;
+  if (nodePos < 0 || nodePos > doc.nodeSize - 2 || selection.empty) {
+    return selection;
+  }
+  const $pos = doc.resolve(nodePos);
+  const node = $pos.nodeAfter;
+  if ($pos.node().isTextblock || !node) {
+    return selection;
+  }
+  const $newHead = nodePos < selection.anchor ? $pos : doc.resolve(node.nodeSize + nodePos);
+  const textSelection = new TextSelection(selection.$anchor, $newHead);
+  return textSelection;
+};
+
+/**
+ * This swaps the anchor/head for NodeSelections when its anchor > pos.
+ * This is because NodeSelection always has an anchor at the start of the node,
+ * which may not align with the existing selection.
+ */
+export const alignAnchorHeadInDirectionOfPos = (selection, pos) => {
+  return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
 };

package/dist/es2019/ui/consts.js

@@ -18,6 +18,14 @@ export const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+
+/** We only want to shift-select nodes that are at the top level of a document.
+ *  This is because funky things happen when selecting inside of tableCells, but we
+ *  also want to avoid heavily nested cases to descope potential corner cases.
+ *  Various top level nodes have their selection 'from' at depths other than 0,
+ *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
+ */
+export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = (nodeType, parentNodeType) => {
   if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_post_fix_patch_2')) {

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

@@ -25,7 +25,8 @@ import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
+import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 const iconWrapperStyles = xcss({
   display: 'flex',
@@ -61,6 +62,13 @@ const dragHandleButtonStyles = css({
   },
   '&:focus': {
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
+  },
+  '&:disabled': {
+    color: "var(--ds-icon-disabled, #8993A4)",
+    backgroundColor: 'transparent'
+  },
+  '&:hover:disabled': {
+    backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
 const dragHandleMultiLineSelectionFixFirefox = css({
@@ -116,15 +124,18 @@ export const DragHandle = ({
   handleOptions,
   isTopLevelNode = true
 }) => {
-  var _api$core2, _api$analytics2, _api$core4;
+  var _api$core2, _api$analytics2, _api$blockControls3, _api$core4;
   const start = getPos();
   const buttonRef = useRef(null);
   const [blockCardWidth, setBlockCardWidth] = useState(768);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
+  const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
   const {
     featureFlagsState
   } = useSharedPluginState(api, ['featureFlags']);
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
+  const multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
   const isLayoutColumn = nodeType === 'layoutColumn';
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -144,9 +155,11 @@ export const DragHandle = ({
       }
     }
   }, [anchorName, nodeType, view.dom]);
-  const handleOnClick = useCallback(() => {
+  const handleOnClick = useCallback(e => {
     var _api$core;
-    setDragHandleSelected(!dragHandleSelected);
+    if (!isMultiSelect) {
+      setDragHandleSelected(!dragHandleSelected);
+    }
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
     }) => {
@@ -155,7 +168,24 @@ export const DragHandle = ({
       if (startPos === undefined) {
         return tr;
       }
-      tr = selectNode(tr, startPos, nodeType);
+      const $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 = selectNode(tr, startPos, nodeType);
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
+          var _api$blockControls;
+          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu()({
+            tr
+          });
+        }
+      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+        var _api$blockControls2;
+        const alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
+        const selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
+        tr.setSelection(selectionWithExpandedHead);
+        api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.setMultiSelectPositions()({
+          tr
+        });
+      }
       const resolvedMovingNode = tr.doc.resolve(startPos);
       const maybeNode = resolvedMovingNode.nodeAfter;
       tr.setMeta('scrollIntoView', false);
@@ -172,14 +202,7 @@ export const DragHandle = ({
       return tr;
     });
     view.focus();
-    if (editorExperiment('platform_editor_controls', 'variant1')) {
-      const startPos = getPos();
-      if (startPos === undefined) {
-        return false;
-      }
-      api === null || api === void 0 ? void 0 : api.core.actions.execute(api.blockControls.commands.toggleBlockMenu());
-    }
-  }, [dragHandleSelected, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? 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,
@@ -199,7 +222,6 @@ export const DragHandle = ({
   const handleKeyDown = useCallback(e => {
     if (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;
         const startPos = getPos();
@@ -216,9 +238,9 @@ export const DragHandle = ({
           const $startPos = tr.doc.resolve(startPos + node.nodeSize);
           const selection = new TextSelection($startPos);
           tr.setSelection(selection);
-          tr.setMeta(key, {
+          !isMultiSelect && tr.setMeta(key, {
             pos: startPos
-          }); ////WHERE IS THIS USED?
+          });
           return tr;
         });
       } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
@@ -227,7 +249,7 @@ export const DragHandle = ({
         view.focus();
       }
     }
-  }, [getPos, api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, view]);
+  }, [getPos, api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -242,7 +264,6 @@ export const DragHandle = ({
       onGenerateDragPreview: ({
         nativeSetDragImage
       }) => {
-        var _api$blockControls2;
         if (isMultiSelect) {
           var _api$core5;
           api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
@@ -253,8 +274,8 @@ export const DragHandle = ({
               return tr;
             }
             if (!tr.selection.empty && handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to) {
-              var _api$blockControls;
-              api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setMultiSelectPositions()({
+              var _api$blockControls4;
+              api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.setMultiSelectPositions()({
                 tr
               });
             }
@@ -267,9 +288,6 @@ export const DragHandle = ({
           doc,
           selection
         } = state;
-        const {
-          multiSelectDnD
-        } = (api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {};
         let sliceFrom = selection.from;
         let sliceTo = selection.to;
         if (multiSelectDnD) {
@@ -281,7 +299,7 @@ export const DragHandle = ({
           sliceTo = Math.max(anchor, head);
         }
         const expandedSlice = doc.slice(sliceFrom, sliceTo);
-        const isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos <= sliceTo && expandedSlice.content.childCount > 1;
+        const isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
         setCustomNativeDragPreview({
           getOffset: () => {
             if (!isDraggingMultiLine) {
@@ -369,11 +387,10 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
           tr
         }) => {
-          var _tr$getMeta, _api$blockControls3, _api$analytics3;
+          var _api$blockControls5, _api$analytics3;
           let nodeTypes, hasSelectedMultipleNodes;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
-          const multiSelectDnD = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
           if (multiSelectDnD) {
             const attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
             nodeTypes = attributes.nodeTypes;
@@ -382,7 +399,7 @@ export const DragHandle = ({
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -405,7 +422,7 @@ export const DragHandle = ({
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, multiSelectDnD, nodeType, start, view]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
     let parentNodeType;
@@ -492,6 +509,17 @@ export const DragHandle = ({
     }
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
+  useEffect(() => {
+    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+      return;
+    }
+    const $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 > 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]);
   let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -578,6 +606,7 @@ export const DragHandle = ({
     // 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"
   }, jsx(Box, {
     as: "span",
@@ -585,11 +614,11 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
     onDragStart: handleIconDragStart
-  }, ' ', jsx(DragHandlerIcon, {
+  }, jsx(DragHandlerIcon, {
     label: "",
     size: "medium"
   })));
-  return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+  return !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),

package/dist/esm/blockControlsPlugin.js

@@ -8,6 +8,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';
@@ -81,29 +82,40 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
         return function (_ref6) {
-          var _api$selection;
+          var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
           var tr = _ref6.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
-          var expandedAnchor, expandedHead;
+          var $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 {
             var 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 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
+          api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.setManualSelection($expandedAnchor.pos, $expandedHead.pos)({
             tr: tr
           });
-          // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
-          var expandedNormalisedSel = TextSelection.between(expandedAnchor, expandedHead);
-          tr.setSelection(expandedNormalisedSel);
+          var $from = $expandedAnchor.min($expandedHead);
+          var $to = $expandedAnchor.max($expandedHead);
+          var 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);
+          }
           var multiSelectDnD = {
-            anchor: expandedAnchor.pos,
-            head: expandedHead.pos,
+            anchor: $expandedAnchor.pos,
+            head: $expandedHead.pos,
             textAnchor: expandedNormalisedSel.anchor,
             textHead: expandedNormalisedSel.head,
             userAnchor: userAnchor,
@@ -118,7 +130,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     getSharedState: function 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;
       }
@@ -127,7 +139,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         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: function contentComponent(_ref7) {

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

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -54,16 +54,14 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
 var getCurrentNodePos = function getCurrentNodePos(state) {
-  var _activeNode$handleOpt;
   var selection = state.selection;
-  var _ref = key.getState(state) || {},
-    activeNode = _ref.activeNode;
   var 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) {
+  var 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;
@@ -81,6 +79,12 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   }
   return currentNodePos;
 };
+var getFocusedHandle = function getFocusedHandle(state) {
+  var _activeNode$handleOpt;
+  var _ref = key.getState(state) || {},
+    activeNode = _ref.activeNode;
+  return activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused ? activeNode : undefined;
+};
 export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var isParentNodeOfTypeLayout;
@@ -90,20 +94,14 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
     var isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
-    var expandedAnchor, expandedHead;
-    var 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 {
-      var expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
-      expandedAnchor = expandedSelection.$anchor.pos;
-      expandedHead = expandedSelection.$head.pos;
-    }
-    var currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
+    var expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
+    var expandedAnchor = expandedSelection.$anchor.pos;
+    var expandedHead = expandedSelection.$head.pos;
+    var currentNodePos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
+      var nodeAfterPos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
       var isTopLevelNode = $pos.depth === 0;
       var moveToPos = -1;
       var nodeIndex = $pos.index();
@@ -211,7 +209,6 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         }
       } else {
         var _endOfDoc = $pos.end();
-        var nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > _endOfDoc) {
           return false;
         }
@@ -290,8 +287,8 @@ export var moveNode = function moveNode(api) {
       var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
         exposure: true
       });
+      var slicePosition = getSelectedSlicePosition(start, tr, api);
       if (isMultiSelect) {
-        var slicePosition = getSelectedSlicePosition(start, tr, api);
         sliceFrom = slicePosition.from;
         sliceTo = slicePosition.to;
         var attributes = getMultiSelectAnalyticsAttributes(tr, sliceFrom, sliceTo);

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

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 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 var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
@@ -39,9 +40,6 @@ export var unmountDecorations = function unmountDecorations(nodeViewPortalProvid
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    var nodeKey = el.getAttribute(key);
-    if (nodeKey) {
-      nodeViewPortalProviderAPI.remove(nodeKey);
-    }
+    ReactDOM.unmountComponentAtNode(el);
   });
 };