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

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

@@ -121,10 +121,10 @@ var destroyFn = function destroyFn(api, editorView) {
             })
           })(tr);
         }
-        return tr.setMeta(key, {
+        return tr.setMeta(key, _objectSpread(_objectSpread({}, tr.getMeta(key)), {}, {
           isDragging: false,
           isPMDragging: false
-        });
+        }));
       });
     }
   }));
@@ -148,7 +148,7 @@ export var getDecorations = function getDecorations(state) {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export var newApply = function 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;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -158,7 +158,8 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
-    isPMDragging = currentState.isPMDragging;
+    isPMDragging = currentState.isPMDragging,
+    isShiftDown = currentState.isShiftDown;
   var isActiveNodeDeleted = false;
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
@@ -181,10 +182,9 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   var meta = tr.getMeta(key);
   var 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;
   }
   var _getTrMetadata = getTrMetadata(tr),
     from = _getTrMetadata.from,
@@ -287,7 +287,8 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     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: multiSelectDnD,
+    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown
   };
 };
 export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -503,9 +504,9 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             dragging = view.dragging;
           var pluginState = key.getState(state);
           if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
-            dispatch(state.tr.setMeta(key, {
+            dispatch(state.tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
               isPMDragging: false
-            }));
+            })));
           }
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
@@ -558,18 +559,18 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             defaultActiveAnchorTracker.reset();
           }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
-          view.dispatch(view.state.tr.setMeta(key, {
+          view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
             isPMDragging: true
-          }));
+          })));
         },
         dragend: function dragend(view) {
           var _key$getState3;
           var state = view.state,
             dispatch = view.dispatch;
           if ((_key$getState3 = key.getState(state)) !== null && _key$getState3 !== void 0 && _key$getState3.isPMDragging) {
-            dispatch(state.tr.setMeta(key, {
+            dispatch(state.tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
               isPMDragging: false
-            }));
+            })));
           }
         },
         mouseover: function mouseover(view, event) {
@@ -577,27 +578,65 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           return false;
         },
         keydown: function keydown(view, event) {
-          // Command + Shift + ArrowUp to select was broken with the plugin enabled so this manually sets the selection
-          var _view$state = view.state,
-            selection = _view$state.selection,
-            doc = _view$state.doc,
-            tr = _view$state.tr;
-          var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
-          if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
-            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
-              var 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
+            var _view$state = view.state,
+              selection = _view$state.selection,
+              doc = _view$state.doc,
+              tr = _view$state.tr;
+            var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
+              if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+                var 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, _objectSpread(_objectSpread({}, 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
+            var _view$state2 = view.state,
+              _selection = _view$state2.selection,
+              _doc = _view$state2.doc,
+              _tr = _view$state2.tr;
+            var _metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && _metaKey) {
+              if (_selection instanceof TextSelection || _selection instanceof NodeSelection) {
+                var _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: function keyup(view, event) {
+          if (!event.repeat && event.key === 'Shift') {
+            view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
+              isShiftDown: false
+            })));
+          }
         }
       }
     },
@@ -622,10 +661,10 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             var editorWidthLeft = _editorContentArea.getBoundingClientRect().left;
-            transaction.setMeta(key, {
+            transaction.setMeta(key, _objectSpread(_objectSpread({}, transaction.getMeta(key)), {}, {
               editorWidthLeft: editorWidthLeft,
               editorWidthRight: editorWidthRight
-            });
+            }));
           }
           editorView.dispatch(transaction);
         }

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

@@ -57,7 +57,7 @@ export var getSelection = function getSelection(tr, start) {
     var _getInlineNodePos = getInlineNodePos(tr, start, nodeSize),
       inlineNodePos = _getInlineNodePos.inlineNodePos,
       inlineNodeEndPos = _getInlineNodePos.inlineNodeEndPos;
-    return new TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
+    return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
 export var selectNode = function selectNode(tr, start, nodeType) {

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

@@ -1,3 +1,4 @@
+import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { key } from '../main';
 export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
@@ -10,7 +11,7 @@ export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(
     var 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
     } : {};
@@ -28,12 +29,41 @@ export var getSelectedSlicePosition = function getSelectedSlicePosition(handlePo
     anchor = _getMultiSelectionIfP.anchor,
     head = _getMultiSelectionIfP.head;
   var inSelection = anchor !== undefined && head !== undefined;
-  var from = inSelection ? Math.min(anchor, head) : handlePos;
+  var from = inSelection ? Math.min(anchor || 0, head || 0) : handlePos;
   var activeNode = tr.doc.nodeAt(handlePos);
   var activeNodeEndPos = handlePos + ((_activeNode$nodeSize = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeSize) !== null && _activeNode$nodeSize !== void 0 ? _activeNode$nodeSize : 1);
-  var to = inSelection ? Math.max(anchor, head) : activeNodeEndPos;
+  var to = inSelection ? Math.max(anchor || 0, head || 0) : activeNodeEndPos;
   return {
     from: from,
     to: 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 var expandSelectionHeadToNodeAtPos = function expandSelectionHeadToNodeAtPos(selection, nodePos) {
+  var doc = selection.$anchor.doc;
+  if (nodePos < 0 || nodePos > doc.nodeSize - 2 || selection.empty) {
+    return selection;
+  }
+  var $pos = doc.resolve(nodePos);
+  var node = $pos.nodeAfter;
+  if ($pos.node().isTextblock || !node) {
+    return selection;
+  }
+  var $newHead = nodePos < selection.anchor ? $pos : doc.resolve(node.nodeSize + nodePos);
+  var 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 var alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
+  return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
 };

package/dist/esm/ui/consts.js

@@ -20,6 +20,14 @@ export var DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export var DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export var 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 var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
   if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_post_fix_patch_2')) {

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

@@ -30,7 +30,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';
 var iconWrapperStyles = xcss({
   display: 'flex',
@@ -66,6 +67,13 @@ var dragHandleButtonStyles = 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 = css({
@@ -112,7 +120,7 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
 };
 export var 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,
@@ -132,9 +140,15 @@ export var DragHandle = function DragHandle(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     dragHandleSelected = _useState4[0],
     setDragHandleSelected = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragHandleDisabled = _useState6[0],
+    setDragHandleDisabled = _useState6[1];
   var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
+  var multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -156,9 +170,11 @@ export var DragHandle = function DragHandle(_ref) {
       }
     }
   }, [anchorName, nodeType, view.dom]);
-  var handleOnClick = useCallback(function () {
+  var handleOnClick = 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;
@@ -166,7 +182,24 @@ export var DragHandle = function DragHandle(_ref) {
       if (startPos === undefined) {
         return tr;
       }
-      tr = 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 = selectNode(tr, startPos, nodeType);
+        if (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 <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+        var _api$blockControls2;
+        var alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
+        var selectionWithExpandedHead = 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);
@@ -183,14 +216,7 @@ export var DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-    if (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,
@@ -210,7 +236,6 @@ export var DragHandle = function DragHandle(_ref) {
   var handleKeyDown = useCallback(function (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;
         var startPos = getPos();
@@ -226,9 +251,9 @@ export var DragHandle = function DragHandle(_ref) {
           var $startPos = tr.doc.resolve(startPos + node.nodeSize);
           var 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(function (pressed) {
@@ -239,7 +264,7 @@ export var 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]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -254,7 +279,6 @@ export var DragHandle = function DragHandle(_ref) {
         };
       },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
-        var _api$blockControls2;
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
@@ -265,8 +289,8 @@ export var 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
               });
             }
@@ -277,8 +301,6 @@ export var 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) {
@@ -288,7 +310,7 @@ export var 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;
         setCustomNativeDragPreview({
           getOffset: function getOffset() {
             if (!isDraggingMultiLine) {
@@ -335,8 +357,8 @@ export var 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;
@@ -372,13 +394,12 @@ export var 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(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
           if (multiSelectDnD) {
             var attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
             nodeTypes = attributes.nodeTypes;
@@ -387,7 +408,7 @@ export var 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);
@@ -409,7 +430,7 @@ export var 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 = useCallback(function () {
     var parentNodeType;
@@ -452,12 +473,12 @@ export var DragHandle = function DragHandle(_ref) {
       top: getTopPosition(dom, nodeType)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
-  var _useState5 = useState({
+  var _useState7 = useState({
       display: 'none'
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    positionStyles = _useState6[0],
-    setPositionStyles = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    positionStyles = _useState8[0],
+    setPositionStyles = _useState8[1];
   useEffect(function () {
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
@@ -499,6 +520,17 @@ export var DragHandle = function DragHandle(_ref) {
     }
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
+  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 > 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 && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -586,6 +618,7 @@ export var 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"
       }, jsx(Box, {
         as: "span",
@@ -593,13 +626,13 @@ export var DragHandle = function DragHandle(_ref) {
         // 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/types/blockControlsPluginType.d.ts

@@ -42,6 +42,7 @@ export interface PluginState {
      */
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
+    isShiftDown?: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -50,6 +51,7 @@ export type BlockControlsSharedState = {
     isDragging: boolean;
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
+    isShiftDown?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;

package/dist/types/pm-plugins/main.d.ts

@@ -24,7 +24,8 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
     isPMDragging: any;
-    multiSelectDnD: any;
+    multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
+    isShiftDown: any;
 };
 export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;

package/dist/types/pm-plugins/utils/selection.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
 export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
     anchor?: number;
@@ -13,3 +13,15 @@ export declare const getSelectedSlicePosition: (handlePos: number, tr: Transacti
     from: number;
     to: number;
 };
+/**
+ * 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 declare const expandSelectionHeadToNodeAtPos: (selection: Selection, nodePos: number) => Selection;
+/**
+ * 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 declare const alignAnchorHeadInDirectionOfPos: (selection: Selection, pos: number) => Selection;

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

@@ -15,6 +15,13 @@ export declare const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export declare 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 declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;

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

@@ -42,6 +42,7 @@ export interface PluginState {
      */
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
+    isShiftDown?: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -50,6 +51,7 @@ export type BlockControlsSharedState = {
     isDragging: boolean;
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
+    isShiftDown?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -24,7 +24,8 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
     isPMDragging: any;
-    multiSelectDnD: any;
+    multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
+    isShiftDown: any;
 };
 export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;