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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.11
+
+### Patch Changes
+
+- [`dda502e353b44`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dda502e353b44) -
+  [ux] [ED-25317] Implement drag and drop a layout column within the same layout section
+
+## 2.13.10
+
+### Patch Changes
+
+- [#162501](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162501)
+  [`3bdd9f8231197`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3bdd9f8231197) -
+  ED-25579 fix vertical drop target bugs
+- Updated dependencies
+
 ## 2.13.9
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _consts = require("../consts");
 var _consts2 = require("../ui/consts");
+var _validation = require("../utils/validation");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > (0, _consts.maxLayoutColumnSupported)()) {
     return null;
@@ -53,8 +54,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 < (0, _consts.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 _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
+  } else 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 || {},
@@ -136,12 +142,12 @@ var moveToLayout = exports.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, (0, _validation.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, (0, _validation.isInSameLayout)($from, $to));
       } else {
         var toNodeWithoutBreakout = toNode;
 

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

@@ -14,6 +14,7 @@ var _decorationsCommon = require("./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'];
 var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name) && !(0, _experiments.editorExperiment)('table-nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3')) {
@@ -22,13 +23,20 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
       return false;
     }
   }
+  if ((0, _advancedLayoutsFlags.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 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.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) && (0, _advancedLayoutsFlags.isPreRelease1)();
+  if (isFirstTableHeaderOrTableRow) {
+    return false;
+  }
   return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
@@ -66,7 +74,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   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 = (0, _advancedLayoutsFlags.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;
@@ -78,10 +86,10 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       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/cjs/pm-plugins/decorations-drop-target.js

@@ -88,7 +88,7 @@ var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDec
     return spec.type === _decorationsCommon.TYPE_DROP_TARGET_DEC;
   });
 };
-var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
+var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -102,7 +102,8 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
       element.style.setProperty('display', 'block');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorRectCache: anchorRectCache
+        anchorRectCache: anchorRectCache,
+        isSameLayout: isSameLayout
       })), element);
     } else {
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -136,7 +137,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   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) {
@@ -156,12 +158,15 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     var depth = 0;
     // drop target deco at the end position
     var endPos;
+    var $pos = newState.doc.resolve(pos);
+    var isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, $pos);
     if ((0, _experiments.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) < (0, _consts.maxLayoutColumnSupported)()) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)() || isSameLayout)) {
+          // Add drop target for layout columns
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,
@@ -185,7 +190,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         }
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode);
+      var canDrop = activePMNode && (0, _validation.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 && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
@@ -212,7 +217,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       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/cjs/pm-plugins/handle-mouse-over.js

@@ -50,6 +50,12 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     if ((0, _experiments.editorExperiment)('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
+    if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && (0, _advancedLayoutsFlags.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/cjs/ui/drop-target-v2.js

@@ -187,7 +187,8 @@ var DropTargetV2 = exports.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 = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -254,7 +255,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget
-  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
+  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
     position: "left"
   })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
     position: "right"

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
@@ -150,6 +151,17 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
+var legacyBreakoutWideLayoutStyle = (0, _react.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(_editorSharedStyles.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(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
+    }
+  }
+});
 var globalStyles = function globalStyles() {
   return (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -226,7 +238,7 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
       exposure: false
     }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });

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

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineHoverZone = exports.InlineDropTarget = void 0;
+exports.InlineDropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 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");
@@ -23,12 +22,8 @@ var _dragTargetDebug = require("../utils/drag-target-debug");
  * @jsx jsx
  */
 
-// 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
 
-var dropTargetCommonStyle = (0, _react2.css)({
-  position: 'absolute',
-  display: 'block'
-});
 var hoverZoneCommonStyle = (0, _react2.css)({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
@@ -37,68 +32,34 @@ var hoverZoneCommonStyle = (0, _react2.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 = (0, _react2.css)({
   height: '100%',
-  position: 'relative',
+  position: 'absolute',
   borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.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 = (0, _react2.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';
+  }
 };
 var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
@@ -106,41 +67,65 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     position = _ref.position,
     anchorRectCache = _ref.anchorRectCache,
     getPos = _ref.getPos;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
-    widthState = _useSharedPluginState.widthState;
+  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 = nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
+  var anchorName = (0, _react.useMemo)(function () {
+    return nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
+  }, [nextNode]);
   var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
-  var handleDragEnter = (0, _react.useCallback)(function () {
-    setIsDraggedOver(true);
-  }, []);
-  var handleDragLeave = (0, _react.useCallback)(function () {
-    setIsDraggedOver(false);
-  }, []);
-  var offsets = (0, _react.useMemo)(function () {
-    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
-  }, [nextNode, widthState]);
-  var dropTargetRectStyle = (0, _react.useMemo)(function () {
+  var isLeftPosition = position === 'left';
+  var nodeDimension = (0, _react.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 = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      innerContainerWidth = (0, _anchorUtils.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 = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+    }
     if ((0, _anchorUtils.isAnchorSupported)()) {
-      return (0, _react2.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 (0, _react2.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 = (0, _react.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()) || {},
@@ -157,72 +142,42 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
       }));
     }
   }, [api, getPos, position]);
-  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, {
-    edge: position
-  }) : isActiveAnchor && (0, _react2.jsx)("div", {
-    "data-testid": "block-ctrl-drop-hint",
-    css: dropTargetLayoutHintStyle
-  })), (0, _react2.jsx)(InlineHoverZone, {
-    position: position,
-    node: nextNode,
-    editorWidthState: widthState,
-    anchorRectCache: anchorRectCache,
-    onDragEnter: handleDragEnter,
-    onDragLeave: handleDragLeave,
-    onDrop: onDrop,
-    offsets: offsets
-  }));
-};
-var InlineHoverZone = exports.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 = (0, _react.useRef)(null);
-  var _ref4 = editorWidthState || {},
-    editorWith = _ref4.width;
-  var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
+    return (0, _react2.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 = (0, _react.useMemo)(function () {
+    return isLeftPosition ? 'right' : 'left';
+  }, [isLeftPosition]);
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.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 = (0, _react.useMemo)(function () {
-    var offset = offsets[position];
-    if ((0, _anchorUtils.isAnchorSupported)()) {
-      return (0, _react2.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 (0, _react2.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 (0, _react2.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 || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
+    edge: dropIndicatorPos
+  }) : isActiveAnchor && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: [dropTargetLayoutHintStyle, isLeftPosition && dropTargetLayoutHintLeftStyle]
+  }));
 };

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

@@ -9,6 +9,7 @@ var _consts = require("../consts");
 var _advancedLayoutsFlags = require("./advanced-layouts-flags");
 var _checkMediaLayout = require("./check-media-layout");
 var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
+  var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
     return false;
   }
@@ -16,7 +17,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < (0, _consts.maxLayoutColumnSupported)();
+    return node.childCount < (0, _consts.maxLayoutColumnSupported)() || (0, _advancedLayoutsFlags.isPreRelease2)() && isSameLayout;
   }
   return !(0, _utils.isEmptyParagraph)(node);
 };

package/dist/cjs/utils/validation.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.canMoveNodeToIndex = canMoveNodeToIndex;
-exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isExpand = exports.isDoc = void 0;
+exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,
@@ -27,6 +28,13 @@ var isExpand = exports.isExpand = function isExpand(nodeType) {
 var isNestedExpand = exports.isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+var isInSameLayout = exports.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,
@@ -69,7 +77,12 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
     return null;
   }
 });
-function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNode) {
+  if ((0, _advancedLayoutsFlags.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;