@atlaskit/editor-plugin-block-controls 7.7.3 → 7.7.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.7.5
+
+### Patch Changes
+
+- [`6f765533c791b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f765533c791b) -
+  FG platform_editor_block_menu_patch_1 clean up.
+- Updated dependencies
+
+## 7.7.4
+
+### Patch Changes
+
+- [`1117e966eee41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1117e966eee41) -
+  [ux] EDITOR-3384 Multiselect expand on doc changes
+
 ## 7.7.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/selection-preservation/pm-plugin.js

@@ -55,13 +55,17 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          var mapped = new _state.TextSelection(newState.preservedSelection.$from, newState.preservedSelection.$to);
-          mapped.map(tr.doc, tr.mapping);
-          if (mapped.from >= 0 && mapped.to <= tr.doc.content.size && mapped.from !== mapped.to) {
-            newState.preservedSelection = mapped;
-          } else if (mapped.from === mapped.to) {
-            // If selection has collapsed to a cursor, e.g. after deleting the selection, stop preserving
+          var from = tr.mapping.map(newState.preservedSelection.from);
+          var to = tr.mapping.map(newState.preservedSelection.to);
+          if (from < 0 || to > tr.doc.content.size || from >= to) {
+            // stop preserving if preserved selection becomes invalid or collapsed to a cursor
+            // e.g. after deleting the selection
             newState.preservedSelection = undefined;
+          } else {
+            var _expandToBlockRange = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to)),
+              $from = _expandToBlockRange.$from,
+              $to = _expandToBlockRange.$to;
+            newState.preservedSelection = new _state.TextSelection($from, $to);
           }
         }
         return newState;
@@ -96,4 +100,17 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       return null;
     }
   });
+};
+var expandToBlockRange = function expandToBlockRange($from, $to) {
+  var range = $from.blockRange($to);
+  if (!range) {
+    return {
+      $from: $from,
+      $to: $to
+    };
+  }
+  return {
+    $from: $from.doc.resolve(range.start),
+    $to: $to.doc.resolve(range.end)
+  };
 };

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

@@ -13,10 +13,7 @@ var _pluginKey = require("./plugin-key");
  */
 var hasUserSelectionChange = exports.hasUserSelectionChange = function hasUserSelectionChange(transactions) {
   return transactions.some(function (tr) {
-    return tr.getMeta('pointer') || tr.getMeta('uiEvent') || tr.getMeta('paste') || tr.getMeta('cut') || tr.getMeta('composition') ||
-    // IME input
-    // Keyboard events that change selection
-    tr.getMeta('addToHistory') && tr.selectionSet;
+    return tr.getMeta('pointer') && tr.selectionSet;
   });
 };
 var getSelectionPreservationMeta = exports.getSelectionPreservationMeta = function getSelectionPreservationMeta(tr) {

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

@@ -298,7 +298,7 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
-var isRangeSpanningMultipleNodes = function isRangeSpanningMultipleNodes(range) {
+var isMultiNodeRange = function isMultiNodeRange(range) {
   if (range.endIndex - range.startIndex <= 1) {
     return false; // At most one child
   }
@@ -315,64 +315,38 @@ var isRangeSpanningMultipleNodes = function isRangeSpanningMultipleNodes(range)
   }
   return false;
 };
-var shouldExpandSelection = function shouldExpandSelection(range, startPos) {
-  return !!range && isRangeSpanningMultipleNodes(range) && range.start <= startPos && range.end >= startPos + 1;
+var isPosWithinRange = function isPosWithinRange(pos, range) {
+  return range.start <= pos && range.end >= pos + 1;
 };
-var calculateBlockRange = function calculateBlockRange(_ref) {
+/**
+ * From the current selection and the position of the drag handle being clicked,
+ * calculate the expanded block range up to the common ancestor.
+ */
+var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
   var selection = _ref.selection,
     doc = _ref.doc,
     resolvedStartPos = _ref.resolvedStartPos,
     isShiftPressed = _ref.isShiftPressed;
-  if (!isShiftPressed) {
-    // When not pressing shift, create range including all block nodes within the selection
-    return selection.$from.blockRange(selection.$to);
-  }
-  if (resolvedStartPos.pos < selection.from) {
-    // If shift+click selecting upwards, get range from start of node to end of selection
-    return resolvedStartPos.blockRange(selection.$to);
-  }
-
-  // Shift+click selecting downwards, get range from start of selection to pos within or after node
-  var resolvedPosWithinOrAfterNode = doc.resolve(resolvedStartPos.pos + 1);
-  return selection.$from.blockRange(resolvedPosWithinOrAfterNode);
+  // When not pressing shift, expand the current selection
+  // When shift selecting upwards, expand from start of node to selection end
+  // When shift selecting downwards, expand from selection start to end of node
+  var selectUp = resolvedStartPos.pos < selection.from;
+  var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
+  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
+  return $from.blockRange($to);
 };
-var createExpandedSelection = function createExpandedSelection(doc, selection, range) {
-  return _state.TextSelection.create(doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end));
-};
-var createSelectionFromRange = function createSelectionFromRange(_ref2) {
-  var tr = _ref2.tr,
-    selection = _ref2.selection,
-    startPos = _ref2.startPos,
-    nodeType = _ref2.nodeType,
-    range = _ref2.range,
-    api = _ref2.api;
-  if (range && shouldExpandSelection(range, startPos)) {
-    var expandedSelection = createExpandedSelection(tr.doc, selection, range);
-    if (!expandedSelection.eq(tr.selection)) {
-      tr.setSelection(expandedSelection);
-    }
-    return tr;
-  }
-  var node = tr.doc.nodeAt(startPos);
-  var isEmptyNode = (node === null || node === void 0 ? void 0 : node.content.size) === 0;
-  if (isEmptyNode && node.type.name !== 'paragraph') {
-    tr.setSelection(new _state.NodeSelection(tr.doc.resolve(startPos)));
-    return tr;
-  }
-  return (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
-};
-var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
+var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var _api$core4;
-  var view = _ref3.view,
-    api = _ref3.api,
-    formatMessage = _ref3.formatMessage,
-    getPos = _ref3.getPos,
-    anchorName = _ref3.anchorName,
-    nodeType = _ref3.nodeType,
-    handleOptions = _ref3.handleOptions,
-    _ref3$isTopLevelNode = _ref3.isTopLevelNode,
-    isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
-    anchorRectCache = _ref3.anchorRectCache;
+  var view = _ref2.view,
+    api = _ref2.api,
+    formatMessage = _ref2.formatMessage,
+    getPos = _ref2.getPos,
+    anchorName = _ref2.anchorName,
+    nodeType = _ref2.nodeType,
+    handleOptions = _ref2.handleOptions,
+    _ref2$isTopLevelNode = _ref2.isTopLevelNode,
+    isTopLevelNode = _ref2$isTopLevelNode === void 0 ? true : _ref2$isTopLevelNode,
+    anchorRectCache = _ref2.anchorRectCache;
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -435,9 +409,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   }, [anchorName, nodeType, view.dom]);
   var handleOnClickNew = (0, _react.useCallback)(function (e) {
     var _api$core;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
       var _api$analytics, _resolvedStartPos$nod, _selectionPreservatio, _api$blockControls, _api$blockControls2;
-      var tr = _ref4.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -453,22 +427,21 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var preservedSelection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-      var selection = preservedSelection || tr.selection;
-      var range = calculateBlockRange({
+      var selection = ((_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
+      var range = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,
         resolvedStartPos: resolvedStartPos,
         isShiftPressed: e.shiftKey
       });
-      tr = createSelectionFromRange({
-        tr: tr,
-        selection: selection,
-        startPos: startPos,
-        nodeType: nodeType,
-        range: range,
-        api: api
-      });
+
+      // Set selection to expanded selection range if it encompases the clicked drag handle
+      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
+        tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end)));
+      } else {
+        // Select the clicked drag handle's node only
+        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
+      }
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.startPreservingSelection()({
         tr: tr
       });
@@ -493,9 +466,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     if (!isMultiSelect) {
       setDragHandleSelected(!dragHandleSelected);
     }
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref5.tr;
+      var tr = _ref4.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -575,8 +548,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     if (!e.repeat && e.key === ' ') {
       var _api$core3;
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
-        var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -610,9 +583,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
+      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
         var _api$blockControls6, _api$userIntent;
-        var tr = _ref7.tr;
+        var tr = _ref6.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -641,9 +614,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     } else if (e.key === 'Backspace' || e.key === 'Delete') {
       e.preventDefault();
       e.stopPropagation();
-      api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
+      api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
         var _api$blockControls7;
-        var tr = _ref8.tr;
+        var tr = _ref7.tr;
         (0, _selection2.deleteSelectedRange)(tr);
         api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.toggleBlockMenu({
           closeMenu: true
@@ -673,13 +646,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref9) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref9.nativeSetDragImage;
+        var nativeSetDragImage = _ref8.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core6;
-          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref0) {
-            var tr = _ref0.tr;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
+            var tr = _ref9.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -757,8 +730,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
               };
             }
           },
-          render: function render(_ref1) {
-            var container = _ref1.container;
+          render: function render(_ref0) {
+            var container = _ref0.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -794,9 +767,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref10) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref1) {
           var _api$blockControls$sh3, _api$blockControls9, _api$analytics3;
-          var tr = _ref10.tr;
+          var tr = _ref1.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -1013,12 +986,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       setDragHandleDisabled(false);
     }
   }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
-  var dragHandleMessage = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleMessage = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);
 
   // Create a string version for aria-label
-  var dragHandleAriaLabel = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleAriaLabel = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);
   var helpDescriptors = isTopLevelNode ? [{
@@ -1192,15 +1165,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref11) {
-  var view = _ref11.view,
-    api = _ref11.api,
-    formatMessage = _ref11.formatMessage,
-    getPos = _ref11.getPos,
-    anchorName = _ref11.anchorName,
-    nodeType = _ref11.nodeType,
-    handleOptions = _ref11.handleOptions,
-    anchorRectCache = _ref11.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
+  var view = _ref10.view,
+    api = _ref10.api,
+    formatMessage = _ref10.formatMessage,
+    getPos = _ref10.getPos,
+    anchorName = _ref10.anchorName,
+    nodeType = _ref10.nodeType,
+    handleOptions = _ref10.handleOptions,
+    anchorRectCache = _ref10.anchorRectCache;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
   }, (0, _react2.jsx)(DragHandle, {

package/dist/es2019/pm-plugins/selection-preservation/pm-plugin.js

@@ -48,13 +48,18 @@ export const createSelectionPreservationPlugin = () => {
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          const mapped = new TextSelection(newState.preservedSelection.$from, newState.preservedSelection.$to);
-          mapped.map(tr.doc, tr.mapping);
-          if (mapped.from >= 0 && mapped.to <= tr.doc.content.size && mapped.from !== mapped.to) {
-            newState.preservedSelection = mapped;
-          } else if (mapped.from === mapped.to) {
-            // If selection has collapsed to a cursor, e.g. after deleting the selection, stop preserving
+          const from = tr.mapping.map(newState.preservedSelection.from);
+          const to = tr.mapping.map(newState.preservedSelection.to);
+          if (from < 0 || to > tr.doc.content.size || from >= to) {
+            // stop preserving if preserved selection becomes invalid or collapsed to a cursor
+            // e.g. after deleting the selection
             newState.preservedSelection = undefined;
+          } else {
+            const {
+              $from,
+              $to
+            } = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
+            newState.preservedSelection = new TextSelection($from, $to);
           }
         }
         return newState;
@@ -89,4 +94,17 @@ export const createSelectionPreservationPlugin = () => {
       return null;
     }
   });
+};
+const expandToBlockRange = ($from, $to) => {
+  const range = $from.blockRange($to);
+  if (!range) {
+    return {
+      $from,
+      $to
+    };
+  }
+  return {
+    $from: $from.doc.resolve(range.start),
+    $to: $to.doc.resolve(range.end)
+  };
 };

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

@@ -6,10 +6,7 @@ import { selectionPreservationPluginKey } from './plugin-key';
  * @returns True if any transaction includes a user-driven selection change, otherwise false.
  */
 export const hasUserSelectionChange = transactions => {
-  return transactions.some(tr => tr.getMeta('pointer') || tr.getMeta('uiEvent') || tr.getMeta('paste') || tr.getMeta('cut') || tr.getMeta('composition') ||
-  // IME input
-  // Keyboard events that change selection
-  tr.getMeta('addToHistory') && tr.selectionSet);
+  return transactions.some(tr => tr.getMeta('pointer') && tr.selectionSet);
 };
 export const getSelectionPreservationMeta = tr => {
   return tr.getMeta(selectionPreservationPluginKey);

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

@@ -293,7 +293,7 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-const isRangeSpanningMultipleNodes = range => {
+const isMultiNodeRange = range => {
   if (range.endIndex - range.startIndex <= 1) {
     return false; // At most one child
   }
@@ -310,53 +310,26 @@ const isRangeSpanningMultipleNodes = range => {
   }
   return false;
 };
-const shouldExpandSelection = (range, startPos) => {
-  return !!range && isRangeSpanningMultipleNodes(range) && range.start <= startPos && range.end >= startPos + 1;
+const isPosWithinRange = (pos, range) => {
+  return range.start <= pos && range.end >= pos + 1;
 };
-const calculateBlockRange = ({
+/**
+ * From the current selection and the position of the drag handle being clicked,
+ * calculate the expanded block range up to the common ancestor.
+ */
+const getExpandedSelectionRange = ({
   selection,
   doc,
   resolvedStartPos,
   isShiftPressed
 }) => {
-  if (!isShiftPressed) {
-    // When not pressing shift, create range including all block nodes within the selection
-    return selection.$from.blockRange(selection.$to);
-  }
-  if (resolvedStartPos.pos < selection.from) {
-    // If shift+click selecting upwards, get range from start of node to end of selection
-    return resolvedStartPos.blockRange(selection.$to);
-  }
-
-  // Shift+click selecting downwards, get range from start of selection to pos within or after node
-  const resolvedPosWithinOrAfterNode = doc.resolve(resolvedStartPos.pos + 1);
-  return selection.$from.blockRange(resolvedPosWithinOrAfterNode);
-};
-const createExpandedSelection = (doc, selection, range) => {
-  return TextSelection.create(doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end));
-};
-const createSelectionFromRange = ({
-  tr,
-  selection,
-  startPos,
-  nodeType,
-  range,
-  api
-}) => {
-  if (range && shouldExpandSelection(range, startPos)) {
-    const expandedSelection = createExpandedSelection(tr.doc, selection, range);
-    if (!expandedSelection.eq(tr.selection)) {
-      tr.setSelection(expandedSelection);
-    }
-    return tr;
-  }
-  const node = tr.doc.nodeAt(startPos);
-  const isEmptyNode = (node === null || node === void 0 ? void 0 : node.content.size) === 0;
-  if (isEmptyNode && node.type.name !== 'paragraph') {
-    tr.setSelection(new NodeSelection(tr.doc.resolve(startPos)));
-    return tr;
-  }
-  return selectNode(tr, startPos, nodeType, api);
+  // When not pressing shift, expand the current selection
+  // When shift selecting upwards, expand from start of node to selection end
+  // When shift selecting downwards, expand from selection start to end of node
+  const selectUp = resolvedStartPos.pos < selection.from;
+  const $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
+  const $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
+  return $from.blockRange($to);
 };
 export const DragHandle = ({
   view,
@@ -432,22 +405,21 @@ export const DragHandle = ({
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      const preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-      const selection = preservedSelection || tr.selection;
-      const range = calculateBlockRange({
+      const selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
+      const range = getExpandedSelectionRange({
         doc: tr.doc,
         selection,
         resolvedStartPos,
         isShiftPressed: e.shiftKey
       });
-      tr = createSelectionFromRange({
-        tr,
-        selection,
-        startPos,
-        nodeType,
-        range,
-        api
-      });
+
+      // Set selection to expanded selection range if it encompases the clicked drag handle
+      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
+        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end)));
+      } else {
+        // Select the clicked drag handle's node only
+        tr = selectNode(tr, startPos, nodeType, api);
+      }
       api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.startPreservingSelection()({
         tr
       });
@@ -1003,12 +975,12 @@ export const DragHandle = ({
       setDragHandleDisabled(false);
     }
   }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
-  const dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && fg('platform_editor_block_menu_patch_1') ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+  const dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);
 
   // Create a string version for aria-label
-  const dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && fg('platform_editor_block_menu_patch_1') ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+  const dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(blockControlsMessages.dragToMove);
   let helpDescriptors = isTopLevelNode ? [{

package/dist/esm/pm-plugins/selection-preservation/pm-plugin.js

@@ -49,13 +49,17 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          var mapped = new TextSelection(newState.preservedSelection.$from, newState.preservedSelection.$to);
-          mapped.map(tr.doc, tr.mapping);
-          if (mapped.from >= 0 && mapped.to <= tr.doc.content.size && mapped.from !== mapped.to) {
-            newState.preservedSelection = mapped;
-          } else if (mapped.from === mapped.to) {
-            // If selection has collapsed to a cursor, e.g. after deleting the selection, stop preserving
+          var from = tr.mapping.map(newState.preservedSelection.from);
+          var to = tr.mapping.map(newState.preservedSelection.to);
+          if (from < 0 || to > tr.doc.content.size || from >= to) {
+            // stop preserving if preserved selection becomes invalid or collapsed to a cursor
+            // e.g. after deleting the selection
             newState.preservedSelection = undefined;
+          } else {
+            var _expandToBlockRange = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to)),
+              $from = _expandToBlockRange.$from,
+              $to = _expandToBlockRange.$to;
+            newState.preservedSelection = new TextSelection($from, $to);
           }
         }
         return newState;
@@ -90,4 +94,17 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       return null;
     }
   });
+};
+var expandToBlockRange = function expandToBlockRange($from, $to) {
+  var range = $from.blockRange($to);
+  if (!range) {
+    return {
+      $from: $from,
+      $to: $to
+    };
+  }
+  return {
+    $from: $from.doc.resolve(range.start),
+    $to: $to.doc.resolve(range.end)
+  };
 };

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

@@ -7,10 +7,7 @@ import { selectionPreservationPluginKey } from './plugin-key';
  */
 export var hasUserSelectionChange = function hasUserSelectionChange(transactions) {
   return transactions.some(function (tr) {
-    return tr.getMeta('pointer') || tr.getMeta('uiEvent') || tr.getMeta('paste') || tr.getMeta('cut') || tr.getMeta('composition') ||
-    // IME input
-    // Keyboard events that change selection
-    tr.getMeta('addToHistory') && tr.selectionSet;
+    return tr.getMeta('pointer') && tr.selectionSet;
   });
 };
 export var getSelectionPreservationMeta = function getSelectionPreservationMeta(tr) {

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

@@ -295,7 +295,7 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-var isRangeSpanningMultipleNodes = function isRangeSpanningMultipleNodes(range) {
+var isMultiNodeRange = function isMultiNodeRange(range) {
   if (range.endIndex - range.startIndex <= 1) {
     return false; // At most one child
   }
@@ -312,64 +312,38 @@ var isRangeSpanningMultipleNodes = function isRangeSpanningMultipleNodes(range)
   }
   return false;
 };
-var shouldExpandSelection = function shouldExpandSelection(range, startPos) {
-  return !!range && isRangeSpanningMultipleNodes(range) && range.start <= startPos && range.end >= startPos + 1;
+var isPosWithinRange = function isPosWithinRange(pos, range) {
+  return range.start <= pos && range.end >= pos + 1;
 };
-var calculateBlockRange = function calculateBlockRange(_ref) {
+/**
+ * From the current selection and the position of the drag handle being clicked,
+ * calculate the expanded block range up to the common ancestor.
+ */
+var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
   var selection = _ref.selection,
     doc = _ref.doc,
     resolvedStartPos = _ref.resolvedStartPos,
     isShiftPressed = _ref.isShiftPressed;
-  if (!isShiftPressed) {
-    // When not pressing shift, create range including all block nodes within the selection
-    return selection.$from.blockRange(selection.$to);
-  }
-  if (resolvedStartPos.pos < selection.from) {
-    // If shift+click selecting upwards, get range from start of node to end of selection
-    return resolvedStartPos.blockRange(selection.$to);
-  }
-
-  // Shift+click selecting downwards, get range from start of selection to pos within or after node
-  var resolvedPosWithinOrAfterNode = doc.resolve(resolvedStartPos.pos + 1);
-  return selection.$from.blockRange(resolvedPosWithinOrAfterNode);
-};
-var createExpandedSelection = function createExpandedSelection(doc, selection, range) {
-  return TextSelection.create(doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end));
+  // When not pressing shift, expand the current selection
+  // When shift selecting upwards, expand from start of node to selection end
+  // When shift selecting downwards, expand from selection start to end of node
+  var selectUp = resolvedStartPos.pos < selection.from;
+  var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
+  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
+  return $from.blockRange($to);
 };
-var createSelectionFromRange = function createSelectionFromRange(_ref2) {
-  var tr = _ref2.tr,
-    selection = _ref2.selection,
-    startPos = _ref2.startPos,
-    nodeType = _ref2.nodeType,
-    range = _ref2.range,
-    api = _ref2.api;
-  if (range && shouldExpandSelection(range, startPos)) {
-    var expandedSelection = createExpandedSelection(tr.doc, selection, range);
-    if (!expandedSelection.eq(tr.selection)) {
-      tr.setSelection(expandedSelection);
-    }
-    return tr;
-  }
-  var node = tr.doc.nodeAt(startPos);
-  var isEmptyNode = (node === null || node === void 0 ? void 0 : node.content.size) === 0;
-  if (isEmptyNode && node.type.name !== 'paragraph') {
-    tr.setSelection(new NodeSelection(tr.doc.resolve(startPos)));
-    return tr;
-  }
-  return selectNode(tr, startPos, nodeType, api);
-};
-export var DragHandle = function DragHandle(_ref3) {
+export var DragHandle = function DragHandle(_ref2) {
   var _api$core4;
-  var view = _ref3.view,
-    api = _ref3.api,
-    formatMessage = _ref3.formatMessage,
-    getPos = _ref3.getPos,
-    anchorName = _ref3.anchorName,
-    nodeType = _ref3.nodeType,
-    handleOptions = _ref3.handleOptions,
-    _ref3$isTopLevelNode = _ref3.isTopLevelNode,
-    isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
-    anchorRectCache = _ref3.anchorRectCache;
+  var view = _ref2.view,
+    api = _ref2.api,
+    formatMessage = _ref2.formatMessage,
+    getPos = _ref2.getPos,
+    anchorName = _ref2.anchorName,
+    nodeType = _ref2.nodeType,
+    handleOptions = _ref2.handleOptions,
+    _ref2$isTopLevelNode = _ref2.isTopLevelNode,
+    isTopLevelNode = _ref2$isTopLevelNode === void 0 ? true : _ref2$isTopLevelNode,
+    anchorRectCache = _ref2.anchorRectCache;
   var buttonRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -432,9 +406,9 @@ export var DragHandle = function DragHandle(_ref3) {
   }, [anchorName, nodeType, view.dom]);
   var handleOnClickNew = useCallback(function (e) {
     var _api$core;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
       var _api$analytics, _resolvedStartPos$nod, _selectionPreservatio, _api$blockControls, _api$blockControls2;
-      var tr = _ref4.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -450,22 +424,21 @@ export var DragHandle = function DragHandle(_ref3) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-      var selection = preservedSelection || tr.selection;
-      var range = calculateBlockRange({
+      var selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
+      var range = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,
         resolvedStartPos: resolvedStartPos,
         isShiftPressed: e.shiftKey
       });
-      tr = createSelectionFromRange({
-        tr: tr,
-        selection: selection,
-        startPos: startPos,
-        nodeType: nodeType,
-        range: range,
-        api: api
-      });
+
+      // Set selection to expanded selection range if it encompases the clicked drag handle
+      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
+        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end)));
+      } else {
+        // Select the clicked drag handle's node only
+        tr = selectNode(tr, startPos, nodeType, api);
+      }
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.startPreservingSelection()({
         tr: tr
       });
@@ -490,9 +463,9 @@ export var DragHandle = function DragHandle(_ref3) {
     if (!isMultiSelect) {
       setDragHandleSelected(!dragHandleSelected);
     }
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref5.tr;
+      var tr = _ref4.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -572,8 +545,8 @@ export var DragHandle = function DragHandle(_ref3) {
     if (!e.repeat && e.key === ' ') {
       var _api$core3;
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
-        var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -607,9 +580,9 @@ export var DragHandle = function DragHandle(_ref3) {
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
+      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
         var _api$blockControls6, _api$userIntent;
-        var tr = _ref7.tr;
+        var tr = _ref6.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -638,9 +611,9 @@ export var DragHandle = function DragHandle(_ref3) {
     } else if (e.key === 'Backspace' || e.key === 'Delete') {
       e.preventDefault();
       e.stopPropagation();
-      api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
+      api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
         var _api$blockControls7;
-        var tr = _ref8.tr;
+        var tr = _ref7.tr;
         deleteSelectedRange(tr);
         api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.toggleBlockMenu({
           closeMenu: true
@@ -670,13 +643,13 @@ export var DragHandle = function DragHandle(_ref3) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref9) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref9.nativeSetDragImage;
+        var nativeSetDragImage = _ref8.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core6;
-          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref0) {
-            var tr = _ref0.tr;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
+            var tr = _ref9.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -754,8 +727,8 @@ export var DragHandle = function DragHandle(_ref3) {
               };
             }
           },
-          render: function render(_ref1) {
-            var container = _ref1.container;
+          render: function render(_ref0) {
+            var container = _ref0.container;
             var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -791,9 +764,9 @@ export var DragHandle = function DragHandle(_ref3) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref10) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref1) {
           var _api$blockControls$sh3, _api$blockControls9, _api$analytics3;
-          var tr = _ref10.tr;
+          var tr = _ref1.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -1010,12 +983,12 @@ export var DragHandle = function DragHandle(_ref3) {
       setDragHandleDisabled(false);
     }
   }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
-  var dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && fg('platform_editor_block_menu_patch_1') ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);
 
   // Create a string version for aria-label
-  var dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && fg('platform_editor_block_menu_patch_1') ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(blockControlsMessages.dragToMove);
   var helpDescriptors = isTopLevelNode ? [{
@@ -1189,15 +1162,15 @@ export var DragHandle = function DragHandle(_ref3) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref11) {
-  var view = _ref11.view,
-    api = _ref11.api,
-    formatMessage = _ref11.formatMessage,
-    getPos = _ref11.getPos,
-    anchorName = _ref11.anchorName,
-    nodeType = _ref11.nodeType,
-    handleOptions = _ref11.handleOptions,
-    anchorRectCache = _ref11.anchorRectCache;
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
+  var view = _ref10.view,
+    api = _ref10.api,
+    formatMessage = _ref10.formatMessage,
+    getPos = _ref10.getPos,
+    anchorName = _ref10.anchorName,
+    nodeType = _ref10.nodeType,
+    handleOptions = _ref10.handleOptions,
+    anchorRectCache = _ref10.anchorRectCache;
   return jsx(VisibilityContainer, {
     api: api
   }, jsx(DragHandle, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.7.3",
+	"version": "7.7.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,10 +52,10 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/primitives": "^16.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.39.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.40.0",
+		"@atlaskit/tokens": "^8.1.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.32.0",
+		"@atlaskit/editor-common": "^110.33.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -143,9 +143,6 @@
 		"dst-a11y__replace-anchor-with-link__editor-jenga": {
 			"type": "boolean"
 		},
-		"platform_editor_block_menu_patch_1": {
-			"type": "boolean"
-		},
 		"editor_native_anchor_remove_decoration_in_apply": {
 			"type": "boolean"
 		},