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

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

@@ -15,6 +15,7 @@ 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 _consts = require("./consts");
+var _domAttrName = require("./utils/dom-attr-name");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -26,6 +27,7 @@ var _consts = require("./consts");
  * including those within table rows and media.
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
+var dragHandlerAnchorSelectorNext = "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"media\"])");
 var gutterPaddingWidth = function gutterPaddingWidth() {
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
 };
@@ -89,6 +91,63 @@ var extendedHoverZone = function extendedHoverZone() {
     display: 'none'
   }));
 };
+var extendedHoverZoneNext = function extendedHoverZoneNext() {
+  return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    display: 'none !important'
+  }), '.ProseMirror', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+    height: '100%',
+    cursor: 'default',
+    zIndex: 1
+  }), "&& ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    left: gutterPaddingLeft(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: gutterPaddingWidth(),
+    height: '100%',
+    cursor: 'default',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    zIndex: -1
+  }), "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    left: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    width: 0,
+    height: '100%',
+    cursor: 'default',
+    zIndex: 1
+  }), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
+    content: '""',
+    position: 'absolute',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    top: "".concat(-_styles.DRAG_HANDLE_WIDTH / 2, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    left: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    height: "".concat(_styles.DRAG_HANDLE_WIDTH, "px"),
+    cursor: 'default',
+    zIndex: 1
+  })), 'hr[data-drag-handler-anchor-name]', {
+    overflow: 'visible'
+  }), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
+    display: 'none'
+  }));
+};
 var extendHoverZoneReduced = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
@@ -98,6 +157,15 @@ var extendHoverZoneReduced = (0, _react.css)({
     width: "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
   }))
 });
+var extendHoverZoneReducedNext = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, "> ".concat(dragHandlerAnchorSelectorNext, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    left: "-".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    width: "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
+  }))
+});
 var extendedDragZone = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
@@ -105,6 +173,13 @@ var extendedDragZone = (0, _react.css)({
     left: "calc((100% - var(--ak-editor-max-container-width))/2)"
   })
 });
+var extendedDragZoneNext = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, "&& > ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+    width: 'var(--ak-editor-max-container-width)',
+    left: "calc((100% - var(--ak-editor-max-container-width))/2)"
+  })
+});
 var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -279,6 +354,17 @@ var withRelativePosStyle = (0, _react.css)({
     content: "\"".concat(_whitespace.ZERO_WIDTH_SPACE, "\"")
   })
 });
+var withRelativePosStyleNext = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelectorNext), {
+    position: 'relative'
+  }), "&& ".concat(dragHandlerAnchorSelectorNext, ":has(> .ProseMirror-trailingBreak:only-child)::before"), {
+    // Workaround to force safari to show the cursor on blank lines even when there is no content
+    // See: CONFCLOUD-80210
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    content: "\"".concat(_whitespace.ZERO_WIDTH_SPACE, "\"")
+  })
+});
 var withAnchorNameZindexStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
@@ -288,6 +374,15 @@ var withAnchorNameZindexStyle = (0, _react.css)({
     }
   }
 });
+var withAnchorNameZindexStyleNext = (0, _react.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
+    '> [data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
 
 // This style is used to define width for block card (with datasource) that does not have layout
 // In full-width editor, block card has width of full-width layout
@@ -309,6 +404,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
     disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
   });
 };

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

@@ -13,6 +13,7 @@ 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");
@@ -100,8 +101,11 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = (0, _react.useMemo)(function () {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, getPos() || -1)) || '' : '';
+    }
     return nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
-  }, [nextNode]);
+  }, [api, getPos, nextNode]);
   var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
@@ -110,6 +114,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     if (!nextNode) {
       return defaultNodeDimension;
     }
+    var nextNodePos = getPos();
     var innerContainerWidth = null;
     var targetAnchorName = anchorName;
     if (['blockCard', 'embedCard', 'extension'].includes(nextNode.type.name)) {
@@ -128,7 +133,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var tableWidthAnchor = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      var tableWidthAnchor = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
       var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if ((0, _anchorUtils.isAnchorSupported)()) {
         innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
@@ -141,13 +146,42 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      targetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        var _nextNode$firstChild;
+        // check pos is a number
+        if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
+          targetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
+        }
+      } else {
+        targetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      }
     }
 
     // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
     var heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
-      heightTargetAnchorName = isLeftPosition ? (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild) : (0, _decorationsCommon.getNodeAnchor)(nextNode.lastChild);
+      if (isLeftPosition) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+          if (typeof nextNodePos === 'number') {
+            heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
+          } else {
+            heightTargetAnchorName = '';
+          }
+        } else {
+          heightTargetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+        }
+      } else {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+          if (typeof nextNodePos === 'number') {
+            var lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
+            heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';
+          } else {
+            heightTargetAnchorName = '';
+          }
+        } else {
+          heightTargetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.lastChild);
+        }
+      }
     }
     if ((0, _anchorUtils.isAnchorSupported)()) {
       var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
@@ -179,7 +213,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
       };
     }
     return defaultNodeDimension;
-  }, [anchorName, anchorRectCache, nextNode, position, isLeftPosition]);
+  }, [nextNode, anchorName, anchorRectCache, getPos, api, isLeftPosition, position]);
   var onDrop = (0, _react.useCallback)(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},

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

@@ -26,6 +26,7 @@ var _widgetPositions = require("../pm-plugins/utils/widget-positions");
 var _consts = require("./consts");
 var _anchorName = require("./utils/anchor-name");
 var _documentChecks = require("./utils/document-checks");
+var _domAttrName = require("./utils/dom-attr-name");
 var _editorCommands = require("./utils/editor-commands");
 var _visibilityContainer = require("./visibility-container");
 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); }
@@ -121,7 +122,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       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';
@@ -161,7 +162,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+      var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(rootAnchorName, "\"]"));
       if (!dom) {
         return;
       }

package/dist/cjs/ui/utils/anchor-name.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.refreshAnchorName = void 0;
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsAnchor = require("../../pm-plugins/decorations-anchor");
 var _main = require("../../pm-plugins/main");
 /**
@@ -15,6 +16,9 @@ var refreshAnchorName = exports.refreshAnchorName = function refreshAnchorName(_
     view = _ref.view,
     anchorName = _ref.anchorName;
   var newAnchorName = anchorName || '';
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return newAnchorName;
+  }
   var pos = getPos();
   if (anchorName || pos === undefined) {
     return newAnchorName;

package/dist/cjs/ui/utils/dom-attr-name.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTypeNameFromDom = exports.getTypeNameAttrName = exports.getAnchorAttrName = exports.NODE_NODE_TYPE_ATTR_NAME = exports.NODE_ANCHOR_ATTR_NAME = void 0;
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var NODE_ANCHOR_ATTR_NAME = exports.NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
+var NODE_NODE_TYPE_ATTR_NAME = exports.NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
+var getAnchorAttrName = exports.getAnchorAttrName = function getAnchorAttrName() {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return NODE_ANCHOR_ATTR_NAME;
+  }
+  return 'data-drag-handler-anchor-name';
+};
+var getTypeNameAttrName = exports.getTypeNameAttrName = function getTypeNameAttrName() {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return NODE_NODE_TYPE_ATTR_NAME;
+  }
+  return 'data-drag-handler-node-type';
+};
+var isHeadingElement = function isHeadingElement(element) {
+  var headingTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+  return headingTags.includes(element.tagName);
+};
+
+// This function replicates the behavior of getNodeTypeWithLevel by returning the same value.
+var getTypeNameFromDom = exports.getTypeNameFromDom = function getTypeNameFromDom(element) {
+  if (!element) {
+    return '';
+  }
+  var nodeType = element === null || element === void 0 ? void 0 : element.getAttribute(NODE_NODE_TYPE_ATTR_NAME);
+  if (!nodeType) {
+    return '';
+  }
+  if (isHeadingElement(element)) {
+    switch (element.tagName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
+    }
+  }
+  return nodeType;
+};

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

@@ -1,10 +1,11 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { NESTED_DEPTH, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
+import { getNodeAnchor, getNodeTypeWithLevel, NESTED_DEPTH, TYPE_NODE_DEC } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
-const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
+export const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
-const IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
+export const IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
 export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
@@ -94,6 +95,9 @@ export const findNodeDecs = (state, decorations, from, to) => {
 };
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
+  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return [];
+  }
   const docFrom = from === undefined || from < 0 ? 0 : from;
   const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
   const ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;

package/dist/es2019/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';
@@ -213,7 +214,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
       }
     }
   }
-  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,
     decsToRemove

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

@@ -1,6 +1,10 @@
+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';
 const isEmptyNestedParagraphOrHeading = target => {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -8,6 +12,20 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
+const getNodeSelector = (ignoreNodes, ignoreNodeDescendants) => {
+  const baseSelector = `[${NODE_ANCHOR_ATTR_NAME}]`;
+  if (ignoreNodes.length === 0 && ignoreNodeDescendants.length === 0) {
+    return baseSelector;
+  }
+  const ignoreNodeSelectorList = ignoreNodes.map(node => `[data-prosemirror-node-name="${node}"]`);
+  const ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(node => `[data-prosemirror-node-name="${node}"] [data-node-anchor]`);
+  const ignoreSelector = [...ignoreNodeSelectorList, ...ignoreNodeDescendantsSelectorList, '[data-prosemirror-node-inline="true"]'].join(', ');
+  return `${baseSelector}:not(${ignoreSelector})`;
+};
+const getDefaultNodeSelector = memoizeOne(() => {
+  // we don't show handler for node nested in table
+  return getNodeSelector([...IGNORE_NODES_NEXT], [...IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, 'table']);
+});
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _api$editorDisabled, _target$classList;
   const {
@@ -39,21 +57,21 @@ export const 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;
   }
-  let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  let 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(`[${getAnchorAttrName()}][${getTypeNameAttrName()}="mediaSingle"]`);
       if (!rootElement) {
         return false;
       }
     }
-    const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
-    const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
+    const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest(`[${getAnchorAttrName()}]`);
+    const 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')) {
@@ -61,8 +79,8 @@ export const handleMouseOver = (view, event, api) => {
           rootElement = parentElement;
         } else if (parentElement && parentElementType === 'tableRow') {
           var _parentElement$parent;
-          const grandparentElement = parentElement === null || parentElement === void 0 ? void 0 : (_parentElement$parent = parentElement.parentElement) === null || _parentElement$parent === void 0 ? void 0 : _parentElement$parent.closest('[data-drag-handler-anchor-name]');
-          const grandparentElementType = grandparentElement === null || grandparentElement === void 0 ? void 0 : grandparentElement.getAttribute('data-drag-handler-node-type');
+          const grandparentElement = parentElement === null || parentElement === void 0 ? void 0 : (_parentElement$parent = parentElement.parentElement) === null || _parentElement$parent === void 0 ? void 0 : _parentElement$parent.closest(`[${getAnchorAttrName()}]`);
+          const 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;
           }
@@ -79,7 +97,7 @@ export const handleMouseOver = (view, event, api) => {
 
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    const 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;
@@ -120,13 +138,13 @@ export const handleMouseOver = (view, event, api) => {
       if (targetPos !== rootPos) {
         const 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');
         }
       }
     }
-    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
+    const 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, _rootPos, _rootAnchorName, _rootNodeType;

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

@@ -16,6 +16,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';
@@ -642,7 +643,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
             event.preventDefault();
             return false;
           }
-          const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? 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]');
+          const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$closest = _event$target.closest) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.call(_event$target, `[${getAnchorAttrName()}]`);
           if (!nodeElement) {
             return false;
           }
@@ -683,7 +684,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
             if (isHTMLElement(event.target)) {
               const closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
               if (closestParentElement) {
-                const currentAnchor = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+                const currentAnchor = closestParentElement.getAttribute(getAnchorAttrName());
                 if (currentAnchor) {
                   defaultActiveAnchorTracker.emit(currentAnchor);
                 }

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

@@ -1,5 +1,6 @@
 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';
 
@@ -23,7 +24,7 @@ export const calculatePosition = ({
     view,
     anchorName: rootAnchorName
   });
-  const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
+  const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
   const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
   const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
   const isBlockCard = rootNodeType === 'blockCard';

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import memoizeOne from 'memoize-one';
+import { getAnchorAttrName } from '../../ui/utils/dom-attr-name';
 export const isAnchorSupported = memoizeOne(() => {
   // directly use CSS would cause failed SSR tests.
   if (window.CSS && window.CSS.supports) {
@@ -21,9 +22,9 @@ export class AnchorRectCache {
   getRects() {
     if (this.isDirty) {
       var _this$view;
-      const anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
+      const anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll(`[${getAnchorAttrName()}]`)) || [];
       this.anchorRectMap = Array.from(anchorElements).reduce((prev, curr) => {
-        const anchorName = curr.getAttribute('data-drag-handler-anchor-name');
+        const anchorName = curr.getAttribute(getAnchorAttrName());
         if (anchorName) {
           return {
             ...prev,

package/dist/es2019/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';
 const BlockMenuContent = ({
   editorView,
   mountPoint,
@@ -16,7 +17,7 @@ const BlockMenuContent = ({
   menuTriggerBy,
   formatMessage
 }) => {
-  const activeNodeSelector = `[data-drag-handler-anchor-name=${menuTriggerBy}]`;
+  const activeNodeSelector = `[${getAnchorAttrName()}=${menuTriggerBy}]`;
   const targetHandleRef = document.querySelector(activeNodeSelector);
   const items = getBlockMenuItems(formatMessage);
   const handleOpenChange = useCallback(payload => {
@@ -106,7 +107,7 @@ const BlockMenu = ({
       formatMessage: formatMessage
     });
   }
-  const activeNodeSelector = `[data-drag-handler-anchor-name=${menuTriggerBy}]`;
+  const activeNodeSelector = `[${getAnchorAttrName()}=${menuTriggerBy}]`;
   const targetHandleRef = document.querySelector(activeNodeSelector);
   const items = getBlockMenuItems(formatMessage);
   const handleOpenChange = payload => {