@atlaskit/editor-plugin-block-controls 12.1.0 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 12.2.0
+
+### Minor Changes
+
+- [`1f87c5cc71aa3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f87c5cc71aa3) -
+  Improve reliability of editor controls positioning by using ProseMirror node decorations to apply
+  CSS anchor-name, replacing fragile CSS adjacency selectors. Gated behind
+  platform_editor_controls_reliable_anchor experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.0
 
 ### Minor Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findHandleDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = void 0;
+exports.findHandleDec = exports.findActiveDragHandleNodeDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = exports.createActiveDragHandleNodeDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
@@ -14,11 +14,29 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _consts = require("../ui/consts");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
 var _marks = require("./utils/marks");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
+var TYPE_ACTIVE_HANDLE_DEC = 'active-drag-handle-node';
+
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+var createActiveDragHandleNodeDecoration = exports.createActiveDragHandleNodeDecoration = function createActiveDragHandleNodeDecoration(pos, nodeSize) {
+  return _view.Decoration.node(pos, pos + nodeSize, (0, _defineProperty2.default)({}, _consts.ACTIVE_DRAG_HANDLE_ATTR, 'true'), {
+    type: TYPE_ACTIVE_HANDLE_DEC
+  });
+};
+var findActiveDragHandleNodeDec = exports.findActiveDragHandleNodeDec = function findActiveDragHandleNodeDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_ACTIVE_HANDLE_DEC;
+  });
+};
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -4,23 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.quickInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = void 0;
+exports.quickInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = exports.findActiveQuickInsertNodeDec = exports.createActiveQuickInsertNodeDecoration = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _consts = require("../ui/consts");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var _marks = require("./utils/marks");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+var TYPE_ACTIVE_QUICK_INSERT_NODE = 'active-quick-insert-node';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+var createActiveQuickInsertNodeDecoration = exports.createActiveQuickInsertNodeDecoration = function createActiveQuickInsertNodeDecoration(pos, nodeSize) {
+  return _view.Decoration.node(pos, pos + nodeSize, (0, _defineProperty2.default)({}, _consts.ACTIVE_QUICK_INSERT_ATTR, 'true'), {
+    type: TYPE_ACTIVE_QUICK_INSERT_NODE
+  });
+};
+var findActiveQuickInsertNodeDec = exports.findActiveQuickInsertNodeDec = function findActiveQuickInsertNodeDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_ACTIVE_QUICK_INSERT_NODE;
+  });
+};
 var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,

package/dist/cjs/pm-plugins/main.js

@@ -445,21 +445,32 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
+    var _activeNode5, _activeNode6, _activeNode7;
     var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(oldHandle);
+    // When removing the handle, also remove the anchor-marker node decorations
+    // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
+    // don't linger on nodes that are no longer active.
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && ((_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos) !== undefined) {
+      var oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, activeNode.pos, activeNode.pos);
+      decorations = decorations.remove(oldActiveNodeDec);
+      if (activeNode.rootPos !== undefined) {
+        var oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, activeNode.rootPos, activeNode.rootPos);
+        decorations = decorations.remove(oldActiveQuickInsertDec);
+      }
+    }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      var _activeNode7, _activeNode8;
-      var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
+      var _activeNode8, _activeNode9;
+      var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       var _iterator = _createForOfIteratorHelper(nodeDecorationRegistry),
         _step;
       try {
         var _loop2 = function _loop2() {
-          var _activeNode1, _activeNode10;
+          var _activeNode10, _activeNode11;
           var factory = _step.value;
-          var old = decorations.find((_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, function (spec) {
+          var old = decorations.find((_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, function (spec) {
             return spec.type === factory.type;
           });
           decorations = decorations.remove(old);
@@ -479,8 +490,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
           var _loop = function _loop() {
             var factory = _step2.value;
             if (factory.showInViewMode) {
-              var _activeNode9, _activeNode0;
-              var old = decorations.find((_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, function (spec) {
+              var _activeNode0, _activeNode1;
+              var old = decorations.find((_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, function (spec) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -497,10 +508,10 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       }
     }
   } else if (api) {
-    var _latestActiveNode5, _latestActiveNode1;
+    var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
+      var _activeNode12, _activeNode13, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)({
         api: api,
@@ -514,12 +525,44 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
+      if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+        // Recreate the drag handle node decoration when the edit-mode node itself changed
+        // or its content was modified. Other triggers (editorSizeChanged, handleNeedsRedraw)
+        // don't move the decoration — DecorationSet.map() already remaps it correctly.
+        var needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified;
+        if (needsNodeDecUpdate) {
+          var _newState$doc$nodeAt;
+          var nodeSize = (_newState$doc$nodeAt = newState.doc.nodeAt(latestActiveNode.pos)) === null || _newState$doc$nodeAt === void 0 ? void 0 : _newState$doc$nodeAt.nodeSize;
+          if (nodeSize !== undefined) {
+            var _activeNode14, _activeNode15;
+            var _oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.pos, (_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.pos);
+            decorations = decorations.remove(_oldActiveNodeDec);
+            decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.createActiveDragHandleNodeDecoration)(latestActiveNode.pos, nodeSize)]);
+          }
+        }
+
+        // The quick-insert decoration lives on the root node (rootPos), which can change
+        // independently of the edit-mode node — e.g. when only editorSizeChanged fires but
+        // rootActiveNodeChanged is also true. So we use a separate, broader guard that
+        // includes rootActiveNodeChanged to avoid leaving the attribute on a stale root node.
+        var needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged;
+        if (needsQuickInsertDecUpdate && latestActiveNode.rootPos !== undefined) {
+          var _newState$doc$nodeAt2;
+          var rootNodeSize = (_newState$doc$nodeAt2 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt2 === void 0 ? void 0 : _newState$doc$nodeAt2.nodeSize;
+          if (rootNodeSize !== undefined) {
+            var _activeNode16, _activeNode17;
+            var _oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, (_activeNode17 = activeNode) === null || _activeNode17 === void 0 ? void 0 : _activeNode17.rootPos);
+            decorations = decorations.remove(_oldActiveQuickInsertDec);
+            decorations = decorations.add(newState.doc, [(0, _decorationsQuickInsertButton.createActiveQuickInsertNodeDecoration)(latestActiveNode.rootPos, rootNodeSize)]);
+          }
+        }
+      }
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && quickInsertButtonEnabled && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
-      var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
+      var _activeNode18, _activeNode19, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode18 = activeNode) === null || _activeNode18 === void 0 ? void 0 : _activeNode18.rootPos, (_activeNode19 = activeNode) === null || _activeNode19 === void 0 ? void 0 : _activeNode19.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
         api: api,
@@ -534,12 +577,27 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
+
+      // Update quick insert node decoration when the quick insert button is recreated but
+      // the drag handle was NOT recreated (shouldRecreateHandle was false). When
+      // shouldRecreateHandle is true, the block above already handles this.
+      if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _activeNode20, _newState$doc$nodeAt3;
+        if (((_activeNode20 = activeNode) === null || _activeNode20 === void 0 ? void 0 : _activeNode20.rootPos) !== undefined) {
+          var _oldActiveQuickInsertDec2 = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, activeNode.rootPos, activeNode.rootPos);
+          decorations = decorations.remove(_oldActiveQuickInsertDec2);
+        }
+        var _rootNodeSize = (_newState$doc$nodeAt3 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt3 === void 0 ? void 0 : _newState$doc$nodeAt3.nodeSize;
+        if (_rootNodeSize !== undefined) {
+          decorations = decorations.add(newState.doc, [(0, _decorationsQuickInsertButton.createActiveQuickInsertNodeDecoration)(latestActiveNode.rootPos, _rootNodeSize)]);
+        }
+      }
       if (rightSideControlsEnabled) {
         var _iterator3 = _createForOfIteratorHelper(nodeDecorationRegistry),
           _step3;
         try {
           var _loop3 = function _loop3() {
-              var _activeNode15, _activeNode16;
+              var _activeNode21, _activeNode22;
               var factory = _step3.value;
               if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
                 return 0; // continue
@@ -553,7 +611,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
                 rootAnchorName: latestActiveNode.rootAnchorName,
                 rootNodeType: latestActiveNode.rootNodeType
               };
-              var old = decorations.find((_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, function (spec) {
+              var old = decorations.find((_activeNode21 = activeNode) === null || _activeNode21 === void 0 ? void 0 : _activeNode21.rootPos, (_activeNode22 = activeNode) === null || _activeNode22 === void 0 ? void 0 : _activeNode22.rootPos, function (spec) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -598,7 +656,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
 
     // In view mode (edit/live pages), show right-side controls on block hover (without drag handle or quick insert)
-    var rootPos = (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos;
+    var rootPos = (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootPos;
     // rootPos is computed using the same logic as the floating insert menu, so it always points to a top-level (doc child) block when defined.
     var isDocLevel = rootPos !== undefined && !isNaN(rootPos);
     if (isViewMode && isDocLevel && flags.toolbarFlagsEnabled && rightSideControlsEnabled) {
@@ -719,15 +777,15 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var newActiveNode;
   // platform_editor_controls note: enables quick insert
   if (flags.toolbarFlagsEnabled) {
-    var _latestActiveNode10, _latestActiveNode11;
+    var _latestActiveNode11, _latestActiveNode12;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos).length > 0 || isViewMode && rightSideControlsEnabled;
+    var hasHandleOrViewModeControls = (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled;
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
-    var _latestActiveNode12, _latestActiveNode13;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos).length === 0 ? null : latestActiveNode;
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
   if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -12,6 +12,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dropTargetMarginMap;
+var ACTIVE_DRAG_HANDLE_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
+var ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer

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

@@ -827,6 +827,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       anchorName: anchorName
     }) : anchorName;
     var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
+
+    // Defence-in-depth guard: since the node decoration sets data-active-drag-handle on the
+    // active node, we check for it directly. This is a cheap DOM attribute read (no reflow,
+    // no style recalculation) and hides the control if the decoration hasn't been applied yet.
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(_consts2.ACTIVE_DRAG_HANDLE_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;

package/dist/cjs/ui/global-styles.js

@@ -363,6 +363,18 @@ var dragHandlerAnchorStyles = (0, _react.css)({
     })
   }
 });
+var activeControlsSelector = "[".concat(_consts.ACTIVE_DRAG_HANDLE_ATTR, "], [").concat(_consts.ACTIVE_QUICK_INSERT_ATTR, "]");
+
+// Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
+// This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
+// Only nodes decorated with data-active-drag-handle / data-active-quick-insert get anchor-name.
+var staticControlsAnchorStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, activeControlsSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+  })
+});
 
 // Styles applied to nodes with anchors when dragging
 var dragAnchorStyles = (0, _react.css)({
@@ -411,6 +423,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
       exposure: true
     }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
   });
 };

package/dist/cjs/ui/quick-insert-button.js

@@ -190,6 +190,14 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       anchorName: rootAnchorName
     });
     var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
+
+    // Defence-in-depth guard: the node decoration sets data-active-quick-insert on the
+    // active root node. Check for it directly — cheap DOM attribute read, no reflow.
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(_consts.ACTIVE_QUICK_INSERT_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
     var isBlockCard = rootNodeType === 'blockCard';

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

@@ -7,9 +7,23 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { ACTIVE_DRAG_HANDLE_ATTR } from '../ui/consts';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
 import { getActiveBlockMarks, getMatchingBlockMarks } from './utils/marks';
+const TYPE_ACTIVE_HANDLE_DEC = 'active-drag-handle-node';
+
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export const createActiveDragHandleNodeDecoration = (pos, nodeSize) => Decoration.node(pos, pos + nodeSize, {
+  [ACTIVE_DRAG_HANDLE_ATTR]: 'true'
+}, {
+  type: TYPE_ACTIVE_HANDLE_DEC
+});
+export const findActiveDragHandleNodeDec = (decorations, from, to) => decorations.find(from, to, spec => spec.type === TYPE_ACTIVE_HANDLE_DEC);
 export const emptyParagraphNodeDecorations = () => {
   const anchorName = `--node-anchor-paragraph-0`;
   const style = `anchor-name: ${anchorName}; margin-top: 0px;`;

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -5,12 +5,25 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { ACTIVE_QUICK_INSERT_ATTR } from '../ui/consts';
 import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
 import { getActiveBlockMarks, getMatchingBlockMarks } from './utils/marks';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+const TYPE_ACTIVE_QUICK_INSERT_NODE = 'active-quick-insert-node';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export const createActiveQuickInsertNodeDecoration = (pos, nodeSize) => Decoration.node(pos, pos + nodeSize, {
+  [ACTIVE_QUICK_INSERT_ATTR]: 'true'
+}, {
+  type: TYPE_ACTIVE_QUICK_INSERT_NODE
+});
+export const findActiveQuickInsertNodeDec = (decorations, from, to) => decorations.find(from, to, spec => spec.type === TYPE_ACTIVE_QUICK_INSERT_NODE);
 export const quickInsertButtonDecoration = ({
   api,
   formatMessage,

package/dist/es2019/pm-plugins/main.js

@@ -19,10 +19,10 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
-import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { createActiveDragHandleNodeDecoration, dragHandleDecoration, emptyParagraphNodeDecorations, findActiveDragHandleNodeDec, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
-import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
+import { createActiveQuickInsertNodeDecoration, findActiveQuickInsertNodeDec, findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -435,34 +435,45 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
+    var _activeNode5, _activeNode6, _activeNode7;
     const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(oldHandle);
+    // When removing the handle, also remove the anchor-marker node decorations
+    // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
+    // don't linger on nodes that are no longer active.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && ((_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos) !== undefined) {
+      const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, activeNode.pos, activeNode.pos);
+      decorations = decorations.remove(oldActiveNodeDec);
+      if (activeNode.rootPos !== undefined) {
+        const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
+        decorations = decorations.remove(oldActiveQuickInsertDec);
+      }
+    }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      var _activeNode7, _activeNode8;
-      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
+      var _activeNode8, _activeNode9;
+      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       for (const factory of nodeDecorationRegistry) {
-        var _activeNode9, _activeNode0;
-        const old = decorations.find((_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, spec => spec.type === factory.type);
+        var _activeNode0, _activeNode1;
+        const old = decorations.find((_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, spec => spec.type === factory.type);
         decorations = decorations.remove(old);
       }
       if (rightSideControlsEnabled && isViewMode && fg('confluence_remix_button_right_side_block_fg')) {
         for (const factory of nodeDecorationRegistry) {
           if (factory.showInViewMode) {
-            var _activeNode1, _activeNode10;
-            const old = decorations.find((_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, spec => spec.type === factory.type);
+            var _activeNode10, _activeNode11;
+            const old = decorations.find((_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, spec => spec.type === factory.type);
             decorations = decorations.remove(old);
           }
         }
       }
     }
   } else if (api) {
-    var _latestActiveNode5, _latestActiveNode1;
+    var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      const oldHandle = findHandleDec(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
+      var _activeNode12, _activeNode13, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      const oldHandle = findHandleDec(decorations, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.pos);
       decorations = decorations.remove(oldHandle);
       const handleDec = dragHandleDecoration({
         api,
@@ -476,12 +487,44 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+        // Recreate the drag handle node decoration when the edit-mode node itself changed
+        // or its content was modified. Other triggers (editorSizeChanged, handleNeedsRedraw)
+        // don't move the decoration — DecorationSet.map() already remaps it correctly.
+        const needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified;
+        if (needsNodeDecUpdate) {
+          var _newState$doc$nodeAt;
+          const nodeSize = (_newState$doc$nodeAt = newState.doc.nodeAt(latestActiveNode.pos)) === null || _newState$doc$nodeAt === void 0 ? void 0 : _newState$doc$nodeAt.nodeSize;
+          if (nodeSize !== undefined) {
+            var _activeNode14, _activeNode15;
+            const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.pos, (_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.pos);
+            decorations = decorations.remove(oldActiveNodeDec);
+            decorations = decorations.add(newState.doc, [createActiveDragHandleNodeDecoration(latestActiveNode.pos, nodeSize)]);
+          }
+        }
+
+        // The quick-insert decoration lives on the root node (rootPos), which can change
+        // independently of the edit-mode node — e.g. when only editorSizeChanged fires but
+        // rootActiveNodeChanged is also true. So we use a separate, broader guard that
+        // includes rootActiveNodeChanged to avoid leaving the attribute on a stale root node.
+        const needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged;
+        if (needsQuickInsertDecUpdate && latestActiveNode.rootPos !== undefined) {
+          var _newState$doc$nodeAt2;
+          const rootNodeSize = (_newState$doc$nodeAt2 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt2 === void 0 ? void 0 : _newState$doc$nodeAt2.nodeSize;
+          if (rootNodeSize !== undefined) {
+            var _activeNode16, _activeNode17;
+            const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, (_activeNode17 = activeNode) === null || _activeNode17 === void 0 ? void 0 : _activeNode17.rootPos);
+            decorations = decorations.remove(oldActiveQuickInsertDec);
+            decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, rootNodeSize)]);
+          }
+        }
+      }
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && quickInsertButtonEnabled && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
-      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
+      var _activeNode18, _activeNode19, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode18 = activeNode) === null || _activeNode18 === void 0 ? void 0 : _activeNode18.rootPos, (_activeNode19 = activeNode) === null || _activeNode19 === void 0 ? void 0 : _activeNode19.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       const quickInsertButton = quickInsertButtonDecoration({
         api,
@@ -496,9 +539,24 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
+
+      // Update quick insert node decoration when the quick insert button is recreated but
+      // the drag handle was NOT recreated (shouldRecreateHandle was false). When
+      // shouldRecreateHandle is true, the block above already handles this.
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _activeNode20, _newState$doc$nodeAt3;
+        if (((_activeNode20 = activeNode) === null || _activeNode20 === void 0 ? void 0 : _activeNode20.rootPos) !== undefined) {
+          const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
+          decorations = decorations.remove(oldActiveQuickInsertDec);
+        }
+        const rootNodeSize = (_newState$doc$nodeAt3 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt3 === void 0 ? void 0 : _newState$doc$nodeAt3.nodeSize;
+        if (rootNodeSize !== undefined) {
+          decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, rootNodeSize)]);
+        }
+      }
       if (rightSideControlsEnabled) {
         for (const factory of nodeDecorationRegistry) {
-          var _activeNode15, _activeNode16;
+          var _activeNode21, _activeNode22;
           if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
             continue;
           }
@@ -511,7 +569,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
             rootAnchorName: latestActiveNode.rootAnchorName,
             rootNodeType: latestActiveNode.rootNodeType
           };
-          const old = decorations.find((_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, spec => spec.type === factory.type);
+          const old = decorations.find((_activeNode21 = activeNode) === null || _activeNode21 === void 0 ? void 0 : _activeNode21.rootPos, (_activeNode22 = activeNode) === null || _activeNode22 === void 0 ? void 0 : _activeNode22.rootPos, spec => spec.type === factory.type);
           decorations = decorations.remove(old);
 
           // determines whether to show the decorations, see malleableUiPlugin.tsx
@@ -530,7 +588,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
 
     // In view mode (edit/live pages), show right-side controls on block hover (without drag handle or quick insert)
-    const rootPos = (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos;
+    const rootPos = (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootPos;
     // rootPos is computed using the same logic as the floating insert menu, so it always points to a top-level (doc child) block when defined.
     const isDocLevel = rootPos !== undefined && !isNaN(rootPos);
     if (isViewMode && isDocLevel && flags.toolbarFlagsEnabled && rightSideControlsEnabled) {
@@ -620,15 +678,15 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   let newActiveNode;
   // platform_editor_controls note: enables quick insert
   if (flags.toolbarFlagsEnabled) {
-    var _latestActiveNode10, _latestActiveNode11;
+    var _latestActiveNode11, _latestActiveNode12;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    const hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos).length > 0 || isViewMode && rightSideControlsEnabled;
+    const hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled;
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
-    var _latestActiveNode12, _latestActiveNode13;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos).length === 0 ? null : latestActiveNode;
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   let isMenuOpenNew = isMenuOpen;
   if (editorExperiment('platform_editor_block_menu', true)) {

package/dist/es2019/ui/consts.js

@@ -3,6 +3,8 @@ import { breakoutResizableNodes as breakoutResizableNodesNew } from '@atlaskit/e
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
+export const ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer

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

@@ -35,7 +35,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, 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';
@@ -807,6 +807,15 @@ export const DragHandle = ({
       anchorName
     }) : anchorName;
     const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
+
+    // Defence-in-depth guard: since the node decoration sets data-active-drag-handle on the
+    // active node, we check for it directly. This is a cheap DOM attribute read (no reflow,
+    // no style recalculation) and hides the control if the decoration hasn't been applied yet.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_DRAG_HANDLE_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     const isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;

package/dist/es2019/ui/global-styles.js

@@ -11,7 +11,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_QUICK_INSERT_ATTR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -449,6 +449,21 @@ const dragHandlerAnchorStyles = css({
     }
   }
 });
+const activeControlsSelector = `[${ACTIVE_DRAG_HANDLE_ATTR}], [${ACTIVE_QUICK_INSERT_ATTR}]`;
+
+// Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
+// This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
+// Only nodes decorated with data-active-drag-handle / data-active-quick-insert get anchor-name.
+const staticControlsAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [activeControlsSelector]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    }
+  }
+});
 
 // Styles applied to nodes with anchors when dragging
 const dragAnchorStyles = css({
@@ -499,6 +514,6 @@ export const GlobalStylesWrapper = ({
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
   });
 };

package/dist/es2019/ui/quick-insert-button.js

@@ -24,7 +24,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_QUICK_INSERT_ATTR, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -179,6 +179,14 @@ export const TypeAheadControl = ({
       anchorName: rootAnchorName
     });
     const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
+
+    // Defence-in-depth guard: the node decoration sets data-active-quick-insert on the
+    // active root node. Check for it directly — cheap DOM attribute read, no reflow.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_QUICK_INSERT_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     const isBlockCard = rootNodeType === 'blockCard';

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

@@ -8,9 +8,27 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { ACTIVE_DRAG_HANDLE_ATTR } from '../ui/consts';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
 import { getActiveBlockMarks, getMatchingBlockMarks } from './utils/marks';
+var TYPE_ACTIVE_HANDLE_DEC = 'active-drag-handle-node';
+
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export var createActiveDragHandleNodeDecoration = function createActiveDragHandleNodeDecoration(pos, nodeSize) {
+  return Decoration.node(pos, pos + nodeSize, _defineProperty({}, ACTIVE_DRAG_HANDLE_ATTR, 'true'), {
+    type: TYPE_ACTIVE_HANDLE_DEC
+  });
+};
+export var findActiveDragHandleNodeDec = function findActiveDragHandleNodeDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_ACTIVE_HANDLE_DEC;
+  });
+};
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
@@ -5,14 +6,31 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { ACTIVE_QUICK_INSERT_ATTR } from '../ui/consts';
 import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
 import { getActiveBlockMarks, getMatchingBlockMarks } from './utils/marks';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+var TYPE_ACTIVE_QUICK_INSERT_NODE = 'active-quick-insert-node';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export var createActiveQuickInsertNodeDecoration = function createActiveQuickInsertNodeDecoration(pos, nodeSize) {
+  return Decoration.node(pos, pos + nodeSize, _defineProperty({}, ACTIVE_QUICK_INSERT_ATTR, 'true'), {
+    type: TYPE_ACTIVE_QUICK_INSERT_NODE
+  });
+};
+export var findActiveQuickInsertNodeDec = function findActiveQuickInsertNodeDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_ACTIVE_QUICK_INSERT_NODE;
+  });
+};
 export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,

package/dist/esm/pm-plugins/main.js

@@ -25,10 +25,10 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
-import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { createActiveDragHandleNodeDecoration, dragHandleDecoration, emptyParagraphNodeDecorations, findActiveDragHandleNodeDec, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
-import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
+import { createActiveQuickInsertNodeDecoration, findActiveQuickInsertNodeDec, findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -438,21 +438,32 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
+    var _activeNode5, _activeNode6, _activeNode7;
     var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(oldHandle);
+    // When removing the handle, also remove the anchor-marker node decorations
+    // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
+    // don't linger on nodes that are no longer active.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && ((_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos) !== undefined) {
+      var oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, activeNode.pos, activeNode.pos);
+      decorations = decorations.remove(oldActiveNodeDec);
+      if (activeNode.rootPos !== undefined) {
+        var oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
+        decorations = decorations.remove(oldActiveQuickInsertDec);
+      }
+    }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      var _activeNode7, _activeNode8;
-      var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
+      var _activeNode8, _activeNode9;
+      var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       var _iterator = _createForOfIteratorHelper(nodeDecorationRegistry),
         _step;
       try {
         var _loop2 = function _loop2() {
-          var _activeNode1, _activeNode10;
+          var _activeNode10, _activeNode11;
           var factory = _step.value;
-          var old = decorations.find((_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, function (spec) {
+          var old = decorations.find((_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, function (spec) {
             return spec.type === factory.type;
           });
           decorations = decorations.remove(old);
@@ -472,8 +483,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
           var _loop = function _loop() {
             var factory = _step2.value;
             if (factory.showInViewMode) {
-              var _activeNode9, _activeNode0;
-              var old = decorations.find((_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, function (spec) {
+              var _activeNode0, _activeNode1;
+              var old = decorations.find((_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, function (spec) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -490,10 +501,10 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       }
     }
   } else if (api) {
-    var _latestActiveNode5, _latestActiveNode1;
+    var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = findHandleDec(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
+      var _activeNode12, _activeNode13, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = findHandleDec(decorations, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = dragHandleDecoration({
         api: api,
@@ -507,12 +518,44 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+        // Recreate the drag handle node decoration when the edit-mode node itself changed
+        // or its content was modified. Other triggers (editorSizeChanged, handleNeedsRedraw)
+        // don't move the decoration — DecorationSet.map() already remaps it correctly.
+        var needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified;
+        if (needsNodeDecUpdate) {
+          var _newState$doc$nodeAt;
+          var nodeSize = (_newState$doc$nodeAt = newState.doc.nodeAt(latestActiveNode.pos)) === null || _newState$doc$nodeAt === void 0 ? void 0 : _newState$doc$nodeAt.nodeSize;
+          if (nodeSize !== undefined) {
+            var _activeNode14, _activeNode15;
+            var _oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.pos, (_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.pos);
+            decorations = decorations.remove(_oldActiveNodeDec);
+            decorations = decorations.add(newState.doc, [createActiveDragHandleNodeDecoration(latestActiveNode.pos, nodeSize)]);
+          }
+        }
+
+        // The quick-insert decoration lives on the root node (rootPos), which can change
+        // independently of the edit-mode node — e.g. when only editorSizeChanged fires but
+        // rootActiveNodeChanged is also true. So we use a separate, broader guard that
+        // includes rootActiveNodeChanged to avoid leaving the attribute on a stale root node.
+        var needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged;
+        if (needsQuickInsertDecUpdate && latestActiveNode.rootPos !== undefined) {
+          var _newState$doc$nodeAt2;
+          var rootNodeSize = (_newState$doc$nodeAt2 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt2 === void 0 ? void 0 : _newState$doc$nodeAt2.nodeSize;
+          if (rootNodeSize !== undefined) {
+            var _activeNode16, _activeNode17;
+            var _oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, (_activeNode17 = activeNode) === null || _activeNode17 === void 0 ? void 0 : _activeNode17.rootPos);
+            decorations = decorations.remove(_oldActiveQuickInsertDec);
+            decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, rootNodeSize)]);
+          }
+        }
+      }
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && quickInsertButtonEnabled && (!rightSideControlsEnabled || !isViewMode)) {
-      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
-      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
+      var _activeNode18, _activeNode19, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode18 = activeNode) === null || _activeNode18 === void 0 ? void 0 : _activeNode18.rootPos, (_activeNode19 = activeNode) === null || _activeNode19 === void 0 ? void 0 : _activeNode19.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = quickInsertButtonDecoration({
         api: api,
@@ -527,12 +570,27 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
+
+      // Update quick insert node decoration when the quick insert button is recreated but
+      // the drag handle was NOT recreated (shouldRecreateHandle was false). When
+      // shouldRecreateHandle is true, the block above already handles this.
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _activeNode20, _newState$doc$nodeAt3;
+        if (((_activeNode20 = activeNode) === null || _activeNode20 === void 0 ? void 0 : _activeNode20.rootPos) !== undefined) {
+          var _oldActiveQuickInsertDec2 = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
+          decorations = decorations.remove(_oldActiveQuickInsertDec2);
+        }
+        var _rootNodeSize = (_newState$doc$nodeAt3 = newState.doc.nodeAt(latestActiveNode.rootPos)) === null || _newState$doc$nodeAt3 === void 0 ? void 0 : _newState$doc$nodeAt3.nodeSize;
+        if (_rootNodeSize !== undefined) {
+          decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, _rootNodeSize)]);
+        }
+      }
       if (rightSideControlsEnabled) {
         var _iterator3 = _createForOfIteratorHelper(nodeDecorationRegistry),
           _step3;
         try {
           var _loop3 = function _loop3() {
-              var _activeNode15, _activeNode16;
+              var _activeNode21, _activeNode22;
               var factory = _step3.value;
               if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
                 return 0; // continue
@@ -546,7 +604,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
                 rootAnchorName: latestActiveNode.rootAnchorName,
                 rootNodeType: latestActiveNode.rootNodeType
               };
-              var old = decorations.find((_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, function (spec) {
+              var old = decorations.find((_activeNode21 = activeNode) === null || _activeNode21 === void 0 ? void 0 : _activeNode21.rootPos, (_activeNode22 = activeNode) === null || _activeNode22 === void 0 ? void 0 : _activeNode22.rootPos, function (spec) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -591,7 +649,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
 
     // In view mode (edit/live pages), show right-side controls on block hover (without drag handle or quick insert)
-    var rootPos = (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos;
+    var rootPos = (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootPos;
     // rootPos is computed using the same logic as the floating insert menu, so it always points to a top-level (doc child) block when defined.
     var isDocLevel = rootPos !== undefined && !isNaN(rootPos);
     if (isViewMode && isDocLevel && flags.toolbarFlagsEnabled && rightSideControlsEnabled) {
@@ -712,15 +770,15 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var newActiveNode;
   // platform_editor_controls note: enables quick insert
   if (flags.toolbarFlagsEnabled) {
-    var _latestActiveNode10, _latestActiveNode11;
+    var _latestActiveNode11, _latestActiveNode12;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos).length > 0 || isViewMode && rightSideControlsEnabled;
+    var hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled;
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
-    var _latestActiveNode12, _latestActiveNode13;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos).length === 0 ? null : latestActiveNode;
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
   if (editorExperiment('platform_editor_block_menu', true)) {

package/dist/esm/ui/consts.js

@@ -5,6 +5,8 @@ import { breakoutResizableNodes as breakoutResizableNodesNew } from '@atlaskit/e
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
+export var ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
 export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer

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

@@ -40,7 +40,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, 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';
@@ -823,6 +823,15 @@ export var DragHandle = function DragHandle(_ref) {
       anchorName: anchorName
     }) : anchorName;
     var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
+
+    // Defence-in-depth guard: since the node decoration sets data-active-drag-handle on the
+    // active node, we check for it directly. This is a cheap DOM attribute read (no reflow,
+    // no style recalculation) and hides the control if the decoration hasn't been applied yet.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_DRAG_HANDLE_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;

package/dist/esm/ui/global-styles.js

@@ -12,7 +12,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_QUICK_INSERT_ATTR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -356,6 +356,18 @@ var dragHandlerAnchorStyles = css({
     })
   }
 });
+var activeControlsSelector = "[".concat(ACTIVE_DRAG_HANDLE_ATTR, "], [").concat(ACTIVE_QUICK_INSERT_ATTR, "]");
+
+// Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
+// This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
+// Only nodes decorated with data-active-drag-handle / data-active-quick-insert get anchor-name.
+var staticControlsAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty({}, activeControlsSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+  })
+});
 
 // Styles applied to nodes with anchors when dragging
 var dragAnchorStyles = css({
@@ -404,6 +416,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
   });
 };

package/dist/esm/ui/quick-insert-button.js

@@ -28,7 +28,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_QUICK_INSERT_ATTR, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -184,6 +184,14 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       anchorName: rootAnchorName
     });
     var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
+
+    // Defence-in-depth guard: the node decoration sets data-active-quick-insert on the
+    // active root node. Check for it directly — cheap DOM attribute read, no reflow.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_QUICK_INSERT_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     var isBlockCard = rootNodeType === 'blockCard';

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -6,6 +6,13 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import type { AnchorRectCache } from './utils/anchor-utils';
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export declare const createActiveDragHandleNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveDragHandleNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -19,5 +19,12 @@ type QuickInsertButtonDecorationParams = {
     rootNodeType?: string;
     rootPos: number;
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export declare const createActiveQuickInsertNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveQuickInsertNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
 export {};

package/dist/types/ui/consts.d.ts

@@ -1,3 +1,5 @@
+export declare const ACTIVE_DRAG_HANDLE_ATTR = "data-active-drag-handle";
+export declare const ACTIVE_QUICK_INSERT_ATTR = "data-active-quick-insert";
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;

package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts

@@ -6,6 +6,13 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import type { AnchorRectCache } from './utils/anchor-utils';
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export declare const createActiveDragHandleNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveDragHandleNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -19,5 +19,12 @@ type QuickInsertButtonDecorationParams = {
     rootNodeType?: string;
     rootPos: number;
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export declare const createActiveQuickInsertNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveQuickInsertNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
 export {};

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1,3 +1,5 @@
+export declare const ACTIVE_DRAG_HANDLE_ATTR = "data-active-drag-handle";
+export declare const ACTIVE_QUICK_INSERT_ATTR = "data-active-quick-insert";
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "12.1.0",
+	"version": "12.2.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^89.4.0",
+		"@atlaskit/tmp-editor-statsig": "^90.1.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@babel/runtime": "^7.0.0",