@atlaskit/editor-plugin-block-controls 8.0.15 → 8.1.1

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

@@ -39,6 +39,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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';
@@ -427,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;
@@ -517,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);
@@ -542,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 === ' ') {
@@ -847,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);
@@ -895,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;
@@ -984,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);
@@ -998,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),
@@ -1022,7 +1041,7 @@ export const DragHandle = ({
     keymap: dragToMoveDown
   }];
   let isParentNodeOfTypeLayout;
-  if (!isTopLevelNode) {
+  if (!isTopLevelNodeValue) {
     const pos = getPos();
     if (typeof pos === 'number') {
       var _$pos$parent;
@@ -1099,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"
@@ -1112,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
@@ -1126,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
@@ -1136,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, {
@@ -1165,6 +1184,7 @@ export const DragHandleWithVisibility = ({
   anchorName,
   nodeType,
   handleOptions,
+  isTopLevelNode,
   anchorRectCache
 }) => {
   return jsx(VisibilityContainer, {
@@ -1177,6 +1197,7 @@ export const DragHandleWithVisibility = ({
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

package/dist/esm/blockControlsPlugin.js

@@ -80,13 +80,14 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       },
       toggleBlockMenu: function toggleBlockMenu(options) {
         return function (_ref4) {
-          var _api$userIntent, _options$anchorName, _api$blockControls;
+          var _api$userIntent, _api$blockControls, _options$anchorName, _api$blockControls2;
           var tr = _ref4.tr;
           if (!expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
             return tr;
           }
           var currMeta = tr.getMeta(key);
           var currentUserIntent = api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent;
+          var isMenuCurrentlyOpen = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.isMenuOpen;
           if (options !== null && options !== void 0 && options.closeMenu) {
             tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
               closeMenu: true
@@ -97,6 +98,14 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
                 tr: tr
               });
             }
+
+            // When closing the menu, restart the active session timer
+            if (isMenuCurrentlyOpen && fg('platform_editor_ease_of_use_metrics')) {
+              var _api$metrics;
+              api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 || _api$metrics.commands.startActiveSessionTimer()({
+                tr: tr
+              });
+            }
             return tr;
           }
 
@@ -111,13 +120,21 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
             tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
               closeMenu: true
             }));
+
+            // When closing the menu, restart the active session timer
+            if (isMenuCurrentlyOpen && fg('platform_editor_ease_of_use_metrics')) {
+              var _api$metrics2;
+              api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 || _api$metrics2.commands.startActiveSessionTimer()({
+                tr: tr
+              });
+            }
             return tr;
           }
           var toggleMenuMeta = {
             anchorName: options === null || options === void 0 ? void 0 : options.anchorName,
             triggerByNode: options === null || options === void 0 ? void 0 : options.triggerByNode
           };
-          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
+          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.menuTriggerBy;
           if (options !== null && options !== void 0 && options.anchorName) {
             var _canMoveNodeUpOrDown = canMoveNodeUpOrDown(tr),
               moveUp = _canMoveNodeUpOrDown.moveUp,
@@ -133,7 +150,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
@@ -145,6 +162,25 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
                 tr: tr
               });
             }
+
+            // When closing the menu, restart the active session timer
+            if (fg('platform_editor_ease_of_use_metrics')) {
+              var _api$metrics3;
+              api === null || api === void 0 || (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 || _api$metrics3.commands.startActiveSessionTimer()({
+                tr: tr
+              });
+            }
+          } else if (!isMenuCurrentlyOpen) {
+            // When opening the menu, pause the active session timer
+            if (fg('platform_editor_ease_of_use_metrics')) {
+              var _api$metrics4;
+              api === null || api === void 0 || (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 || _api$metrics4.commands.handleIntentToStartEdit({
+                shouldStartTimer: false,
+                shouldPersistActiveSession: true
+              })({
+                tr: tr
+              });
+            }
           }
           return tr;
         };
@@ -167,8 +203,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
             }
           }));
           if (fg('platform_editor_ease_of_use_metrics')) {
-            var _api$metrics;
-            api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 || _api$metrics.commands.handleIntentToStartEdit({
+            var _api$metrics5;
+            api === null || api === void 0 || (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 || _api$metrics5.commands.handleIntentToStartEdit({
               shouldStartTimer: false,
               shouldPersistActiveSession: true
             })({

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/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

@@ -44,6 +44,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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';
@@ -444,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;
@@ -534,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);
@@ -559,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 === ' ') {
@@ -859,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);
@@ -905,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;
@@ -992,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);
@@ -1006,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),
@@ -1030,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;
@@ -1110,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"
@@ -1126,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
@@ -1140,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() {
@@ -1152,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() {
@@ -1184,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
@@ -1195,6 +1215,7 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10)
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

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 {};

package/dist/types-ts4.5/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-ts4.5/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 {};