@atlaskit/editor-plugin-block-controls 8.0.14 → 8.1.0

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

@@ -37,8 +37,9 @@ import { selectionPreservationPluginKey } from '../pm-plugins/selection-preserva
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
+import { adjustSelectionBoundsForEdgePositions, 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';
 import { refreshAnchorName } from './utils/anchor-name';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -354,7 +355,11 @@ const getExpandedSelectionRange = ({
   const selectUp = resolvedStartPos.pos < selection.from;
   const $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
   const $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  return expandToBlockRange($from, $to);
+  const adjusted = isShiftPressed ? {
+    $from,
+    $to
+  } : adjustSelectionBoundsForEdgePositions($from, $to);
+  return expandToBlockRange(adjusted.$from, adjusted.$to);
 };
 /**
  * Updates the transaction with preserved selection logic.
@@ -423,6 +428,24 @@ export const DragHandle = ({
   const start = getPos();
   const isLayoutColumn = nodeType === 'layoutColumn';
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+
+  // Dynamically calculate if node is top-level based on current position (gated by experiment)
+  const isTopLevelNodeDynamic = useMemo(() => {
+    if (!expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true)) {
+      return isTopLevelNode;
+    }
+    const pos = getPos();
+    if (typeof pos === 'number') {
+      const $pos = view.state.doc.resolve(pos);
+      return ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+    }
+    return true;
+  }, [getPos, view.state.doc, isTopLevelNode]);
+
+  // Use the dynamic value when experiment is on, otherwise use the prop
+  // When cleaning up the experiment, you can safely remove the isTopLevelNode as an prop and
+  // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
+  const isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   useEffect(() => {
     if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -513,7 +536,7 @@ export const DragHandle = ({
       const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = selectNode(tr, startPos, nodeType, api);
-      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
+      } else if (isTopLevelNodeValue && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
         const alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
         const selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
@@ -538,7 +561,7 @@ export const DragHandle = ({
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType]);
+  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNodeValue, nodeType]);
   const handleKeyDown = useCallback(e => {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -843,20 +866,20 @@ export const DragHandle = ({
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start)+ ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
         ...bottom
       };
     }
-    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
+    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType),
       ...height
     };
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   const calculatePositionOld = useCallback(() => {
     const pos = getPos();
     const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -891,20 +914,20 @@ export const DragHandle = ({
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
         ...bottom
       };
     }
-    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
+    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType),
       ...height
     };
-  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(() => {
     if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -980,12 +1003,12 @@ export const DragHandle = ({
     }
     const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNodeValue, view]);
   const dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);
@@ -994,7 +1017,7 @@ export const DragHandle = ({
   const dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(blockControlsMessages.dragToMove);
-  let helpDescriptors = isTopLevelNode ? [{
+  let helpDescriptors = isTopLevelNodeValue ? [{
     description: dragHandleMessage
   }, {
     description: formatMessage(blockControlsMessages.moveUp),
@@ -1018,7 +1041,7 @@ export const DragHandle = ({
     keymap: dragToMoveDown
   }];
   let isParentNodeOfTypeLayout;
-  if (!isTopLevelNode) {
+  if (!isTopLevelNodeValue) {
     const pos = getPos();
     if (typeof pos === 'number') {
       var _$pos$parent;
@@ -1095,7 +1118,7 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
     onDragStart: handleIconDragStart
-  }, jsx(DragHandleVerticalIcon, {
+  }, expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
     spacing: "spacious",
     label: "",
     size: "small"
@@ -1108,7 +1131,7 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
   }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
@@ -1122,7 +1145,7 @@ export const DragHandle = ({
       });
     }
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
   }, renderButton()))));
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -1132,9 +1155,9 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
   }, renderButton())));
   const buttonWithTooltip = () => jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
@@ -1161,6 +1184,7 @@ export const DragHandleWithVisibility = ({
   anchorName,
   nodeType,
   handleOptions,
+  isTopLevelNode,
   anchorRectCache
 }) => {
   return jsx(VisibilityContainer, {
@@ -1173,6 +1197,7 @@ export const DragHandleWithVisibility = ({
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

package/dist/esm/blockControlsPlugin.js

@@ -133,7 +133,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           }));
           if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
             var state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
-            if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && fg('platform_editor_toolbar_aifc_user_intent_fix')) {
+            if (state !== null && state !== void 0 && state.isSelectedViaDragHandle) {
               var _api$userIntent4;
               api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
                 tr: tr

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -84,7 +84,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     var getPos = function getPos() {
       try {
         return getPosUnsafe();
-      } catch (e) {
+      } catch (_unused) {
         // Ignore errors from getPosUnsafe
         return undefined;
       }

package/dist/esm/pm-plugins/handle-mouse-down.js

@@ -1,5 +1,4 @@
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export var handleMouseDown = function handleMouseDown(api) {
@@ -39,21 +38,19 @@ export var handleMouseDown = function handleMouseDown(api) {
          * When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
          * causes flickering as this runs before editor-plugin-block-menu.
          */
-        if (fg('platform_editor_toolbar_aifc_user_intent_fix')) {
-          if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
-            // if target is drag handle, block menu will be opened
-            if (!isDragHandle) {
-              var _api$userIntent;
-              api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
-                tr: tr
-              });
-            }
-          } else {
-            var _api$userIntent2;
-            (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
+        if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+          // if target is drag handle, block menu will be opened
+          if (!isDragHandle) {
+            var _api$userIntent;
+            api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
               tr: tr
             });
           }
+        } else {
+          var _api$userIntent2;
+          (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
+            tr: tr
+          });
         }
         return tr;
       });

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

@@ -97,7 +97,58 @@ export var mapPreservedSelection = function mapPreservedSelection(selection, tr)
   }
   return createPreservedSelection(tr.doc.resolve(from), tr.doc.resolve(to));
 };
+var isInsideEmptyTextblock = function isInsideEmptyTextblock($pos) {
+  return $pos.parent.isTextblock && $pos.parent.content.size === 0;
+};
+var isAtEndOfParent = function isAtEndOfParent($pos) {
+  return $pos.parentOffset === $pos.parent.content.size;
+};
+var isAtStartOfParent = function isAtStartOfParent($pos) {
+  return $pos.parentOffset === 0;
+};
 
+/**
+ * Adjust selection bounds to exclude nodes where the selection only touches
+ * the edge position without selecting any content.
+ *
+ * Exception: Don't adjust if the selection is inside an empty textblock,
+ * as we want to include empty paragraphs in block operations.
+ *
+ * @param $from The resolved position of the start of the selection
+ * @param $to The resolved position of the end of the selection
+ * @returns Adjusted $from and $to positions
+ */
+export var adjustSelectionBoundsForEdgePositions = function adjustSelectionBoundsForEdgePositions($from, $to) {
+  var doc = $from.doc;
+
+  // Walk $from forward while at end of ancestors
+  var adjustedFrom = $from;
+  if (!isInsideEmptyTextblock($from)) {
+    while (adjustedFrom.depth > 0 && isAtEndOfParent(adjustedFrom)) {
+      var nextPos = adjustedFrom.after();
+      if (nextPos > doc.content.size || nextPos === adjustedFrom.pos) {
+        break;
+      }
+      adjustedFrom = doc.resolve(nextPos);
+    }
+  }
+
+  // Walk $to backward while at start of ancestors
+  var adjustedTo = $to;
+  if (!isInsideEmptyTextblock($to)) {
+    while (adjustedTo.depth > 0 && isAtStartOfParent(adjustedTo)) {
+      var prevPos = adjustedTo.before();
+      if (prevPos < 0 || prevPos === adjustedTo.pos) {
+        break;
+      }
+      adjustedTo = doc.resolve(prevPos);
+    }
+  }
+  return {
+    $from: adjustedFrom,
+    $to: adjustedTo
+  };
+};
 /**
  * Creates a preserved selection which is expanded to block boundaries.
  *
@@ -113,9 +164,17 @@ export var mapPreservedSelection = function mapPreservedSelection(selection, tr)
 export var createPreservedSelection = function createPreservedSelection($from, $to) {
   var _doc$nodeAt;
   var doc = $from.doc;
+  var isCollapsed = $from.pos === $to.pos;
+  var adjusted = isCollapsed ? {
+    $from: $from,
+    $to: $to
+  } : adjustSelectionBoundsForEdgePositions($from, $to);
+  if (!isCollapsed && adjusted.$from.pos >= adjusted.$to.pos) {
+    return undefined;
+  }
 
   // expand the selection range to block boundaries, so selection always includes whole nodes
-  var expanded = expandToBlockRange($from, $to);
+  var expanded = expandToBlockRange(adjusted.$from, adjusted.$to);
 
   // stop preserving if selection becomes invalid
   if (expanded.$from.pos < 0 || expanded.$to.pos > doc.content.size || expanded.$from.pos >= expanded.$to.pos) {

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

@@ -0,0 +1,57 @@
+/** @jsxRuntime classic */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+var spanStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  flexShrink: 0
+});
+var svgSizeStyles = css({
+  width: '24px',
+  height: '24px'
+});
+var svgStyles = css({
+  color: 'currentColor',
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  verticalAlign: 'bottom'
+});
+
+/**
+ * Custom 3-dot vertical drag handle icon for nested nodes.
+ * Similar to DragHandleVerticalIcon but with only 3 dots instead of 6.
+ * Hardcoded to medium size with spacious spacing.
+ */
+export var DragHandleNestedIcon = function DragHandleNestedIcon() {
+  return jsx("span", {
+    "aria-hidden": true,
+    css: spanStyles
+  }, jsx("svg", {
+    width: 24,
+    height: 24,
+    viewBox: "-4 -4 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "presentation",
+    css: [svgStyles, svgSizeStyles]
+  }, jsx("circle", {
+    cx: "8",
+    cy: "4",
+    r: "1.5",
+    fill: "currentColor"
+  }), jsx("circle", {
+    cx: "8",
+    cy: "8",
+    r: "1.5",
+    fill: "currentColor"
+  }), jsx("circle", {
+    cx: "8",
+    cy: "12",
+    r: "1.5",
+    fill: "currentColor"
+  })));
+};

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

@@ -42,8 +42,9 @@ import { selectionPreservationPluginKey } from '../pm-plugins/selection-preserva
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
+import { adjustSelectionBoundsForEdgePositions, 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';
 import { refreshAnchorName } from './utils/anchor-name';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -355,7 +356,11 @@ var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
   var selectUp = resolvedStartPos.pos < selection.from;
   var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
   var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  return expandToBlockRange($from, $to);
+  var adjusted = isShiftPressed ? {
+    $from: $from,
+    $to: $to
+  } : adjustSelectionBoundsForEdgePositions($from, $to);
+  return expandToBlockRange(adjusted.$from, adjusted.$to);
 };
 /**
  * Updates the transaction with preserved selection logic.
@@ -440,6 +445,24 @@ export var DragHandle = function DragHandle(_ref3) {
   var start = getPos();
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+
+  // Dynamically calculate if node is top-level based on current position (gated by experiment)
+  var isTopLevelNodeDynamic = useMemo(function () {
+    if (!expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true)) {
+      return isTopLevelNode;
+    }
+    var pos = getPos();
+    if (typeof pos === 'number') {
+      var $pos = view.state.doc.resolve(pos);
+      return ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+    }
+    return true;
+  }, [getPos, view.state.doc, isTopLevelNode]);
+
+  // Use the dynamic value when experiment is on, otherwise use the prop
+  // When cleaning up the experiment, you can safely remove the isTopLevelNode as an prop and
+  // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
+  var isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   useEffect(function () {
     if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -530,7 +553,7 @@ export var DragHandle = function DragHandle(_ref3) {
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = selectNode(tr, startPos, nodeType, api);
-      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
+      } else if (isTopLevelNodeValue && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
         var alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
         var selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
@@ -555,7 +578,7 @@ export var DragHandle = function DragHandle(_ref3) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType]);
+  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNodeValue, nodeType]);
   var handleKeyDown = useCallback(function (e) {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -855,18 +878,18 @@ export var DragHandle = function DragHandle(_ref3) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
-    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType)
     }, height);
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = useCallback(function () {
     var pos = getPos();
     var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -901,18 +924,18 @@ export var DragHandle = function DragHandle(_ref3) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
-    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType)
     }, height);
-  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(function () {
     if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -988,12 +1011,12 @@ export var DragHandle = function DragHandle(_ref3) {
     }
     var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNodeValue, view]);
   var dragHandleMessage = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);
@@ -1002,7 +1025,7 @@ export var DragHandle = function DragHandle(_ref3) {
   var dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(blockControlsMessages.dragToMove);
-  var helpDescriptors = isTopLevelNode ? [{
+  var helpDescriptors = isTopLevelNodeValue ? [{
     description: dragHandleMessage
   }, {
     description: formatMessage(blockControlsMessages.moveUp),
@@ -1026,7 +1049,7 @@ export var DragHandle = function DragHandle(_ref3) {
     keymap: dragToMoveDown
   }];
   var isParentNodeOfTypeLayout;
-  if (!isTopLevelNode) {
+  if (!isTopLevelNodeValue) {
     var pos = getPos();
     if (typeof pos === 'number') {
       var _$pos$parent;
@@ -1106,7 +1129,7 @@ export var DragHandle = function DragHandle(_ref3) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, jsx(DragHandleVerticalIcon, {
+      }, expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
         spacing: "spacious",
         label: "",
         size: "small"
@@ -1122,7 +1145,7 @@ export var DragHandle = function DragHandle(_ref3) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx(Tooltip, {
       content: jsx(TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -1136,7 +1159,7 @@ export var DragHandle = function DragHandle(_ref3) {
         });
       }
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -1148,9 +1171,9 @@ export var DragHandle = function DragHandle(_ref3) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {
@@ -1180,6 +1203,7 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10)
     anchorName = _ref10.anchorName,
     nodeType = _ref10.nodeType,
     handleOptions = _ref10.handleOptions,
+    isTopLevelNode = _ref10.isTopLevelNode,
     anchorRectCache = _ref10.anchorRectCache;
   return jsx(VisibilityContainer, {
     api: api
@@ -1191,6 +1215,7 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10)
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

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

@@ -39,6 +39,21 @@ export declare const alignAnchorHeadInDirectionOfPos: (selection: Selection, pos
  * @returns The mapped selection or undefined if mapping is not possible
  */
 export declare const mapPreservedSelection: (selection: Selection, tr: ReadonlyTransaction | Transaction) => Selection | undefined;
+/**
+ * Adjust selection bounds to exclude nodes where the selection only touches
+ * the edge position without selecting any content.
+ *
+ * Exception: Don't adjust if the selection is inside an empty textblock,
+ * as we want to include empty paragraphs in block operations.
+ *
+ * @param $from The resolved position of the start of the selection
+ * @param $to The resolved position of the end of the selection
+ * @returns Adjusted $from and $to positions
+ */
+export declare const adjustSelectionBoundsForEdgePositions: ($from: ResolvedPos, $to: ResolvedPos) => {
+    $from: ResolvedPos;
+    $to: ResolvedPos;
+};
 /**
  * Creates a preserved selection which is expanded to block boundaries.
  *

package/dist/types/ui/drag-handle-nested-icon.d.ts

@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+/**
+ * Custom 3-dot vertical drag handle icon for nested nodes.
+ * Similar to DragHandleVerticalIcon but with only 3 dots instead of 6.
+ * Hardcoded to medium size with spacious spacing.
+ */
+export declare const DragHandleNestedIcon: () => jsx.JSX.Element;

package/dist/types/ui/drag-handle.d.ts

@@ -16,5 +16,5 @@ type DragHandleProps = {
     view: EditorView;
 };
 export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
-export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
 export {};