@atlaskit/editor-plugin-block-controls 12.1.1 → 12.2.1

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/editor-commands/move-node.js

@@ -7,7 +7,8 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { expandSelectionBounds, GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { DIRECTION } from '@atlaskit/editor-common/types';
-import { getBaseNodeTypeName, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';

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-drop-target.js

@@ -7,7 +7,8 @@ import memoizeOne from 'memoize-one';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
-import { getBaseNodeTypeName, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

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;