@atlaskit/editor-plugin-block-controls 13.2.16 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.3.0
+
+### Minor Changes
+
+- [`fee74586b3125`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fee74586b3125) -
+  Improve block controls anchor reliability by adding control-specific fallback anchor names for
+  active drag-handle and quick-insert nodes.
+
+  When reliable-anchor mode is enabled, active nodes now expose fallback anchor names in addition to
+  `data-node-anchor`, so controls can resolve positioning even when primary anchor lookup is
+  temporarily out of sync.
+
+  Example of resulting CSS anchor usage:
+  - Drag handle:
+    `anchor(<data-node-anchor> start, anchor(--editor-block-controls-active-drag-handle-anchor start))`
+  - Quick insert:
+    `anchor(<data-node-anchor> start, anchor(--editor-block-controls-active-quick-insert-anchor start))`
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.17
+
+### Patch Changes
+
+- [`161922d5b8cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/161922d5b8cee) -
+  Fix editor tooltips affected by inline top-layer rendering. Table cell menu tooltips are no longer
+  constrained by the button background selector, and layout column drag handles now own their
+  wrapper layout without flattening the tooltip's visual surface.
+- Updated dependencies
+
 ## 13.2.16
 
 ### Patch Changes

package/dist/cjs/pm-plugins/utils/drag-handle-positions.js

@@ -69,7 +69,14 @@ var getStickyNodes = (0, _memoizeOne.default)(function () {
 var shouldBeSticky = exports.shouldBeSticky = function shouldBeSticky(nodeType) {
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
-var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
+var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn, fallbackAnchor) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+      bottom: 'unset'
+    } : {
+      bottom: fallbackAnchor ? "anchor(".concat(anchor, " end, anchor(").concat(fallbackAnchor, " end))") : "anchor(".concat(anchor, " end)")
+    };
+  }
   return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
     bottom: 'unset'
   } : {

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 = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = 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_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -16,6 +16,8 @@ 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 ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-drag-handle-anchor';
+var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-quick-insert-anchor';
 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

@@ -383,18 +383,26 @@ var buildToggleLayoutColumnMenuMeta = function buildToggleLayoutColumnMenuMeta(a
     openedViaKeyboard: openedViaKeyboard
   });
 };
-var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
+  var edge = _ref.edge,
+    safeAnchorName = _ref.safeAnchorName;
+  if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(_consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
+  }
+  return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
+};
+var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var _api$core4, _api$blockControls8;
-  var view = _ref.view,
-    api = _ref.api,
-    formatMessage = _ref.formatMessage,
-    getPos = _ref.getPos,
-    anchorName = _ref.anchorName,
-    nodeType = _ref.nodeType,
-    handleOptions = _ref.handleOptions,
-    _ref$isTopLevelNode = _ref.isTopLevelNode,
-    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
-    anchorRectCache = _ref.anchorRectCache;
+  var view = _ref2.view,
+    api = _ref2.api,
+    formatMessage = _ref2.formatMessage,
+    getPos = _ref2.getPos,
+    anchorName = _ref2.anchorName,
+    nodeType = _ref2.nodeType,
+    handleOptions = _ref2.handleOptions,
+    _ref2$isTopLevelNode = _ref2.isTopLevelNode,
+    isTopLevelNode = _ref2$isTopLevelNode === void 0 ? true : _ref2$isTopLevelNode,
+    anchorRectCache = _ref2.anchorRectCache;
   var buttonRef = (0, _react.useRef)(null);
   var mouseDownRef = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
@@ -507,9 +515,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   }, []);
   var handleOnClickNew = (0, _react.useCallback)(function (e) {
     var _api$core;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
       var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
-      var tr = _ref2.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -558,9 +566,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   }, [api, view, getPos, nodeType, anchorName]);
   var handleOnClick = (0, _react.useCallback)(function (e) {
     var _api$core2;
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref3.tr;
+      var tr = _ref4.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -603,8 +611,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     if (!e.repeat && e.key === ' ') {
       var _api$core3;
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
-        var tr = _ref4.tr;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -635,9 +643,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
+      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
         var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
-        var tr = _ref5.tr;
+        var tr = _ref6.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -696,11 +704,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref7) {
         var _api$core6, _api$blockControls$sh2;
-        var nativeSetDragImage = _ref6.nativeSetDragImage;
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
-          var tr = _ref7.tr;
+        var nativeSetDragImage = _ref7.nativeSetDragImage;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
+          var tr = _ref8.tr;
           var handlePos = getPos();
           if (typeof handlePos !== 'number') {
             return tr;
@@ -777,8 +785,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref8) {
-            var container = _ref8.container;
+          render: function render(_ref9) {
+            var container = _ref9.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -814,9 +822,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref9) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref0) {
           var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
-          var tr = _ref9.tr;
+          var tr = _ref0.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -893,10 +901,26 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
+      var anchorStart = getDragHandleAnchorReference({
+        edge: 'start',
+        safeAnchorName: safeAnchorName
+      });
+      var anchorTop = getDragHandleAnchorReference({
+        edge: 'top',
+        safeAnchorName: safeAnchorName
+      });
+      var anchorLeft = getDragHandleAnchorReference({
+        edge: 'left',
+        safeAnchorName: safeAnchorName
+      });
+      var anchorRight = getDragHandleAnchorReference({
+        edge: 'right',
+        safeAnchorName: safeAnchorName
+      });
+      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
+        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -1133,8 +1157,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             var _pos = getPos();
             if (_pos !== undefined) {
               var _api$core8;
-              api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref0) {
-                var tr = _ref0.tr;
+              api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref1) {
+                var tr = _ref1.tr;
                 tr.setMeta(_main.key, {
                   activeNode: {
                     pos: _pos,
@@ -1177,7 +1201,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }, (0, _react2.jsx)(_tooltip.default, {
       content: tooltipContent,
       ignoreTooltipPointerEvents: true,
-      position: 'top'
+      position: 'top',
+      tag: (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip') ? 'span' : 'div'
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       onShow: function onShow() {
@@ -1234,16 +1259,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
-  var view = _ref1.view,
-    api = _ref1.api,
-    formatMessage = _ref1.formatMessage,
-    getPos = _ref1.getPos,
-    anchorName = _ref1.anchorName,
-    nodeType = _ref1.nodeType,
-    handleOptions = _ref1.handleOptions,
-    isTopLevelNode = _ref1.isTopLevelNode,
-    anchorRectCache = _ref1.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
+  var view = _ref10.view,
+    api = _ref10.api,
+    formatMessage = _ref10.formatMessage,
+    getPos = _ref10.getPos,
+    anchorName = _ref10.anchorName,
+    nodeType = _ref10.nodeType,
+    handleOptions = _ref10.handleOptions,
+    isTopLevelNode = _ref10.isTopLevelNode,
+    anchorRectCache = _ref10.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {
@@ -1264,7 +1289,8 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api,
     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)
+    forceVisibleOnMouseOut: (0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused),
+    shouldUseDisplayContents: isLayoutColumn && (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip')
   }, (0, _react2.jsx)(DragHandle, {
     view: view,
     api: api,

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

@@ -348,6 +348,9 @@ var nextAnchorSelector = ['&[data-node-anchor]',
 // adjacent sibling with anchor (when next to a widget like gap cursor)
 '&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]:first-of-type' // first nested anchor inside adjacent sibling (when next to a widget like gap cursor)
 ].join(', ');
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+var combinedControlsFallbackAnchorNames = "".concat(_consts.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ", ").concat(_consts.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME);
 var dragHandlerAnchorStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
@@ -363,17 +366,31 @@ 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>)))")
-  })
+  '.ProseMirror': {
+    // Active node can be both drag-handle and quick-insert target. Expose all three names:
+    // node anchor + both control-specific fallback anchors.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-active-drag-handle][data-active-quick-insert][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "".concat(combinedControlsFallbackAnchorNames, ", var(").concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-active-drag-handle][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "".concat(_consts.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ", var(").concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-active-quick-insert][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "".concat(_consts.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, ", var(").concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
 });
 
 // Styles applied to nodes with anchors when dragging

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

@@ -151,15 +151,23 @@ var tooltipContainerStylesImprovedStickyHeaderWithMarksFix = (0, _react2.css)({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
-var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
-  var view = _ref.view,
-    api = _ref.api,
-    formatMessage = _ref.formatMessage,
-    getPos = _ref.getPos,
-    anchorName = _ref.anchorName,
-    rootAnchorName = _ref.rootAnchorName,
-    rootNodeType = _ref.rootNodeType,
-    anchorRectCache = _ref.anchorRectCache;
+var getQuickInsertAnchorReference = function getQuickInsertAnchorReference(_ref) {
+  var edge = _ref.edge,
+    safeAnchorName = _ref.safeAnchorName;
+  if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(_consts.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
+  }
+  return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
+};
+var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref2) {
+  var view = _ref2.view,
+    api = _ref2.api,
+    formatMessage = _ref2.formatMessage,
+    getPos = _ref2.getPos,
+    anchorName = _ref2.anchorName,
+    rootAnchorName = _ref2.rootAnchorName,
+    rootNodeType = _ref2.rootNodeType,
+    anchorRectCache = _ref2.anchorRectCache;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -217,12 +225,16 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(rootNodeType);
-    var bottom = (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName || anchorName, isSticky, true);
+    var anchorStart = getQuickInsertAnchorReference({
+      edge: 'start',
+      safeAnchorName: safeAnchorName
+    });
+    var bottom = (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName || anchorName, isSticky, true, false, _consts.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME);
     if (supportsAnchor) {
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
+        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(anchorStart, " - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
         // small text requires further tweaking to positioning, re-using existing methods to calculate to keep it unified with drag handle
-        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(node && node.type.name === 'paragraph' && (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _decorationsCommon.getNodeTypeWithLevel)(node) : rootNodeType), "px)")
+        top: "calc(".concat(anchorStart, " + ").concat((0, _consts.topPositionAdjustment)(node && node.type.name === 'paragraph' && (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _decorationsCommon.getNodeTypeWithLevel)(node) : rootNodeType), "px)")
       }, bottom);
     }
 
@@ -287,8 +299,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
             var newPos =
             //if the current selection is selected from right to left, then set the selection to the start of the paragraph
             currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
-            api.core.actions.execute(function (_ref2) {
-              var tr = _ref2.tr;
+            api.core.actions.execute(function (_ref3) {
+              var tr = _ref3.tr;
               tr.setSelection(_state.TextSelection.create(view.state.selection.$from.doc, newPos));
               return tr;
             });
@@ -302,8 +314,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
             // otherwise need to force the selection to be at the start of the node, because
             // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
             // consistent NodeSelection for root level nodes.
-            api.core.actions.execute(function (_ref3) {
-              var tr = _ref3.tr;
+            api.core.actions.execute(function (_ref4) {
+              var tr = _ref4.tr;
               (0, _editorCommands.createNewLine)(view.state.selection.from)({
                 tr: tr
               });
@@ -315,8 +327,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
         if (currentSelection instanceof _cellSelection.CellSelection) {
           // find the last inline position in the selection
           var lastInlinePosition = _state.TextSelection.near(view.state.selection.$to, -1);
-          lastInlinePosition && api.core.actions.execute(function (_ref4) {
-            var tr = _ref4.tr;
+          lastInlinePosition && api.core.actions.execute(function (_ref5) {
+            var tr = _ref5.tr;
             if (!(lastInlinePosition instanceof _state.TextSelection)) {
               // this will create a new line after the node
               (0, _editorCommands.createNewLine)(lastInlinePosition.from)({
@@ -375,16 +387,16 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     css: [tooltipContainerStyles, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') ? tooltipContainerImprovedStylesStickyHeader : tooltipContainerStylesStickyHeader, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') ? tooltipContainerStylesImprovedStickyHeaderWithMarksFix : tooltipContainerStylesStickyHeaderWithMarksFix]
   }, tooltipPressable()));
 };
-var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
-  var view = _ref5.view,
-    api = _ref5.api,
-    formatMessage = _ref5.formatMessage,
-    getPos = _ref5.getPos,
-    nodeType = _ref5.nodeType,
-    anchorName = _ref5.anchorName,
-    rootAnchorName = _ref5.rootAnchorName,
-    rootNodeType = _ref5.rootNodeType,
-    anchorRectCache = _ref5.anchorRectCache;
+var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref6) {
+  var view = _ref6.view,
+    api = _ref6.api,
+    formatMessage = _ref6.formatMessage,
+    getPos = _ref6.getPos,
+    nodeType = _ref6.nodeType,
+    anchorName = _ref6.anchorName,
+    rootAnchorName = _ref6.rootAnchorName,
+    rootNodeType = _ref6.rootNodeType,
+    anchorRectCache = _ref6.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls, _states$blockControls2;
     return {

package/dist/cjs/ui/visibility-container.js

@@ -37,6 +37,9 @@ var hiddenStyles = (0, _primitives.xcss)({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStyles = (0, _primitives.xcss)({
+  display: 'contents'
+});
 var baseStylesCSS = (0, _react2.css)((0, _defineProperty2.default)({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 }, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
@@ -51,11 +54,15 @@ var hiddenStylesCSS = (0, _react2.css)({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStylesCSS = (0, _react2.css)({
+  display: 'contents'
+});
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children,
     controlSide = _ref.controlSide,
-    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -128,12 +135,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     exposure: true
   })) {
     return (0, _react2.jsx)("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return (0, _react2.jsx)(_primitives.Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -57,7 +57,14 @@ const getStickyNodes = memoizeOne(() => [...STICKY_NODES, ...(expValEquals('conf
 export const shouldBeSticky = nodeType => {
   return editorExperiment('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
-export const getControlBottomCSSValue = (anchor, isSticky, isTopLevelNode, isLayoutColumn) => {
+export const getControlBottomCSSValue = (anchor, isSticky, isTopLevelNode, isLayoutColumn, fallbackAnchor) => {
+  if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+      bottom: 'unset'
+    } : {
+      bottom: fallbackAnchor ? `anchor(${anchor} end, anchor(${fallbackAnchor} end))` : `anchor(${anchor} end)`
+    };
+  }
   return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
     bottom: 'unset'
   } : {

package/dist/es2019/ui/consts.js

@@ -6,6 +6,8 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 export const ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
+export const ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-drag-handle-anchor';
+export const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-quick-insert-anchor';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer

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

@@ -35,7 +35,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { ACTIVE_DRAG_HANDLE_ATTR, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { DragHandleNestedIcon } from './drag-handle-nested-icon';
 import { dragPreview } from './drag-preview';
 import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
@@ -375,6 +375,15 @@ const buildToggleLayoutColumnMenuMeta = (anchorPos, openedViaKeyboard) => ({
   } : {}),
   openedViaKeyboard
 });
+const getDragHandleAnchorReference = ({
+  edge,
+  safeAnchorName
+}) => {
+  if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return `anchor(${safeAnchorName} ${edge}, anchor(${ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME} ${edge}))`;
+  }
+  return `anchor(${safeAnchorName} ${edge})`;
+};
 export const DragHandle = ({
   view,
   api,
@@ -871,10 +880,26 @@ export const DragHandle = ({
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
+      const anchorStart = getDragHandleAnchorReference({
+        edge: 'start',
+        safeAnchorName
+      });
+      const anchorTop = getDragHandleAnchorReference({
+        edge: 'top',
+        safeAnchorName
+      });
+      const anchorLeft = getDragHandleAnchorReference({
+        edge: 'left',
+        safeAnchorName
+      });
+      const anchorRight = getDragHandleAnchorReference({
+        edge: 'right',
+        safeAnchorName
+      });
+      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return {
-        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
+        left: isEdgeCase ? `calc(${anchorStart} + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((${anchorRight} + ${anchorLeft})/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(${anchorStart} - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(${anchorTop} - ${DRAG_HANDLE_WIDTH}px)` : `calc(${anchorStart} + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
         ...bottom
       };
     }
@@ -1154,7 +1179,8 @@ export const DragHandle = ({
   }, jsx(Tooltip, {
     content: tooltipContent,
     ignoreTooltipPointerEvents: true,
-    position: 'top'
+    position: 'top',
+    tag: fg('platform-dst-top-layer-tooltip') ? 'span' : 'div'
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onShow: () => {
@@ -1237,7 +1263,8 @@ export const DragHandleWithVisibility = ({
   return jsx(VisibilityContainer, {
     api: api,
     controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
-    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
+    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused),
+    shouldUseDisplayContents: isLayoutColumn && fg('platform-dst-top-layer-tooltip')
   }, jsx(DragHandle, {
     view: view,
     api: api,