@atlaskit/editor-plugin-block-controls 2.13.9 → 2.13.11

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

@@ -2,6 +2,7 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+import { isInSameLayout } from '../utils/validation';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
@@ -47,8 +48,13 @@ var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
   tr.delete(mappedFrom, mappedFromEnd);
   return tr;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < maxLayoutColumnSupported()) {
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
+  if (isSameLayout) {
+    // reorder columns
+    tr.delete(from, from + sourceNode.nodeSize);
+    var mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, sourceNode).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
+  } else if (toLayout.childCount < maxLayoutColumnSupported()) {
     var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     var _ref2 = tr.doc.type.schema.nodes || {},
@@ -130,12 +136,12 @@ export var moveToLayout = function moveToLayout(api) {
       }
       if (toNode.type === layoutSection) {
         var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
-        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr);
+        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr, isInSameLayout($from, $to));
       } else if (toNode.type === layoutColumn) {
         var toLayout = $to.parent;
         var toLayoutPos = to - $to.parentOffset - 1;
         var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
-        return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, _toPos, tr);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, _toPos, tr, isInSameLayout($from, $to));
       } else {
         var toNodeWithoutBreakout = toNode;
 

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -2,11 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { isPreRelease2 } from '../utils/advanced-layouts-flags';
+import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+var IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
 export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && fg('platform_editor_element_dnd_nested_fix_patch_3')) {
@@ -15,13 +16,20 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
       return false;
     }
   }
+  if (isPreRelease1()) {
+    return !IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT.includes(node.type.name);
+  }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes) {
+var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
   var isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
+  var isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && isPreRelease1();
+  if (isFirstTableHeaderOrTableRow) {
+    return false;
+  }
   return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
@@ -59,7 +67,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
   var ignore_nodes = isPreRelease2() ? IGNORE_NODES_NEXT : IGNORE_NODES;
-  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var _Decoration$node;
     var depth = 0;
     var anchorName;
@@ -71,10 +79,10 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node, ignore_nodes)) {
+      depth = newState.doc.resolve(pos).depth;
+      if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
-      depth = newState.doc.resolve(pos).depth;
       anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
     } else {
       var _anchorName2;

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

@@ -14,7 +14,7 @@ import { DropTargetLayout } from '../ui/drop-target-layout';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { canMoveNodeToIndex } from '../utils/validation';
+import { canMoveNodeToIndex, isInSameLayout } from '../utils/validation';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
@@ -81,7 +81,7 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -95,7 +95,8 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
       element.style.setProperty('display', 'block');
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorRectCache: anchorRectCache
+        anchorRectCache: anchorRectCache,
+        isSameLayout: isSameLayout
       })), element);
     } else {
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -129,7 +130,8 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
   var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
-  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
+  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
   anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
   var prevNodeStack = [];
   var popNodeStack = function popNodeStack(depth) {
@@ -149,12 +151,15 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     var depth = 0;
     // drop target deco at the end position
     var endPos;
+    var $pos = newState.doc.resolve(pos);
+    var isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, $pos);
     if (editorExperiment('nested-dnd', true)) {
-      depth = newState.doc.resolve(pos).depth;
+      depth = $pos.depth;
       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 &&
+        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) < maxLayoutColumnSupported()) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
+          // Add drop target for layout columns
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,
@@ -178,7 +183,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         }
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode);
+      var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, node);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
@@ -205,7 +210,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache));
+    }, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -1,6 +1,6 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { isPreRelease2 } from '../utils/advanced-layouts-flags';
+import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
 var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -44,6 +44,12 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     if (editorExperiment('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
+    if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && isPreRelease1()) {
+      rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
+      if (!rootElement) {
+        return false;
+      }
+    }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
 

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

@@ -179,7 +179,8 @@ export var DropTargetV2 = function DropTargetV2(props) {
     formatMessage = props.formatMessage,
     anchorRectCache = props.anchorRectCache,
     _props$dropTargetStyl = props.dropTargetStyle,
-    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl;
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl,
+    isSameLayout = props.isSameLayout;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -246,7 +247,7 @@ export var DropTargetV2 = function DropTargetV2(props) {
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
+  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
     position: "left"
   })), jsx(InlineDropTarget, _extends({}, props, {
     position: "right"

package/dist/esm/ui/global-styles.js

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
+import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
@@ -142,6 +143,17 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = css(_defineProperty({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
+var legacyBreakoutWideLayoutStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  '.ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    '--ak-editor--legacy-breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px"),
+    '@media (width>=1280px)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--ak-editor--legacy-breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
+    }
+  }
+});
 var globalStyles = function globalStyles() {
   return fg('platform_editor_element_dnd_nested_fix_patch_3') ? css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -218,7 +230,7 @@ var withAnchorNameZindexNestedStyle = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
     }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });

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

@@ -5,11 +5,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 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';
@@ -17,10 +16,6 @@ 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({
-  position: 'absolute',
-  display: 'block'
-});
 var hoverZoneCommonStyle = css({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
@@ -29,68 +24,34 @@ var hoverZoneCommonStyle = css({
 
 // 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;
 var dropTargetLayoutHintStyle = css({
   height: '100%',
-  position: 'relative',
+  position: 'absolute',
   borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(B200, ")")),
-  width: 0
+  width: 0,
+  left: 0
 });
-var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
-  if (!node || !editorWidth) {
-    return {
-      left: 0,
-      right: 0
-    };
-  }
-  var getOffsets = function getOffsets(nodeWidth) {
-    var offset = (editorWidth - nodeWidth) / 2;
-    return {
-      left: offset,
-      right: offset
-    };
-  };
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
-    return getOffsets(node.attrs.width);
-  }
-
-  // media single 🤦
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
-    var mediaNodeWidth = 0;
-    if (node.attrs.width) {
-      if (node.attrs.widthType === 'pixel') {
-        mediaNodeWidth = node.attrs.width;
-      } else if (editorWidth) {
-        mediaNodeWidth = node.attrs.width / 100 * editorWidth;
-      }
-    } else {
-      // use media width
-      var mediaNode = node.firstChild;
-      if (mediaNode && mediaNode.attrs.width) {
-        mediaNodeWidth = mediaNode.attrs.width;
-      }
-    }
-    if (mediaNodeWidth) {
-      if (node.attrs.layout === 'align-start') {
-        return {
-          left: 0,
-          right: editorWidth - mediaNodeWidth
-        };
-      } else if (node.attrs.layout === 'align-end') {
-        return {
-          left: editorWidth - mediaNodeWidth,
-          right: 0
-        };
-      }
-      return getOffsets(mediaNodeWidth);
+var dropTargetLayoutHintLeftStyle = css({
+  left: 'unset',
+  right: 0
+});
+var defaultNodeDimension = {
+  width: '0',
+  height: '0',
+  top: 'unset'
+};
+var getWidthOffset = function getWidthOffset(node, width, position) {
+  if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
+    var isLeftPosition = position === 'left';
+    if (node.attrs.layout === 'align-start') {
+      return isLeftPosition ? "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
+    } else if ((node === null || node === void 0 ? void 0 : node.attrs.layout) === 'align-end') {
+      return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     }
   }
-  return {
-    left: 0,
-    right: 0
-  };
+  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension') {
+    return '-12px';
+  }
 };
 export var InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
@@ -98,41 +59,65 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     position = _ref.position,
     anchorRectCache = _ref.anchorRectCache,
     getPos = _ref.getPos;
-  var _useSharedPluginState = useSharedPluginState(api, ['width']),
-    widthState = _useSharedPluginState.widthState;
+  var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var anchorName = nextNode ? getNodeAnchor(nextNode) : '';
+  var anchorName = useMemo(function () {
+    return nextNode ? getNodeAnchor(nextNode) : '';
+  }, [nextNode]);
   var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
-  var handleDragEnter = useCallback(function () {
-    setIsDraggedOver(true);
-  }, []);
-  var handleDragLeave = useCallback(function () {
-    setIsDraggedOver(false);
-  }, []);
-  var offsets = useMemo(function () {
-    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
-  }, [nextNode, widthState]);
-  var dropTargetRectStyle = useMemo(function () {
+  var isLeftPosition = position === 'left';
+  var nodeDimension = useMemo(function () {
+    if (!nextNode) {
+      return defaultNodeDimension;
+    }
+    var innerContainerWidth = null;
+    var targetAnchorName = anchorName;
+    if (['blockCard', 'embedCard'].includes(nextNode.type.name)) {
+      if (nextNode.attrs.layout === 'wide') {
+        innerContainerWidth = "max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))";
+      } else if (nextNode.attrs.layout === 'full-width') {
+        innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
+      }
+    } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
+      var _anchorRectCache$getR;
+      var tableWidthAnchor = getNodeAnchor(nextNode.firstChild);
+      innerContainerWidth = isAnchorSupported() ? "anchor-size(".concat(tableWidthAnchor, " width)") : "".concat((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0, "px");
+      if (nextNode.attrs.width) {
+        // when the table has horizontal scroll
+        innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
+      }
+    } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
+      targetAnchorName = getNodeAnchor(nextNode.firstChild);
+    }
     if (isAnchorSupported()) {
-      return css({
-        height: "calc(anchor-size(".concat(anchorName, " height))"),
-        positionAnchor: anchorName,
-        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
-        top: "calc(anchor(top))"
-      });
+      var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
+      var height = "anchor-size(".concat(targetAnchorName, " height)");
+      return {
+        width: width,
+        height: height,
+        top: 'anchor(top)',
+        widthOffset: getWidthOffset(nextNode, width, position)
+      };
     }
-    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 + offsets.left, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right, "px"),
-      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
-    });
-  }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
+    if (anchorRectCache) {
+      var nodeRect = anchorRectCache.getRect(targetAnchorName);
+      var _width = innerContainerWidth || "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0, "px");
+      var top = nodeRect !== null && nodeRect !== void 0 && nodeRect.top ? "".concat(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top, "px") : 'unset';
+      var _height = "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px");
+      return {
+        width: _width,
+        height: _height,
+        top: top,
+        widthOffset: getWidthOffset(nextNode, _width, position)
+      };
+    }
+    return defaultNodeDimension;
+  }, [anchorName, anchorRectCache, nextNode, position]);
   var onDrop = useCallback(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -149,72 +134,42 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
       }));
     }
   }, [api, getPos, position]);
-  return jsx(Fragment, null, jsx("div", {
-    "data-test-id": "block-ctrl-drop-target-".concat(position),
-    css: [dropTargetCommonStyle, dropTargetRectStyle]
-  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
-    edge: position
-  }) : isActiveAnchor && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint",
-    css: dropTargetLayoutHintStyle
-  })), jsx(InlineHoverZone, {
-    position: position,
-    node: nextNode,
-    editorWidthState: widthState,
-    anchorRectCache: anchorRectCache,
-    onDragEnter: handleDragEnter,
-    onDragLeave: handleDragLeave,
-    onDrop: onDrop,
-    offsets: offsets
-  }));
-};
-export var InlineHoverZone = function InlineHoverZone(_ref3) {
-  var node = _ref3.node,
-    editorWidthState = _ref3.editorWidthState,
-    anchorRectCache = _ref3.anchorRectCache,
-    position = _ref3.position,
-    offsets = _ref3.offsets,
-    onDragEnter = _ref3.onDragEnter,
-    onDragLeave = _ref3.onDragLeave,
-    onDrop = _ref3.onDrop;
-  var ref = useRef(null);
-  var _ref4 = editorWidthState || {},
-    editorWith = _ref4.width;
-  var anchorName = node ? getNodeAnchor(node) : '';
+  var inlineHoverZoneRectStyle = useMemo(function () {
+    return css({
+      positionAnchor: anchorName,
+      minWidth: "var(--ds-space-100, 8px)",
+      left: isLeftPosition ? 0 : 'unset',
+      right: isLeftPosition ? 'unset' : 0,
+      top: "calc(anchor(top))",
+      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, ")") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px)"),
+      height: "calc(".concat(nodeDimension.height, ")")
+    });
+  }, [anchorName, isLeftPosition, nodeDimension]);
+  var dropIndicatorPos = useMemo(function () {
+    return isLeftPosition ? 'right' : 'left';
+  }, [isLeftPosition]);
   useEffect(function () {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
-        onDragEnter: onDragEnter,
-        onDragLeave: onDragLeave,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
         onDrop: onDrop
       });
     }
-  }, [onDragEnter, onDragLeave, onDrop]);
-  var inlineHoverZoneRectStyle = useMemo(function () {
-    var offset = offsets[position];
-    if (isAnchorSupported()) {
-      return css({
-        positionAnchor: anchorName,
-        left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP - offset, "px)"),
-        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP - offset, "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(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 + offset : HOVER_ZONE_DEFAULT_WIDTH;
-    return css({
-      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset, "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, offsets, position]);
+  }, [onDrop, setIsDraggedOver]);
   return jsx("div", {
     ref: ref,
-    "data-test-id": "drop-target-hover-zone-".concat(position),
+    "data-testid": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
-  });
+  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
+    edge: dropIndicatorPos
+  }) : isActiveAnchor && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: [dropTargetLayoutHintStyle, isLeftPosition && dropTargetLayoutHintLeftStyle]
+  }));
 };

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

@@ -1,8 +1,9 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { maxLayoutColumnSupported } from '../consts';
-import { isPreRelease1 } from './advanced-layouts-flags';
+import { isPreRelease1, isPreRelease2 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
+  var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (!isPreRelease1() || isNested) {
     return false;
   }
@@ -10,7 +11,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < maxLayoutColumnSupported();
+    return node.childCount < maxLayoutColumnSupported() || isPreRelease2() && isSameLayout;
   }
   return !isEmptyParagraph(node);
 };

package/dist/esm/utils/validation.js

@@ -1,6 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 export var isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,
@@ -19,6 +20,13 @@ export var isExpand = function isExpand(nodeType) {
 export var isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+export var isInSameLayout = function isInSameLayout($from, $to) {
+  var fromNode = $from.nodeAfter;
+  var toNode = $to.nodeAfter;
+  return !!(fromNode && toNode && fromNode.type.name === 'layoutColumn' && ['layoutSection', 'layoutColumn'].includes(toNode.type.name) && (
+  // fromNode can either be in the same layoutSection as toNode or is a layoutColumn inside the toNode (type layoutSection)
+  $from.sameParent($to) || $from.parent === toNode));
+};
 
 /**
  * This function converts an expand into a nested expand,
@@ -61,7 +69,12 @@ export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
     return null;
   }
 });
-export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNode) {
+  if (isPreRelease2() &&
+  // Allow drag layout column and drop into layout section
+  srcNode.type.name === 'layoutColumn' && (destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection') {
+    return true;
+  }
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;

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

@@ -14,6 +14,6 @@ import { type AnchorRectCache } from '../utils/anchor-utils';
  * @returns
  */
 export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache, isSameLayout?: boolean) => Decoration;
 export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
 export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

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

@@ -5,4 +5,5 @@ export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-blo
 export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
 export declare const DropTargetV2: (props: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
+    isSameLayout?: boolean | undefined;
 }) => jsx.JSX.Element;