@atlaskit/editor-plugin-block-controls 8.0.1 → 8.0.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.0.3
+
+### Patch Changes
+
+- [`fabf67c3ca239`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fabf67c3ca239) -
+  EDITOR-4191 Use node selection for all nodes selected via drag handle
+
+## 8.0.2
+
+### Patch Changes
+
+- [`4bf196f8645a7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bf196f8645a7) -
+  Editor-4011: Added util function isMultiNodeSelection
+- Updated dependencies
+
 ## 8.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.handleMouseOver = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _selection = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -177,19 +178,9 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       if (toolbarFlagsEnabled) {
         if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
           var _selectionPreservatio;
-          var selection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-          var nodeTypes = [];
-          selection === null || selection === void 0 || selection.$from.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
-            if (pos < selection.from) {
-              // ignore parent node
-              return true;
-            }
-            nodeTypes.push(node.type.name);
-
-            // only care about the top level (relatively in the range) nodes
-            return false;
-          });
-          var isMultipleSelected = nodeTypes.length > 1;
+          var preservedSelection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+          var selection = preservedSelection || view.state.selection;
+          var isMultipleSelected = selection && (0, _selection.isMultiBlockSelection)(selection);
 
           // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
           // as when it is a multi-selection, the showDragHandleAt command interfere with selection

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = exports.collapseToSelectionRange = void 0;
+exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
 var _selection2 = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -86,22 +86,22 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    // if mediaGroup only has a single child, we want to select the child
+    if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
+      var $mediaStartPos = doc.resolve(start + 1);
+      return new _state.NodeSelection($mediaStartPos);
+    }
+    return new _state.NodeSelection(doc.resolve(start));
+  }
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
     return false;
   }
-  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
-  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
-
-  // if block menu and empty line format menu are enabled,
-  // we want to set the selection to avoid the selection goes to the top of the document
-  if ((isParagraphHeadingEmpty || isListEmpty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
-    return _state.TextSelection.create(doc, start + 1, start + 1);
-  }
   var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
   var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
-  if (isNodeSelection && (nodeName !== 'blockquote' || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
+  if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
   // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
   ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
     return new _state.NodeSelection(doc.resolve(start));
@@ -109,10 +109,10 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
 
   // if mediaGroup only has a single child, we want to select the child
   if (nodeName === 'mediaGroup') {
-    var $mediaStartPos = doc.resolve(start + 1);
-    return new _state.NodeSelection($mediaStartPos);
+    var _$mediaStartPos = doc.resolve(start + 1);
+    return new _state.NodeSelection(_$mediaStartPos);
   }
-  if (nodeName === 'taskList' && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'taskList') {
     return _state.TextSelection.create(doc, start, start + nodeSize);
   }
   var _getInlineNodePos2 = getInlineNodePos(doc, start, nodeSize),
@@ -121,7 +121,7 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
   return new _state.TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
 };
 var getSelection = exports.getSelection = function getSelection(tr, start, api) {
-  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
+  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
     return newGetSelection(tr.doc, tr.selection.empty, start);
   }
   return oldGetSelection(tr, start);
@@ -219,30 +219,4 @@ var rootTaskListDepth = exports.rootTaskListDepth = function rootTaskListDepth(t
     }
   }
   return depth;
-};
-
-/**
- * Collapses the given $from and $to resolved positions to the nearest valid selection range.
- *
- * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
- *
- * @param $from the resolved start position
- * @param $to the resolved end position
- * @returns An object containing the collapsed $from and $to resolved positions
- */
-var collapseToSelectionRange = exports.collapseToSelectionRange = function collapseToSelectionRange($from, $to) {
-  var _$to$nodeBefore$nodeS, _$to$nodeBefore;
-  // Get the selections that would be made for the first and last node in the range
-  // We re-use the getSelection logic as it already handles various node types and edge cases
-  // always pass true for selectionEmpty to emulate a cursor selection within the node
-  var firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
-  var lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
-  var lastNodeStartPos = $to.pos - lastNodeSize;
-  var lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
-
-  // Return a selection spanning from the start of the first node selection to the end of the last node selection
-  return {
-    $from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
-    $to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
-  };
 };

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

@@ -7,7 +7,6 @@ exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMu
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _main = require("../main");
-var _getSelection = require("./getSelection");
 var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -112,11 +111,8 @@ var mapPreservedSelection = exports.mapPreservedSelection = function mapPreserve
     if (isSelectionEmpty && expandedSelectionEmpty) {
       return _state.TextSelection.create(tr.doc, from);
     }
-
-    // collapse the expanded range to a valid selection range
-    var _collapseToSelectionR = (0, _getSelection.collapseToSelectionRange)(expanded.$from, expanded.$to),
-      $from = _collapseToSelectionR.$from,
-      $to = _collapseToSelectionR.$to;
+    var $from = expanded.$from,
+      $to = expanded.$to;
 
     // stop preserving if preserved selection becomes invalid
     if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {

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

@@ -23,6 +23,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 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");
@@ -339,23 +340,6 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
-var isMultiNodeRange = function isMultiNodeRange(range) {
-  if (range.endIndex - range.startIndex <= 1) {
-    return false; // At most one child
-  }
-
-  // Count block nodes in the range, return true if more than one
-  var blockCount = 0;
-  for (var i = range.startIndex; i < range.endIndex; i++) {
-    if (range.parent.child(i).isBlock) {
-      blockCount++;
-    }
-    if (blockCount > 1) {
-      return true;
-    }
-  }
-  return false;
-};
 var isPosWithinRange = function isPosWithinRange(pos, range) {
   return range.start <= pos && range.end >= pos + 1;
 };
@@ -397,11 +381,11 @@ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
   });
 
   // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
-    var collapsed = (0, _getSelection.collapseToSelectionRange)(expandedRange.$from, expandedRange.$to);
-
+  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, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
+    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);

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -1,4 +1,5 @@
 import memoizeOne from 'memoize-one';
+import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -169,19 +170,9 @@ export const handleMouseOver = (view, event, api) => {
       if (toolbarFlagsEnabled) {
         if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
           var _selectionPreservatio;
-          const selection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-          const nodeTypes = [];
-          selection === null || selection === void 0 ? void 0 : selection.$from.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
-            if (pos < selection.from) {
-              // ignore parent node
-              return true;
-            }
-            nodeTypes.push(node.type.name);
-
-            // only care about the top level (relatively in the range) nodes
-            return false;
-          });
-          const isMultipleSelected = nodeTypes.length > 1;
+          const preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+          const selection = preservedSelection || view.state.selection;
+          const isMultipleSelected = selection && isMultiBlockSelection(selection);
 
           // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
           // as when it is a multi-selection, the showDragHandleAt command interfere with selection

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

@@ -81,22 +81,22 @@ const newGetSelection = (doc, selectionEmpty, start) => {
   const isNodeSelection = node && NodeSelection.isSelectable(node);
   const nodeSize = node ? node.nodeSize : 1;
   const nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // if mediaGroup only has a single child, we want to select the child
+    if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
+      const $mediaStartPos = doc.resolve(start + 1);
+      return new NodeSelection($mediaStartPos);
+    }
+    return new NodeSelection(doc.resolve(start));
+  }
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
     return false;
   }
-  const isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
-  const isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
-
-  // if block menu and empty line format menu are enabled,
-  // we want to set the selection to avoid the selection goes to the top of the document
-  if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
-    return TextSelection.create(doc, start + 1, start + 1);
-  }
   const isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
   const isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
-  if (isNodeSelection && (nodeName !== 'blockquote' || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
+  if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
   // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
   ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
     return new NodeSelection(doc.resolve(start));
@@ -107,7 +107,7 @@ const newGetSelection = (doc, selectionEmpty, start) => {
     const $mediaStartPos = doc.resolve(start + 1);
     return new NodeSelection($mediaStartPos);
   }
-  if (nodeName === 'taskList' && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'taskList') {
     return TextSelection.create(doc, start, start + nodeSize);
   }
   const {
@@ -117,7 +117,7 @@ const newGetSelection = (doc, selectionEmpty, start) => {
   return new TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
 };
 export const getSelection = (tr, start, api) => {
-  if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
+  if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
     return newGetSelection(tr.doc, tr.selection.empty, start);
   }
   return oldGetSelection(tr, start);
@@ -216,30 +216,4 @@ export const rootTaskListDepth = taskListPos => {
     }
   }
   return depth;
-};
-
-/**
- * Collapses the given $from and $to resolved positions to the nearest valid selection range.
- *
- * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
- *
- * @param $from the resolved start position
- * @param $to the resolved end position
- * @returns An object containing the collapsed $from and $to resolved positions
- */
-export const collapseToSelectionRange = ($from, $to) => {
-  var _$to$nodeBefore$nodeS, _$to$nodeBefore;
-  // Get the selections that would be made for the first and last node in the range
-  // We re-use the getSelection logic as it already handles various node types and edge cases
-  // always pass true for selectionEmpty to emulate a cursor selection within the node
-  const firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
-  const lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
-  const lastNodeStartPos = $to.pos - lastNodeSize;
-  const lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
-
-  // Return a selection spanning from the start of the first node selection to the end of the last node selection
-  return {
-    $from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
-    $to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
-  };
 };

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

@@ -1,7 +1,6 @@
 import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBlockControlsMeta, key } from '../main';
-import { collapseToSelectionRange } from './getSelection';
 export const getMultiSelectionIfPosInside = (api, pos, tr) => {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   const pluginState = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -108,12 +107,10 @@ export const mapPreservedSelection = (selection, tr) => {
     if (isSelectionEmpty && expandedSelectionEmpty) {
       return TextSelection.create(tr.doc, from);
     }
-
-    // collapse the expanded range to a valid selection range
     const {
       $from,
       $to
-    } = collapseToSelectionRange(expanded.$from, expanded.$to);
+    } = expanded;
 
     // stop preserving if preserved selection becomes invalid
     if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {

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

@@ -14,12 +14,13 @@ 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 } from '@atlaskit/editor-common/selection';
+import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 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';
@@ -35,7 +36,7 @@ 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 { collapseToSelectionRange, isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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 { dragPreview } from './drag-preview';
@@ -334,23 +335,6 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-const isMultiNodeRange = range => {
-  if (range.endIndex - range.startIndex <= 1) {
-    return false; // At most one child
-  }
-
-  // Count block nodes in the range, return true if more than one
-  let blockCount = 0;
-  for (let i = range.startIndex; i < range.endIndex; i++) {
-    if (range.parent.child(i).isBlock) {
-      blockCount++;
-    }
-    if (blockCount > 1) {
-      return true;
-    }
-  }
-  return false;
-};
 const isPosWithinRange = (pos, range) => {
   return range.start <= pos && range.end >= pos + 1;
 };
@@ -394,11 +378,11 @@ const expandAndUpdateSelection = ({
   });
 
   // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
-    const collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
-
+  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, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
+    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/pm-plugins/handle-mouse-over.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import memoizeOne from 'memoize-one';
+import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -170,19 +171,9 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       if (toolbarFlagsEnabled) {
         if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
           var _selectionPreservatio;
-          var selection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-          var nodeTypes = [];
-          selection === null || selection === void 0 || selection.$from.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
-            if (pos < selection.from) {
-              // ignore parent node
-              return true;
-            }
-            nodeTypes.push(node.type.name);
-
-            // only care about the top level (relatively in the range) nodes
-            return false;
-          });
-          var isMultipleSelected = nodeTypes.length > 1;
+          var preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+          var selection = preservedSelection || view.state.selection;
+          var isMultipleSelected = selection && isMultiBlockSelection(selection);
 
           // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
           // as when it is a multi-selection, the showDragHandleAt command interfere with selection

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

@@ -80,22 +80,22 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
   var isNodeSelection = node && NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // if mediaGroup only has a single child, we want to select the child
+    if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
+      var $mediaStartPos = doc.resolve(start + 1);
+      return new NodeSelection($mediaStartPos);
+    }
+    return new NodeSelection(doc.resolve(start));
+  }
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
     return false;
   }
-  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
-  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
-
-  // if block menu and empty line format menu are enabled,
-  // we want to set the selection to avoid the selection goes to the top of the document
-  if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
-    return TextSelection.create(doc, start + 1, start + 1);
-  }
   var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
   var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
-  if (isNodeSelection && (nodeName !== 'blockquote' || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
+  if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
   // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
   ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
     return new NodeSelection(doc.resolve(start));
@@ -103,10 +103,10 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
 
   // if mediaGroup only has a single child, we want to select the child
   if (nodeName === 'mediaGroup') {
-    var $mediaStartPos = doc.resolve(start + 1);
-    return new NodeSelection($mediaStartPos);
+    var _$mediaStartPos = doc.resolve(start + 1);
+    return new NodeSelection(_$mediaStartPos);
   }
-  if (nodeName === 'taskList' && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'taskList') {
     return TextSelection.create(doc, start, start + nodeSize);
   }
   var _getInlineNodePos2 = getInlineNodePos(doc, start, nodeSize),
@@ -115,7 +115,7 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
   return new TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
 };
 export var getSelection = function getSelection(tr, start, api) {
-  if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
+  if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
     return newGetSelection(tr.doc, tr.selection.empty, start);
   }
   return oldGetSelection(tr, start);
@@ -213,30 +213,4 @@ export var rootTaskListDepth = function rootTaskListDepth(taskListPos) {
     }
   }
   return depth;
-};
-
-/**
- * Collapses the given $from and $to resolved positions to the nearest valid selection range.
- *
- * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
- *
- * @param $from the resolved start position
- * @param $to the resolved end position
- * @returns An object containing the collapsed $from and $to resolved positions
- */
-export var collapseToSelectionRange = function collapseToSelectionRange($from, $to) {
-  var _$to$nodeBefore$nodeS, _$to$nodeBefore;
-  // Get the selections that would be made for the first and last node in the range
-  // We re-use the getSelection logic as it already handles various node types and edge cases
-  // always pass true for selectionEmpty to emulate a cursor selection within the node
-  var firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
-  var lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
-  var lastNodeStartPos = $to.pos - lastNodeSize;
-  var lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
-
-  // Return a selection spanning from the start of the first node selection to the end of the last node selection
-  return {
-    $from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
-    $to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
-  };
 };

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

@@ -1,7 +1,6 @@
 import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBlockControlsMeta, key } from '../main';
-import { collapseToSelectionRange } from './getSelection';
 export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -106,11 +105,8 @@ export var mapPreservedSelection = function mapPreservedSelection(selection, tr)
     if (isSelectionEmpty && expandedSelectionEmpty) {
       return TextSelection.create(tr.doc, from);
     }
-
-    // collapse the expanded range to a valid selection range
-    var _collapseToSelectionR = collapseToSelectionRange(expanded.$from, expanded.$to),
-      $from = _collapseToSelectionR.$from,
-      $to = _collapseToSelectionR.$to;
+    var $from = expanded.$from,
+      $to = expanded.$to;
 
     // stop preserving if preserved selection becomes invalid
     if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {

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

@@ -19,12 +19,13 @@ 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 } from '@atlaskit/editor-common/selection';
+import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 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';
@@ -40,7 +41,7 @@ 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 { collapseToSelectionRange, isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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 { dragPreview } from './drag-preview';
@@ -336,23 +337,6 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-var isMultiNodeRange = function isMultiNodeRange(range) {
-  if (range.endIndex - range.startIndex <= 1) {
-    return false; // At most one child
-  }
-
-  // Count block nodes in the range, return true if more than one
-  var blockCount = 0;
-  for (var i = range.startIndex; i < range.endIndex; i++) {
-    if (range.parent.child(i).isBlock) {
-      blockCount++;
-    }
-    if (blockCount > 1) {
-      return true;
-    }
-  }
-  return false;
-};
 var isPosWithinRange = function isPosWithinRange(pos, range) {
   return range.start <= pos && range.end >= pos + 1;
 };
@@ -394,11 +378,11 @@ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
   });
 
   // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
-    var collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
-
+  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, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
+    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/types/pm-plugins/utils/getSelection.d.ts

@@ -20,16 +20,3 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
 export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;
-/**
- * Collapses the given $from and $to resolved positions to the nearest valid selection range.
- *
- * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
- *
- * @param $from the resolved start position
- * @param $to the resolved end position
- * @returns An object containing the collapsed $from and $to resolved positions
- */
-export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
-    $from: ResolvedPos;
-    $to: ResolvedPos;
-};

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

@@ -20,16 +20,3 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
 export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;
-/**
- * Collapses the given $from and $to resolved positions to the nearest valid selection range.
- *
- * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
- *
- * @param $from the resolved start position
- * @param $to the resolved end position
- * @returns An object containing the collapsed $from and $to resolved positions
- */
-export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
-    $from: ResolvedPos;
-    $to: ResolvedPos;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "8.0.1",
+	"version": "8.0.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,14 +47,14 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@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": "^17.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.3.0",
+		"@atlaskit/tmp-editor-statsig": "^16.4.0",
 		"@atlaskit/tokens": "^9.0.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.0.0",
+		"@atlaskit/editor-common": "^111.2.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"