@atlaskit/editor-plugin-block-controls 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.1.1
+
+### Patch Changes
+
+- [#117391](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117391)
+  [`1655b74fcb544`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1655b74fcb544) -
+  Fix drop table on table trigger native dnd
+
+## 3.1.0
+
+### Minor Changes
+
+- [#117917](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117917)
+  [`9d7669d4f5295`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d7669d4f5295) -
+  [ux] Add shift-select functionality to DnD
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -13,6 +13,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
 var _main = require("./pm-plugins/main");
+var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
@@ -88,29 +89,40 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       },
       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 = (0, _selection.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 = _state.TextSelection.between(expandedAnchor, expandedHead);
-          tr.setSelection(expandedNormalisedSel);
+          var $from = $expandedAnchor.min($expandedHead);
+          var $to = $expandedAnchor.max($expandedHead);
+          var expandedNormalisedSel;
+          if ($from.nodeAfter === $to.nodeBefore) {
+            (0, _getSelection.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 _state.TextSelection($expandedAnchor, $expandedHead);
+            tr.setSelection(expandedNormalisedSel);
+          } else {
+            // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
+            expandedNormalisedSel = _state.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,
@@ -125,7 +137,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     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;
       }
@@ -134,7 +146,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         activeNode: (_key$getState$activeN = (_key$getState2 = _main.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 = _main.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 = _main.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 = _main.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 = _main.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 = _main.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/cjs/editor-commands/move-node.js

@@ -60,16 +60,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 = _main.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 ((0, _utils3.isInTable)(state)) {
     if ((0, _utils3.isTableSelected)(selection)) {
       var _findTable$pos, _findTable;
@@ -87,6 +85,12 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   }
   return currentNodePos;
 };
+var getFocusedHandle = function getFocusedHandle(state) {
+  var _activeNode$handleOpt;
+  var _ref = _main.key.getState(state) || {},
+    activeNode = _ref.activeNode;
+  return activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused ? activeNode : undefined;
+};
 var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var isParentNodeOfTypeLayout;
@@ -96,20 +100,14 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
     var isMultiSelectEnabled = (0, _experiments.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 = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head);
-      expandedAnchor = expandedSelection.$anchor.pos;
-      expandedHead = expandedSelection.$head.pos;
-    }
-    var currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
+    var expandedSelection = (0, _selection.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();
@@ -217,7 +215,6 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         }
       } else {
         var _endOfDoc = $pos.end();
-        var nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > _endOfDoc) {
           return false;
         }
@@ -296,8 +293,8 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
         exposure: true
       });
+      var slicePosition = (0, _selection2.getSelectedSlicePosition)(start, tr, api);
       if (isMultiSelect) {
-        var slicePosition = (0, _selection2.getSelectedSlicePosition)(start, tr, api);
         sliceFrom = slicePosition.from;
         sliceTo = slicePosition.to;
         var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, sliceFrom, sliceTo);

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

@@ -13,9 +13,11 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection2 = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _editorTables = require("@atlaskit/editor-tables");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -29,7 +31,7 @@ var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
 var _analytics2 = require("./utils/analytics");
 var _anchorUtils = require("./utils/anchor-utils");
-var _selection = require("./utils/selection");
+var _selection3 = require("./utils/selection");
 var _transactions = require("./utils/transactions");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -107,7 +109,7 @@ var destroyFn = function destroyFn(api, editorView) {
           var _api$analytics2;
           var nodeTypes, hasSelectedMultipleNodes;
           if (isMultiSelect && api) {
-            var position = (0, _selection.getSelectedSlicePosition)(start, tr, api);
+            var position = (0, _selection3.getSelectedSlicePosition)(start, tr, api);
             var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, position.from, position.to);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
@@ -128,10 +130,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
-        });
+        }));
       });
     }
   }));
@@ -155,7 +157,7 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 var newApply = exports.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,
@@ -165,7 +167,8 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     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
@@ -188,10 +191,9 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   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 = (0, _transactions.getTrMetadata)(tr),
     from = _getTrMetadata.from,
@@ -294,7 +296,8 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     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
   };
 };
 var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -510,9 +513,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             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;
@@ -534,10 +537,26 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           var domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           var nodeTarget = state.doc.nodeAt(domPos);
           var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-          var isInSelection = domPos >= state.selection.$from.pos && domPos < state.selection.$to.pos;
 
-          // Prevent the default drop behavior if the position is within the activeNode or Editor selection
-          if (isSameNode || isInSelection && isMultiSelectEnabled) {
+          // CellSelection doesn't expose true from/to positions, we need to query the ranges
+          var selectionRange = state.selection instanceof _editorTables.CellSelection ? state.selection.ranges.reduce(function (previousValue, currentValue, _currentIndex, _array) {
+            return {
+              $from: currentValue.$from.min(previousValue.$from),
+              $to: currentValue.$to.max(previousValue.$to)
+            };
+          }) : {
+            $from: state.selection.$from,
+            $to: state.selection.$to
+          };
+          var expandedSelection = (0, _selection2.expandSelectionBounds)(selectionRange.$from, selectionRange.$to);
+          var expandedAnchor = expandedSelection.$anchor;
+          var expandedHead = expandedSelection.$head;
+          var expandedSelectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+          var expandedSelectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+          var isInExpandedSelection = domPos >= expandedSelectionFrom && domPos < expandedSelectionTo;
+
+          // Prevent the default drop behavior if the position is within the activeNode or within the expanded selection when multiselect is on
+          if (isSameNode || isInExpandedSelection && isMultiSelectEnabled) {
             event.preventDefault();
             return true;
           }
@@ -565,18 +584,18 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             _activeAnchorTracker.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) {
@@ -584,27 +603,65 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           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.browser.mac ? event.metaKey : event.ctrlKey;
-          if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
-            if (selection instanceof _state.TextSelection || selection instanceof _state.NodeSelection) {
-              var newSelection = _state.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 && (0, _keymap.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 && (0, _keymap.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.browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
+              if (selection instanceof _state.TextSelection || selection instanceof _state.NodeSelection) {
+                var newSelection = _state.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.browser.mac ? event.metaKey : event.ctrlKey;
+            if (event.key === 'ArrowUp' && event.shiftKey && _metaKey) {
+              if (_selection instanceof _state.TextSelection || _selection instanceof _state.NodeSelection) {
+                var _newSelection = _state.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 && (0, _keymap.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
+            })));
+          }
         }
       }
     },
@@ -629,10 +686,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             // 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/cjs/pm-plugins/utils/getSelection.js

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

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = void 0;
+exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.alignAnchorHeadInDirectionOfPos = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _main = require("../main");
 var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
@@ -16,7 +17,7 @@ var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = functi
     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
     } : {};
@@ -34,12 +35,41 @@ var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSe
     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.
+ */
+var expandSelectionHeadToNodeAtPos = exports.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 _state.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.
+ */
+var alignAnchorHeadInDirectionOfPos = exports.alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
+  return selection instanceof _state.NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new _state.TextSelection(selection.$head, selection.$anchor) : selection;
 };

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -27,6 +27,14 @@ var DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 var DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.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.
+ */
+var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
   if (nodeType === 'layoutSection' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_2')) {