@atlaskit/editor-plugin-block-controls 2.6.2 → 2.7.0

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

@@ -12,7 +12,7 @@ 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 { AnchorHeightsCache, isAnchorSupported } from '../utils/anchor-utils';
+import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
@@ -88,9 +88,8 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache) {
+export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, anchorRectCache) {
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
-  var isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     editorHeight = currentState.editorHeight,
@@ -170,7 +169,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   var shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
 
   // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
-  var shouldRemoveHandle = latestActiveNode && ((meta === null || meta === void 0 ? void 0 : meta.hideDragHandle) && isTitleEnterImprovementEnabled || isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
+  var shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
   if (shouldRemoveHandle) {
     var _activeNode3, _activeNode4;
     var oldHandle = findHandleDec(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
@@ -195,7 +194,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || isBlocksDragTargetDebug()) {
-      var decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
+      var decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -220,10 +219,9 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache) {
+export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache) {
   var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
-  var isNestedEnabled = flags.isNestedEnabled,
-    isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
+  var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isMenuOpen = currentState.isMenuOpen,
@@ -258,7 +256,7 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
   // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
   // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
   // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
-  if (meta !== null && meta !== void 0 && meta.hideDragHandle && isTitleEnterImprovementEnabled || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
+  if (isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
     var oldHandle = decorations.find(undefined, undefined, function (spec) {
       return spec.type === 'drag-handle';
     });
@@ -384,7 +382,7 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
       var _meta$activeNode7;
-      var _decs2 = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
+      var _decs2 = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, _decs2);
     }
   }
@@ -422,18 +420,16 @@ export var createPlugin = function createPlugin(api, getIntl) {
   var isOptimisedApply = isNestedEnabled && editorExperiment('optimised-apply-dnd', true, {
     exposure: true
   });
-  var isTitleEnterImprovementEnabled = fg('confluence_frontend_page_title_enter_improvements');
   var flags = {
     isNestedEnabled: isNestedEnabled,
-    isOptimisedApply: isOptimisedApply,
-    isTitleEnterImprovementEnabled: isTitleEnterImprovementEnabled
+    isOptimisedApply: isOptimisedApply
   };
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
-  var anchorHeightsCache;
+  var anchorRectCache;
   if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
-    anchorHeightsCache = new AnchorHeightsCache();
+    anchorRectCache = new AnchorRectCache();
   }
   return new SafePlugin({
     key: key,
@@ -443,9 +439,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         if (isOptimisedApply) {
-          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache);
+          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorRectCache);
         }
-        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache);
+        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache);
       }
     },
     props: {
@@ -495,8 +491,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
           return false;
         },
         dragstart: function dragstart(view) {
-          var _anchorHeightsCache;
-          (_anchorHeightsCache = anchorHeightsCache) === null || _anchorHeightsCache === void 0 || _anchorHeightsCache.setEditorView(view);
+          var _anchorRectCache;
+          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true
           }));

package/dist/esm/ui/consts.js

@@ -159,4 +159,11 @@ export var nodeMargins = {
     top: 0,
     bottom: 0
   }
+};
+export var DEFAULT_COLUMN_DISTRIBUTIONS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
 };

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
@@ -16,7 +17,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
+import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';
 import { getNestedNodeLeftPaddingMargin } from './consts';
+import { InlineDropTarget } from './inline-drop-target';
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
@@ -72,7 +75,7 @@ var HoverZone = function HoverZone(_ref) {
     node = _ref.node,
     parent = _ref.parent,
     editorWidth = _ref.editorWidth,
-    anchorHeightsCache = _ref.anchorHeightsCache,
+    anchorRectCache = _ref.anchorRectCache,
     position = _ref.position,
     isNestedDropTarget = _ref.isNestedDropTarget,
     dropTargetStyle = _ref.dropTargetStyle;
@@ -91,7 +94,7 @@ var HoverZone = function HoverZone(_ref) {
     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(((anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
+    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';
     var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
     return css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -101,7 +104,7 @@ var HoverZone = function HoverZone(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: "".concat(editorWidth || 0, "px")
     });
-  }, [anchorHeightsCache, editorWidth, node, position]);
+  }, [anchorRectCache, editorWidth, node, position]);
   var isFullHeight = useMemo(function () {
     return dropTargetStyle === 'fullHeight';
   }, [dropTargetStyle]);
@@ -121,16 +124,16 @@ var HoverZone = function HoverZone(_ref) {
     hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
-export var DropTargetV2 = function DropTargetV2(_ref2) {
+export var DropTargetV2 = function DropTargetV2(props) {
   var _dynamicStyle;
-  var api = _ref2.api,
-    getPos = _ref2.getPos,
-    prevNode = _ref2.prevNode,
-    nextNode = _ref2.nextNode,
-    parentNode = _ref2.parentNode,
-    formatMessage = _ref2.formatMessage,
-    anchorHeightsCache = _ref2.anchorHeightsCache,
-    dropTargetStyle = _ref2.dropTargetStyle;
+  var api = props.api,
+    getPos = props.getPos,
+    prevNode = props.prevNode,
+    nextNode = props.nextNode,
+    parentNode = props.parentNode,
+    formatMessage = props.formatMessage,
+    anchorRectCache = props.anchorRectCache,
+    dropTargetStyle = props.dropTargetStyle;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -140,8 +143,8 @@ export var DropTargetV2 = function DropTargetV2(_ref2) {
   var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   var onDrop = function onDrop() {
     var _api$blockControls;
-    var _ref3 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-      activeNode = _ref3.activeNode;
+    var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+      activeNode = _ref2.activeNode;
     if (!activeNode) {
       return;
     }
@@ -166,7 +169,7 @@ export var DropTargetV2 = function DropTargetV2(_ref2) {
     onDrop: onDrop,
     node: prevNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget
   }), jsx("div", {
@@ -194,9 +197,13 @@ export var DropTargetV2 = function DropTargetV2(_ref2) {
     node: nextNode,
     parent: parentNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     dropTargetStyle: dropTargetStyle
-  }));
+  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
+    position: "left"
+  })), jsx(InlineDropTarget, _extends({}, props, {
+    position: "right"
+  }))));
 };

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

@@ -0,0 +1,130 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 { getNodeAnchor } from '../pm-plugins/decorations';
+import { isAnchorSupported } from '../utils/anchor-utils';
+var dropTargetCommonStyle = css({
+  position: 'absolute',
+  display: 'block'
+});
+var hideDropTargetStyle = css({
+  display: 'none'
+});
+var hoverZoneCommonStyle = css({
+  position: 'absolute',
+  // same value as block hover zone
+  zIndex: 110
+});
+
+// gap between node boundary and drop indicator/drop zone
+var GAP = 4;
+var HOVER_ZONE_WIDTH_OFFSET = 40;
+var HOVER_ZONE_HEIGHT_OFFSET = 10;
+var HOVER_ZONE_DEFAULT_WIDTH = 40;
+export var InlineDropTarget = function InlineDropTarget(_ref) {
+  var api = _ref.api,
+    nextNode = _ref.nextNode,
+    position = _ref.position,
+    anchorRectCache = _ref.anchorRectCache;
+  var _useSharedPluginState = useSharedPluginState(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  var anchorName = nextNode ? getNodeAnchor(nextNode) : '';
+  var handleDragEnter = useCallback(function () {
+    setIsDraggedOver(true);
+  }, []);
+  var handleDragLeave = useCallback(function () {
+    setIsDraggedOver(false);
+  }, []);
+  var dropTargetRectStyle = useMemo(function () {
+    if (isAnchorSupported()) {
+      return css({
+        height: "calc(anchor-size(".concat(anchorName, " height))"),
+        positionAnchor: anchorName,
+        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
+        top: "calc(anchor(top))"
+      });
+    }
+    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    return css({
+      height: "calc(".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px)"),
+      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
+    });
+  }, [anchorName, anchorRectCache, position]);
+  return jsx(Fragment, null, jsx("div", {
+    "data-test-id": "block-ctrl-drop-target-".concat(position),
+    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
+  }, jsx(DropIndicator, {
+    edge: position
+  })), jsx(InlineHoverZone, {
+    position: position,
+    node: nextNode,
+    editorWidthState: widthState,
+    anchorRectCache: anchorRectCache,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDrop: function onDrop() {}
+  }));
+};
+export var InlineHoverZone = function InlineHoverZone(_ref2) {
+  var node = _ref2.node,
+    editorWidthState = _ref2.editorWidthState,
+    anchorRectCache = _ref2.anchorRectCache,
+    position = _ref2.position,
+    onDragEnter = _ref2.onDragEnter,
+    onDragLeave = _ref2.onDragLeave,
+    onDrop = _ref2.onDrop;
+  var ref = useRef(null);
+  var _ref3 = editorWidthState || {},
+    editorWith = _ref3.width;
+  var anchorName = node ? getNodeAnchor(node) : '';
+  useEffect(function () {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: onDragEnter,
+        onDragLeave: onDragLeave,
+        onDrop: onDrop
+      });
+    }
+  }, [onDragEnter, onDragLeave, onDrop]);
+  var inlineHoverZoneRectStyle = useMemo(function () {
+    if (isAnchorSupported()) {
+      return css({
+        positionAnchor: anchorName,
+        left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP, "px)"),
+        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
+        top: "calc(anchor(top))",
+        width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
+        height: "calc(anchor-size(".concat(anchorName, " height))")
+      });
+    }
+    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
+    return css({
+      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px"),
+      width: "".concat(width, "px"),
+      height: "calc(".concat((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0, "px - ").concat(HOVER_ZONE_HEIGHT_OFFSET, "px)")
+    });
+  }, [anchorName, anchorRectCache, editorWith, position]);
+  return jsx("div", {
+    ref: ref,
+    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+  });
+};

package/dist/esm/utils/advanced-layouts-flags.js

@@ -0,0 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var isPreRelease1 = function isPreRelease1() {
+  return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_1');
+};

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

@@ -11,36 +11,42 @@ export var isAnchorSupported = memoizeOne(function () {
   }
   return false;
 });
-export var AnchorHeightsCache = /*#__PURE__*/function () {
-  function AnchorHeightsCache() {
-    _classCallCheck(this, AnchorHeightsCache);
-    _defineProperty(this, "anchorHeightsMap", {});
+export var AnchorRectCache = /*#__PURE__*/function () {
+  function AnchorRectCache() {
+    _classCallCheck(this, AnchorRectCache);
+    _defineProperty(this, "anchorRectMap", {});
     _defineProperty(this, "isAnchorSupported", isAnchorSupported());
     _defineProperty(this, "isDirty", true);
     _defineProperty(this, "view", null);
   }
-  _createClass(AnchorHeightsCache, [{
+  _createClass(AnchorRectCache, [{
     key: "clear",
     value: function clear() {
       this.isDirty = true;
-      this.anchorHeightsMap = {};
+      this.anchorRectMap = {};
     }
   }, {
-    key: "getHeights",
-    value: function getHeights() {
+    key: "getRects",
+    value: function getRects() {
       if (this.isDirty) {
         var _this$view;
         var anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
-        this.anchorHeightsMap = Array.from(anchorElements).reduce(function (prev, curr) {
+        this.anchorRectMap = Array.from(anchorElements).reduce(function (prev, curr) {
           var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
           if (anchorName) {
-            return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, curr.clientHeight));
+            return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, {
+              height: curr.clientHeight,
+              top: curr.offsetTop,
+              left: curr.offsetLeft,
+              right: curr.offsetLeft + curr.clientWidth,
+              width: curr.clientWidth
+            }));
           }
           return prev;
         }, {});
         this.isDirty = false;
       }
-      return this.anchorHeightsMap;
+      return this.anchorRectMap;
     }
   }, {
     key: "setEditorView",
@@ -52,12 +58,62 @@ export var AnchorHeightsCache = /*#__PURE__*/function () {
   }, {
     key: "getHeight",
     value: function getHeight(anchorName) {
+      var _rects$anchorName;
       if (this.isAnchorSupported) {
         return null;
       }
-      var heights = this.getHeights();
-      return heights[anchorName];
+      var rects = this.getRects();
+      return (_rects$anchorName = rects[anchorName]) === null || _rects$anchorName === void 0 ? void 0 : _rects$anchorName.height;
+    }
+  }, {
+    key: "getWidth",
+    value: function getWidth(anchorName) {
+      var _rects$anchorName2;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName2 = rects[anchorName]) === null || _rects$anchorName2 === void 0 ? void 0 : _rects$anchorName2.width;
+    }
+  }, {
+    key: "getLeft",
+    value: function getLeft(anchorName) {
+      var _rects$anchorName3;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName3 = rects[anchorName]) === null || _rects$anchorName3 === void 0 ? void 0 : _rects$anchorName3.left;
+    }
+  }, {
+    key: "getTop",
+    value: function getTop(anchorName) {
+      var _rects$anchorName4;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName4 = rects[anchorName]) === null || _rects$anchorName4 === void 0 ? void 0 : _rects$anchorName4.top;
+    }
+  }, {
+    key: "getRight",
+    value: function getRight(anchorName) {
+      var _rects$anchorName5;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName5 = rects[anchorName]) === null || _rects$anchorName5 === void 0 ? void 0 : _rects$anchorName5.right;
+    }
+  }, {
+    key: "getRect",
+    value: function getRect(anchorName) {
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return rects[anchorName];
     }
   }]);
-  return AnchorHeightsCache;
+  return AnchorRectCache;
 }();

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

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

package/dist/types/commands/move-to-layout.d.ts

@@ -0,0 +1,3 @@
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, position: 'left' | 'right') => EditorCommand;

package/dist/types/consts.d.ts

@@ -4,3 +4,4 @@ export declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
+export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;

package/dist/types/pm-plugins/decorations.d.ts

@@ -5,7 +5,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
 import { type DropTargetProps } from '../ui/drop-target';
-import { type AnchorHeightsCache } from '../utils/anchor-utils';
+import { type AnchorRectCache } from '../utils/anchor-utils';
 export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
 export declare const TYPE_HANDLE_DEC = "drag-handle";
 export declare const TYPE_NODE_DEC = "node-decoration";
@@ -27,8 +27,8 @@ export declare const findHandleDec: (decorations: DecorationSet, from?: number,
  * @returns
  */
 export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorHeightsCache?: AnchorHeightsCache) => Decoration;
-export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorHeightsCache?: AnchorHeightsCache, from?: number, to?: number) => Decoration[];
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types/pm-plugins/main.d.ts

@@ -5,14 +5,13 @@ import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemir
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, PluginState } from '../types';
-import { AnchorHeightsCache } from '../utils/anchor-utils';
+import { AnchorRectCache } from '../utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
     isNestedEnabled: boolean;
     isOptimisedApply: boolean;
-    isTitleEnterImprovementEnabled: boolean;
 }
-export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
+export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;
     activeNode: any;
     isDragging: any;
@@ -24,7 +23,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isDocSizeLimitEnabled: boolean | null;
     isPMDragging: any;
 };
-export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
+export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;
     activeNode: any;
     isDragging: any;

package/dist/types/types.d.ts

@@ -58,9 +58,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     ];
     sharedState: BlockControlsSharedState;
     commands: {
+        moveToLayout: (start: number, to: number, position: 'left' | 'right') => EditorCommand;
         moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
-        hideDragHandle: () => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;

package/dist/types/ui/consts.d.ts

@@ -27,3 +27,6 @@ export declare const nodeMargins: {
         bottom: number;
     };
 };
+export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
+    [key: number]: number;
+};

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

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react';
-import { type AnchorHeightsCache } from '../utils/anchor-utils';
+import { type AnchorRectCache } from '../utils/anchor-utils';
 import { type DropTargetProps } from './drop-target';
 export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-block-controls-drop-indicator-offset";
 export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
-export declare const DropTargetV2: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, anchorHeightsCache, dropTargetStyle, }: DropTargetProps & {
-    anchorHeightsCache?: AnchorHeightsCache | undefined;
+export declare const DropTargetV2: (props: DropTargetProps & {
+    anchorRectCache?: AnchorRectCache | undefined;
 }) => jsx.JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx } from '@emotion/react';
+import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type AnchorRectCache } from '../utils/anchor-utils';
+import { type DropTargetProps } from './drop-target';
+export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, }: DropTargetProps & {
+    anchorRectCache?: AnchorRectCache | undefined;
+    position: 'left' | 'right';
+}) => jsx.JSX.Element;
+type InlineHoverZoneProps = {
+    node?: PMNode;
+    editorWidthState?: EditorContainerWidth;
+    anchorRectCache?: AnchorRectCache;
+    position: 'left' | 'right';
+    onDragEnter: () => void;
+    onDragLeave: () => void;
+    onDrop: () => void;
+};
+export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
+export {};

package/dist/types/utils/advanced-layouts-flags.d.ts

@@ -0,0 +1 @@
+export declare const isPreRelease1: () => boolean;

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

@@ -1,12 +1,25 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
-export declare class AnchorHeightsCache {
-    private anchorHeightsMap;
+type RectInfo = {
+    height: number;
+    top: number;
+    left: number;
+    right: number;
+    width: number;
+};
+export declare class AnchorRectCache {
+    private anchorRectMap;
     private isAnchorSupported;
     private isDirty;
     private view;
     clear(): void;
-    private getHeights;
+    private getRects;
     setEditorView(view: EditorView): void;
     getHeight(anchorName: string): number | null;
+    getWidth(anchorName: string): number | null;
+    getLeft(anchorName: string): number | null;
+    getTop(anchorName: string): number | null;
+    getRight(anchorName: string): number | null;
+    getRect(anchorName: string): RectInfo | null;
 }
+export {};