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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- [`c094becfaeeaa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c094becfaeeaa) -
+  EDITOR-2476 Introduce new utility method to check if nested tables is supported in the schema to
+  facilitate removal of gate `platform_editor_use_nested_table_pm_nodes`
+- Updated dependencies
+
 ## 7.5.4
 
 ### Patch Changes

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

@@ -10,6 +10,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
 var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
@@ -32,6 +34,7 @@ var ObjHash = /*#__PURE__*/function () {
       if (this.caching.has(node)) {
         return this.caching.get(node);
       }
+      // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
       var uniqueId = (0, _uuid.default)();
       this.caching.set(node, uniqueId);
       return uniqueId;

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -16,6 +16,8 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
 var _marks = require("./utils/marks");
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
@@ -46,10 +48,12 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   }
   var unbind;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
@@ -66,6 +70,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   } : {
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     destroy: function destroy(node) {
       unbind && unbind();

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");
@@ -19,7 +21,7 @@ var _decorationsCommon = require("./decorations-common");
 var _consts2 = require("./utils/consts");
 var _validation = require("./utils/validation");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
@@ -83,6 +85,7 @@ var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDec
   });
 };
 var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -121,6 +124,7 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
   });
 };
 var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -134,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/pm-plugins/decorations-quick-insert-button.js

@@ -14,6 +14,8 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var _marks = require("./utils/marks");
 var _vanillaQuickInsert = require("./vanilla-quick-insert");
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
@@ -31,6 +33,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
   var cleanupCallbacks = [];
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {

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

@@ -113,7 +113,7 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
   var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
   var layoutColumnContent = srcNode.content;
-  var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
+  var isNestingTablesSupported = (0, _nesting.isNestedTablesSupported)(schema) && (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
     exposure: true
   });
   if (activeNodeType === layoutColumn && (0, _experiments.editorExperiment)('advanced_layouts', true)) {

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-common.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
@@ -18,6 +19,7 @@ class ObjHash {
     if (this.caching.has(node)) {
       return this.caching.get(node);
     }
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     const uniqueId = uuid();
     this.caching.set(node, uniqueId);
     return uniqueId;

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -38,10 +39,12 @@ export const dragHandleDecoration = ({
     unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   }
   let unbind;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
     side: -1,
     type: TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
@@ -58,6 +61,7 @@ export const dragHandleDecoration = ({
   } : {
     side: -1,
     type: TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
     destroy: node => {
       unbind && unbind();

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

@@ -1,12 +1,15 @@
 import { createElement } from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 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';
@@ -71,6 +74,7 @@ export const findDropTargetDecs = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_DROP_TARGET_DEC);
 };
 export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
   return Decoration.widget(pos, (_, getPosUnsafe) => {
     const getPos = () => {
@@ -109,6 +113,7 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
   });
 };
 export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, anchorRectCache) => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
   return Decoration.widget(pos, (_, getPosUnsafe) => {
     const getPos = () => {
@@ -122,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/pm-plugins/decorations-quick-insert-button.js

@@ -1,4 +1,5 @@
 import { createElement } from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -23,6 +24,7 @@ export const quickInsertButtonDecoration = ({
   anchorRectCache,
   editorState
 }) => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
   const cleanupCallbacks = [];
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {

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

@@ -1,5 +1,5 @@
 import memoizeOne from 'memoize-one';
-import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { getParentOfTypeCount, isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -104,7 +104,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   const destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
   const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
   const layoutColumnContent = srcNode.content;
-  const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
+  const isNestingTablesSupported = isNestedTablesSupported(schema) && fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
     exposure: true
   });
   if (activeNodeType === layoutColumn && editorExperiment('advanced_layouts', true)) {

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-common.js

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export var TYPE_HANDLE_DEC = 'drag-handle';
@@ -25,6 +26,7 @@ var ObjHash = /*#__PURE__*/function () {
       if (this.caching.has(node)) {
         return this.caching.get(node);
       }
+      // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
       var uniqueId = uuid();
       this.caching.set(node, uniqueId);
       return uniqueId;

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -39,10 +40,12 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   }
   var unbind;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
     side: -1,
     type: TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
@@ -59,6 +62,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
   } : {
     side: -1,
     type: TYPE_HANDLE_DEC,
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
     destroy: function destroy(node) {
       unbind && unbind();

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

@@ -2,14 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(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; }
 import { createElement } from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 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';
@@ -76,6 +79,7 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
   });
 };
 export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
   return Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -114,6 +118,7 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
   });
 };
 export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
   return Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -127,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/pm-plugins/decorations-quick-insert-button.js

@@ -1,4 +1,5 @@
 import { createElement } from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -24,6 +25,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
   var cleanupCallbacks = [];
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {

package/dist/esm/pm-plugins/utils/validation.js

@@ -1,5 +1,5 @@
 import memoizeOne from 'memoize-one';
-import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { getParentOfTypeCount, isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -103,7 +103,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
   var layoutColumnContent = srcNode.content;
-  var isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
+  var isNestingTablesSupported = isNestedTablesSupported(schema) && fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
     exposure: true
   });
   if (activeNodeType === layoutColumn && editorExperiment('advanced_layouts', true)) {

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.4",
+	"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.29.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",
@@ -65,7 +65,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.22.0",
+		"@atlaskit/editor-common": "^110.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -156,6 +156,9 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"editor_native_anchor_update_layout_drop_hint": {
+			"type": "boolean"
 		}
 	}
 }