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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 12.2.1
+
+### Patch Changes
+
+- [`4c2645b77929d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c2645b77929d) -
+  [ux] EDITOR-7346 add ai and diff plugin support for panel_c1
+- Updated dependencies
+
+## 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

package/dist/cjs/editor-commands/move-node.js

@@ -13,6 +13,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _types = require("@atlaskit/editor-common/types");
 var _utils = require("@atlaskit/editor-common/utils");
+var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
@@ -78,7 +79,7 @@ var nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'ex
 var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSupportedNodes($from, $to) {
   var _$from$nodeAfter;
   var isTopLevel = $to.depth === 0;
-  var toParentTypeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _utils.getBaseNodeTypeName)($to.parent.type) : $to.parent.type.name;
+  var toParentTypeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)($to.parent.type) : $to.parent.type.name;
   var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes(toParentTypeName);
   var supportedCondition = isDragIntoNodes || isTopLevel;
   return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;

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

@@ -12,6 +12,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
+var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -250,7 +251,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       pushNodeStack(node, depth);
       return false; //not valid pos, so nested not valid either
     }
-    var parentTypeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _utils.getBaseNodeTypeName)(parent.type) : parent.type.name;
+    var parentTypeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(parent.type) : parent.type.name;
     if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && parentTypesWithEndDropTarget.includes(parentTypeName)) {
       endPos = pos + node.nodeSize;
     }

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

@@ -4,7 +4,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/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-drop-target.js

@@ -3,7 +3,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/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,