@atlaskit/editor-plugin-block-controls 6.1.1 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 6.3.0
+
+### Minor Changes
+
+- [`4fb6d9ad07d59`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4fb6d9ad07d59) -
+  ED-28777 Integrate native anchor for block controls
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.2.0
+
+### Minor Changes
+
+- [`b367661ba720e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b367661ba720e) -
+  EDITOR-1562 bump adf-schema for afm
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -4,15 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = void 0;
+exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = exports.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = exports.IGNORE_NODES_NEXT = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
-var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
+var IGNORE_NODES_NEXT = exports.IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
-var IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
+var IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = exports.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
 var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
@@ -106,6 +107,9 @@ var findNodeDecs = exports.findNodeDecs = function findNodeDecs(state, decoratio
 };
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return [];
+  }
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
   var ignore_nodes = (0, _experiments.editorExperiment)('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getActiveDropTargetDecorations = exports.canMoveNodeOrSliceToPos = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
 var _decorationsDropTarget = require("./decorations-drop-target");
@@ -232,7 +233,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
       }
     }
   }
-  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(rootNodeWithPos.node));
+  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : (0, _decorationsCommon.getNodeAnchor)(rootNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseOver = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _domAttrName = require("../ui/utils/dom-attr-name");
+var _decorationsAnchor = require("./decorations-anchor");
 var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -14,6 +20,24 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
+var getNodeSelector = function getNodeSelector(ignoreNodes, ignoreNodeDescendants) {
+  var baseSelector = "[".concat(_domAttrName.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((0, _toConsumableArray2.default)(ignoreNodeSelectorList), (0, _toConsumableArray2.default)(ignoreNodeDescendantsSelectorList), ['[data-prosemirror-node-inline="true"]']).join(', ');
+  return "".concat(baseSelector, ":not(").concat(ignoreSelector, ")");
+};
+var getDefaultNodeSelector = (0, _memoizeOne.default)(function () {
+  // we don't show handler for node nested in table
+  return getNodeSelector((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODES_NEXT), [].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
+});
 var handleMouseOver = exports.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()) || {},
@@ -43,21 +67,21 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   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((0, _expValEquals.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' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
-      rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
+    if (rootElement.getAttribute((0, _domAttrName.getTypeNameAttrName)()) === 'media' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+      rootElement = rootElement.closest("[".concat((0, _domAttrName.getAnchorAttrName)(), "][").concat((0, _domAttrName.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((0, _domAttrName.getAnchorAttrName)(), "]"));
+    var parentElementType = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (0, _domAttrName.getTypeNameFromDom)(parentElement) : parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
     if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
       if ((0, _platformFeatureFlags.fg)('platform_editor_table_drag_handle_shift_fix')) {
@@ -65,8 +89,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
           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((0, _domAttrName.getAnchorAttrName)(), "]"));
+          var grandparentElementType = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (0, _domAttrName.getTypeNameFromDom)(grandparentElement) : grandparentElement === null || grandparentElement === void 0 ? void 0 : grandparentElement.getAttribute('data-drag-handler-node-type');
           if (grandparentElement && grandparentElementType === 'table') {
             rootElement = grandparentElement;
           }
@@ -83,7 +107,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
 
     // 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((0, _domAttrName.getAnchorAttrName)());
     // No need to update handle position if its already there
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
@@ -124,13 +148,13 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       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((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
+          rootNodeType = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (0, _domAttrName.getTypeNameFromDom)(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
         }
       }
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _api$core, _api$blockControls2;

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

@@ -24,6 +24,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
+var _domAttrName = require("../ui/utils/dom-attr-name");
 var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
@@ -642,7 +643,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             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((0, _domAttrName.getAnchorAttrName)(), "]"));
           if (!nodeElement) {
             return false;
           }
@@ -683,7 +684,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             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((0, _domAttrName.getAnchorAttrName)());
                 if (currentAnchor) {
                   _activeAnchorTracker.defaultActiveAnchorTracker.emit(currentAnchor);
                 }

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

@@ -8,6 +8,7 @@ exports.calculatePosition = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _consts = require("../ui/consts");
 var _anchorName = require("../ui/utils/anchor-name");
+var _domAttrName = require("../ui/utils/dom-attr-name");
 var _dragHandlePositions = require("./utils/drag-handle-positions");
 var _widgetPositions = require("./utils/widget-positions");
 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; }
@@ -31,7 +32,7 @@ var calculatePosition = exports.calculatePosition = function calculatePosition(_
     view: view,
     anchorName: rootAnchorName
   });
-  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+  var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
   var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
   var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
   var isBlockCard = rootNodeType === 'blockCard';

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

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _domAttrName = require("../../ui/utils/dom-attr-name");
 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) { (0, _defineProperty2.default)(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; }
 var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(function () {
@@ -37,9 +38,9 @@ var AnchorRectCache = exports.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((0, _domAttrName.getAnchorAttrName)(), "]"))) || [];
         this.anchorRectMap = Array.from(anchorElements).reduce(function (prev, curr) {
-          var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
+          var anchorName = curr.getAttribute((0, _domAttrName.getAnchorAttrName)());
           if (anchorName) {
             return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, anchorName, {
               height: curr.clientHeight,

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

@@ -14,6 +14,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuItems = require("./block-menu-items");
 var _consts = require("./consts");
+var _domAttrName = require("./utils/dom-attr-name");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var editorView = _ref.editorView,
@@ -23,7 +24,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((0, _domAttrName.getAnchorAttrName)(), "=").concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = (0, _blockMenuItems.getBlockMenuItems)(formatMessage);
   var handleOpenChange = (0, _react.useCallback)(function (payload) {
@@ -108,7 +109,7 @@ var BlockMenu = function BlockMenu(_ref3) {
       formatMessage: formatMessage
     });
   }
-  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
+  var activeNodeSelector = "[".concat((0, _domAttrName.getAnchorAttrName)(), "=").concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = (0, _blockMenuItems.getBlockMenuItems)(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {

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

@@ -31,6 +31,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
@@ -39,6 +40,7 @@ var _selection = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
+var _domAttrName = require("./utils/dom-attr-name");
 var _visibilityContainer = require("./visibility-container");
 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) { (0, _defineProperty2.default)(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; } /**
@@ -326,7 +328,7 @@ var DragHandle = exports.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((0, _domAttrName.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) {
@@ -545,7 +547,7 @@ var DragHandle = exports.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
             }
@@ -628,7 +630,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       setRecalculatePosition(recalculatePosition);
     }
     var pos = getPos();
-    var $pos = pos && view.state.doc.resolve(pos);
+    var $pos = (0, _expValEquals.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;
@@ -638,7 +640,7 @@ var DragHandle = exports.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard';
@@ -663,7 +665,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       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)(nodeType), "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, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, "px)")
       }, bottom);
     }
     var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -674,7 +676,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
-    var $pos = pos && view.state.doc.resolve(pos);
+    var $pos = (0, _expValEquals.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;
@@ -684,7 +686,7 @@ var DragHandle = exports.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
@@ -709,7 +711,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       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)(nodeType), "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_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
     var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -724,7 +726,7 @@ var DragHandle = exports.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
       if (!dom) {
         return;
       }
@@ -750,7 +752,7 @@ var DragHandle = exports.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
       if (!dom) {
         return;
       }

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

@@ -13,10 +13,12 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
 var _updateSelection = require("../pm-plugins/utils/update-selection");
+var _domAttrName = require("./utils/dom-attr-name");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -53,7 +55,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = (0, _decorationsCommon.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((0, _domAttrName.getAnchorAttrName)());
   var height = '100%';
   if (nextNodeAnchorName) {
     if ((0, _anchorUtils.isAnchorSupported)()) {
@@ -127,7 +129,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
   }, isDraggedOver ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
-  }) : isActiveAnchor && (0, _react2.jsx)("div", {
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,

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

@@ -14,6 +14,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
@@ -79,17 +80,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 = (0, _react.useRef)(null);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var anchorName = (0, _react.useMemo)(function () {
+    if ((0, _expValEquals.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 ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
-  }, [node]);
+  }, [api, node, pos, position]);
   var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 2),
     _isActive = _useActiveAnchorTrack2[0],
@@ -134,7 +144,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var _anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+      var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
       if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
@@ -162,7 +172,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 (0, _react2.jsx)("div", {
     ref: ref
@@ -228,11 +238,13 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: prevNode,
+    pos: getPos(),
     editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
+    dropTargetStyle: dropTargetStyle,
+    api: api
   }), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
@@ -254,11 +266,13 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: nextNode,
+    pos: getPos(),
     parent: parentNode,
     editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    api: api
   }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading