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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.1.0
+
+### Minor Changes
+
+- [`1d31a4729ab09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1d31a4729ab09) -
+  [ux] Implement nested block menu icon (flagged)
+
+### Patch Changes
+
+- [`e00b363b9fa30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e00b363b9fa30) -
+  [ux] EDITOR-4481 Clean up platform_editor_toolbar_aifc_user_intent_fix
+- Updated dependencies
+
+## 8.0.15
+
+### Patch Changes
+
+- [`131735fb6ad06`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/131735fb6ad06) -
+  [ux] EDITOR-4281 Expand preserved selection edge case
+- Updated dependencies
+
 ## 8.0.14
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -140,7 +140,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           }));
           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 && (0, _platformFeatureFlags.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/cjs/pm-plugins/decorations-drag-handle.js

@@ -92,7 +92,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     var getPos = function getPos() {
       try {
         return getPosUnsafe();
-      } catch (e) {
+      } catch (_unused) {
         // Ignore errors from getPosUnsafe
         return undefined;
       }

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleMouseDown = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
@@ -45,21 +44,19 @@ var handleMouseDown = exports.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 ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix')) {
-          if ((0, _expValEqualsNoExposure.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 ((0, _expValEqualsNoExposure.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/cjs/pm-plugins/utils/selection.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.createPreservedSelection = exports.alignAnchorHeadInDirectionOfPos = void 0;
+exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.createPreservedSelection = exports.alignAnchorHeadInDirectionOfPos = exports.adjustSelectionBoundsForEdgePositions = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -103,7 +103,58 @@ var mapPreservedSelection = exports.mapPreservedSelection = function mapPreserve
   }
   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
+ */
+var adjustSelectionBoundsForEdgePositions = exports.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.
  *
@@ -119,9 +170,17 @@ var mapPreservedSelection = exports.mapPreservedSelection = function mapPreserve
 var createPreservedSelection = exports.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 = (0, _selection.expandToBlockRange)($from, $to);
+  var expanded = (0, _selection.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/cjs/ui/drag-handle-nested-icon.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleNestedIcon = void 0;
+var _react = require("@emotion/react");
+/** @jsxRuntime classic */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var spanStyles = (0, _react.css)({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  flexShrink: 0
+});
+var svgSizeStyles = (0, _react.css)({
+  width: '24px',
+  height: '24px'
+});
+var svgStyles = (0, _react.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.
+ */
+var DragHandleNestedIcon = exports.DragHandleNestedIcon = function DragHandleNestedIcon() {
+  return (0, _react.jsx)("span", {
+    "aria-hidden": true,
+    css: spanStyles
+  }, (0, _react.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]
+  }, (0, _react.jsx)("circle", {
+    cx: "8",
+    cy: "4",
+    r: "1.5",
+    fill: "currentColor"
+  }), (0, _react.jsx)("circle", {
+    cx: "8",
+    cy: "8",
+    r: "1.5",
+    fill: "currentColor"
+  }), (0, _react.jsx)("circle", {
+    cx: "8",
+    cy: "12",
+    r: "1.5",
+    fill: "currentColor"
+  })));
+};

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

@@ -41,6 +41,7 @@ var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _selection2 = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
+var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
 var _domAttrName = require("./utils/dom-attr-name");
@@ -358,7 +359,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 (0, _selection.expandToBlockRange)($from, $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.
@@ -443,6 +448,24 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   var start = getPos();
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = (0, _experiments.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 = (0, _react.useMemo)(function () {
+    if (!(0, _expValEquals.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 = (0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   (0, _react.useEffect)(function () {
     if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -533,7 +556,7 @@ var DragHandle = exports.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 = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
-      } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
+      } 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);
@@ -558,7 +581,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType]);
+  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNodeValue, nodeType]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -858,18 +881,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     }, height);
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
     var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -904,18 +927,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     }, height);
-  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   (0, _react.useEffect)(function () {
     if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
       return;
@@ -991,12 +1014,12 @@ var DragHandle = exports.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 > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.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 = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);
@@ -1005,7 +1028,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   var dragHandleAriaLabel = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);
-  var helpDescriptors = isTopLevelNode ? [{
+  var helpDescriptors = isTopLevelNodeValue ? [{
     description: dragHandleMessage
   }, {
     description: formatMessage(_messages.blockControlsMessages.moveUp),
@@ -1029,7 +1052,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     keymap: _keymaps.dragToMoveDown
   }];
   var isParentNodeOfTypeLayout;
-  if (!isTopLevelNode) {
+  if (!isTopLevelNodeValue) {
     var pos = getPos();
     if (typeof pos === 'number') {
       var _$pos$parent;
@@ -1109,7 +1132,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, (0, _react2.jsx)(_dragHandleVertical.default, {
+      }, (0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? (0, _react2.jsx)(_dragHandleNestedIcon.DragHandleNestedIcon, null) : (0, _react2.jsx)(_dragHandleVertical.default, {
         spacing: "spacious",
         label: "",
         size: "small"
@@ -1125,7 +1148,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && ((0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && ((0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -1139,7 +1162,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         });
       }
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -1151,9 +1174,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
+      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {
@@ -1183,6 +1206,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     anchorName = _ref10.anchorName,
     nodeType = _ref10.nodeType,
     handleOptions = _ref10.handleOptions,
+    isTopLevelNode = _ref10.isTopLevelNode,
     anchorRectCache = _ref10.anchorRectCache;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
@@ -1194,6 +1218,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

package/dist/es2019/blockControlsPlugin.js

@@ -134,7 +134,7 @@ export const blockControlsPlugin = ({
       });
       if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
         const 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 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
             tr

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

@@ -83,7 +83,7 @@ export const dragHandleDecoration = ({
     const getPos = () => {
       try {
         return getPosUnsafe();
-      } catch (e) {
+      } catch {
         // Ignore errors from getPosUnsafe
         return undefined;
       }

package/dist/es2019/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 const handleMouseDown = api => (view, event) => {
@@ -39,21 +38,19 @@ export const handleMouseDown = api => (view, event) => {
        * 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 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
-              tr
-            });
-          }
-        } else {
-          var _api$userIntent2;
-          (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? 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 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
             tr
           });
         }
+      } else {
+        var _api$userIntent2;
+        (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
+          tr
+        });
       }
       return tr;
     });

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

@@ -99,7 +99,54 @@ export const mapPreservedSelection = (selection, tr) => {
   }
   return createPreservedSelection(tr.doc.resolve(from), tr.doc.resolve(to));
 };
+const isInsideEmptyTextblock = $pos => $pos.parent.isTextblock && $pos.parent.content.size === 0;
+const isAtEndOfParent = $pos => $pos.parentOffset === $pos.parent.content.size;
+const isAtStartOfParent = $pos => $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 const adjustSelectionBoundsForEdgePositions = ($from, $to) => {
+  const {
+    doc
+  } = $from;
+
+  // Walk $from forward while at end of ancestors
+  let adjustedFrom = $from;
+  if (!isInsideEmptyTextblock($from)) {
+    while (adjustedFrom.depth > 0 && isAtEndOfParent(adjustedFrom)) {
+      const nextPos = adjustedFrom.after();
+      if (nextPos > doc.content.size || nextPos === adjustedFrom.pos) {
+        break;
+      }
+      adjustedFrom = doc.resolve(nextPos);
+    }
+  }
+
+  // Walk $to backward while at start of ancestors
+  let adjustedTo = $to;
+  if (!isInsideEmptyTextblock($to)) {
+    while (adjustedTo.depth > 0 && isAtStartOfParent(adjustedTo)) {
+      const 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.
  *
@@ -117,9 +164,17 @@ export const createPreservedSelection = ($from, $to) => {
   const {
     doc
   } = $from;
+  const isCollapsed = $from.pos === $to.pos;
+  const adjusted = isCollapsed ? {
+    $from,
+    $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
-  const expanded = expandToBlockRange($from, $to);
+  const 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/es2019/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';
+const spanStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  flexShrink: 0
+});
+const svgSizeStyles = css({
+  width: '24px',
+  height: '24px'
+});
+const 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 const 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"
+  })));
+};