@atlaskit/editor-plugin-block-controls 7.5.5 → 7.5.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.5.6
+
+### Patch Changes
+
+- [`945cca63ae433`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/945cca63ae433) -
+  ED-29335: Fixed drop hints height not right for layout column inline drop targets
+- Updated dependencies
+
 ## 7.5.5
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
@@ -136,8 +138,9 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
+    var DropTargetLayoutComponent = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('editor_native_anchor_update_layout_drop_hint') ? _dropTargetLayout.DropTargetLayoutNativeAnchorSupport : _dropTargetLayout.DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/(0, _react.createElement)(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
       }));

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropTargetLayout = void 0;
+exports.DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -130,9 +130,122 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) && (0, _react2.jsx)("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+var DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayoutNativeAnchorSupport = function DropTargetLayoutNativeAnchorSupport(props) {
+  var _api$blockControls3;
+  var api = props.api,
+    getPos = props.getPos,
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
+  var ref = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isDraggedOver = _useState4[0],
+    setIsDraggedOver = _useState4[1];
+  var anchorName = (0, _decorationsCommon.getNodeAnchor)(parent);
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    nextNodeAnchorName = _useState6[0],
+    setNextNodeAnchorName = _useState6[1];
+  var readNextNodeAnchor = (0, _react.useCallback)(function () {
+    var _ref$current2, _nextElementSibling$g;
+    var nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.parentElement) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.nextElementSibling;
+    var attrName = (0, _domAttrName.getAnchorAttrName)();
+    var nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(function (prev) {
+      return prev === nextAnchorName ? prev : nextAnchorName;
+    });
+  }, []);
+  var height = (0, _react.useMemo)(function () {
+    if (nextNodeAnchorName) {
+      if ((0, _anchorUtils.isAnchorSupported)()) {
+        return "anchor-size(".concat(nextNodeAnchorName, " height)");
+      } else if (anchorRectCache) {
+        var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  (0, _react.useLayoutEffect)(function () {
+    var raf = requestAnimationFrame(function () {
+      readNextNodeAnchor();
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [readNextNodeAnchor]);
+  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
+  var _useActiveAnchorTrack3 = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack4 = (0, _slicedToArray2.default)(_useActiveAnchorTrack3, 1),
+    isActiveAnchor = _useActiveAnchorTrack4[0];
+  var _ref4 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
+    activeNode = _ref4.activeNode;
+  var onDrop = (0, _react.useCallback)(function () {
+    if (!activeNode) {
+      return;
+    }
+    var to = getPos();
+    var mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var _api$blockControls4;
+        var tr = _ref5.tr;
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 || _api$blockControls4.moveToLayout(from, to)({
+          tr: tr
+        });
+        var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref6) {
+        var tr = _ref6.tr;
+        if (mappedTo !== undefined) {
+          (0, _updateSelection.updateSelection)(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _adapter.dropTargetForElements)({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return (0, _react2.jsx)("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, 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_support', 'isEnabled', true)) && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -4,10 +4,12 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
-import { DropTargetLayout } from '../ui/drop-target-layout';
+import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';
 import { NESTED_DEPTH, TYPE_DROP_TARGET_DEC } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
@@ -125,7 +127,8 @@ 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';
-    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
+    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_update_layout_drop_hint') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayoutComponent, {
       ...props,
       getPos,
       anchorRectCache

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
@@ -127,9 +127,121 @@ export const DropTargetLayout = props => {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
   }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+export const DropTargetLayoutNativeAnchorSupport = props => {
+  var _api$blockControls3;
+  const {
+    api,
+    getPos,
+    parent,
+    anchorRectCache
+  } = props;
+  const ref = useRef(null);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const anchorName = getNodeAnchor(parent);
+  const [nextNodeAnchorName, setNextNodeAnchorName] = useState(null);
+  const readNextNodeAnchor = useCallback(() => {
+    var _ref$current2, _ref$current2$parentE, _nextElementSibling$g;
+    const nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$parentE = _ref$current2.parentElement) === null || _ref$current2$parentE === void 0 ? void 0 : _ref$current2$parentE.nextElementSibling;
+    const attrName = getAnchorAttrName();
+    const nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(prev => prev === nextAnchorName ? prev : nextAnchorName);
+  }, []);
+  const height = useMemo(() => {
+    if (nextNodeAnchorName) {
+      if (isAnchorSupported()) {
+        return `anchor-size(${nextNodeAnchorName} height)`;
+      } else if (anchorRectCache) {
+        const layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return `${(layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0}px`;
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  useLayoutEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      readNextNodeAnchor();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [readNextNodeAnchor]);
+  const dropTargetStackLayoutHintStyle = css({
+    // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      height,
+      marginTop: `${"var(--ds-space-050, 4px)"}`
+    }
+  });
+  const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
+  const {
+    activeNode
+  } = (api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {};
+  const onDrop = useCallback(() => {
+    if (!activeNode) {
+      return;
+    }
+    const to = getPos();
+    let mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      const {
+        pos: from
+      } = activeNode;
+      api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+        tr
+      }) => {
+        var _api$blockControls4, _api$blockControls4$c;
+        api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveToLayout(from, to)({
+          tr
+        });
+        const insertColumnStep = getInsertLayoutStep(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        tr
+      }) => {
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: () => {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: () => {
+          setIsDraggedOver(false);
+        },
+        onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return jsx("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver ? jsx(DropIndicator, {
+    edge: "right",
+    gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -7,10 +7,12 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
-import { DropTargetLayout } from '../ui/drop-target-layout';
+import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';
 import { NESTED_DEPTH, TYPE_DROP_TARGET_DEC } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
@@ -130,8 +132,9 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
+    var DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_update_layout_drop_hint') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/createElement(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
       }));

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
@@ -123,9 +123,122 @@ export var DropTargetLayout = function DropTargetLayout(props) {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+export var DropTargetLayoutNativeAnchorSupport = function DropTargetLayoutNativeAnchorSupport(props) {
+  var _api$blockControls3;
+  var api = props.api,
+    getPos = props.getPos,
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
+  var ref = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDraggedOver = _useState4[0],
+    setIsDraggedOver = _useState4[1];
+  var anchorName = getNodeAnchor(parent);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    nextNodeAnchorName = _useState6[0],
+    setNextNodeAnchorName = _useState6[1];
+  var readNextNodeAnchor = useCallback(function () {
+    var _ref$current2, _nextElementSibling$g;
+    var nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.parentElement) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.nextElementSibling;
+    var attrName = getAnchorAttrName();
+    var nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(function (prev) {
+      return prev === nextAnchorName ? prev : nextAnchorName;
+    });
+  }, []);
+  var height = useMemo(function () {
+    if (nextNodeAnchorName) {
+      if (isAnchorSupported()) {
+        return "anchor-size(".concat(nextNodeAnchorName, " height)");
+      } else if (anchorRectCache) {
+        var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  useLayoutEffect(function () {
+    var raf = requestAnimationFrame(function () {
+      readNextNodeAnchor();
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [readNextNodeAnchor]);
+  var dropTargetStackLayoutHintStyle = css(_defineProperty({}, "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
+  var _useActiveAnchorTrack3 = useActiveAnchorTracker(anchorName),
+    _useActiveAnchorTrack4 = _slicedToArray(_useActiveAnchorTrack3, 1),
+    isActiveAnchor = _useActiveAnchorTrack4[0];
+  var _ref4 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
+    activeNode = _ref4.activeNode;
+  var onDrop = useCallback(function () {
+    if (!activeNode) {
+      return;
+    }
+    var to = getPos();
+    var mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var _api$blockControls4;
+        var tr = _ref5.tr;
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 || _api$blockControls4.moveToLayout(from, to)({
+          tr: tr
+        });
+        var insertColumnStep = getInsertLayoutStep(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref6) {
+        var tr = _ref6.tr;
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  useEffect(function () {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return jsx("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver ? jsx(DropIndicator, {
+    edge: "right",
+    gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

package/dist/types/ui/drop-target-layout.d.ts

@@ -13,3 +13,6 @@ export type DropTargetLayoutProps = {
 export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
     anchorRectCache?: AnchorRectCache;
 }) => jsx.JSX.Element | null;
+export declare const DropTargetLayoutNativeAnchorSupport: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache;
+}) => jsx.JSX.Element | null;

package/dist/types-ts4.5/ui/drop-target-layout.d.ts

@@ -13,3 +13,6 @@ export type DropTargetLayoutProps = {
 export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
     anchorRectCache?: AnchorRectCache;
 }) => jsx.JSX.Element | null;
+export declare const DropTargetLayoutNativeAnchorSupport: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache;
+}) => jsx.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.5.5",
+	"version": "7.5.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,9 +53,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.31.0",
+		"@atlaskit/tmp-editor-statsig": "^13.32.0",
 		"@atlaskit/tokens": "^7.1.0",
-		"@atlaskit/tooltip": "^20.7.0",
+		"@atlaskit/tooltip": "^20.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@popperjs/core": "^2.11.8",
@@ -156,6 +156,9 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"editor_native_anchor_update_layout_drop_hint": {
+			"type": "boolean"
 		}
 	}
 }