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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.1.1
+
+### Patch Changes
+
+- [`5acb6a79c09f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5acb6a79c09f2) -
+  Pause the EOU active session counter when block menu is opened
+
+## 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

package/dist/cjs/blockControlsPlugin.js

@@ -87,13 +87,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       },
       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 (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
             return tr;
           }
           var currMeta = tr.getMeta(_main.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(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
               closeMenu: true
@@ -104,6 +105,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
                 tr: tr
               });
             }
+
+            // When closing the menu, restart the active session timer
+            if (isMenuCurrentlyOpen && (0, _platformFeatureFlags.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;
           }
 
@@ -118,13 +127,21 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
               closeMenu: true
             }));
+
+            // When closing the menu, restart the active session timer
+            if (isMenuCurrentlyOpen && (0, _platformFeatureFlags.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 = (0, _moveNodeUtils.canMoveNodeUpOrDown)(tr),
               moveUp = _canMoveNodeUpOrDown.moveUp,
@@ -140,7 +157,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
@@ -152,6 +169,25 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
                 tr: tr
               });
             }
+
+            // When closing the menu, restart the active session timer
+            if ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.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;
         };
@@ -174,8 +210,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             }
           }));
           if ((0, _platformFeatureFlags.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/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/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");
@@ -447,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;
@@ -537,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);
@@ -562,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 === ' ') {
@@ -862,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);
@@ -908,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;
@@ -995,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);
@@ -1009,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),
@@ -1033,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;
@@ -1113,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"
@@ -1129,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
@@ -1143,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() {
@@ -1155,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() {
@@ -1187,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
@@ -1198,6 +1218,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     anchorName: anchorName,
     nodeType: nodeType,
     handleOptions: handleOptions,
+    isTopLevelNode: isTopLevelNode,
     anchorRectCache: anchorRectCache
   }));
 };

package/dist/es2019/blockControlsPlugin.js

@@ -77,12 +77,13 @@ export const blockControlsPlugin = ({
     toggleBlockMenu: options => ({
       tr
     }) => {
-      var _api$userIntent, _api$userIntent$share, _options$anchorName, _api$blockControls, _api$blockControls$sh;
+      var _api$userIntent, _api$userIntent$share, _api$blockControls, _api$blockControls$sh, _options$anchorName, _api$blockControls2, _api$blockControls2$s;
       if (!expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
         return tr;
       }
       const currMeta = tr.getMeta(key);
       const currentUserIntent = api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent;
+      const isMenuCurrentlyOpen = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.isMenuOpen;
       if (options !== null && options !== void 0 && options.closeMenu) {
         tr.setMeta(key, {
           ...currMeta,
@@ -94,6 +95,14 @@ export const blockControlsPlugin = ({
             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 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer()({
+            tr
+          });
+        }
         return tr;
       }
 
@@ -109,13 +118,21 @@ export const blockControlsPlugin = ({
           ...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 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer()({
+            tr
+          });
+        }
         return tr;
       }
       let toggleMenuMeta = {
         anchorName: options === null || options === void 0 ? void 0 : options.anchorName,
         triggerByNode: options === null || options === void 0 ? void 0 : options.triggerByNode
       };
-      const menuTriggerBy = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.menuTriggerBy;
+      const menuTriggerBy = api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$s = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2$s === void 0 ? void 0 : _api$blockControls2$s.menuTriggerBy;
       if (options !== null && options !== void 0 && options.anchorName) {
         const {
           moveUp,
@@ -134,7 +151,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
@@ -146,6 +163,25 @@ export const blockControlsPlugin = ({
             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 ? void 0 : (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 ? void 0 : _api$metrics3.commands.startActiveSessionTimer()({
+            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 ? void 0 : (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 ? void 0 : _api$metrics4.commands.handleIntentToStartEdit({
+            shouldStartTimer: false,
+            shouldPersistActiveSession: true
+          })({
+            tr
+          });
+        }
       }
       return tr;
     },
@@ -168,8 +204,8 @@ export const blockControlsPlugin = ({
         }
       });
       if (fg('platform_editor_ease_of_use_metrics')) {
-        var _api$metrics;
-        api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
+        var _api$metrics5;
+        api === null || api === void 0 ? void 0 : (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 ? void 0 : _api$metrics5.commands.handleIntentToStartEdit({
           shouldStartTimer: false,
           shouldPersistActiveSession: true
         })({

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/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"
+  })));
+};