@atlaskit/editor-plugin-block-controls 6.2.0 → 6.3.1

package/dist/esm/pm-plugins/decorations-drop-target-active.js

@@ -1,5 +1,6 @@
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from './decorations-common';
 import { createDropTargetDecoration, createLayoutDropTargetDecoration } from './decorations-drop-target';
@@ -227,7 +228,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
       }
     }
   }
-  defaultActiveAnchorTracker.emit(getNodeAnchor(rootNodeWithPos.node));
+  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : getNodeAnchor(rootNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -58,13 +58,11 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
   };
   return Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
-    if (fg('platform_editor_controls_patch_15')) {
-      // inline decoration causes cursor disappear when focusing editor at the first line (e.g. press Tab when title is focused)
-      element.style.display = 'block';
-      if (expValEquals('platform_editor_quick_insert_image_wrap_right_fix', 'isEnabled', true)) {
-        // make sure it does not interfere with elements floating next to each other e.g. paragraph next to image with wrap-right
-        element.style.clear = 'unset';
-      }
+    // inline decoration causes cursor disappear when focusing editor at the first line (e.g. press Tab when title is focused)
+    element.style.display = 'block';
+    if (expValEquals('platform_editor_quick_insert_image_wrap_right_fix', 'isEnabled', true)) {
+      // make sure it does not interfere with elements floating next to each other e.g. paragraph next to image with wrap-right
+      element.style.clear = 'unset';
     }
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -1,6 +1,11 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import memoizeOne from 'memoize-one';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
+import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
 var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -8,6 +13,24 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
+var getNodeSelector = function getNodeSelector(ignoreNodes, ignoreNodeDescendants) {
+  var baseSelector = "[".concat(NODE_ANCHOR_ATTR_NAME, "]");
+  if (ignoreNodes.length === 0 && ignoreNodeDescendants.length === 0) {
+    return baseSelector;
+  }
+  var ignoreNodeSelectorList = ignoreNodes.map(function (node) {
+    return "[data-prosemirror-node-name=\"".concat(node, "\"]");
+  });
+  var ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(function (node) {
+    return "[data-prosemirror-node-name=\"".concat(node, "\"] [data-node-anchor]");
+  });
+  var ignoreSelector = [].concat(_toConsumableArray(ignoreNodeSelectorList), _toConsumableArray(ignoreNodeDescendantsSelectorList), ['[data-prosemirror-node-inline="true"]']).join(', ');
+  return "".concat(baseSelector, ":not(").concat(ignoreSelector, ")");
+};
+var getDefaultNodeSelector = memoizeOne(function () {
+  // we don't show handler for node nested in table
+  return getNodeSelector(_toConsumableArray(IGNORE_NODES_NEXT), [].concat(_toConsumableArray(IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
+});
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _api$editorDisabled, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -37,21 +60,21 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
-  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  var rootElement = target === null || target === void 0 ? void 0 : target.closest(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
-    if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && editorExperiment('advanced_layouts', true)) {
-      rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
+    if (rootElement.getAttribute(getTypeNameAttrName()) === 'media' && editorExperiment('advanced_layouts', true)) {
+      rootElement = rootElement.closest("[".concat(getAnchorAttrName(), "][").concat(getTypeNameAttrName(), "=\"mediaSingle\"]"));
       if (!rootElement) {
         return false;
       }
     }
-    var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
-    var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
+    var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest("[".concat(getAnchorAttrName(), "]"));
+    var parentElementType = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? getTypeNameFromDom(parentElement) : parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
     if (editorExperiment('advanced_layouts', true)) {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
       if (fg('platform_editor_table_drag_handle_shift_fix')) {
@@ -59,8 +82,8 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
           rootElement = parentElement;
         } else if (parentElement && parentElementType === 'tableRow') {
           var _parentElement$parent;
-          var grandparentElement = parentElement === null || parentElement === void 0 || (_parentElement$parent = parentElement.parentElement) === null || _parentElement$parent === void 0 ? void 0 : _parentElement$parent.closest('[data-drag-handler-anchor-name]');
-          var grandparentElementType = grandparentElement === null || grandparentElement === void 0 ? void 0 : grandparentElement.getAttribute('data-drag-handler-node-type');
+          var grandparentElement = parentElement === null || parentElement === void 0 || (_parentElement$parent = parentElement.parentElement) === null || _parentElement$parent === void 0 ? void 0 : _parentElement$parent.closest("[".concat(getAnchorAttrName(), "]"));
+          var grandparentElementType = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? getTypeNameFromDom(grandparentElement) : grandparentElement === null || grandparentElement === void 0 ? void 0 : grandparentElement.getAttribute('data-drag-handler-node-type');
           if (grandparentElement && grandparentElementType === 'table') {
             rootElement = grandparentElement;
           }
@@ -77,7 +100,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
 
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    var anchorName = rootElement.getAttribute(getAnchorAttrName());
     // No need to update handle position if its already there
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
@@ -118,13 +141,13 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute, _rootDOM$getAttribute2;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute('data-drag-handler-anchor-name')) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : undefined;
+          var _rootDOM$getAttribute;
+          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
+          rootNodeType = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? getTypeNameFromDom(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
         }
       }
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _api$core, _api$blockControls2;

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

@@ -19,6 +19,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BLOCK_MENU_ENABLED } from '../ui/consts';
+import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
@@ -636,7 +637,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             event.preventDefault();
             return false;
           }
-          var nodeElement = (_event$target = event.target) === null || _event$target === void 0 || (_event$target$closest = _event$target.closest) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.call(_event$target, '[data-drag-handler-anchor-name]');
+          var nodeElement = (_event$target = event.target) === null || _event$target === void 0 || (_event$target$closest = _event$target.closest) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.call(_event$target, "[".concat(getAnchorAttrName(), "]"));
           if (!nodeElement) {
             return false;
           }
@@ -677,7 +678,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             if (isHTMLElement(event.target)) {
               var closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
               if (closestParentElement) {
-                var currentAnchor = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+                var currentAnchor = closestParentElement.getAttribute(getAnchorAttrName());
                 if (currentAnchor) {
                   defaultActiveAnchorTracker.emit(currentAnchor);
                 }

package/dist/esm/pm-plugins/quick-insert-calculate-position.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from '../ui/consts';
 import { refreshAnchorName } from '../ui/utils/anchor-name';
+import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from './utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from './utils/widget-positions';
 
@@ -25,7 +26,7 @@ export var calculatePosition = function calculatePosition(_ref) {
     view: view,
     anchorName: rootAnchorName
   });
-  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+  var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
   var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
   var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
   var isBlockCard = rootNodeType === 'blockCard';

package/dist/esm/pm-plugins/utils/anchor-utils.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import memoizeOne from 'memoize-one';
+import { getAnchorAttrName } from '../../ui/utils/dom-attr-name';
 export var isAnchorSupported = memoizeOne(function () {
   // directly use CSS would cause failed SSR tests.
   if (window.CSS && window.CSS.supports) {
@@ -30,9 +31,9 @@ export var AnchorRectCache = /*#__PURE__*/function () {
     value: function getRects() {
       if (this.isDirty) {
         var _this$view;
-        var anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
+        var anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll("[".concat(getAnchorAttrName(), "]"))) || [];
         this.anchorRectMap = Array.from(anchorElements).reduce(function (prev, curr) {
-          var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
+          var anchorName = curr.getAttribute(getAnchorAttrName());
           if (anchorName) {
             return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, {
               height: curr.clientHeight,

package/dist/esm/ui/block-menu.js

@@ -7,6 +7,7 @@ import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styl
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
+import { getAnchorAttrName } from './utils/dom-attr-name';
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
@@ -15,7 +16,7 @@ var BlockMenuContent = function BlockMenuContent(_ref) {
     api = _ref.api,
     menuTriggerBy = _ref.menuTriggerBy,
     formatMessage = _ref.formatMessage;
-  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
+  var activeNodeSelector = "[".concat(getAnchorAttrName(), "=").concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = getBlockMenuItems(formatMessage);
   var handleOpenChange = useCallback(function (payload) {
@@ -100,7 +101,7 @@ var BlockMenu = function BlockMenu(_ref3) {
       formatMessage: formatMessage
     });
   }
-  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
+  var activeNodeSelector = "[".concat(getAnchorAttrName(), "=").concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = getBlockMenuItems(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {

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

@@ -34,6 +34,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
@@ -42,6 +43,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
+import { getAnchorAttrName } from './utils/dom-attr-name';
 import { VisibilityContainer } from './visibility-container';
 var iconWrapperStyles = xcss({
   display: 'flex',
@@ -323,7 +325,7 @@ export var DragHandle = function DragHandle(_ref) {
     }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
       var container = dom === null || dom === void 0 ? void 0 : dom.querySelector('.datasourceView-content-inner-wrap');
       if (container) {
         var resizeObserver = new ResizeObserver(function (entries) {
@@ -542,7 +544,7 @@ export var DragHandle = function DragHandle(_ref) {
           },
           render: function render(_ref6) {
             var container = _ref6.container;
-            var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+            var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
             }
@@ -625,7 +627,7 @@ export var DragHandle = function DragHandle(_ref) {
       setRecalculatePosition(recalculatePosition);
     }
     var pos = getPos();
-    var $pos = pos && view.state.doc.resolve(pos);
+    var $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -635,7 +637,7 @@ export var DragHandle = function DragHandle(_ref) {
       view: view,
       anchorName: anchorName
     }) : anchorName;
-    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard';
@@ -660,7 +662,7 @@ export var DragHandle = function DragHandle(_ref) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       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(nodeType), "px)")
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -671,7 +673,7 @@ export var DragHandle = function DragHandle(_ref) {
   }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = useCallback(function () {
     var pos = getPos();
-    var $pos = pos && view.state.doc.resolve(pos);
+    var $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -681,7 +683,7 @@ export var DragHandle = function DragHandle(_ref) {
       view: view,
       anchorName: anchorName
     }) : anchorName;
-    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
@@ -706,7 +708,7 @@ export var DragHandle = function DragHandle(_ref) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       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(nodeType), "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_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -721,7 +723,7 @@ export var DragHandle = function DragHandle(_ref) {
     }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
       if (!dom) {
         return;
       }
@@ -747,7 +749,7 @@ export var DragHandle = function DragHandle(_ref) {
     }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
       if (!dom) {
         return;
       }
@@ -928,7 +930,7 @@ export var DragHandle = function DragHandle(_ref) {
         });
       }
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -942,7 +944,7 @@ export var DragHandle = function DragHandle(_ref) {
     }, jsx("span", {
       css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, buttonWrapperStylesPatch]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

package/dist/esm/ui/drop-target-layout.js

@@ -12,10 +12,12 @@ import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
 import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
 import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
+import { getAnchorAttrName } from './utils/dom-attr-name';
 
 // 8px gap + 16px on left and right
 var DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH = 40;
@@ -46,7 +48,7 @@ export var DropTargetLayout = function DropTargetLayout(props) {
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = getNodeAnchor(parent);
-  var nextNodeAnchorName = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 || (_ref$current = _ref$current.nextElementSibling) === null || _ref$current === void 0 ? void 0 : _ref$current.getAttribute('data-drag-handler-anchor-name');
+  var nextNodeAnchorName = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 || (_ref$current = _ref$current.nextElementSibling) === null || _ref$current === void 0 ? void 0 : _ref$current.getAttribute(getAnchorAttrName());
   var height = '100%';
   if (nextNodeAnchorName) {
     if (isAnchorSupported()) {
@@ -120,7 +122,7 @@ export var DropTargetLayout = function DropTargetLayout(props) {
   }, isDraggedOver ? jsx(DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
-  }) : isActiveAnchor && jsx("div", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,

package/dist/esm/ui/drop-target.js

@@ -13,6 +13,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
@@ -71,17 +72,26 @@ var HoverZone = function HoverZone(_ref) {
     onDragLeave = _ref.onDragLeave,
     onDrop = _ref.onDrop,
     node = _ref.node,
+    pos = _ref.pos,
     parent = _ref.parent,
     editorWidth = _ref.editorWidth,
     anchorRectCache = _ref.anchorRectCache,
     position = _ref.position,
     isNestedDropTarget = _ref.isNestedDropTarget,
-    dropTargetStyle = _ref.dropTargetStyle;
+    dropTargetStyle = _ref.dropTargetStyle,
+    api = _ref.api;
   var ref = useRef(null);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var anchorName = useMemo(function () {
+    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if (node && typeof pos === 'number') {
+        var posOffset = position === 'upper' ? -node.nodeSize : 0;
+        return (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos + posOffset)) || '';
+      }
+      return '';
+    }
     return node ? getNodeAnchor(node) : '';
-  }, [node]);
+  }, [api, node, pos, position]);
   var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 2),
     _isActive = _useActiveAnchorTrack2[0],
@@ -126,7 +136,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var _anchorName = node ? getNodeAnchor(node) : '';
+      var _anchorName = node ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       var top = 'unset';
       if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
@@ -154,7 +164,7 @@ var HoverZone = function HoverZone(_ref) {
       });
     }
     return null;
-  }, [anchorRectCache, isRemainingheight, node, position]);
+  }, [anchorRectCache, api, isRemainingheight, node, pos, position]);
   var isFullHeightInLayout = isRemainingheight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
   return jsx("div", {
     ref: ref
@@ -220,11 +230,13 @@ export var DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: prevNode,
+    pos: getPos(),
     editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
+    dropTargetStyle: dropTargetStyle,
+    api: api
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
@@ -246,11 +258,13 @@ export var DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: nextNode,
+    pos: getPos(),
     parent: parentNode,
     editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    api: api
   }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading