@atlaskit/editor-plugin-block-controls 13.1.13 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.2.0
+
+### Minor Changes
+
+- [`2f56c78f969b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f56c78f969b8) -
+  Update i18n NPM package versions for teamwork-graph (Group 16)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.1.14
+
+### Patch Changes
+
+- [`79402109ef24e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79402109ef24e) -
+  fix block controls reliable anchor glitch
+- Updated dependencies
+
 ## 13.1.13
 
 ### Patch Changes

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

@@ -442,32 +442,34 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6, _activeNode7;
+    var _activeNode5, _activeNode6;
     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);
+    // Use full-range search (0..contentSize) rather than a point-range at activeNode.pos/rootPos:
+    // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
+    // decoration to a different position, so a point-range search would miss it and leave a stale
+    // attribute on the wrong DOM node.
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+      var oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
-      if (activeNode.rootPos !== undefined) {
-        var oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, activeNode.rootPos, activeNode.rootPos);
-        decorations = decorations.remove(oldActiveQuickInsertDec);
-      }
+      var oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, 0, newState.doc.content.size);
+      decorations = decorations.remove(oldActiveQuickInsertDec);
     }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      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);
+      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);
       decorations = decorations.remove(oldQuickInsertButton);
       var _iterator = _createForOfIteratorHelper(nodeDecorationRegistry),
         _step;
       try {
         var _loop2 = function _loop2() {
-          var _activeNode10, _activeNode11;
+          var _activeNode1, _activeNode10;
           var factory = _step.value;
-          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) {
+          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) {
             return spec.type === factory.type;
           });
           decorations = decorations.remove(old);
@@ -487,8 +489,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
           var _loop = function _loop() {
             var factory = _step2.value;
             if (factory.showInViewMode) {
-              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) {
+              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) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -507,8 +509,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      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);
+      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);
       decorations = decorations.remove(_oldHandle);
       var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)({
         api: api,
@@ -522,33 +524,49 @@ 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);
+    }
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+      // Recreate the drag handle node decoration when the active node changed,
+      // its content was modified, or the document changed (e.g. Enter splits a node).
+      // This runs independently of shouldRecreateHandle so that doc changes (like pressing
+      // Enter) correctly refresh the decoration even when the handle widget doesn't move.
+      // DecorationSet.map() can misplace the decoration after node splits/inserts.
+      var needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified || tr.docChanged;
+      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) {
+          // Search the full doc range: after DecorationSet.map(), the decoration may have
+          // shifted away from activeNode?.pos (e.g. a node split moves it to the new paragraph).
+          var _oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          var dragHandleDecAlreadyCorrect = _oldActiveNodeDec.length === 1 && _oldActiveNodeDec[0].from === latestActiveNode.pos && _oldActiveNodeDec[0].to === latestActiveNode.pos + nodeSize;
+          if (!dragHandleDecAlreadyCorrect) {
             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);
+      // 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.
+      // tr.docChanged is included for the same reason as needsNodeDecUpdate: DecorationSet.map()
+      // can misplace the decoration after a node split, so we must refresh it on every doc change.
+      var needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged;
+      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 _oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          var quickInsertDecAlreadyCorrect = _oldActiveQuickInsertDec.length === 1 && _oldActiveQuickInsertDec[0].from === latestActiveNode.rootPos && _oldActiveQuickInsertDec[0].to === latestActiveNode.rootPos + rootNodeSize;
+          if (!quickInsertDecAlreadyCorrect) {
             decorations = decorations.remove(_oldActiveQuickInsertDec);
             decorations = decorations.add(newState.doc, [(0, _decorationsQuickInsertButton.createActiveQuickInsertNodeDecoration)(latestActiveNode.rootPos, rootNodeSize)]);
           }
@@ -558,8 +576,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     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 _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);
+      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      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);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
         api: api,
@@ -578,12 +596,16 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       // 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);
-        }
+      // Also skip when the needsQuickInsertDecUpdate block above already handled the update
+      // (i.e. activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged)
+      // — running both would remove and re-add a duplicate decoration.
+      if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && !(activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged) && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _newState$doc$nodeAt3;
+        // Use full-range search (0..contentSize) rather than a point-range at activeNode.rootPos:
+        // after a doc change, DecorationSet.map() can shift the decoration to a different position,
+        // so a point-range search would miss it and leave a stale attribute on the wrong DOM node.
+        var _oldActiveQuickInsertDec2 = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, 0, newState.doc.content.size);
+        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)]);
@@ -594,7 +616,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
           _step3;
         try {
           var _loop3 = function _loop3() {
-              var _activeNode21, _activeNode22;
+              var _activeNode15, _activeNode16;
               var factory = _step3.value;
               if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
                 return 0; // continue
@@ -608,7 +630,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
                 rootAnchorName: latestActiveNode.rootAnchorName,
                 rootNodeType: latestActiveNode.rootNodeType
               };
-              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) {
+              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) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);

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

@@ -415,6 +415,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     positionStylesOld = _useState8[0],
     setPositionStylesOld = _useState8[1];
+  // Tracks whether the initial position calculation has been performed at least once.
+  // The reliable-anchor early-return optimisation must not fire before the first calculation,
+  // otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
+  var hasCalculatedInitialPosition = (0, _react.useRef)(false);
   var _useState9 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     isFocused = _useState0[0],
@@ -901,7 +905,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
+  var isReliableAnchorEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true);
+  var docDepForReliableAnchor = isReliableAnchorEnabled ? view.state.doc : undefined;
+
+  // Effect 1 (reliable-anchor ON): fires when non-doc deps change (e.g. blockCardWidth,
+  // anchorRectCache, macroInteractionUpdates, isTopLevelNodeValue, isLayoutColumn via
+  // calculatePositionOld) — always recalculates without the doc guard, so non-doc position
+  // changes are never incorrectly skipped.
   (0, _react.useEffect)(function () {
+    if (!isReliableAnchorEnabled) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
@@ -917,13 +931,62 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     var calcPos = requestAnimationFrame(function () {
       setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
     });
     return function () {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
-  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType]);
+
+  // Effect 2 (reliable-anchor ON): fires when the doc changes — carries the DOM-attribute
+  // guard to skip recalc when a drag handle is active (pure keystroke during drag).
+  // Effect (reliable-anchor OFF): single combined effect, original behaviour.
+  (0, _react.useEffect)(function () {
+    if (isReliableAnchorEnabled) {
+      // Doc-change only effect: apply the DOM-attribute guard.
+      // React's dep comparison already ensures this only runs when docDepForReliableAnchor
+      // (i.e. view.state.doc) changed, so no manual ref tracking is needed.
+      if (!hasCalculatedInitialPosition.current) {
+        return;
+      }
+      var _calcPos = requestAnimationFrame(function () {
+        var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
+        if (dom !== null && dom !== void 0 && dom.hasAttribute(_consts2.ACTIVE_DRAG_HANDLE_ATTR)) {
+          return;
+        }
+        setPositionStylesOld(calculatePositionOld());
+      });
+      return function () {
+        cancelAnimationFrame(_calcPos);
+      };
+    }
+
+    // reliable-anchor OFF: original single-effect behaviour (no guard).
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setPositionStylesOld(calculatePositionOld());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
+    });
+    return function () {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
@@ -1192,9 +1255,15 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
   // when hovering anywhere over the column, regardless of which side of the layoutSection the
   // column is on. (The right-side remix button is a separate node decoration and is unaffected.)
   var isLayoutColumn = nodeType === 'layoutColumn';
+
+  // Skip the right-side controlSide restriction for non-top-level nodes. The restriction exists
+  // to avoid showing the drag handle and remix button simultaneously — but remix only applies to
+  // top-level nodes, so non-top-level nodes should never be restricted.
+  // Gated behind platform_editor_controls_reliable_anchor.
+  var skipControlSideRestriction = (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && isTopLevelNode === false;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api,
-    controlSide: !isLayoutColumn && rightSideControlsEnabled ? 'left' : undefined,
+    controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
     forceVisibleOnMouseOut: (0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, (0, _react2.jsx)(DragHandle, {
     view: view,

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

@@ -423,6 +423,10 @@ 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), (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
+    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, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
+    // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
+    // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.
+    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -432,35 +432,37 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6, _activeNode7;
+    var _activeNode5, _activeNode6;
     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);
+    // Use full-range search (0..contentSize) rather than a point-range at activeNode.pos/rootPos:
+    // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
+    // decoration to a different position, so a point-range search would miss it and leave a stale
+    // attribute on the wrong DOM node.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+      const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
-      if (activeNode.rootPos !== undefined) {
-        const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
-        decorations = decorations.remove(oldActiveQuickInsertDec);
-      }
+      const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+      decorations = decorations.remove(oldActiveQuickInsertDec);
     }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      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);
+      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);
       decorations = decorations.remove(oldQuickInsertButton);
       for (const factory of nodeDecorationRegistry) {
-        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);
+        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);
         decorations = decorations.remove(old);
       }
       if (rightSideControlsEnabled && isViewMode && fg('confluence_remix_button_right_side_block_fg')) {
         for (const factory of nodeDecorationRegistry) {
           if (factory.showInViewMode) {
-            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);
+            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);
             decorations = decorations.remove(old);
           }
         }
@@ -469,8 +471,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      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);
+      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);
       decorations = decorations.remove(oldHandle);
       const handleDec = dragHandleDecoration({
         api,
@@ -484,33 +486,49 @@ 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);
+    }
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+      // Recreate the drag handle node decoration when the active node changed,
+      // its content was modified, or the document changed (e.g. Enter splits a node).
+      // This runs independently of shouldRecreateHandle so that doc changes (like pressing
+      // Enter) correctly refresh the decoration even when the handle widget doesn't move.
+      // DecorationSet.map() can misplace the decoration after node splits/inserts.
+      const needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified || tr.docChanged;
+      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) {
+          // Search the full doc range: after DecorationSet.map(), the decoration may have
+          // shifted away from activeNode?.pos (e.g. a node split moves it to the new paragraph).
+          const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          const dragHandleDecAlreadyCorrect = oldActiveNodeDec.length === 1 && oldActiveNodeDec[0].from === latestActiveNode.pos && oldActiveNodeDec[0].to === latestActiveNode.pos + nodeSize;
+          if (!dragHandleDecAlreadyCorrect) {
             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);
+      // 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.
+      // tr.docChanged is included for the same reason as needsNodeDecUpdate: DecorationSet.map()
+      // can misplace the decoration after a node split, so we must refresh it on every doc change.
+      const needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged;
+      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) {
+          const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          const quickInsertDecAlreadyCorrect = oldActiveQuickInsertDec.length === 1 && oldActiveQuickInsertDec[0].from === latestActiveNode.rootPos && oldActiveQuickInsertDec[0].to === latestActiveNode.rootPos + rootNodeSize;
+          if (!quickInsertDecAlreadyCorrect) {
             decorations = decorations.remove(oldActiveQuickInsertDec);
             decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, rootNodeSize)]);
           }
@@ -520,8 +538,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     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 _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);
+      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       const quickInsertButton = quickInsertButtonDecoration({
         api,
@@ -540,12 +558,16 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       // 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);
-        }
+      // Also skip when the needsQuickInsertDecUpdate block above already handled the update
+      // (i.e. activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged)
+      // — running both would remove and re-add a duplicate decoration.
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && !(activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged) && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _newState$doc$nodeAt3;
+        // Use full-range search (0..contentSize) rather than a point-range at activeNode.rootPos:
+        // after a doc change, DecorationSet.map() can shift the decoration to a different position,
+        // so a point-range search would miss it and leave a stale attribute on the wrong DOM node.
+        const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+        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)]);
@@ -553,7 +575,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       }
       if (rightSideControlsEnabled) {
         for (const factory of nodeDecorationRegistry) {
-          var _activeNode21, _activeNode22;
+          var _activeNode15, _activeNode16;
           if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
             continue;
           }
@@ -566,7 +588,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
             rootAnchorName: latestActiveNode.rootAnchorName,
             rootNodeType: latestActiveNode.rootNodeType
           };
-          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);
+          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);
           decorations = decorations.remove(old);
 
           // determines whether to show the decorations, see malleableUiPlugin.tsx

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

@@ -395,6 +395,10 @@ export const DragHandle = ({
   const [positionStylesOld, setPositionStylesOld] = useState({
     display: 'none'
   });
+  // Tracks whether the initial position calculation has been performed at least once.
+  // The reliable-anchor early-return optimisation must not fire before the first calculation,
+  // otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
+  const hasCalculatedInitialPosition = useRef(false);
   const [isFocused, setIsFocused] = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused));
   const {
     macroInteractionUpdates,
@@ -881,7 +885,17 @@ export const DragHandle = ({
       ...height
     };
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
+  const isReliableAnchorEnabled = expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true);
+  const docDepForReliableAnchor = isReliableAnchorEnabled ? view.state.doc : undefined;
+
+  // Effect 1 (reliable-anchor ON): fires when non-doc deps change (e.g. blockCardWidth,
+  // anchorRectCache, macroInteractionUpdates, isTopLevelNodeValue, isLayoutColumn via
+  // calculatePositionOld) — always recalculates without the doc guard, so non-doc position
+  // changes are never incorrectly skipped.
   useEffect(() => {
+    if (!isReliableAnchorEnabled) {
+      return;
+    }
     let cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
@@ -897,13 +911,62 @@ export const DragHandle = ({
     }
     const calcPos = requestAnimationFrame(() => {
       setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
     });
     return () => {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
-  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType]);
+
+  // Effect 2 (reliable-anchor ON): fires when the doc changes — carries the DOM-attribute
+  // guard to skip recalc when a drag handle is active (pure keystroke during drag).
+  // Effect (reliable-anchor OFF): single combined effect, original behaviour.
+  useEffect(() => {
+    if (isReliableAnchorEnabled) {
+      // Doc-change only effect: apply the DOM-attribute guard.
+      // React's dep comparison already ensures this only runs when docDepForReliableAnchor
+      // (i.e. view.state.doc) changed, so no manual ref tracking is needed.
+      if (!hasCalculatedInitialPosition.current) {
+        return;
+      }
+      const calcPos = requestAnimationFrame(() => {
+        const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
+        if (dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_DRAG_HANDLE_ATTR)) {
+          return;
+        }
+        setPositionStylesOld(calculatePositionOld());
+      });
+      return () => {
+        cancelAnimationFrame(calcPos);
+      };
+    }
+
+    // reliable-anchor OFF: original single-effect behaviour (no guard).
+    let cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: () => {
+          setPositionStylesOld(calculatePositionOld());
+        }
+      });
+    }
+    const calcPos = requestAnimationFrame(() => {
+      setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
+    });
+    return () => {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
+    };
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       const id = requestAnimationFrame(() => {
@@ -1165,9 +1228,15 @@ export const DragHandleWithVisibility = ({
   // when hovering anywhere over the column, regardless of which side of the layoutSection the
   // column is on. (The right-side remix button is a separate node decoration and is unaffected.)
   const isLayoutColumn = nodeType === 'layoutColumn';
+
+  // Skip the right-side controlSide restriction for non-top-level nodes. The restriction exists
+  // to avoid showing the drag handle and remix button simultaneously — but remix only applies to
+  // top-level nodes, so non-top-level nodes should never be restricted.
+  // Gated behind platform_editor_controls_reliable_anchor.
+  const skipControlSideRestriction = expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && isTopLevelNode === false;
   return jsx(VisibilityContainer, {
     api: api,
-    controlSide: !isLayoutColumn && rightSideControlsEnabled ? 'left' : undefined,
+    controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
     forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, jsx(DragHandle, {
     view: view,

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

@@ -514,6 +514,10 @@ 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), expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
+    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, expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
+    // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
+    // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.
+    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -435,32 +435,34 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6, _activeNode7;
+    var _activeNode5, _activeNode6;
     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);
+    // Use full-range search (0..contentSize) rather than a point-range at activeNode.pos/rootPos:
+    // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
+    // decoration to a different position, so a point-range search would miss it and leave a stale
+    // attribute on the wrong DOM node.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+      var oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
-      if (activeNode.rootPos !== undefined) {
-        var oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, activeNode.rootPos, activeNode.rootPos);
-        decorations = decorations.remove(oldActiveQuickInsertDec);
-      }
+      var oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+      decorations = decorations.remove(oldActiveQuickInsertDec);
     }
     // platform_editor_controls note: enables quick insert
     if (flags.toolbarFlagsEnabled && quickInsertButtonEnabled) {
-      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);
+      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);
       decorations = decorations.remove(oldQuickInsertButton);
       var _iterator = _createForOfIteratorHelper(nodeDecorationRegistry),
         _step;
       try {
         var _loop2 = function _loop2() {
-          var _activeNode10, _activeNode11;
+          var _activeNode1, _activeNode10;
           var factory = _step.value;
-          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) {
+          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) {
             return spec.type === factory.type;
           });
           decorations = decorations.remove(old);
@@ -480,8 +482,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
           var _loop = function _loop() {
             var factory = _step2.value;
             if (factory.showInViewMode) {
-              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) {
+              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) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);
@@ -500,8 +502,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
     if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
-      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);
+      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);
       decorations = decorations.remove(_oldHandle);
       var handleDec = dragHandleDecoration({
         api: api,
@@ -515,33 +517,49 @@ 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);
+    }
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+      // Recreate the drag handle node decoration when the active node changed,
+      // its content was modified, or the document changed (e.g. Enter splits a node).
+      // This runs independently of shouldRecreateHandle so that doc changes (like pressing
+      // Enter) correctly refresh the decoration even when the handle widget doesn't move.
+      // DecorationSet.map() can misplace the decoration after node splits/inserts.
+      var needsNodeDecUpdate = activeNodeChanged || isActiveNodeModified || tr.docChanged;
+      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) {
+          // Search the full doc range: after DecorationSet.map(), the decoration may have
+          // shifted away from activeNode?.pos (e.g. a node split moves it to the new paragraph).
+          var _oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          var dragHandleDecAlreadyCorrect = _oldActiveNodeDec.length === 1 && _oldActiveNodeDec[0].from === latestActiveNode.pos && _oldActiveNodeDec[0].to === latestActiveNode.pos + nodeSize;
+          if (!dragHandleDecAlreadyCorrect) {
             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);
+      // 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.
+      // tr.docChanged is included for the same reason as needsNodeDecUpdate: DecorationSet.map()
+      // can misplace the decoration after a node split, so we must refresh it on every doc change.
+      var needsQuickInsertDecUpdate = activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged;
+      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 _oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+          // Skip remove+add if the decoration is already at the correct position.
+          // On pure text keystrokes, DecorationSet.map() keeps the decoration correctly
+          // placed, so we avoid unnecessary churn on every character typed.
+          var quickInsertDecAlreadyCorrect = _oldActiveQuickInsertDec.length === 1 && _oldActiveQuickInsertDec[0].from === latestActiveNode.rootPos && _oldActiveQuickInsertDec[0].to === latestActiveNode.rootPos + rootNodeSize;
+          if (!quickInsertDecAlreadyCorrect) {
             decorations = decorations.remove(_oldActiveQuickInsertDec);
             decorations = decorations.add(newState.doc, [createActiveQuickInsertNodeDecoration(latestActiveNode.rootPos, rootNodeSize)]);
           }
@@ -551,8 +569,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     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 _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);
+      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0, _latestActiveNode1;
+      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = quickInsertButtonDecoration({
         api: api,
@@ -571,12 +589,16 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       // 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);
-        }
+      // Also skip when the needsQuickInsertDecUpdate block above already handled the update
+      // (i.e. activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged)
+      // — running both would remove and re-add a duplicate decoration.
+      if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !shouldRecreateHandle && !(activeNodeChanged || isActiveNodeModified || rootActiveNodeChanged || tr.docChanged) && ((_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.rootPos) !== undefined) {
+        var _newState$doc$nodeAt3;
+        // Use full-range search (0..contentSize) rather than a point-range at activeNode.rootPos:
+        // after a doc change, DecorationSet.map() can shift the decoration to a different position,
+        // so a point-range search would miss it and leave a stale attribute on the wrong DOM node.
+        var _oldActiveQuickInsertDec2 = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
+        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)]);
@@ -587,7 +609,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
           _step3;
         try {
           var _loop3 = function _loop3() {
-              var _activeNode21, _activeNode22;
+              var _activeNode15, _activeNode16;
               var factory = _step3.value;
               if (!latestActiveNode || latestActiveNode.rootPos === undefined) {
                 return 0; // continue
@@ -601,7 +623,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
                 rootAnchorName: latestActiveNode.rootAnchorName,
                 rootNodeType: latestActiveNode.rootNodeType
               };
-              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) {
+              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) {
                 return spec.type === factory.type;
               });
               decorations = decorations.remove(old);

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

@@ -411,6 +411,10 @@ export var DragHandle = function DragHandle(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     positionStylesOld = _useState8[0],
     setPositionStylesOld = _useState8[1];
+  // Tracks whether the initial position calculation has been performed at least once.
+  // The reliable-anchor early-return optimisation must not fire before the first calculation,
+  // otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
+  var hasCalculatedInitialPosition = useRef(false);
   var _useState9 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = _slicedToArray(_useState9, 2),
     isFocused = _useState0[0],
@@ -897,7 +901,17 @@ export var DragHandle = function DragHandle(_ref) {
       top: getTopPosition(dom, nodeType)
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
+  var isReliableAnchorEnabled = expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true);
+  var docDepForReliableAnchor = isReliableAnchorEnabled ? view.state.doc : undefined;
+
+  // Effect 1 (reliable-anchor ON): fires when non-doc deps change (e.g. blockCardWidth,
+  // anchorRectCache, macroInteractionUpdates, isTopLevelNodeValue, isLayoutColumn via
+  // calculatePositionOld) — always recalculates without the doc guard, so non-doc position
+  // changes are never incorrectly skipped.
   useEffect(function () {
+    if (!isReliableAnchorEnabled) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
@@ -913,13 +927,62 @@ export var DragHandle = function DragHandle(_ref) {
     }
     var calcPos = requestAnimationFrame(function () {
       setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
     });
     return function () {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
-  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType]);
+
+  // Effect 2 (reliable-anchor ON): fires when the doc changes — carries the DOM-attribute
+  // guard to skip recalc when a drag handle is active (pure keystroke during drag).
+  // Effect (reliable-anchor OFF): single combined effect, original behaviour.
+  useEffect(function () {
+    if (isReliableAnchorEnabled) {
+      // Doc-change only effect: apply the DOM-attribute guard.
+      // React's dep comparison already ensures this only runs when docDepForReliableAnchor
+      // (i.e. view.state.doc) changed, so no manual ref tracking is needed.
+      if (!hasCalculatedInitialPosition.current) {
+        return;
+      }
+      var _calcPos = requestAnimationFrame(function () {
+        var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
+        if (dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_DRAG_HANDLE_ATTR)) {
+          return;
+        }
+        setPositionStylesOld(calculatePositionOld());
+      });
+      return function () {
+        cancelAnimationFrame(_calcPos);
+      };
+    }
+
+    // reliable-anchor OFF: original single-effect behaviour (no guard).
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setPositionStylesOld(calculatePositionOld());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setPositionStylesOld(calculatePositionOld());
+      hasCalculatedInitialPosition.current = true;
+    });
+    return function () {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   useEffect(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
@@ -1188,9 +1251,15 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
   // when hovering anywhere over the column, regardless of which side of the layoutSection the
   // column is on. (The right-side remix button is a separate node decoration and is unaffected.)
   var isLayoutColumn = nodeType === 'layoutColumn';
+
+  // Skip the right-side controlSide restriction for non-top-level nodes. The restriction exists
+  // to avoid showing the drag handle and remix button simultaneously — but remix only applies to
+  // top-level nodes, so non-top-level nodes should never be restricted.
+  // Gated behind platform_editor_controls_reliable_anchor.
+  var skipControlSideRestriction = expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && isTopLevelNode === false;
   return jsx(VisibilityContainer, {
     api: api,
-    controlSide: !isLayoutColumn && rightSideControlsEnabled ? 'left' : undefined,
+    controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
     forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, jsx(DragHandle, {
     view: view,

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

@@ -416,6 +416,10 @@ 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), expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
+    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, expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
+    // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
+    // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.
+    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.1.13",
+	"version": "13.2.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -15,9 +15,7 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": [
-		"*.compiled.css"
-	],
+	"sideEffects": ["*.compiled.css"],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.1.0",
@@ -46,10 +44,10 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.5.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^121.1.0",
-		"@atlaskit/tokens": "^15.4.0",
+		"@atlaskit/tmp-editor-statsig": "^121.3.0",
+		"@atlaskit/tokens": "^15.5.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -59,47 +57,26 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.22.0",
+		"@atlaskit/editor-common": "^116.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {
-			"import-structure": [
-				"atlassian-conventions"
-			],
-			"circular-dependencies": [
-				"file-and-folder-level"
-			],
-			"code-structure": [
-				"editor-plugin"
-			]
+			"import-structure": ["atlassian-conventions"],
+			"circular-dependencies": ["file-and-folder-level"],
+			"code-structure": ["editor-plugin"]
 		},
 		"@repo/internal": {
 			"dom-events": "use-bind-event-listener",
-			"analytics": [
-				"analytics-next"
-			],
-			"design-tokens": [
-				"color"
-			],
-			"theming": [
-				"react-context"
-			],
-			"ui-components": [
-				"lite-mode"
-			],
-			"deprecation": [
-				"no-deprecated-imports"
-			],
-			"styling": [
-				"emotion",
-				"compiled"
-			],
-			"imports": [
-				"import-no-extraneous-disable-for-examples-and-docs"
-			]
+			"analytics": ["analytics-next"],
+			"design-tokens": ["color"],
+			"theming": ["react-context"],
+			"ui-components": ["lite-mode"],
+			"deprecation": ["no-deprecated-imports"],
+			"styling": ["emotion", "compiled"],
+			"imports": ["import-no-extraneous-disable-for-examples-and-docs"]
 		}
 	},
 	"platform-feature-flags": {