@atlaskit/editor-plugin-block-controls 20.0.3 → 20.1.0

package/dist/cjs/ui/block-controls-surface-drag-handle-registration.js

@@ -14,7 +14,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) { (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 getBlockControlsSurfaceDragHandleComponents = exports.getBlockControlsSurfaceDragHandleComponents = function getBlockControlsSurfaceDragHandleComponents(_ref) {
   var api = _ref.api;
-  return [{
+  return [_objectSpread(_objectSpread({
     component: function component(_ref2) {
       var surfaceContext = _ref2.surfaceContext;
       return /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceDragHandle.BlockControlsSurfaceDragHandle, {
@@ -26,12 +26,11 @@ var getBlockControlsSurfaceDragHandleComponents = exports.getBlockControlsSurfac
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
         surfaceContext = _ref3.surfaceContext;
       var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
-      return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos;
-    },
-    key: 'block-controls-drag-handle',
+      return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos || context.activeControlKey !== undefined && context.activeControlKey !== _surfaceKeys.BLOCK_CONTROLS_DRAG_HANDLE.key;
+    }
+  }, _surfaceKeys.BLOCK_CONTROLS_DRAG_HANDLE), {}, {
     parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_GROUP), {}, {
       rank: 200
-    })],
-    type: 'button'
-  }];
+    })]
+  })];
 };

package/dist/cjs/ui/block-controls-surface-drag-handle.js

@@ -124,7 +124,11 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
     return !isTopLevelNode || $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
   }, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
   var getAnchorName = (0, _react.useCallback)(function () {
-    var _ref2, _ref3, _dom$getAttribute, _dom$closest;
+    var _api$blockControls$sh2, _ref2, _ref3, _dom$getAttribute, _dom$closest;
+    var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 || (_api$blockControls$sh2 = _api$blockControls$sh2.surfaceAnchors) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.get(posRef.current);
+    if (surfaceAnchor) {
+      return surfaceAnchor;
+    }
     if (activeNodeAnchorName) {
       return activeNodeAnchorName;
     }
@@ -138,7 +142,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
     }
     var anchorAttrName = (0, _domAttrName.getAnchorAttrName)();
     return (_ref2 = (_ref3 = (_dom$getAttribute = dom.getAttribute(anchorAttrName)) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : dom.getAttribute(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _ref3 !== void 0 ? _ref3 : (_dom$closest = dom.closest("[".concat(anchorAttrName, "]"))) === null || _dom$closest === void 0 ? void 0 : _dom$closest.getAttribute(anchorAttrName)) !== null && _ref2 !== void 0 ? _ref2 : '';
-  }, [activeNodeAnchorName, view]);
+  }, [activeNodeAnchorName, api, view]);
   (0, _react.useLayoutEffect)(function () {
     var element = buttonRef.current;
     if (!view || !element) {

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

@@ -740,10 +740,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     });
   }, [anchorName, api, getPos, nodeType, start, view]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
+    var _$pos$nodeAfter;
     var pos = getPos();
-    var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    var $pos = typeof pos === 'number' ? view.state.doc.resolve(pos) : undefined;
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    var nodeTypeWithLevel = $pos !== null && $pos !== void 0 && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock ? (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) : nodeType;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var safeAnchorName = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _anchorName.refreshAnchorName)({
@@ -801,13 +803,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       var bottom = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
+        top: (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)(nodeTypeWithLevel, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
+      top: (0, _dragHandlePositions.getTopPosition)(dom, nodeTypeWithLevel)
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   var isReliableAnchorEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true);

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -128,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, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && (0, _react2.jsx)("div", {
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
@@ -243,7 +244,7 @@ var DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayoutNativeAnchorSu
   }, isDraggedOver ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
-  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && (0, _react2.jsx)("div", {
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));

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

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _constants = require("@atlaskit/theme/constants");
@@ -95,7 +96,7 @@ var HoverZone = function HoverZone(_ref) {
   var ref = (0, _react.useRef)(null);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var anchorName = (0, _react.useMemo)(function () {
-    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
       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)) || '';
@@ -149,7 +150,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
+      var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? (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 = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -376,17 +376,70 @@ var staticControlsAnchorStyles = (0, _react.css)({
     }
   }
 });
+var sparseSurfaceAnchorName = 'var(--block-controls-surface-anchor-name)';
 
-/**
- * Names the CSS anchor on top-level nodes, so the block controls surfaces can anchor to the blocks
- * they render against. Only top-level at the moment as we don't have use cases yet for persistent controls that are nested.
- */
-var surfaceAnchorStyles = (0, _react.css)({
+// Inner node-view boxes own the visible geometry for these nodes. The root arm keeps a sparse
+// marker useful when a node view has not mounted its inner box yet.
+var sparseSurfaceAnchorStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': (0, _defineProperty2.default)({}, "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]):not([").concat(_consts.ACTIVE_DRAG_HANDLE_ATTR, "], [").concat(_consts.ACTIVE_QUICK_INSERT_ATTR, "])"), {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-  })
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="blockCard"]:has(.datasourceView-content-inner-wrap) .datasourceView-content-inner-wrap': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="blockCard"]:not(:has(.datasourceView-content-inner-wrap))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="bodiedExtension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="bodiedExtension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="embedCard"]:has(.rich-media-item) .rich-media-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="embedCard"]:not(:has(.rich-media-item))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="extension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="extension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="mediaSingle"]:has(.resizer-item) .resizer-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="mediaSingle"]:not(:has(.resizer-item))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="multiBodiedExtension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="multiBodiedExtension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="table"]:has(.resizer-item) .resizer-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="table"]:not(:has(.resizer-item))': {
+      anchorName: sparseSurfaceAnchorName
+    }
+  }
 });
 
 // Styles applied to nodes with anchors when dragging
@@ -426,33 +479,22 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
       };
     }),
     isDraggingFromState = _useSharedPluginState.isDragging;
-  var isDragging = (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
+  var sparseSurfacesEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
+  var isDragging = sparseSurfacesEnabled || (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
   var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
-
-  // The surfaces anchor to blocks they render against rather than only to the hovered one, so they
-  // need a name on every node. Added alongside whichever conditional rule applies rather than
-  // replacing it: this one matches only non-active nodes, so the two sets are disjoint.
-  //
-  // The migration check is what scopes this. Unlike the surfaces, this component renders for every
-  // editor, so without it the rule would name anchors on documents that have no surface to anchor.
-  var shouldRenderSurfaceAnchors =
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning -- browser capability, not a flag: an anchor name is meaningless where `anchor()` cannot resolve
-  Boolean((0, _styles.isCSSAnchorSupported)()) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
+  var sparseSurfaceAnchorsEnabled = Boolean((0, _styles.isCSSAnchorSupported)()) && sparseSurfacesEnabled;
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return (0, _react.jsx)(_react.Global
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
-    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, (!sparseSurfacesEnabled || isDragging) && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? extendedHoverZoneNext() : extendedHoverZone()), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? extendedDragZoneNext : extendedDragZone), (!sparseSurfacesEnabled || isDragging) && (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
+    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (!sparseSurfacesEnabled || isDragging) && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? withRelativePosStyleNext : withRelativePosStyle), (!sparseSurfacesEnabled || isDragging) && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle), (!sparseSurfacesEnabled || isDragging) && (((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone), sparseSurfaceAnchorsEnabled ? isDragging ? dragAnchorStyles : false : (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
     // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
     // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
     // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.
-    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles),
-    // Last so that, at equal specificity, the surfaces' own anchor names are the ones that
-    // stand. It cannot overlap the active-node rules above, which this selector excludes.
-    shouldRenderSurfaceAnchors && surfaceAnchorStyles]
+    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), sparseSurfaceAnchorsEnabled && sparseSurfaceAnchorStyles]
   });
 };

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -100,7 +101,7 @@ 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_with_dnd', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
       var _getPos;
       return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
     }
@@ -133,7 +134,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, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', '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 tableWidthAnchor = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? 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)");
@@ -146,7 +147,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
         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') {
@@ -161,7 +162,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     var heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       if (isLeftPosition) {
-        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
           if (typeof nextNodePos === 'number') {
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
           } else {
@@ -171,7 +172,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
           heightTargetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
         }
       } else {
-        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
           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)) || '';

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.refreshAnchorName = void 0;
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsAnchor = require("../../pm-plugins/decorations-anchor");
 var _main = require("../../pm-plugins/main");
@@ -16,7 +17,7 @@ var refreshAnchorName = exports.refreshAnchorName = function refreshAnchorName(_
     view = _ref.view,
     anchorName = _ref.anchorName;
   var newAnchorName = anchorName || '';
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
     return newAnchorName;
   }
   var pos = getPos();

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

@@ -4,17 +4,18 @@ 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 _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 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_with_dnd', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
     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_with_dnd', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
     return NODE_NODE_TYPE_ATTR_NAME;
   }
   return 'data-drag-handler-node-type';

package/dist/cjs/ui/utils/get-surface-placement.js

@@ -105,6 +105,7 @@ var INVALID_ANCHOR_FALLBACK_TOP = "-".concat(INVALID_ANCHOR_OFFSCREEN_PX, "px");
 var INVALID_ANCHOR_FALLBACK_BOTTOM = "".concat(INVALID_ANCHOR_OFFSCREEN_PX, "px");
 var getAnchoredSurfacePlacement = exports.getAnchoredSurfacePlacement = function getAnchoredSurfacePlacement(_ref3) {
   var anchorName = _ref3.anchorName,
+    layout = _ref3.layout,
     nodeType = _ref3.nodeType,
     nodeTypeWithLevel = _ref3.nodeTypeWithLevel,
     parentNodeType = _ref3.parentNodeType,
@@ -131,7 +132,7 @@ var getAnchoredSurfacePlacement = exports.getAnchoredSurfacePlacement = function
     } : {}), {}, {
       left: side === 'right' ? "calc(anchor(".concat(anchorName, " right) + ").concat(gap, "px)") : "anchor(".concat(anchorName, " left)"),
       positionAnchor: anchorName,
-      top: "calc(anchor(".concat(anchorName, " top, ").concat(INVALID_ANCHOR_FALLBACK_TOP, ") + ").concat((0, _consts.topPositionAdjustment)(nodeTypeWithLevel), "px)"),
+      top: "calc(anchor(".concat(anchorName, " top, ").concat(INVALID_ANCHOR_FALLBACK_TOP, ") + ").concat((0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout), "px)"),
       // The left side grows away from the node without knowing its own width, so it pulls itself
       // back past its own box and the gap. The right side grows into the margin, so the gap is
       // already folded into `left` above.

package/dist/es2019/blockControlsPlugin.js

@@ -14,12 +14,14 @@ import { moveNode } from './editor-commands/move-node';
 import { moveNodeWithBlockMenu } from './editor-commands/move-node-with-block-menu';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { canMoveNodeUpOrDown } from './editor-commands/utils/move-node-utils';
+import { getNodeTypeWithLevel } from './pm-plugins/decorations-common';
 import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
 import { createInteractionTrackingPlugin, interactionTrackingPluginKey } from './pm-plugins/interaction-tracking/pm-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { startPreservingSelection, stopPreservingSelection } from './pm-plugins/selection-preservation/editor-commands';
 import { selectionPreservationPluginKey } from './pm-plugins/selection-preservation/plugin-key';
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
+import { createSparseSurfacesPlugin, sparseSurfacesKey } from './pm-plugins/sparse-surfaces';
 import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { BlockControlsLeftSurfaces } from './ui/block-controls-left-surfaces';
@@ -36,7 +38,6 @@ export const blockControlsPlugin = ({
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
-  const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, {
@@ -140,8 +141,14 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, registryBlockControlsEnabled ? [] : nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !registryBlockControlsEnabled)
       }];
+      if (registryBlockControlsEnabled) {
+        pmPlugins.push({
+          name: 'blockControlsSparseSurfaces',
+          plugin: () => createSparseSurfacesPlugin(api)
+        });
+      }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
@@ -158,7 +165,7 @@ export const blockControlsPlugin = ({
       // Not registered under the registry migration: the decoration puts an inline
       // `margin-top: 0` on the first document node, which fights features that render their own
       // content above it — a leading show-diff widget is left flush against the node below.
-      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && legacyBlockControlsEnabled) {
+      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && !registryBlockControlsEnabled) {
         pmPlugins.push({
           name: 'firstNodeDec',
           plugin: firstNodeDecPlugin
@@ -205,10 +212,34 @@ export const blockControlsPlugin = ({
         });
         return tr;
       },
+      showControlAtPosition: (pos, control, options) => ({
+        tr
+      }) => {
+        const node = tr.doc.nodeAt(pos);
+        if (!node) {
+          return tr;
+        }
+        const anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos);
+        if (!anchorName) {
+          return tr;
+        }
+        const currMeta = tr.getMeta(key);
+        tr.setMeta(key, {
+          ...currMeta,
+          activeNode: {
+            pos,
+            anchorName,
+            controlKey: control.key,
+            nodeType: getNodeTypeWithLevel(node),
+            handleOptions: options
+          }
+        });
+        return tr;
+      },
       toggleBlockMenu: options => ({
         tr
       }) => {
-        var _api$userIntent, _api$userIntent$share, _api$blockControls2, _api$blockControls2$s, _options$anchorName, _api$blockControls3, _api$blockControls3$s;
+        var _api$userIntent, _api$userIntent$share, _api$blockControls2, _api$blockControls2$s, _options$triggerByNod, _options$anchorName, _api$blockControls3, _api$blockControls3$s;
         const currMeta = tr.getMeta(key);
         const currentUserIntent = api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent;
         const isMenuCurrentlyOpen = api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$s = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2$s === void 0 ? void 0 : _api$blockControls2$s.isMenuOpen;
@@ -234,8 +265,9 @@ export const blockControlsPlugin = ({
           return tr;
         }
 
-        // Do not open menu on layoutColumn and close opened menu when layoutColumn drag handle is clicked
-        if (options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
+        // Do not open the block menu for layout columns. Anchor resolution can lag behind
+        // a migrated surface click, so prefer the explicit node metadata when available.
+        if ((options === null || options === void 0 ? void 0 : (_options$triggerByNod = options.triggerByNode) === null || _options$triggerByNod === void 0 ? void 0 : _options$triggerByNod.nodeType) === 'layoutColumn' || options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
           if (currentUserIntent === 'blockMenuOpen') {
             var _api$userIntent3;
             api === null || api === void 0 ? void 0 : (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 ? void 0 : _api$userIntent3.commands.setCurrentUserIntent('default')({
@@ -436,8 +468,10 @@ export const blockControlsPlugin = ({
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
       if (registryBlockControlsEnabled) {
-        var _key$getState$surface, _key$getState11;
-        sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
+        const surfaces = sparseSurfacesKey.getState(editorState);
+        sharedState.surfaceNodePositions = surfaces === null || surfaces === void 0 ? void 0 : surfaces.candidates.positions;
+        sharedState.surfaceAnchors = surfaces === null || surfaces === void 0 ? void 0 : surfaces.anchors;
+        sharedState.surfaceActiveNodes = surfaces === null || surfaces === void 0 ? void 0 : surfaces.activeNodesByPosition;
       }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;

package/dist/es2019/editor-commands/show-drag-handle.js

@@ -1,6 +1,8 @@
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { findNodeDecs } from '../pm-plugins/decorations-anchor';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getDecorations, key } from '../pm-plugins/main';
 import { getNestedNodePosition, getNestedNodeStartingPosition } from '../pm-plugins/utils/getNestedNodePosition';
 import { NODE_ANCHOR_ATTR_NAME, NODE_NODE_TYPE_ATTR_NAME } from '../ui/utils/dom-attr-name';
@@ -14,7 +16,6 @@ const findParentPosForHandle = state => {
   const {
     activeNode
   } = key.getState(state) || {};
-
   // if a node handle is already focused, return the parent pos of that node (with focused handle)
   if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     const $activeNodePos = state.doc.resolve(activeNode.pos);
@@ -38,7 +39,7 @@ const findParentPosForHandle = state => {
   }
 
   // else find closest parent node
-  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
+  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -111,6 +112,17 @@ const findNextAnchorNode = view => {
   }
 };
 export const showDragHandleAtSelection = api => (state, _, view) => {
+  if (api && isExperimentEnabled('platform_editor_block_control_migration')) {
+    const pos = findParentPosForHandle(state);
+    const node = pos === undefined ? undefined : state.doc.nodeAt(pos);
+    const anchorName = node && pos !== undefined ? api.core.actions.getAnchorIdForNode(node, pos) : undefined;
+    if (!node || pos === undefined || !anchorName) {
+      return false;
+    }
+    return api.core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, getNodeTypeWithLevel(node), {
+      isFocused: true
+    }));
+  }
   if (view && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     const anchorNode = findNextAnchorNode(view);
     if (api && anchorNode) {

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

@@ -1,4 +1,5 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor, getNodeTypeWithLevel, NESTED_DEPTH, TYPE_NODE_DEC } from './decorations-common';
@@ -67,7 +68,7 @@ export const findNodeDecs = (state, decorations, from, to) => {
 };
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
     return [];
   }
   const docFrom = from === undefined || from < 0 ? 0 : from;

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

@@ -3,6 +3,7 @@ import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from './decorations-common';
@@ -236,7 +237,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
       }
     }
   }
-  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : getNodeAnchor(anchorEmitNodeWithPos.node));
+  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : getNodeAnchor(anchorEmitNodeWithPos.node));
   return {
     decsToAdd,
     decsToRemove

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -6,6 +6,7 @@ import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { nodeMargins } from '../ui/consts';
@@ -138,7 +139,7 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
+    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayoutComponent, {
       ...props,
       getPos,