@atlaskit/editor-plugin-block-controls 2.13.3 → 2.13.5

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.5
+
+### Patch Changes
+
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`f71feb1fedb07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f71feb1fedb07) -
+  ED-25618 enable 5 columns for pre release 2
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`70ef661bbbb4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70ef661bbbb4d) -
+  Update feature flag to gate
+- Updated dependencies
+
+## 2.13.4
+
+### Patch Changes
+
+- [#157700](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157700)
+  [`83f28893f3406`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/83f28893f3406) -
+  ED-25062 implement drop hints
+- Updated dependencies
+
 ## 2.13.3
 
 ### Patch Changes

package/dist/cjs/commands/move-to-layout.js

@@ -9,7 +9,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _consts = require("../consts");
 var _consts2 = require("../ui/consts");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  if (layoutContents.length === 0 || layoutContents.length > _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > (0, _consts.maxLayoutColumnSupported)()) {
     return null;
   }
   var width = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -54,7 +54,7 @@ var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
   return tr;
 };
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
     var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     var _ref2 = tr.doc.type.schema.nodes || {},

package/dist/cjs/consts.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_LAYOUT_COLUMN_SUPPORTED = exports.DIRECTION = void 0;
+exports.maxLayoutColumnSupported = exports.DIRECTION = void 0;
+var _advancedLayoutsFlags = require("./utils/advanced-layouts-flags");
 var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -11,4 +12,6 @@ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-var MAX_LAYOUT_COLUMN_SUPPORTED = exports.MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
+  return (0, _advancedLayoutsFlags.isPreRelease2)() ? 5 : 3;
+};

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

@@ -161,9 +161,10 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
+            parent: parent,
             formatMessage: formatMessage
           }));
         }

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

@@ -13,12 +13,14 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _view = require("@atlaskit/editor-prosemirror/view");
+var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _activeAnchorTracker = require("../utils/active-anchor-tracker");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _transactions = require("../utils/transactions");
@@ -86,7 +88,7 @@ var destroyFn = function destroyFn(api) {
   return _combine.combine.apply(void 0, cleanupFn);
 };
 var initialState = {
-  decorations: _view.DecorationSet.empty,
+  decorations: _view2.DecorationSet.empty,
   activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
@@ -135,7 +137,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var latestActiveNode = (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : activeNode;
 
   // Re-create node decorations
-  var isDecSetEmpty = decorations === _view.DecorationSet.empty;
+  var isDecSetEmpty = decorations === _view2.DecorationSet.empty;
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
   var shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
   var isActiveNodeModified = false;
@@ -301,7 +303,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
   // (when the table node rerenders)
   // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
   var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
-  var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+  var redrawDecorations = decorations === _view2.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
   // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
   if (redrawDecorations && !isResizerResizing && api) {
@@ -499,8 +501,24 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           }
           return false;
         },
+        dragenter: function dragenter(_view, event) {
+          if ((0, _advancedLayoutsFlags.isPreRelease2)()) {
+            if (isHTMLElement(event.target)) {
+              var closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
+              if (closestParentElement) {
+                var currentAnchor = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+                if (currentAnchor) {
+                  _activeAnchorTracker.defaultActiveAnchorTracker.emit(currentAnchor);
+                }
+              }
+            }
+          }
+        },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if ((0, _advancedLayoutsFlags.isPreRelease2)()) {
+            _activeAnchorTracker.defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true

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

@@ -11,6 +11,8 @@ var _react2 = require("@emotion/react");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _activeAnchorTracker = require("../utils/active-anchor-tracker");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 /**
  * @jsxRuntime classic
@@ -33,17 +35,22 @@ var dropTargetLayoutStyle = (0, _react2.css)({
 var dropTargetLayoutHintStyle = (0, _react2.css)({
   height: '100%',
   position: 'relative',
-  borderRight: "1px dashed ".concat("var(--ds-background-selected-hovered, ".concat(_colors.B75, ")")),
+  borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")")),
   width: 0
 });
 var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
   var api = props.api,
-    getPos = props.getPos;
+    getPos = props.getPos,
+    parent = props.parent;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
+  var anchorName = (0, _decorationsCommon.getNodeAnchor)(parent);
+  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
+    isActiveAnchor = _useActiveAnchorTrack2[0];
   var onDrop = (0, _react.useCallback)(function () {
     var _api$blockControls;
     var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -79,7 +86,8 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
   }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
-  }) : (0, _react2.jsx)("div", {
+  }) : isActiveAnchor && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -16,6 +16,8 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _activeAnchorTracker = require("../utils/active-anchor-tracker");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _inlineDropTarget = require("../utils/inline-drop-target");
@@ -71,7 +73,7 @@ var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
   zIndex: 0
 });
 var HoverZone = function HoverZone(_ref) {
-  var onDragEnter = _ref.onDragEnter,
+  var _onDragEnter = _ref.onDragEnter,
     onDragLeave = _ref.onDragLeave,
     onDrop = _ref.onDrop,
     node = _ref.node,
@@ -82,19 +84,30 @@ var HoverZone = function HoverZone(_ref) {
     isNestedDropTarget = _ref.isNestedDropTarget,
     dropTargetStyle = _ref.dropTargetStyle;
   var ref = (0, _react.useRef)(null);
+  var isRemainingheight = dropTargetStyle === 'remainingHeight';
+  var anchorName = (0, _react.useMemo)(function () {
+    return node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+  }, [node]);
+  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 2),
+    _isActive = _useActiveAnchorTrack2[0],
+    setActiveAnchor = _useActiveAnchorTrack2[1];
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({
         element: ref.current,
-        onDragEnter: onDragEnter,
+        onDragEnter: function onDragEnter() {
+          if (!isNestedDropTarget && (0, _advancedLayoutsFlags.isPreRelease2)()) {
+            setActiveAnchor();
+          }
+          _onDragEnter();
+        },
         onDragLeave: onDragLeave,
         onDrop: onDrop
       });
     }
-  }, [onDragEnter, onDragLeave, onDrop]);
-  var isRemainingheight = dropTargetStyle === 'remainingHeight';
+  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
-    var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
     var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
@@ -107,7 +120,7 @@ var HoverZone = function HoverZone(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: "".concat(editorWidth || 0, "px")
     });
-  }, [anchorRectCache, editorWidth, node, position]);
+  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
 
   /**
    * 1. Above the last empty line
@@ -119,15 +132,15 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+      var _anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
-      if (anchorName) {
+      if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
         if ((0, _anchorUtils.isAnchorSupported)()) {
-          top = enabledDropZone ? "calc(anchor(".concat(anchorName, " 50%))") : "calc(anchor(".concat(anchorName, " bottom) - 4px)");
+          top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
         } else if (anchorRectCache) {
-          var preNodeTopPos = anchorRectCache.getTop(anchorName) || 0;
-          var prevNodeHeight = anchorRectCache.getHeight(anchorName) || 0;
+          var preNodeTopPos = anchorRectCache.getTop(_anchorName) || 0;
+          var prevNodeHeight = anchorRectCache.getHeight(_anchorName) || 0;
           top = enabledDropZone ? "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight / 2, "px)") : "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight, "px - 4px)");
         } else {
           // Should not happen

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

@@ -11,7 +11,9 @@ var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _colors = require("@atlaskit/theme/colors");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _activeAnchorTracker = require("../utils/active-anchor-tracker");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
@@ -38,6 +40,12 @@ var GAP = 4;
 var HOVER_ZONE_WIDTH_OFFSET = 40;
 var HOVER_ZONE_HEIGHT_OFFSET = 10;
 var HOVER_ZONE_DEFAULT_WIDTH = 40;
+var dropTargetLayoutHintStyle = (0, _react2.css)({
+  height: '100%',
+  position: 'relative',
+  borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")")),
+  width: 0
+});
 var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
   if (!node || !editorWidth) {
     return {
@@ -105,6 +113,9 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
+  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
+    isActiveAnchor = _useActiveAnchorTrack2[0];
   var handleDragEnter = (0, _react.useCallback)(function () {
     setIsDraggedOver(true);
   }, []);
@@ -149,8 +160,11 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
     "data-test-id": "block-ctrl-drop-target-".concat(position),
     css: [dropTargetCommonStyle, dropTargetRectStyle]
-  }, (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)(_box.DropIndicator, {
+  }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: position
+  }) : isActiveAnchor && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
   })), (0, _react2.jsx)(InlineHoverZone, {
     position: position,
     node: nextNode,

package/dist/cjs/utils/active-anchor-tracker.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActiveAnchorTracker = exports.defaultActiveAnchorTracker = exports.ActiveAnchorTracker = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _events = require("events");
+var _react = require("react");
+var _advancedLayoutsFlags = require("./advanced-layouts-flags");
+var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function () {
+  function ActiveAnchorTracker() {
+    (0, _classCallCheck2.default)(this, ActiveAnchorTracker);
+    (0, _defineProperty2.default)(this, "lastActiveAnchor", '');
+    this.emitter = new _events.EventEmitter();
+  }
+  (0, _createClass2.default)(ActiveAnchorTracker, [{
+    key: "subscribe",
+    value: function subscribe(anchorName, callback) {
+      if (this.emitter) {
+        this.emitter.on(anchorName, callback);
+      }
+    }
+  }, {
+    key: "unsubscribe",
+    value: function unsubscribe(anchorName, callback) {
+      if (this.emitter) {
+        this.emitter.removeListener(anchorName, callback);
+      }
+    }
+  }, {
+    key: "emit",
+    value: function emit(anchorName) {
+      if (this.lastActiveAnchor !== anchorName && this.emitter) {
+        this.emitter.emit(this.lastActiveAnchor, false);
+        this.emitter.emit(anchorName, true);
+        this.lastActiveAnchor = anchorName;
+      }
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      if (this.emitter) {
+        // To prevent any potential memory leaks,
+        // we set the event emitter to null and then create a new event emitter.
+        this.emitter.removeAllListeners();
+        this.emitter = null;
+        this.emitter = new _events.EventEmitter();
+      }
+    }
+  }]);
+  return ActiveAnchorTracker;
+}(); // TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
+var defaultActiveAnchorTracker = exports.defaultActiveAnchorTracker = new ActiveAnchorTracker();
+var useActiveAnchorTracker = exports.useActiveAnchorTracker = function useActiveAnchorTracker(anchorName) {
+  var activeAnchorTracker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultActiveAnchorTracker;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var onActive = function onActive(eventIsActive) {
+    setIsActive(eventIsActive);
+  };
+  (0, _react.useEffect)(function () {
+    if (activeAnchorTracker && anchorName && (0, _advancedLayoutsFlags.isPreRelease2)()) {
+      activeAnchorTracker.subscribe(anchorName, onActive);
+      var unsubscribe = function unsubscribe() {
+        activeAnchorTracker.unsubscribe(anchorName, onActive);
+      };
+      return unsubscribe;
+    }
+  }, [activeAnchorTracker, anchorName]);
+  var setActive = (0, _react.useCallback)(function () {
+    activeAnchorTracker.emit(anchorName);
+  }, [activeAnchorTracker, anchorName]);
+  return [isActive, setActive];
+};

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

@@ -16,7 +16,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < (0, _consts.maxLayoutColumnSupported)();
   }
   return !(0, _utils.isEmptyParagraph)(node);
 };

package/dist/es2019/commands/move-to-layout.js

@@ -1,9 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 const createNewLayout = (schema, layoutContents) => {
-  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
   }
   const width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -49,7 +49,7 @@ const moveNode = (from, to, newNode, sourceNodeSize, tr) => {
   return tr;
 };
 const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr) => {
-  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < maxLayoutColumnSupported()) {
     const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     const {

package/dist/es2019/consts.js

@@ -1,3 +1,4 @@
+import { isPreRelease2 } from './utils/advanced-layouts-flags';
 export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -5,4 +6,6 @@ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-export const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export const maxLayoutColumnSupported = () => {
+  return isPreRelease2() ? 5 : 3;
+};

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

@@ -4,7 +4,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
@@ -153,9 +153,10 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api,
+            parent,
             formatMessage
           }));
         }

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

@@ -11,6 +11,8 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { defaultActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
@@ -476,8 +478,24 @@ export const createPlugin = (api, getIntl) => {
           }
           return false;
         },
+        dragenter(_view, event) {
+          if (isPreRelease2()) {
+            if (isHTMLElement(event.target)) {
+              const closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
+              if (closestParentElement) {
+                const currentAnchor = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+                if (currentAnchor) {
+                  defaultActiveAnchorTracker.emit(currentAnchor);
+                }
+              }
+            }
+          }
+        },
         dragstart(view) {
           var _anchorRectCache;
+          if (isPreRelease2()) {
+            defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true

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

@@ -8,7 +8,9 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B75 } from '@atlaskit/theme/colors';
+import { B200 } from '@atlaskit/theme/colors';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 
 // 8px gap + 16px on left and right
@@ -25,16 +27,19 @@ const dropTargetLayoutStyle = css({
 const dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'relative',
-  borderRight: `1px dashed ${`var(--ds-background-selected-hovered, ${B75})`}`,
+  borderRight: `1px dashed ${`var(--ds-border-focused, ${B200})`}`,
   width: 0
 });
 export const DropTargetLayout = props => {
   const {
     api,
-    getPos
+    getPos,
+    parent
   } = props;
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const anchorName = getNodeAnchor(parent);
+  const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
   const onDrop = useCallback(() => {
     var _api$blockControls;
     const {
@@ -73,7 +78,8 @@ export const DropTargetLayout = props => {
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
-  }) : jsx("div", {
+  }) : isActiveAnchor && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -13,6 +13,8 @@ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';
@@ -73,19 +75,27 @@ const HoverZone = ({
   dropTargetStyle
 }) => {
   const ref = useRef(null);
+  const isRemainingheight = dropTargetStyle === 'remainingHeight';
+  const anchorName = useMemo(() => {
+    return node ? getNodeAnchor(node) : '';
+  }, [node]);
+  const [_isActive, setActiveAnchor] = useActiveAnchorTracker(anchorName);
   useEffect(() => {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
-        onDragEnter,
+        onDragEnter: () => {
+          if (!isNestedDropTarget && isPreRelease2()) {
+            setActiveAnchor();
+          }
+          onDragEnter();
+        },
         onDragLeave,
         onDrop
       });
     }
-  }, [onDragEnter, onDragLeave, onDrop]);
-  const isRemainingheight = dropTargetStyle === 'remainingHeight';
+  }, [isNestedDropTarget, onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   const hoverZoneUpperStyle = useMemo(() => {
-    const anchorName = node ? getNodeAnchor(node) : '';
     const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
     const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
     const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
@@ -98,7 +108,7 @@ const HoverZone = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: `${editorWidth || 0}px`
     });
-  }, [anchorRectCache, editorWidth, node, position]);
+  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
 
   /**
    * 1. Above the last empty line

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

@@ -11,7 +11,9 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 const dropTargetCommonStyle = css({
@@ -29,6 +31,12 @@ const GAP = 4;
 const HOVER_ZONE_WIDTH_OFFSET = 40;
 const HOVER_ZONE_HEIGHT_OFFSET = 10;
 const HOVER_ZONE_DEFAULT_WIDTH = 40;
+const dropTargetLayoutHintStyle = css({
+  height: '100%',
+  position: 'relative',
+  borderRight: `1px dashed ${`var(--ds-border-focused, ${B200})`}`,
+  width: 0
+});
 const getDropTargetPositionOverride = (node, editorWidth) => {
   if (!node || !editorWidth) {
     return {
@@ -95,6 +103,7 @@ export const InlineDropTarget = ({
   } = useSharedPluginState(api, ['width']);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const anchorName = nextNode ? getNodeAnchor(nextNode) : '';
+  const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
   const handleDragEnter = useCallback(() => {
     setIsDraggedOver(true);
   }, []);
@@ -142,8 +151,11 @@ export const InlineDropTarget = ({
   return jsx(Fragment, null, jsx("div", {
     "data-test-id": `block-ctrl-drop-target-${position}`,
     css: [dropTargetCommonStyle, dropTargetRectStyle]
-  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
+  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: position
+  }) : isActiveAnchor && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
   })), jsx(InlineHoverZone, {
     position: position,
     node: nextNode,

package/dist/es2019/utils/active-anchor-tracker.js

@@ -0,0 +1,59 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { EventEmitter } from 'events';
+import { useCallback, useEffect, useState } from 'react';
+import { isPreRelease2 } from './advanced-layouts-flags';
+export class ActiveAnchorTracker {
+  constructor() {
+    _defineProperty(this, "lastActiveAnchor", '');
+    this.emitter = new EventEmitter();
+  }
+  subscribe(anchorName, callback) {
+    if (this.emitter) {
+      this.emitter.on(anchorName, callback);
+    }
+  }
+  unsubscribe(anchorName, callback) {
+    if (this.emitter) {
+      this.emitter.removeListener(anchorName, callback);
+    }
+  }
+  emit(anchorName) {
+    if (this.lastActiveAnchor !== anchorName && this.emitter) {
+      this.emitter.emit(this.lastActiveAnchor, false);
+      this.emitter.emit(anchorName, true);
+      this.lastActiveAnchor = anchorName;
+    }
+  }
+  reset() {
+    if (this.emitter) {
+      // To prevent any potential memory leaks,
+      // we set the event emitter to null and then create a new event emitter.
+      this.emitter.removeAllListeners();
+      this.emitter = null;
+      this.emitter = new EventEmitter();
+    }
+  }
+}
+
+// TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
+export const defaultActiveAnchorTracker = new ActiveAnchorTracker();
+export const useActiveAnchorTracker = (anchorName, activeAnchorTracker = defaultActiveAnchorTracker) => {
+  const [isActive, setIsActive] = useState(false);
+  const onActive = eventIsActive => {
+    setIsActive(eventIsActive);
+  };
+  useEffect(() => {
+    if (activeAnchorTracker && anchorName && isPreRelease2()) {
+      activeAnchorTracker.subscribe(anchorName, onActive);
+      const unsubscribe = () => {
+        activeAnchorTracker.unsubscribe(anchorName, onActive);
+      };
+      return unsubscribe;
+    }
+  }, [activeAnchorTracker, anchorName]);
+  const setActive = useCallback(() => {
+    activeAnchorTracker.emit(anchorName);
+  }, [activeAnchorTracker, anchorName]);
+  return [isActive, setActive];
+};

package/dist/es2019/utils/inline-drop-target.js

@@ -1,5 +1,5 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { isPreRelease1 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export const shouldAllowInlineDropTarget = (isNested, node) => {
@@ -10,7 +10,7 @@ export const shouldAllowInlineDropTarget = (isNested, node) => {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < maxLayoutColumnSupported();
   }
   return !isEmptyParagraph(node);
 };

package/dist/esm/commands/move-to-layout.js

@@ -1,9 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
   }
   var width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -48,7 +48,7 @@ var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
   return tr;
 };
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < maxLayoutColumnSupported()) {
     var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     var _ref2 = tr.doc.type.schema.nodes || {},

package/dist/esm/consts.js

@@ -1,3 +1,4 @@
+import { isPreRelease2 } from './utils/advanced-layouts-flags';
 export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -5,4 +6,6 @@ export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-export var MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export var maxLayoutColumnSupported = function maxLayoutColumnSupported() {
+  return isPreRelease2() ? 5 : 3;
+};

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

@@ -7,7 +7,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
@@ -154,9 +154,10 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
+            parent: parent,
             formatMessage: formatMessage
           }));
         }

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

@@ -12,6 +12,8 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { defaultActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
@@ -492,8 +494,24 @@ export var createPlugin = function createPlugin(api, getIntl) {
           }
           return false;
         },
+        dragenter: function dragenter(_view, event) {
+          if (isPreRelease2()) {
+            if (isHTMLElement(event.target)) {
+              var closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
+              if (closestParentElement) {
+                var currentAnchor = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+                if (currentAnchor) {
+                  defaultActiveAnchorTracker.emit(currentAnchor);
+                }
+              }
+            }
+          }
+        },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if (isPreRelease2()) {
+            defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true

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

@@ -9,7 +9,9 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B75 } from '@atlaskit/theme/colors';
+import { B200 } from '@atlaskit/theme/colors';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 
 // 8px gap + 16px on left and right
@@ -26,17 +28,22 @@ var dropTargetLayoutStyle = css({
 var dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'relative',
-  borderRight: "1px dashed ".concat("var(--ds-background-selected-hovered, ".concat(B75, ")")),
+  borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(B200, ")")),
   width: 0
 });
 export var DropTargetLayout = function DropTargetLayout(props) {
   var api = props.api,
-    getPos = props.getPos;
+    getPos = props.getPos,
+    parent = props.parent;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
+  var anchorName = getNodeAnchor(parent);
+  var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
+    _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
+    isActiveAnchor = _useActiveAnchorTrack2[0];
   var onDrop = useCallback(function () {
     var _api$blockControls;
     var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -72,7 +79,8 @@ export var DropTargetLayout = function DropTargetLayout(props) {
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
-  }) : jsx("div", {
+  }) : isActiveAnchor && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -15,6 +15,8 @@ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';
@@ -63,7 +65,7 @@ var fullHeightStyleAdjustZIndexStyle = css({
   zIndex: 0
 });
 var HoverZone = function HoverZone(_ref) {
-  var onDragEnter = _ref.onDragEnter,
+  var _onDragEnter = _ref.onDragEnter,
     onDragLeave = _ref.onDragLeave,
     onDrop = _ref.onDrop,
     node = _ref.node,
@@ -74,19 +76,30 @@ var HoverZone = function HoverZone(_ref) {
     isNestedDropTarget = _ref.isNestedDropTarget,
     dropTargetStyle = _ref.dropTargetStyle;
   var ref = useRef(null);
+  var isRemainingheight = dropTargetStyle === 'remainingHeight';
+  var anchorName = useMemo(function () {
+    return node ? getNodeAnchor(node) : '';
+  }, [node]);
+  var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
+    _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 2),
+    _isActive = _useActiveAnchorTrack2[0],
+    setActiveAnchor = _useActiveAnchorTrack2[1];
   useEffect(function () {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
-        onDragEnter: onDragEnter,
+        onDragEnter: function onDragEnter() {
+          if (!isNestedDropTarget && isPreRelease2()) {
+            setActiveAnchor();
+          }
+          _onDragEnter();
+        },
         onDragLeave: onDragLeave,
         onDrop: onDrop
       });
     }
-  }, [onDragEnter, onDragLeave, onDrop]);
-  var isRemainingheight = dropTargetStyle === 'remainingHeight';
+  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   var hoverZoneUpperStyle = useMemo(function () {
-    var anchorName = node ? getNodeAnchor(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
     var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
@@ -99,7 +112,7 @@ var HoverZone = function HoverZone(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: "".concat(editorWidth || 0, "px")
     });
-  }, [anchorRectCache, editorWidth, node, position]);
+  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
 
   /**
    * 1. Above the last empty line
@@ -111,15 +124,15 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var anchorName = node ? getNodeAnchor(node) : '';
+      var _anchorName = node ? getNodeAnchor(node) : '';
       var top = 'unset';
-      if (anchorName) {
+      if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
         if (isAnchorSupported()) {
-          top = enabledDropZone ? "calc(anchor(".concat(anchorName, " 50%))") : "calc(anchor(".concat(anchorName, " bottom) - 4px)");
+          top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
         } else if (anchorRectCache) {
-          var preNodeTopPos = anchorRectCache.getTop(anchorName) || 0;
-          var prevNodeHeight = anchorRectCache.getHeight(anchorName) || 0;
+          var preNodeTopPos = anchorRectCache.getTop(_anchorName) || 0;
+          var prevNodeHeight = anchorRectCache.getHeight(_anchorName) || 0;
           top = enabledDropZone ? "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight / 2, "px)") : "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight, "px - 4px)");
         } else {
           // Should not happen

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

@@ -12,7 +12,9 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
+import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 var dropTargetCommonStyle = css({
@@ -30,6 +32,12 @@ var GAP = 4;
 var HOVER_ZONE_WIDTH_OFFSET = 40;
 var HOVER_ZONE_HEIGHT_OFFSET = 10;
 var HOVER_ZONE_DEFAULT_WIDTH = 40;
+var dropTargetLayoutHintStyle = css({
+  height: '100%',
+  position: 'relative',
+  borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(B200, ")")),
+  width: 0
+});
 var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
   if (!node || !editorWidth) {
     return {
@@ -97,6 +105,9 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = nextNode ? getNodeAnchor(nextNode) : '';
+  var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
+    _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
+    isActiveAnchor = _useActiveAnchorTrack2[0];
   var handleDragEnter = useCallback(function () {
     setIsDraggedOver(true);
   }, []);
@@ -141,8 +152,11 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   return jsx(Fragment, null, jsx("div", {
     "data-test-id": "block-ctrl-drop-target-".concat(position),
     css: [dropTargetCommonStyle, dropTargetRectStyle]
-  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
+  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: position
+  }) : isActiveAnchor && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
   })), jsx(InlineHoverZone, {
     position: position,
     node: nextNode,

package/dist/esm/utils/active-anchor-tracker.js

@@ -0,0 +1,77 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { EventEmitter } from 'events';
+import { useCallback, useEffect, useState } from 'react';
+import { isPreRelease2 } from './advanced-layouts-flags';
+export var ActiveAnchorTracker = /*#__PURE__*/function () {
+  function ActiveAnchorTracker() {
+    _classCallCheck(this, ActiveAnchorTracker);
+    _defineProperty(this, "lastActiveAnchor", '');
+    this.emitter = new EventEmitter();
+  }
+  _createClass(ActiveAnchorTracker, [{
+    key: "subscribe",
+    value: function subscribe(anchorName, callback) {
+      if (this.emitter) {
+        this.emitter.on(anchorName, callback);
+      }
+    }
+  }, {
+    key: "unsubscribe",
+    value: function unsubscribe(anchorName, callback) {
+      if (this.emitter) {
+        this.emitter.removeListener(anchorName, callback);
+      }
+    }
+  }, {
+    key: "emit",
+    value: function emit(anchorName) {
+      if (this.lastActiveAnchor !== anchorName && this.emitter) {
+        this.emitter.emit(this.lastActiveAnchor, false);
+        this.emitter.emit(anchorName, true);
+        this.lastActiveAnchor = anchorName;
+      }
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      if (this.emitter) {
+        // To prevent any potential memory leaks,
+        // we set the event emitter to null and then create a new event emitter.
+        this.emitter.removeAllListeners();
+        this.emitter = null;
+        this.emitter = new EventEmitter();
+      }
+    }
+  }]);
+  return ActiveAnchorTracker;
+}();
+
+// TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
+export var defaultActiveAnchorTracker = new ActiveAnchorTracker();
+export var useActiveAnchorTracker = function useActiveAnchorTracker(anchorName) {
+  var activeAnchorTracker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultActiveAnchorTracker;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var onActive = function onActive(eventIsActive) {
+    setIsActive(eventIsActive);
+  };
+  useEffect(function () {
+    if (activeAnchorTracker && anchorName && isPreRelease2()) {
+      activeAnchorTracker.subscribe(anchorName, onActive);
+      var unsubscribe = function unsubscribe() {
+        activeAnchorTracker.unsubscribe(anchorName, onActive);
+      };
+      return unsubscribe;
+    }
+  }, [activeAnchorTracker, anchorName]);
+  var setActive = useCallback(function () {
+    activeAnchorTracker.emit(anchorName);
+  }, [activeAnchorTracker, anchorName]);
+  return [isActive, setActive];
+};

package/dist/esm/utils/inline-drop-target.js

@@ -1,5 +1,5 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { isPreRelease1 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
@@ -10,7 +10,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < maxLayoutColumnSupported();
   }
   return !isEmptyParagraph(node);
 };

package/dist/types/consts.d.ts

@@ -4,4 +4,4 @@ export declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export declare const maxLayoutColumnSupported: () => 5 | 3;

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

@@ -1,10 +1,12 @@
 import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
 export type DropTargetLayoutProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
+    parent: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
 export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element;

package/dist/types/utils/active-anchor-tracker.d.ts

@@ -0,0 +1,15 @@
+/// <reference path="../../../../../../typings/events.d.ts" />
+/// <reference types="node" />
+/// <reference types="node/events" />
+import { EventEmitter } from 'events';
+export declare class ActiveAnchorTracker {
+    emitter: EventEmitter | null;
+    lastActiveAnchor: string;
+    constructor();
+    subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
+    unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
+    emit(anchorName: string): void;
+    reset(): void;
+}
+export declare const defaultActiveAnchorTracker: ActiveAnchorTracker;
+export declare const useActiveAnchorTracker: (anchorName: string, activeAnchorTracker?: ActiveAnchorTracker) => [boolean, () => void];

package/dist/types-ts4.5/consts.d.ts

@@ -4,4 +4,4 @@ export declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export declare const maxLayoutColumnSupported: () => 5 | 3;

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

@@ -1,10 +1,12 @@
 import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
 export type DropTargetLayoutProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
+    parent: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
 export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element;

package/dist/types-ts4.5/utils/active-anchor-tracker.d.ts

@@ -0,0 +1,18 @@
+/// <reference path="../../../../../../typings/events.d.ts" />
+/// <reference types="node" />
+/// <reference types="node/events" />
+import { EventEmitter } from 'events';
+export declare class ActiveAnchorTracker {
+    emitter: EventEmitter | null;
+    lastActiveAnchor: string;
+    constructor();
+    subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
+    unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
+    emit(anchorName: string): void;
+    reset(): void;
+}
+export declare const defaultActiveAnchorTracker: ActiveAnchorTracker;
+export declare const useActiveAnchorTracker: (anchorName: string, activeAnchorTracker?: ActiveAnchorTracker) => [
+    boolean,
+    () => void
+];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.3",
+	"version": "2.13.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.10.0",
+		"@atlaskit/editor-common": "^94.12.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^1.6.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^3.1.0",
+		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.11.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.1.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -99,7 +99,7 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.media.extended-resize-experience": {
+		"platform_editor_media_extended_resize_experience": {
 			"type": "boolean",
 			"referenceOnly": true
 		},