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

package/dist/es2019/pm-plugins/utils/surface-viewport.js

@@ -0,0 +1,192 @@
+const NODE_NAME_ATTRIBUTE = 'data-prosemirror-node-name';
+/**
+ * Tracks block DOM nodes that intersect the browser viewport. The browser owns clipping and
+ * visibility decisions; this helper only translates observer targets back to PM positions.
+ */
+export const observeSurfaceViewport = (view, onChange) => {
+  const win = view.dom.ownerDocument.defaultView;
+  if (!win || typeof win.IntersectionObserver === 'undefined') {
+    return {
+      update: () => {},
+      destroy: () => {}
+    };
+  }
+  const targets = new Map();
+  const visibleTargets = new Set();
+  let previousPositions = [];
+  let previousDoc = view.state.doc;
+  let destroyed = false;
+  const resolvePosition = element => {
+    try {
+      const domPosition = view.posAtDOM(element, 0);
+      const nodeName = element.getAttribute(NODE_NAME_ATTRIBUTE);
+      const directNode = view.state.doc.nodeAt(domPosition);
+      if (directNode !== null && directNode !== void 0 && directNode.isBlock && directNode.type.name === nodeName && view.nodeDOM(domPosition) === element) {
+        return domPosition;
+      }
+      const $position = view.state.doc.resolve(domPosition);
+      for (let depth = $position.depth; depth > 0; depth--) {
+        const node = $position.node(depth);
+        if (!node.isBlock || node.type.name !== nodeName) {
+          continue;
+        }
+        const position = $position.before(depth);
+        const nodeDOM = view.nodeDOM(position);
+        if (nodeDOM === element || nodeDOM instanceof Node && (nodeDOM.contains(element) || element.contains(nodeDOM))) {
+          return position;
+        }
+      }
+      return undefined;
+    } catch {
+      return undefined;
+    }
+  };
+  const getVisiblePositions = () => {
+    const positions = new Set();
+    visibleTargets.forEach(element => {
+      var _targets$get;
+      const position = (_targets$get = targets.get(element)) === null || _targets$get === void 0 ? void 0 : _targets$get.position;
+      if (position !== undefined) {
+        positions.add(position);
+      }
+    });
+    return Array.from(positions).sort((first, second) => first - second);
+  };
+  const emit = () => {
+    if (destroyed) {
+      return;
+    }
+    const positions = getVisiblePositions();
+    if (positions.length !== previousPositions.length || positions.some((position, index) => position !== previousPositions[index])) {
+      previousPositions = positions;
+      onChange(positions);
+    }
+  };
+  const intersectionObserver = new win.IntersectionObserver(entries => {
+    let changed = false;
+    for (const entry of entries) {
+      const element = entry.target;
+      const target = targets.get(element);
+      if (!target || !view.dom.contains(element)) {
+        continue;
+      }
+      const isIntersecting = entry.isIntersecting;
+      if (target.isIntersecting !== isIntersecting) {
+        target.isIntersecting = isIntersecting;
+        if (isIntersecting) {
+          target.position = resolvePosition(element);
+          if (target.position !== undefined) {
+            visibleTargets.add(element);
+          } else {
+            target.isIntersecting = false;
+          }
+        } else {
+          visibleTargets.delete(element);
+        }
+        changed = true;
+      }
+    }
+    if (changed) {
+      emit();
+    }
+  }, {
+    root: null,
+    threshold: 0
+  });
+  const removeTarget = element => {
+    const target = targets.get(element);
+    if (!target) {
+      return;
+    }
+    targets.delete(element);
+    visibleTargets.delete(element);
+    intersectionObserver.unobserve(element);
+  };
+  const observeElement = element => {
+    var _view$state$schema$no;
+    const nodeName = element.getAttribute(NODE_NAME_ATTRIBUTE);
+    if (element === view.dom || !nodeName || !((_view$state$schema$no = view.state.schema.nodes[nodeName]) !== null && _view$state$schema$no !== void 0 && _view$state$schema$no.isBlock) || !view.dom.contains(element)) {
+      return;
+    }
+    if (targets.has(element)) {
+      return;
+    }
+    targets.set(element, {
+      isIntersecting: false
+    });
+    intersectionObserver.observe(element);
+  };
+  const observeSubtree = node => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const element = node;
+    observeElement(element);
+    const descendants = element.querySelectorAll(`[${NODE_NAME_ATTRIBUTE}]`);
+    for (let index = 0; index < descendants.length; index++) {
+      observeElement(descendants[index]);
+    }
+  };
+  const unobserveSubtree = node => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const element = node;
+    removeTarget(element);
+    const descendants = element.querySelectorAll(`[${NODE_NAME_ATTRIBUTE}]`);
+    for (let index = 0; index < descendants.length; index++) {
+      removeTarget(descendants[index]);
+    }
+  };
+  const mutationObserver = new win.MutationObserver(records => {
+    let removedVisibleTarget = false;
+    for (const record of records) {
+      for (let index = 0; index < record.removedNodes.length; index++) {
+        const node = record.removedNodes[index];
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          if (view.dom.contains(node)) {
+            continue;
+          }
+          const before = visibleTargets.size;
+          unobserveSubtree(node);
+          removedVisibleTarget ||= before !== visibleTargets.size;
+        }
+      }
+      for (let index = 0; index < record.addedNodes.length; index++) {
+        observeSubtree(record.addedNodes[index]);
+      }
+    }
+    if (removedVisibleTarget) {
+      emit();
+    }
+  });
+  const initialTargets = view.dom.querySelectorAll(`[${NODE_NAME_ATTRIBUTE}]`);
+  for (let index = 0; index < initialTargets.length; index++) {
+    observeElement(initialTargets[index]);
+  }
+  mutationObserver.observe(view.dom, {
+    childList: true,
+    subtree: true
+  });
+  return {
+    update() {
+      if (previousDoc !== view.state.doc) {
+        previousDoc = view.state.doc;
+        visibleTargets.forEach(element => {
+          const target = targets.get(element);
+          if (target) {
+            target.position = resolvePosition(element);
+          }
+        });
+        emit();
+      }
+    },
+    destroy() {
+      destroyed = true;
+      mutationObserver.disconnect();
+      intersectionObserver.disconnect();
+      targets.clear();
+      visibleTargets.clear();
+    }
+  };
+};

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

@@ -1,4 +1,5 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 /**
  * Checks if step adds inline char
  * @param s
@@ -28,6 +29,10 @@ export const isStepDelete = s => {
 const isStepContentReplacedWithAnotherOfSameSize = s => {
   if (s instanceof ReplaceAroundStep) {
     const replacedContentSize = s.to - s.from;
+    if (isExperimentEnabled('platform_editor_block_control_migration')) {
+      const insertedContentSize = s.slice.size + (s.gapTo - s.gapFrom);
+      return insertedContentSize === replacedContentSize;
+    }
     return s.slice.content.size === replacedContentSize;
   }
   return false;

package/dist/es2019/ui/block-controls-left-surfaces.js

@@ -11,12 +11,13 @@ import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-s
 import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
-import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
-import { getNodeContentElement, hasInnerContentContainer } from './utils/get-node-content-element';
+import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
 import { hasSurfaceControls } from './utils/has-surface-controls';
 const EMPTY_SURFACE_POSITIONS = [];
+const EMPTY_SURFACE_ANCHORS = new Map();
 const EMPTY_SURFACE_COMPONENTS = [];
 const EMPTY_MEASURED_SURFACES = [];
 export const BlockControlsLeftSurfaces = ({
@@ -26,19 +27,28 @@ export const BlockControlsLeftSurfaces = ({
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
     activeNode,
+    surfaceAnchors,
+    surfaceActiveNodes,
     surfaceNodePositions
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls, _states$blockControls2, _states$blockControls3;
+    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$blockControls5, _states$blockControls6;
     return {
       activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
-      surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+      surfaceActiveNodes: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.surfaceActiveNodes,
+      surfaceAnchors: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.surfaceAnchors) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : EMPTY_SURFACE_ANCHORS,
+      surfaceNodePositions: (_states$blockControls5 = (_states$blockControls6 = states.blockControlsState) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.surfaceNodePositions) !== null && _states$blockControls5 !== void 0 ? _states$blockControls5 : EMPTY_SURFACE_POSITIONS
     };
   });
   const components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
-  const targets = useMemo(() => getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions), [activeNode, surfaceNodePositions]);
+  const targets = useMemo(() => {
+    const candidates = new Set(surfaceNodePositions);
+    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions).filter(({
+      position
+    }) => candidates.has(position));
+  }, [activeNode, surfaceNodePositions]);
   const surfaces = useMemo(() => targets.flatMap(target => {
-    var _api$core;
-    const context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+    var _surfaceActiveNodes$g;
+    const context = createBlockControlsSurfaceContextForPosition(editorView.state, target.position, (_surfaceActiveNodes$g = surfaceActiveNodes === null || surfaceActiveNodes === void 0 ? void 0 : surfaceActiveNodes.get(target.position)) !== null && _surfaceActiveNodes$g !== void 0 ? _surfaceActiveNodes$g : activeNode);
     if (!context) {
       return [];
     }
@@ -46,19 +56,15 @@ export const BlockControlsLeftSurfaces = ({
     if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
       return [];
     }
-    // Resolved here rather than in the measurement effect so an anchored surface is placed
-    // in the same render that creates it — it never needs a second pass to find its node.
-    //
-    // At the moment, we only expect top-level nodes to have persistent controls.
-    // See surfaceAnchorStyles in global-styles
-    const anchorName = isCSSAnchorSupported() && context.targetNode.parentType === 'doc' && !hasInnerContentContainer(context.targetNode.type.name) ? (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.getAnchorIdForNode(context.targetNode.node, context.targetNode.pos) : undefined;
+    // The cache supplies the same anchor names used by ProseMirror decorations.
+    const anchorName = isCSSAnchorSupported() ? surfaceAnchors.get(target.position) : undefined;
     return [{
       ...target,
       anchorName,
       blockControlsContext: context,
       surfaceContext
     }];
-  }), [activeNode, api, components, editorView, targets]);
+  }), [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
   /**
    * Placements that need no measuring, so they are derived rather than stored: every inset is an
    * `anchor()` the browser re-resolves on every layout change.
@@ -71,6 +77,7 @@ export const BlockControlsLeftSurfaces = ({
     anchorName,
     nodeType: blockControlsContext.targetNode.type.name,
     nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+    layout: blockControlsContext.targetNode.node.attrs.layout,
     parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
     side: 'left'
   })]] : [])), [surfaces]);

package/dist/es2019/ui/block-controls-right-surfaces.js

@@ -11,12 +11,13 @@ import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-s
 import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsRightSurface } from './block-controls-right-surface';
-import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
-import { getNodeContentElement, hasInnerContentContainer } from './utils/get-node-content-element';
+import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
 import { hasSurfaceControls } from './utils/has-surface-controls';
 const EMPTY_SURFACE_POSITIONS = [];
+const EMPTY_SURFACE_ANCHORS = new Map();
 const EMPTY_SURFACE_COMPONENTS = [];
 const EMPTY_MEASURED_SURFACES = [];
 /**
@@ -35,19 +36,28 @@ export const BlockControlsRightSurfaces = ({
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
     activeNode,
+    surfaceAnchors,
+    surfaceActiveNodes,
     surfaceNodePositions
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls, _states$blockControls2, _states$blockControls3;
+    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$blockControls5, _states$blockControls6;
     return {
       activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
-      surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+      surfaceActiveNodes: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.surfaceActiveNodes,
+      surfaceAnchors: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.surfaceAnchors) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : EMPTY_SURFACE_ANCHORS,
+      surfaceNodePositions: (_states$blockControls5 = (_states$blockControls6 = states.blockControlsState) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.surfaceNodePositions) !== null && _states$blockControls5 !== void 0 ? _states$blockControls5 : EMPTY_SURFACE_POSITIONS
     };
   });
   const components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
-  const targets = useMemo(() => getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions), [activeNode, surfaceNodePositions]);
+  const targets = useMemo(() => {
+    const candidates = new Set(surfaceNodePositions);
+    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions).filter(({
+      position
+    }) => candidates.has(position));
+  }, [activeNode, surfaceNodePositions]);
   const surfaces = useMemo(() => targets.flatMap(target => {
-    var _api$core;
-    const context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+    var _surfaceActiveNodes$g;
+    const context = createBlockControlsSurfaceContextForPosition(editorView.state, target.position, (_surfaceActiveNodes$g = surfaceActiveNodes === null || surfaceActiveNodes === void 0 ? void 0 : surfaceActiveNodes.get(target.position)) !== null && _surfaceActiveNodes$g !== void 0 ? _surfaceActiveNodes$g : activeNode);
     if (!context) {
       return [];
     }
@@ -55,19 +65,15 @@ export const BlockControlsRightSurfaces = ({
     if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
       return [];
     }
-    // Resolved here rather than in the measurement effect so an anchored surface is placed
-    // in the same render that creates it — it never needs a second pass to find its node.
-    //
-    // At the moment, we only expect top-level nodes to have persistent controls.
-    // See surfaceAnchorStyles in global-styles
-    const anchorName = isCSSAnchorSupported() && context.targetNode.parentType === 'doc' && !hasInnerContentContainer(context.targetNode.type.name) ? (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.getAnchorIdForNode(context.targetNode.node, context.targetNode.pos) : undefined;
+    // The cache supplies the same anchor names used by ProseMirror decorations.
+    const anchorName = isCSSAnchorSupported() ? surfaceAnchors.get(target.position) : undefined;
     return [{
       ...target,
       anchorName,
       blockControlsContext: context,
       surfaceContext
     }];
-  }), [activeNode, api, components, editorView, targets]);
+  }), [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
   /**
    * Placements that need no measuring, so they are derived rather than stored: every inset is an
    * `anchor()` the browser re-resolves on every layout change.
@@ -80,6 +86,7 @@ export const BlockControlsRightSurfaces = ({
     anchorName,
     nodeType: blockControlsContext.targetNode.type.name,
     nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+    layout: blockControlsContext.targetNode.node.attrs.layout,
     parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
     side: 'right'
   })]] : [])), [surfaces]);

package/dist/es2019/ui/block-controls-surface-context.js

@@ -37,6 +37,7 @@ export const createBlockControlsSurfaceContextForPosition = (state, targetPos, a
   const rootPos = activeNode ? (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos : targetPos;
   const rootNodeContext = (_getNodeContext = getNodeContext(state, rootPos)) !== null && _getNodeContext !== void 0 ? _getNodeContext : targetNodeContext;
   return {
+    activeControlKey: activeNode === null || activeNode === void 0 ? void 0 : activeNode.controlKey,
     activeNode: activeNode && activeNodeContext ? {
       ...activeNodeContext,
       rootPos,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
-import { BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BLOCK_CONTROLS_DRAG_HANDLE, BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { BlockControlsSurfaceDragHandle } from './block-controls-surface-drag-handle';
 export const getBlockControlsSurfaceDragHandleComponents = ({
   api
@@ -15,12 +15,11 @@ export const getBlockControlsSurfaceDragHandleComponents = ({
     surfaceContext
   } = {}) => {
     const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
-    return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos;
+    return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos || context.activeControlKey !== undefined && context.activeControlKey !== BLOCK_CONTROLS_DRAG_HANDLE.key;
   },
-  key: 'block-controls-drag-handle',
+  ...BLOCK_CONTROLS_DRAG_HANDLE,
   parents: [{
     ...BLOCK_CONTROLS_LEFT_GROUP,
     rank: 200
-  }],
-  type: 'button'
+  }]
 }];

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

@@ -115,7 +115,11 @@ export const BlockControlsSurfaceDragHandle = ({
     return !isTopLevelNode || $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
   }, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
   const getAnchorName = useCallback(() => {
-    var _ref, _ref2, _dom$getAttribute, _dom$closest;
+    var _api$blockControls$sh2, _api$blockControls$sh3, _ref, _ref2, _dom$getAttribute, _dom$closest;
+    const surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 ? void 0 : (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : (_api$blockControls$sh3 = _api$blockControls$sh2.surfaceAnchors) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.get(posRef.current);
+    if (surfaceAnchor) {
+      return surfaceAnchor;
+    }
     if (activeNodeAnchorName) {
       return activeNodeAnchorName;
     }
@@ -129,7 +133,7 @@ export const BlockControlsSurfaceDragHandle = ({
     }
     const anchorAttrName = getAnchorAttrName();
     return (_ref = (_ref2 = (_dom$getAttribute = dom.getAttribute(anchorAttrName)) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : dom.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref2 !== void 0 ? _ref2 : (_dom$closest = dom.closest(`[${anchorAttrName}]`)) === null || _dom$closest === void 0 ? void 0 : _dom$closest.getAttribute(anchorAttrName)) !== null && _ref !== void 0 ? _ref : '';
-  }, [activeNodeAnchorName, view]);
+  }, [activeNodeAnchorName, api, view]);
   useLayoutEffect(() => {
     const element = buttonRef.current;
     if (!view || !element) {

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

@@ -720,10 +720,12 @@ export const DragHandle = ({
     });
   }, [anchorName, api, getPos, nodeType, start, view]);
   const calculatePositionOld = useCallback(() => {
+    var _$pos$nodeAfter;
     const pos = getPos();
-    const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    const $pos = typeof pos === 'number' ? view.state.doc.resolve(pos) : undefined;
     const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    const nodeTypeWithLevel = $pos !== null && $pos !== void 0 && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock ? getNodeTypeWithLevel($pos.nodeAfter) : nodeType;
     const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
@@ -781,14 +783,14 @@ export const DragHandle = ({
       const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return {
         left: isEdgeCase ? `calc(${anchorStart} + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((${anchorRight} + ${anchorLeft})/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(${anchorStart} - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(${anchorTop} - ${DRAG_HANDLE_WIDTH}px)` : `calc(${anchorStart} + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(${anchorTop} - ${DRAG_HANDLE_WIDTH}px)` : `calc(${anchorStart} + ${topPositionAdjustment(nodeTypeWithLevel, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
         ...bottom
       };
     }
     const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: getTopPosition(dom, nodeType),
+      top: getTopPosition(dom, nodeTypeWithLevel),
       ...height
     };
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);

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

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -125,7 +126,7 @@ export const DropTargetLayout = props => {
   }, isDraggedOver ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
-  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
@@ -239,7 +240,7 @@ export const DropTargetLayoutNativeAnchorSupport = props => {
   }, isDraggedOver ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
-  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));

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

@@ -8,6 +8,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { layers } from '@atlaskit/theme/constants';
@@ -85,7 +86,7 @@ const HoverZone = ({
   const ref = useRef(null);
   const isRemainingheight = dropTargetStyle === 'remainingHeight';
   const anchorName = useMemo(() => {
-    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')) {
       if (node && typeof pos === 'number') {
         const posOffset = position === 'upper' ? -node.nodeSize : 0;
         return (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos + posOffset)) || '';
@@ -136,7 +137,7 @@ const HoverZone = ({
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      const anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
+      const anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       let top = 'unset';
       if (anchorName) {
         const enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');