@atlaskit/editor-plugin-block-controls 9.0.32 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.1.0
+
+### Minor Changes
+
+- [`81e6d01a5d2b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81e6d01a5d2b5) -
+  Expose expandAndUpdateSelection as a plugin command so other plugins can update the ProseMirror
+  selection using the same block-control click logic
+
+## 9.0.33
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.32
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -24,6 +24,7 @@ var _main = require("./pm-plugins/main");
 var _editorCommands = require("./pm-plugins/selection-preservation/editor-commands");
 var _pluginKey = require("./pm-plugins/selection-preservation/plugin-key");
 var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
+var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _globalStyles = require("./ui/global-styles");
 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; }
@@ -84,11 +85,29 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       return pmPlugins;
     },
     commands: {
+      expandAndUpdateSelection: function expandAndUpdateSelection(_ref3) {
+        var startPos = _ref3.startPos,
+          selection = _ref3.selection,
+          isShiftPressed = _ref3.isShiftPressed,
+          nodeType = _ref3.nodeType;
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          (0, _expandAndUpdateSelection2.expandAndUpdateSelection)({
+            tr: tr,
+            selection: selection,
+            startPos: startPos,
+            isShiftPressed: isShiftPressed,
+            nodeType: nodeType,
+            api: api
+          });
+          return tr;
+        };
+      },
       moveNode: (0, _moveNode.moveNode)(api),
       moveToLayout: (0, _moveToLayout.moveToLayout)(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           var currMeta = tr.getMeta(_main.key);
           tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             activeNode: {
@@ -105,9 +124,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       toggleBlockMenu: function toggleBlockMenu(options) {
-        return function (_ref4) {
+        return function (_ref6) {
           var _api$userIntent, _api$blockControls, _options$anchorName, _api$blockControls2;
-          var tr = _ref4.tr;
+          var tr = _ref6.tr;
           if (!(0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
             return tr;
           }
@@ -212,9 +231,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref5) {
+        return function (_ref7) {
           var _api$userIntent6;
-          var tr = _ref5.tr;
+          var tr = _ref7.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -244,9 +263,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref6) {
+        return function (_ref8) {
           var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
-          var tr = _ref6.tr;
+          var tr = _ref8.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -292,8 +311,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
-        return function (_ref7) {
-          var tr = _ref7.tr;
+        return function (_ref9) {
+          var tr = _ref9.tr;
           var currMeta = tr.getMeta(_main.key);
           return tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isSelectedViaDragHandle: isSelectedViaDragHandle

package/dist/cjs/pm-plugins/utils/expand-and-update-selection.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandAndUpdateSelection = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _getSelection = require("./getSelection");
+var _selection2 = require("./selection");
+var isPosWithinRange = function isPosWithinRange(pos, range) {
+  return range.start <= pos && range.end >= pos + 1;
+};
+/**
+ * Expands the current selection to encompass the full block range
+ * starting from the given resolved position.
+ */
+var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
+  var selection = _ref.selection,
+    doc = _ref.doc,
+    resolvedStartPos = _ref.resolvedStartPos,
+    isShiftPressed = _ref.isShiftPressed;
+  // 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;
+  var adjusted = isShiftPressed ? {
+    $from: $from,
+    $to: $to
+  } : (0, _selection2.adjustSelectionBoundsForEdgePositions)($from, $to);
+  return (0, _selection.expandToBlockRange)(adjusted.$from, adjusted.$to);
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+var expandAndUpdateSelection = exports.expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
+  var tr = _ref2.tr,
+    selection = _ref2.selection,
+    startPos = _ref2.startPos,
+    isShiftPressed = _ref2.isShiftPressed,
+    nodeType = _ref2.nodeType,
+    api = _ref2.api;
+  var resolvedStartPos = tr.doc.resolve(startPos);
+  var expandedRange = getExpandedSelectionRange({
+    doc: tr.doc,
+    selection: selection,
+    resolvedStartPos: resolvedStartPos,
+    isShiftPressed: isShiftPressed
+  });
+
+  // Set selection to expanded selection range if it encompasses the clicked drag handle
+  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && (0, _selection.isMultiBlockRange)(expandedRange.range)) {
+    // Then create a selection from the start of the first node to the end of the last node
+    tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
+  } else if (nodeType === 'table') {
+    (0, _utils.selectTableClosestToPos)(tr, tr.doc.resolve(startPos + 1));
+  } else {
+    // Select the clicked drag handle's node only
+    (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
+  }
+};

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

@@ -17,12 +17,10 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
-var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
-var _utils2 = require("@atlaskit/editor-tables/utils");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -37,8 +35,9 @@ var _main = require("../pm-plugins/main");
 var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
+var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _selection2 = require("../pm-plugins/utils/selection");
+var _selection = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
@@ -340,73 +339,18 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
-var isPosWithinRange = function isPosWithinRange(pos, range) {
-  return range.start <= pos && range.end >= pos + 1;
-};
-/**
- * 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;
-  // 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;
-  var adjusted = isShiftPressed ? {
-    $from: $from,
-    $to: $to
-  } : (0, _selection2.adjustSelectionBoundsForEdgePositions)($from, $to);
-  return (0, _selection.expandToBlockRange)(adjusted.$from, adjusted.$to);
-};
-/**
- * Updates the transaction with preserved selection logic.
- * Sets selection to expanded selection range if it encompasses the clicked drag handle,
- * otherwise selects the clicked drag handle's node only.
- */
-var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
-  var tr = _ref2.tr,
-    selection = _ref2.selection,
-    startPos = _ref2.startPos,
-    isShiftPressed = _ref2.isShiftPressed,
-    nodeType = _ref2.nodeType,
-    api = _ref2.api;
-  var resolvedStartPos = tr.doc.resolve(startPos);
-  var expandedRange = getExpandedSelectionRange({
-    doc: tr.doc,
-    selection: selection,
-    resolvedStartPos: resolvedStartPos,
-    isShiftPressed: isShiftPressed
-  });
-
-  // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && (0, _selection.isMultiBlockRange)(expandedRange.range)) {
-    // Then create a selection from the start of the first node to the end of the last node
-    tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
-  } else if (nodeType === 'table') {
-    (0, _utils2.selectTableClosestToPos)(tr, tr.doc.resolve(startPos + 1));
-  } else {
-    // Select the clicked drag handle's node only
-    (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
-  }
-};
-var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
+var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   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 = _ref.view,
+    api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    getPos = _ref.getPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    handleOptions = _ref.handleOptions,
+    _ref$isTopLevelNode = _ref.isTopLevelNode,
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
+    anchorRectCache = _ref.anchorRectCache;
   var buttonRef = (0, _react.useRef)(null);
   var mouseDownRef = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
@@ -521,9 +465,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   }, []);
   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 (_ref2) {
       var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
-      var tr = _ref4.tr;
+      var tr = _ref2.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -540,7 +484,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      expandAndUpdateSelection({
+      (0, _expandAndUpdateSelection.expandAndUpdateSelection)({
         tr: tr,
         selection: selection,
         startPos: startPos,
@@ -572,9 +516,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 (_ref3) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref5.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -585,8 +529,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
       } else if (isTopLevelNodeValue && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
         tr.setSelection(selectionWithExpandedHead);
         api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
           tr: tr
@@ -614,8 +558,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 (_ref4) {
+        var tr = _ref4.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -649,14 +593,14 @@ 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 (_ref5) {
         var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
-        var tr = _ref7.tr;
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
         var selection = ((_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) || tr.selection;
-        expandAndUpdateSelection({
+        (0, _expandAndUpdateSelection.expandAndUpdateSelection)({
           tr: tr,
           selection: selection,
           startPos: startPos,
@@ -707,13 +651,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref8.nativeSetDragImage;
+        var nativeSetDragImage = _ref6.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 (_ref9) {
-            var tr = _ref9.tr;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -791,8 +735,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
               };
             }
           },
-          render: function render(_ref0) {
-            var container = _ref0.container;
+          render: function render(_ref8) {
+            var container = _ref8.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -828,9 +772,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 (_ref1) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref9) {
           var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
-          var tr = _ref1.tr;
+          var tr = _ref9.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -1235,16 +1179,16 @@ 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(_ref10) {
-  var view = _ref10.view,
-    api = _ref10.api,
-    formatMessage = _ref10.formatMessage,
-    getPos = _ref10.getPos,
-    anchorName = _ref10.anchorName,
-    nodeType = _ref10.nodeType,
-    handleOptions = _ref10.handleOptions,
-    isTopLevelNode = _ref10.isTopLevelNode,
-    anchorRectCache = _ref10.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    isTopLevelNode = _ref0.isTopLevelNode,
+    anchorRectCache = _ref0.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {

package/dist/es2019/blockControlsPlugin.js

@@ -16,6 +16,7 @@ import { createPlugin, key } from './pm-plugins/main';
 import { startPreservingSelection, stopPreservingSelection } from './pm-plugins/selection-preservation/editor-commands';
 import { selectionPreservationPluginKey } from './pm-plugins/selection-preservation/plugin-key';
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
+import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const blockControlsPlugin = ({
@@ -70,6 +71,24 @@ export const blockControlsPlugin = ({
       return pmPlugins;
     },
     commands: {
+      expandAndUpdateSelection: ({
+        startPos,
+        selection,
+        isShiftPressed,
+        nodeType
+      }) => ({
+        tr
+      }) => {
+        expandAndUpdateSelection({
+          tr,
+          selection,
+          startPos,
+          isShiftPressed,
+          nodeType,
+          api: api
+        });
+        return tr;
+      },
       moveNode: moveNode(api),
       moveToLayout: moveToLayout(api),
       showDragHandleAt: (pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) => ({

package/dist/es2019/pm-plugins/utils/expand-and-update-selection.js

@@ -0,0 +1,65 @@
+import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
+import { selectNode } from './getSelection';
+import { adjustSelectionBoundsForEdgePositions } from './selection';
+const isPosWithinRange = (pos, range) => {
+  return range.start <= pos && range.end >= pos + 1;
+};
+/**
+ * Expands the current selection to encompass the full block range
+ * starting from the given resolved position.
+ */
+const getExpandedSelectionRange = ({
+  selection,
+  doc,
+  resolvedStartPos,
+  isShiftPressed
+}) => {
+  // 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;
+  const adjusted = isShiftPressed ? {
+    $from,
+    $to
+  } : adjustSelectionBoundsForEdgePositions($from, $to);
+  return expandToBlockRange(adjusted.$from, adjusted.$to);
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+export const expandAndUpdateSelection = ({
+  tr,
+  selection,
+  startPos,
+  isShiftPressed,
+  nodeType,
+  api
+}) => {
+  const resolvedStartPos = tr.doc.resolve(startPos);
+  const expandedRange = getExpandedSelectionRange({
+    doc: tr.doc,
+    selection,
+    resolvedStartPos,
+    isShiftPressed
+  });
+
+  // Set selection to expanded selection range if it encompasses the clicked drag handle
+  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
+    // Then create a selection from the start of the first node to the end of the last node
+    tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
+  } else if (nodeType === 'table') {
+    selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
+  } else {
+    // Select the clicked drag handle's node only
+    selectNode(tr, startPos, nodeType, api);
+  }
+};

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

@@ -13,12 +13,10 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
-import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
-import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -34,8 +32,9 @@ import { key } from '../pm-plugins/main';
 import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
+import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { adjustSelectionBoundsForEdgePositions, alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
+import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { DragHandleNestedIcon } from './drag-handle-nested-icon';
 import { dragPreview } from './drag-preview';
@@ -334,63 +333,6 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-const isPosWithinRange = (pos, range) => {
-  return range.start <= pos && range.end >= pos + 1;
-};
-/**
- * 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
-}) => {
-  // 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;
-  const adjusted = isShiftPressed ? {
-    $from,
-    $to
-  } : adjustSelectionBoundsForEdgePositions($from, $to);
-  return expandToBlockRange(adjusted.$from, adjusted.$to);
-};
-/**
- * Updates the transaction with preserved selection logic.
- * Sets selection to expanded selection range if it encompasses the clicked drag handle,
- * otherwise selects the clicked drag handle's node only.
- */
-const expandAndUpdateSelection = ({
-  tr,
-  selection,
-  startPos,
-  isShiftPressed,
-  nodeType,
-  api
-}) => {
-  const resolvedStartPos = tr.doc.resolve(startPos);
-  const expandedRange = getExpandedSelectionRange({
-    doc: tr.doc,
-    selection,
-    resolvedStartPos,
-    isShiftPressed
-  });
-
-  // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
-    // Then create a selection from the start of the first node to the end of the last node
-    tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
-  } else if (nodeType === 'table') {
-    selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
-  } else {
-    // Select the clicked drag handle's node only
-    selectNode(tr, startPos, nodeType, api);
-  }
-};
 export const DragHandle = ({
   view,
   api,

package/dist/esm/blockControlsPlugin.js

@@ -19,6 +19,7 @@ import { createPlugin, key } from './pm-plugins/main';
 import { startPreservingSelection as _startPreservingSelection, stopPreservingSelection as _stopPreservingSelection } from './pm-plugins/selection-preservation/editor-commands';
 import { selectionPreservationPluginKey } from './pm-plugins/selection-preservation/plugin-key';
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
+import { expandAndUpdateSelection as _expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
@@ -77,11 +78,29 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       return pmPlugins;
     },
     commands: {
+      expandAndUpdateSelection: function expandAndUpdateSelection(_ref3) {
+        var startPos = _ref3.startPos,
+          selection = _ref3.selection,
+          isShiftPressed = _ref3.isShiftPressed,
+          nodeType = _ref3.nodeType;
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          _expandAndUpdateSelection({
+            tr: tr,
+            selection: selection,
+            startPos: startPos,
+            isShiftPressed: isShiftPressed,
+            nodeType: nodeType,
+            api: api
+          });
+          return tr;
+        };
+      },
       moveNode: moveNode(api),
       moveToLayout: moveToLayout(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           var currMeta = tr.getMeta(key);
           tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
             activeNode: {
@@ -98,9 +117,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       toggleBlockMenu: function toggleBlockMenu(options) {
-        return function (_ref4) {
+        return function (_ref6) {
           var _api$userIntent, _api$blockControls, _options$anchorName, _api$blockControls2;
-          var tr = _ref4.tr;
+          var tr = _ref6.tr;
           if (!editorExperiment('platform_editor_block_menu', true)) {
             return tr;
           }
@@ -205,9 +224,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref5) {
+        return function (_ref7) {
           var _api$userIntent6;
-          var tr = _ref5.tr;
+          var tr = _ref7.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -237,9 +256,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref6) {
+        return function (_ref8) {
           var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
-          var tr = _ref6.tr;
+          var tr = _ref8.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -285,8 +304,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
-        return function (_ref7) {
-          var tr = _ref7.tr;
+        return function (_ref9) {
+          var tr = _ref9.tr;
           var currMeta = tr.getMeta(key);
           return tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isSelectedViaDragHandle: isSelectedViaDragHandle

package/dist/esm/pm-plugins/utils/expand-and-update-selection.js

@@ -0,0 +1,63 @@
+import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
+import { selectNode } from './getSelection';
+import { adjustSelectionBoundsForEdgePositions } from './selection';
+var isPosWithinRange = function isPosWithinRange(pos, range) {
+  return range.start <= pos && range.end >= pos + 1;
+};
+/**
+ * Expands the current selection to encompass the full block range
+ * starting from the given resolved position.
+ */
+var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
+  var selection = _ref.selection,
+    doc = _ref.doc,
+    resolvedStartPos = _ref.resolvedStartPos,
+    isShiftPressed = _ref.isShiftPressed;
+  // 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;
+  var adjusted = isShiftPressed ? {
+    $from: $from,
+    $to: $to
+  } : adjustSelectionBoundsForEdgePositions($from, $to);
+  return expandToBlockRange(adjusted.$from, adjusted.$to);
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+export var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
+  var tr = _ref2.tr,
+    selection = _ref2.selection,
+    startPos = _ref2.startPos,
+    isShiftPressed = _ref2.isShiftPressed,
+    nodeType = _ref2.nodeType,
+    api = _ref2.api;
+  var resolvedStartPos = tr.doc.resolve(startPos);
+  var expandedRange = getExpandedSelectionRange({
+    doc: tr.doc,
+    selection: selection,
+    resolvedStartPos: resolvedStartPos,
+    isShiftPressed: isShiftPressed
+  });
+
+  // Set selection to expanded selection range if it encompasses the clicked drag handle
+  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
+    // Then create a selection from the start of the first node to the end of the last node
+    tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
+  } else if (nodeType === 'table') {
+    selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
+  } else {
+    // Select the clicked drag handle's node only
+    selectNode(tr, startPos, nodeType, api);
+  }
+};

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

@@ -18,12 +18,10 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
-import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
-import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -39,8 +37,9 @@ import { key } from '../pm-plugins/main';
 import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
+import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { adjustSelectionBoundsForEdgePositions, alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
+import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { DragHandleNestedIcon } from './drag-handle-nested-icon';
 import { dragPreview } from './drag-preview';
@@ -336,73 +335,18 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-var isPosWithinRange = function isPosWithinRange(pos, range) {
-  return range.start <= pos && range.end >= pos + 1;
-};
-/**
- * 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;
-  // 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;
-  var adjusted = isShiftPressed ? {
-    $from: $from,
-    $to: $to
-  } : adjustSelectionBoundsForEdgePositions($from, $to);
-  return expandToBlockRange(adjusted.$from, adjusted.$to);
-};
-/**
- * Updates the transaction with preserved selection logic.
- * Sets selection to expanded selection range if it encompasses the clicked drag handle,
- * otherwise selects the clicked drag handle's node only.
- */
-var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
-  var tr = _ref2.tr,
-    selection = _ref2.selection,
-    startPos = _ref2.startPos,
-    isShiftPressed = _ref2.isShiftPressed,
-    nodeType = _ref2.nodeType,
-    api = _ref2.api;
-  var resolvedStartPos = tr.doc.resolve(startPos);
-  var expandedRange = getExpandedSelectionRange({
-    doc: tr.doc,
-    selection: selection,
-    resolvedStartPos: resolvedStartPos,
-    isShiftPressed: isShiftPressed
-  });
-
-  // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
-    // Then create a selection from the start of the first node to the end of the last node
-    tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
-  } else if (nodeType === 'table') {
-    selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
-  } else {
-    // Select the clicked drag handle's node only
-    selectNode(tr, startPos, nodeType, api);
-  }
-};
-export var DragHandle = function DragHandle(_ref3) {
+export var DragHandle = function DragHandle(_ref) {
   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 = _ref.view,
+    api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    getPos = _ref.getPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    handleOptions = _ref.handleOptions,
+    _ref$isTopLevelNode = _ref.isTopLevelNode,
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
+    anchorRectCache = _ref.anchorRectCache;
   var buttonRef = useRef(null);
   var mouseDownRef = useRef(false);
   var _useState = useState(false),
@@ -517,9 +461,9 @@ export var DragHandle = function DragHandle(_ref3) {
   }, []);
   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 (_ref2) {
       var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
-      var tr = _ref4.tr;
+      var tr = _ref2.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -568,9 +512,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 (_ref3) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref5.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -610,8 +554,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 (_ref4) {
+        var tr = _ref4.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -645,9 +589,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 (_ref5) {
         var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
-        var tr = _ref7.tr;
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -703,13 +647,13 @@ export var DragHandle = function DragHandle(_ref3) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref8.nativeSetDragImage;
+        var nativeSetDragImage = _ref6.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 (_ref9) {
-            var tr = _ref9.tr;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -787,8 +731,8 @@ export var DragHandle = function DragHandle(_ref3) {
               };
             }
           },
-          render: function render(_ref0) {
-            var container = _ref0.container;
+          render: function render(_ref8) {
+            var container = _ref8.container;
             var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -824,9 +768,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 (_ref1) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref9) {
           var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
-          var tr = _ref1.tr;
+          var tr = _ref9.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -1231,16 +1175,16 @@ export var DragHandle = function DragHandle(_ref3) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-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,
-    isTopLevelNode = _ref10.isTopLevelNode,
-    anchorRectCache = _ref10.anchorRectCache;
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    isTopLevelNode = _ref0.isTopLevelNode,
+    anchorRectCache = _ref0.anchorRectCache;
   var rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {

package/dist/types/blockControlsPluginType.d.ts

@@ -165,6 +165,20 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         unregisterNodeDecoration: (type: string) => void;
     };
     commands: {
+        /**
+         * Updates the transaction's selection based on the clicked drag handle position.
+         *
+         * - If the clicked handle is within an existing multi-block selection range, the selection
+         *   is expanded to cover both the existing range and the clicked node's range.
+         * - For tables, a table cell selection is used.
+         * - Otherwise, selects the single node at the clicked handle position.
+         */
+        expandAndUpdateSelection: (options: {
+            isShiftPressed: boolean;
+            nodeType: string;
+            selection: Selection;
+            startPos: number;
+        }) => EditorCommand;
         handleKeyDownWithPreservedSelection: (event: KeyboardEvent) => EditorCommand;
         mapPreservedSelection: (mapping: Mapping) => EditorCommand;
         moveNode: MoveNode;

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

@@ -0,0 +1,20 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Selection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { BlockControlsPlugin } from '../../blockControlsPluginType';
+export type ExpandAndUpdateSelectionOptions = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    isShiftPressed: boolean;
+    nodeType: string;
+    selection: Selection;
+    startPos: number;
+    tr: Transaction;
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+export declare const expandAndUpdateSelection: ({ tr, selection, startPos, isShiftPressed, nodeType, api, }: ExpandAndUpdateSelectionOptions) => void;

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

@@ -26,8 +26,8 @@ export declare const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
 export declare const QUICK_INSERT_HEIGHT = 24;
 export declare const QUICK_INSERT_WIDTH = 24;
 export declare const QUICK_INSERT_DIMENSIONS: {
-    width: number;
     height: number;
+    width: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;

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

@@ -167,6 +167,20 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         unregisterNodeDecoration: (type: string) => void;
     };
     commands: {
+        /**
+         * Updates the transaction's selection based on the clicked drag handle position.
+         *
+         * - If the clicked handle is within an existing multi-block selection range, the selection
+         *   is expanded to cover both the existing range and the clicked node's range.
+         * - For tables, a table cell selection is used.
+         * - Otherwise, selects the single node at the clicked handle position.
+         */
+        expandAndUpdateSelection: (options: {
+            isShiftPressed: boolean;
+            nodeType: string;
+            selection: Selection;
+            startPos: number;
+        }) => EditorCommand;
         handleKeyDownWithPreservedSelection: (event: KeyboardEvent) => EditorCommand;
         mapPreservedSelection: (mapping: Mapping) => EditorCommand;
         moveNode: MoveNode;

package/dist/types-ts4.5/pm-plugins/utils/expand-and-update-selection.d.ts

@@ -0,0 +1,20 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Selection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { BlockControlsPlugin } from '../../blockControlsPluginType';
+export type ExpandAndUpdateSelectionOptions = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    isShiftPressed: boolean;
+    nodeType: string;
+    selection: Selection;
+    startPos: number;
+    tr: Transaction;
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+export declare const expandAndUpdateSelection: ({ tr, selection, startPos, isShiftPressed, nodeType, api, }: ExpandAndUpdateSelectionOptions) => void;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -26,8 +26,8 @@ export declare const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
 export declare const QUICK_INSERT_HEIGHT = 24;
 export declare const QUICK_INSERT_WIDTH = 24;
 export declare const QUICK_INSERT_DIMENSIONS: {
-    width: number;
     height: number;
+    width: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.0.32",
+	"version": "9.1.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^53.0.0",
+		"@atlaskit/tmp-editor-statsig": "^54.0.0",
 		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.15.0",
+		"@atlaskit/editor-common": "^112.16.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"