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

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

@@ -11,7 +11,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_QUICK_INSERT_ATTR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -428,6 +428,9 @@ const 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
+const combinedControlsFallbackAnchorNames = `${ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME}, ${ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME}`;
 const dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
@@ -449,7 +452,6 @@ const dragHandlerAnchorStyles = css({
     }
   }
 });
-const activeControlsSelector = `[${ACTIVE_DRAG_HANDLE_ATTR}], [${ACTIVE_QUICK_INSERT_ATTR}]`;
 
 // Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
 // This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
@@ -457,10 +459,22 @@ const activeControlsSelector = `[${ACTIVE_DRAG_HANDLE_ATTR}], [${ACTIVE_QUICK_IN
 const staticControlsAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [activeControlsSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    // 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: `${combinedControlsFallbackAnchorNames}, var(${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: `${ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME}, var(${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: `${ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME}, var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
     }
   }
 });

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

@@ -23,7 +23,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { ACTIVE_QUICK_INSERT_ATTR, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_QUICK_INSERT_ATTR, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -141,6 +141,15 @@ const tooltipContainerStylesImprovedStickyHeaderWithMarksFix = css({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
+const getQuickInsertAnchorReference = ({
+  edge,
+  safeAnchorName
+}) => {
+  if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return `anchor(${safeAnchorName} ${edge}, anchor(${ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME} ${edge}))`;
+  }
+  return `anchor(${safeAnchorName} ${edge})`;
+};
 export const TypeAheadControl = ({
   view,
   api,
@@ -206,12 +215,16 @@ export const TypeAheadControl = ({
     }
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(rootNodeType);
-    const bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true);
+    const anchorStart = getQuickInsertAnchorReference({
+      edge: 'start',
+      safeAnchorName
+    });
+    const bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true, false, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME);
     if (supportsAnchor) {
       return {
-        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${safeAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
+        left: isEdgeCase ? `calc(${anchorStart} + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(${anchorStart} - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${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(${safeAnchorName} start) + ${topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType)}px)`,
+        top: `calc(${anchorStart} + ${topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType)}px)`,
         ...bottom
       };
     }

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

@@ -24,6 +24,9 @@ const hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+const displayContentsStyles = xcss({
+  display: 'contents'
+});
 const baseStylesCSS = css({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -40,11 +43,15 @@ const hiddenStylesCSS = css({
   opacity: 0,
   visibility: 'hidden'
 });
+const displayContentsStylesCSS = css({
+  display: 'contents'
+});
 export const VisibilityContainer = ({
   api,
   children,
   controlSide,
-  forceVisibleOnMouseOut
+  forceVisibleOnMouseOut,
+  shouldUseDisplayContents
 }) => {
   const {
     isTypeAheadOpen,
@@ -116,12 +123,12 @@ export const VisibilityContainer = ({
     exposure: true
   })) {
     return jsx("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return jsx(Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return jsx(Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

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

@@ -62,7 +62,14 @@ var getStickyNodes = memoizeOne(function () {
 export var shouldBeSticky = function shouldBeSticky(nodeType) {
   return editorExperiment('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
-export var getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
+export var getControlBottomCSSValue = function 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(".concat(anchor, " end, anchor(").concat(fallbackAnchor, " end))") : "anchor(".concat(anchor, " end)")
+    };
+  }
   return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
     bottom: 'unset'
   } : {

package/dist/esm/ui/consts.js

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

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

@@ -40,7 +40,7 @@ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, ge
 import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { 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';
@@ -379,18 +379,26 @@ var buildToggleLayoutColumnMenuMeta = function buildToggleLayoutColumnMenuMeta(a
     openedViaKeyboard: openedViaKeyboard
   });
 };
-export var DragHandle = function DragHandle(_ref) {
+var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
+  var edge = _ref.edge,
+    safeAnchorName = _ref.safeAnchorName;
+  if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
+  }
+  return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
+};
+export var 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 = useRef(null);
   var mouseDownRef = useRef(false);
   var _useState = useState(false),
@@ -503,9 +511,9 @@ export var DragHandle = function DragHandle(_ref) {
   }, []);
   var handleOnClickNew = 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;
@@ -554,9 +562,9 @@ export var DragHandle = function DragHandle(_ref) {
   }, [api, view, getPos, nodeType, anchorName]);
   var handleOnClick = 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;
@@ -599,8 +607,8 @@ export var 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;
         }
@@ -631,9 +639,9 @@ export var 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;
         }
@@ -692,11 +700,11 @@ export var 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;
@@ -773,8 +781,8 @@ export var 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(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -810,9 +818,9 @@ export var 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;
@@ -889,10 +897,26 @@ export var DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? 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 = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(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(".concat(anchorStart, " + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat(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);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -1129,8 +1153,8 @@ export var 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(key, {
                   activeNode: {
                     pos: _pos,
@@ -1173,7 +1197,8 @@ export var DragHandle = function DragHandle(_ref) {
     }, 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: function onShow() {
@@ -1230,16 +1255,16 @@ export var DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-export var 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;
+export var 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 = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {
@@ -1260,7 +1285,8 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
   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,

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

@@ -12,7 +12,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_QUICK_INSERT_ATTR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -341,6 +341,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(ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ", ").concat(ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME);
 var dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
@@ -356,17 +359,31 @@ var dragHandlerAnchorStyles = css({
     })
   }
 });
-var activeControlsSelector = "[".concat(ACTIVE_DRAG_HANDLE_ATTR, "], [").concat(ACTIVE_QUICK_INSERT_ATTR, "]");
 
 // Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
 // This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
 // Only nodes decorated with data-active-drag-handle / data-active-quick-insert get anchor-name.
 var staticControlsAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': _defineProperty({}, activeControlsSelector, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-  })
+  '.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(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(ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ", var(").concat(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(ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, ", var(").concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
 });
 
 // Styles applied to nodes with anchors when dragging

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

@@ -27,7 +27,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { ACTIVE_QUICK_INSERT_ATTR, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_QUICK_INSERT_ATTR, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -145,15 +145,23 @@ var tooltipContainerStylesImprovedStickyHeaderWithMarksFix = css({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
-export var 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 (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
+  }
+  return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
+};
+export var 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 = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -211,12 +219,16 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(rootNodeType);
-    var bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true);
+    var anchorStart = getQuickInsertAnchorReference({
+      edge: 'start',
+      safeAnchorName: safeAnchorName
+    });
+    var bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true, false, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME);
     if (supportsAnchor) {
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
+        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(anchorStart, " - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(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(topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType), "px)")
+        top: "calc(".concat(anchorStart, " + ").concat(topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType), "px)")
       }, bottom);
     }
 
@@ -281,8 +293,8 @@ export var 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(TextSelection.create(view.state.selection.$from.doc, newPos));
               return tr;
             });
@@ -296,8 +308,8 @@ export var 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;
               createNewLine(view.state.selection.from)({
                 tr: tr
               });
@@ -309,8 +321,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
         if (currentSelection instanceof CellSelection) {
           // find the last inline position in the selection
           var lastInlinePosition = 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 TextSelection)) {
               // this will create a new line after the node
               createNewLine(lastInlinePosition.from)({
@@ -369,16 +381,16 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     css: [tooltipContainerStyles, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') ? tooltipContainerImprovedStylesStickyHeader : tooltipContainerStylesStickyHeader, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') ? tooltipContainerStylesImprovedStickyHeaderWithMarksFix : tooltipContainerStylesStickyHeaderWithMarksFix]
   }, tooltipPressable()));
 };
-export var 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;
+export var 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 = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
     var _states$blockControls, _states$blockControls2;
     return {

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

@@ -26,6 +26,9 @@ var hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStyles = xcss({
+  display: 'contents'
+});
 var baseStylesCSS = css(_defineProperty({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 }, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
@@ -40,11 +43,15 @@ var hiddenStylesCSS = css({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStylesCSS = css({
+  display: 'contents'
+});
 export var 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 = useSharedPluginStateWithSelector(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -117,12 +124,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
     exposure: true
   })) {
     return jsx("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return jsx(Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return jsx(Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

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

@@ -3,7 +3,7 @@ export declare const getTopPosition: (dom: HTMLElement | null, type?: string) =>
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean, parentType?: string) => string;
 export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;
 export declare const shouldBeSticky: (nodeType: string) => boolean;
-export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolean, isTopLevelNode: boolean, isLayoutColumn?: boolean) => {
+export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolean, isTopLevelNode: boolean, isLayoutColumn?: boolean, fallbackAnchor?: string) => {
     bottom: String;
 };
 export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {