@atlaskit/editor-plugin-block-controls 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.10.0
+
+### Minor Changes
+
+- [#154751](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154751)
+  [`8a15d128d0772`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a15d128d0772) -
+  ED-25049 handle edge cases for vertical drop targets
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.9.0
+
+### Minor Changes
+
+- [#154648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154648)
+  [`7224898e37116`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7224898e37116) -
+  Don't create node decs within tables if nested dnd not enabled
+- [#154380](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154380)
+  [`e045dd3ba95bd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e045dd3ba95bd) -
+  ED-25281 implement DnD API for appending to a layout
+
+### Patch Changes
+
+- [#154186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154186)
+  [`5c316170d29dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c316170d29dd) -
+  Bump @atlaskit/adf-schema to 42.3.1
+- Updated dependencies
+
 ## 2.8.0
 
 ### Minor Changes

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

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.moveToLayout = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
-var _consts = require("../ui/consts");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _consts = require("../consts");
+var _consts2 = require("../ui/consts");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  // TODO update with constant
-  if (layoutContents.length === 0 || layoutContents.length > 5) {
+  if (layoutContents.length === 0 || layoutContents.length > _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
     return null;
   }
-  var width = _consts.DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
+  var width = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
   if (!width) {
     return null;
   }
@@ -19,11 +20,12 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
     layoutSection = _ref.layoutSection,
     layoutColumn = _ref.layoutColumn;
   try {
-    var layoutSectionNode = layoutSection.createChecked(undefined, _model.Fragment.fromArray(layoutContents.map(function (layoutContent) {
+    var layoutContent = _model.Fragment.fromArray(layoutContents.map(function (layoutContent) {
       return layoutColumn.createChecked({
         width: width
       }, layoutContent);
-    })));
+    }));
+    var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
     return layoutSectionNode;
   } catch (error) {
     // TODO analytics
@@ -34,10 +36,16 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
   return function (from, to, position) {
     return function (_ref2) {
       var tr = _ref2.tr;
+      // unable to drag a node to itself.
+      if (from === to) {
+        return tr;
+      }
       var _ref3 = tr.doc.type.schema.nodes || {},
         layoutSection = _ref3.layoutSection,
         layoutColumn = _ref3.layoutColumn,
         doc = _ref3.doc;
+      var _ref4 = tr.doc.type.schema.marks || {},
+        breakout = _ref4.breakout;
 
       // layout plugin does not exist
       if (!layoutSection || !layoutColumn) {
@@ -51,26 +59,62 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       }
       var $from = tr.doc.resolve(from);
 
-      // invalid from position
-      if (!$from.nodeAfter) {
+      // invalid from position or dragging a layout
+      if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
         return tr;
       }
       var toNode = $to.nodeAfter;
       var fromNode = $from.nodeAfter;
-      var fromNodeEndPos = from + fromNode.nodeSize;
-      var toNodeEndPos = to + toNode.nodeSize;
-      if ($to.nodeAfter.type !== layoutSection) {
-        var layoutContents = position === 'left' ? [fromNode, toNode] : [toNode, fromNode];
+
+      // remove breakout from node;
+      if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
+        return m.type === breakout;
+      })) {
+        tr = tr.removeNodeMark(from, breakout);
+      }
+      if ($to.nodeAfter.type === layoutSection) {
+        var existingLayoutNode = $to.nodeAfter;
+        if (existingLayoutNode.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+          var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
+          if (newColumnWidth) {
+            existingLayoutNode.content.forEach(function (node, offset) {
+              if (node.type === layoutColumn) {
+                tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
+              }
+            });
+          }
+          var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
+          tr = tr.insert(toPos,
+          // resolve again the source node after node updated (remove breakout marks)
+          layoutColumn.create({
+            width: newColumnWidth
+          }, tr.doc.resolve(from).nodeAfter));
+          tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(toPos)));
+          var mappedFrom = tr.mapping.map(from);
+          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
+          tr = tr.delete(mappedFrom, mappedFromEnd);
+          tr = tr.scrollIntoView();
+          return tr;
+        }
+        return tr;
+      } else {
+        // resolve again the source node after node updated (remove breakout marks)
+        var newFromNode = tr.doc.resolve(from).nodeAfter;
+        if (!newFromNode) {
+          return tr;
+        }
+        var layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr.delete(from, fromNodeEndPos);
+          tr = tr.delete(from, from + fromNode.nodeSize);
           var mappedTo = tr.mapping.map(to);
-          tr.delete(mappedTo, toNodeEndPos);
-          tr.insert(mappedTo, newLayout); // insert the content at the new position
+          tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
+          tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
+          tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo)));
+          tr = tr.scrollIntoView();
         }
         return tr;
       }
-      return tr;
     };
   };
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeDecorations = exports.getNodeAnchor = exports.findNodeDecs = exports.findHandleDec = exports.findDropTargetDecs = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = exports.createDropTargetDecoration = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
+exports.shouldDescendIntoNode = exports.nodeDecorations = exports.getNodeAnchor = exports.findNodeDecs = exports.findHandleDec = exports.findDropTargetDecs = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = exports.createDropTargetDecoration = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -289,6 +289,7 @@ var ObjHash = /*#__PURE__*/function () {
 }();
 (0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
 var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  // TODO use isWrappedMedia when clean up the featue flag
   if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
     if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
       return true;
@@ -296,6 +297,16 @@ var shouldIgnoreNode = function shouldIgnoreNode(node) {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
+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')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
   var docFrom = from === undefined || from < 0 ? 0 : from;
@@ -304,7 +315,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var _Decoration$node2;
     var depth = 0;
     var anchorName;
-    var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+    var shouldDescend = shouldDescendIntoNode(node);
     var handleId = ObjHash.getForNode(node);
     anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {

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

@@ -13,6 +13,7 @@ var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box")
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _decorations = require("../pm-plugins/decorations");
 var _anchorUtils = require("../utils/anchor-utils");
+var _dragTargetDebug = require("../utils/drag-target-debug");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
@@ -26,13 +27,10 @@ var dropTargetCommonStyle = (0, _react2.css)({
   position: 'absolute',
   display: 'block'
 });
-var hideDropTargetStyle = (0, _react2.css)({
-  display: 'none'
-});
 var hoverZoneCommonStyle = (0, _react2.css)({
   position: 'absolute',
-  // same value as block hover zone
-  zIndex: 110
+  // above the top and bottom drop zone as block hover zone
+  zIndex: 120
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -40,6 +38,60 @@ var GAP = 4;
 var HOVER_ZONE_WIDTH_OFFSET = 40;
 var HOVER_ZONE_HEIGHT_OFFSET = 10;
 var HOVER_ZONE_DEFAULT_WIDTH = 40;
+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);
+    }
+  }
+  return {
+    left: 0,
+    right: 0
+  };
+};
 var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -59,22 +111,25 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
   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 () {
     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, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
+        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
         top: "calc(anchor(top))"
       });
     }
     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, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "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, position]);
+  }, [anchorName, anchorRectCache, offsets.left, offsets.right, 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()) || {},
@@ -91,8 +146,8 @@ 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 && hideDropTargetStyle]
-  }, (0, _react2.jsx)(_box.DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)(_box.DropIndicator, {
     edge: position
   })), (0, _react2.jsx)(InlineHoverZone, {
     position: position,
@@ -101,7 +156,8 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -109,6 +165,7 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
     editorWidthState = _ref3.editorWidthState,
     anchorRectCache = _ref3.anchorRectCache,
     position = _ref3.position,
+    offsets = _ref3.offsets,
     onDragEnter = _ref3.onDragEnter,
     onDragLeave = _ref3.onDragLeave,
     onDrop = _ref3.onDrop;
@@ -127,27 +184,29 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
     }
   }, [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, "px)"),
-        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
+        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(HOVER_ZONE_DEFAULT_WIDTH, "px"),
+        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 : HOVER_ZONE_DEFAULT_WIDTH;
+    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, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      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, position]);
+  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
   return (0, _react2.jsx)("div", {
     ref: ref,
+    "data-test-id": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

package/dist/cjs/utils/check-media-layout.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWrappedMedia = void 0;
+var isWrappedMedia = exports.isWrappedMedia = function isWrappedMedia(node) {
+  if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return false;
+};

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

@@ -7,10 +7,14 @@ exports.shouldAllowInlineDropTarget = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../consts");
 var _advancedLayoutsFlags = require("./advanced-layouts-flags");
+var _checkMediaLayout = require("./check-media-layout");
 var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
   if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
     return false;
   }
+  if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
   }

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

@@ -1,8 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 const createNewLayout = (schema, layoutContents) => {
-  // TODO update with constant
-  if (layoutContents.length === 0 || layoutContents.length > 5) {
+  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
     return null;
   }
   const width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -14,11 +15,12 @@ const createNewLayout = (schema, layoutContents) => {
     layoutColumn
   } = schema.nodes || {};
   try {
-    const layoutSectionNode = layoutSection.createChecked(undefined, Fragment.fromArray(layoutContents.map(layoutContent => {
+    const layoutContent = Fragment.fromArray(layoutContents.map(layoutContent => {
       return layoutColumn.createChecked({
         width
       }, layoutContent);
-    })));
+    }));
+    const layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
     return layoutSectionNode;
   } catch (error) {
     // TODO analytics
@@ -28,11 +30,18 @@ const createNewLayout = (schema, layoutContents) => {
 export const moveToLayout = api => (from, to, position) => ({
   tr
 }) => {
+  // unable to drag a node to itself.
+  if (from === to) {
+    return tr;
+  }
   const {
     layoutSection,
     layoutColumn,
     doc
   } = tr.doc.type.schema.nodes || {};
+  const {
+    breakout
+  } = tr.doc.type.schema.marks || {};
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
@@ -46,24 +55,58 @@ export const moveToLayout = api => (from, to, position) => ({
   }
   const $from = tr.doc.resolve(from);
 
-  // invalid from position
-  if (!$from.nodeAfter) {
+  // invalid from position or dragging a layout
+  if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
     return tr;
   }
   const toNode = $to.nodeAfter;
   const fromNode = $from.nodeAfter;
-  const fromNodeEndPos = from + fromNode.nodeSize;
-  const toNodeEndPos = to + toNode.nodeSize;
-  if ($to.nodeAfter.type !== layoutSection) {
-    const layoutContents = position === 'left' ? [fromNode, toNode] : [toNode, fromNode];
+
+  // remove breakout from node;
+  if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(m => m.type === breakout)) {
+    tr = tr.removeNodeMark(from, breakout);
+  }
+  if ($to.nodeAfter.type === layoutSection) {
+    const existingLayoutNode = $to.nodeAfter;
+    if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+      const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
+      if (newColumnWidth) {
+        existingLayoutNode.content.forEach((node, offset) => {
+          if (node.type === layoutColumn) {
+            tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
+          }
+        });
+      }
+      const toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
+      tr = tr.insert(toPos,
+      // resolve again the source node after node updated (remove breakout marks)
+      layoutColumn.create({
+        width: newColumnWidth
+      }, tr.doc.resolve(from).nodeAfter));
+      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
+      const mappedFrom = tr.mapping.map(from);
+      const mappedFromEnd = mappedFrom + fromNode.nodeSize;
+      tr = tr.delete(mappedFrom, mappedFromEnd);
+      tr = tr.scrollIntoView();
+      return tr;
+    }
+    return tr;
+  } else {
+    // resolve again the source node after node updated (remove breakout marks)
+    const newFromNode = tr.doc.resolve(from).nodeAfter;
+    if (!newFromNode) {
+      return tr;
+    }
+    const layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
     const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
     if (newLayout) {
-      tr.delete(from, fromNodeEndPos);
+      tr = tr.delete(from, from + fromNode.nodeSize);
       const mappedTo = tr.mapping.map(to);
-      tr.delete(mappedTo, toNodeEndPos);
-      tr.insert(mappedTo, newLayout); // insert the content at the new position
+      tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
+      tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
+      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
+      tr = tr.scrollIntoView();
     }
     return tr;
   }
-  return tr;
 };

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

@@ -267,6 +267,7 @@ class ObjHash {
 }
 _defineProperty(ObjHash, "caching", new WeakMap());
 const shouldIgnoreNode = node => {
+  // TODO use isWrappedMedia when clean up the featue flag
   if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
     if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
       return true;
@@ -274,6 +275,16 @@ const shouldIgnoreNode = node => {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
+export const 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')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
   const docFrom = from === undefined || from < 0 ? 0 : from;
@@ -281,7 +292,7 @@ export const nodeDecorations = (newState, from, to) => {
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
     let depth = 0;
     let anchorName;
-    const shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+    const shouldDescend = shouldDescendIntoNode(node);
     const handleId = ObjHash.getForNode(node);
     anchorName = `--node-anchor-${node.type.name}-${handleId}`;
     if (editorExperiment('nested-dnd', true)) {

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

@@ -13,17 +13,15 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { getNodeAnchor } from '../pm-plugins/decorations';
 import { isAnchorSupported } from '../utils/anchor-utils';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 const dropTargetCommonStyle = css({
   position: 'absolute',
   display: 'block'
 });
-const hideDropTargetStyle = css({
-  display: 'none'
-});
 const hoverZoneCommonStyle = css({
   position: 'absolute',
-  // same value as block hover zone
-  zIndex: 110
+  // above the top and bottom drop zone as block hover zone
+  zIndex: 120
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -31,6 +29,60 @@ const GAP = 4;
 const HOVER_ZONE_WIDTH_OFFSET = 40;
 const HOVER_ZONE_HEIGHT_OFFSET = 10;
 const HOVER_ZONE_DEFAULT_WIDTH = 40;
+const getDropTargetPositionOverride = (node, editorWidth) => {
+  if (!node || !editorWidth) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+  const getOffsets = nodeWidth => {
+    const 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') {
+    let 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
+      const 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);
+    }
+  }
+  return {
+    left: 0,
+    right: 0
+  };
+};
 export const InlineDropTarget = ({
   api,
   nextNode,
@@ -49,22 +101,25 @@ export const InlineDropTarget = ({
   const handleDragLeave = useCallback(() => {
     setIsDraggedOver(false);
   }, []);
+  const offsets = useMemo(() => {
+    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
+  }, [nextNode, widthState]);
   const dropTargetRectStyle = useMemo(() => {
     if (isAnchorSupported()) {
       return css({
         height: `calc(anchor-size(${anchorName} height))`,
         positionAnchor: anchorName,
-        left: position === 'left' ? `calc(anchor(left) - ${GAP}px)` : `calc(anchor(right) + ${GAP}px)`,
+        left: position === 'left' ? `calc(anchor(left) - ${GAP - offsets.left}px)` : `calc(anchor(right) + ${GAP - offsets.right}px)`,
         top: `calc(anchor(top))`
       });
     }
     const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
     return css({
       height: `calc(${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px)`,
-      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right}px`,
       top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`
     });
-  }, [anchorName, anchorRectCache, position]);
+  }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
   const onDrop = useCallback(() => {
     var _api$blockControls;
     const {
@@ -84,8 +139,8 @@ export const InlineDropTarget = ({
   }, [api, getPos, position]);
   return jsx(Fragment, null, jsx("div", {
     "data-test-id": `block-ctrl-drop-target-${position}`,
-    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
-  }, jsx(DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
     edge: position
   })), jsx(InlineHoverZone, {
     position: position,
@@ -94,7 +149,8 @@ export const InlineDropTarget = ({
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 export const InlineHoverZone = ({
@@ -102,6 +158,7 @@ export const InlineHoverZone = ({
   editorWidthState,
   anchorRectCache,
   position,
+  offsets,
   onDragEnter,
   onDragLeave,
   onDrop
@@ -122,27 +179,29 @@ export const InlineHoverZone = ({
     }
   }, [onDragEnter, onDragLeave, onDrop]);
   const inlineHoverZoneRectStyle = useMemo(() => {
+    const offset = offsets[position];
     if (isAnchorSupported()) {
       return css({
         positionAnchor: anchorName,
-        left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP}px)`,
-        right: position === 'left' ? `calc(anchor(left) + ${GAP}px)` : 'unset',
+        left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP - offset}px)`,
+        right: position === 'left' ? `calc(anchor(left) + ${GAP - offset}px)` : 'unset',
         top: `calc(anchor(top))`,
-        width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
+        width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px + ${offset}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
         height: `calc(anchor-size(${anchorName} height))`
       });
     }
     const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
-    const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
+    const 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' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset}px`,
       top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`,
       width: `${width}px`,
       height: `calc(${(anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0}px - ${HOVER_ZONE_HEIGHT_OFFSET}px)`
     });
-  }, [anchorName, anchorRectCache, editorWith, position]);
+  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
   return jsx("div", {
     ref: ref,
+    "data-test-id": `drop-target-hover-zone-${position}`,
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

package/dist/es2019/utils/check-media-layout.js

@@ -0,0 +1,8 @@
+export const isWrappedMedia = node => {
+  if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return false;
+};

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

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

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

@@ -1,8 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  // TODO update with constant
-  if (layoutContents.length === 0 || layoutContents.length > 5) {
+  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
     return null;
   }
   var width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -13,11 +14,12 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
     layoutSection = _ref.layoutSection,
     layoutColumn = _ref.layoutColumn;
   try {
-    var layoutSectionNode = layoutSection.createChecked(undefined, Fragment.fromArray(layoutContents.map(function (layoutContent) {
+    var layoutContent = Fragment.fromArray(layoutContents.map(function (layoutContent) {
       return layoutColumn.createChecked({
         width: width
       }, layoutContent);
-    })));
+    }));
+    var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
     return layoutSectionNode;
   } catch (error) {
     // TODO analytics
@@ -28,10 +30,16 @@ export var moveToLayout = function moveToLayout(api) {
   return function (from, to, position) {
     return function (_ref2) {
       var tr = _ref2.tr;
+      // unable to drag a node to itself.
+      if (from === to) {
+        return tr;
+      }
       var _ref3 = tr.doc.type.schema.nodes || {},
         layoutSection = _ref3.layoutSection,
         layoutColumn = _ref3.layoutColumn,
         doc = _ref3.doc;
+      var _ref4 = tr.doc.type.schema.marks || {},
+        breakout = _ref4.breakout;
 
       // layout plugin does not exist
       if (!layoutSection || !layoutColumn) {
@@ -45,26 +53,62 @@ export var moveToLayout = function moveToLayout(api) {
       }
       var $from = tr.doc.resolve(from);
 
-      // invalid from position
-      if (!$from.nodeAfter) {
+      // invalid from position or dragging a layout
+      if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
         return tr;
       }
       var toNode = $to.nodeAfter;
       var fromNode = $from.nodeAfter;
-      var fromNodeEndPos = from + fromNode.nodeSize;
-      var toNodeEndPos = to + toNode.nodeSize;
-      if ($to.nodeAfter.type !== layoutSection) {
-        var layoutContents = position === 'left' ? [fromNode, toNode] : [toNode, fromNode];
+
+      // remove breakout from node;
+      if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
+        return m.type === breakout;
+      })) {
+        tr = tr.removeNodeMark(from, breakout);
+      }
+      if ($to.nodeAfter.type === layoutSection) {
+        var existingLayoutNode = $to.nodeAfter;
+        if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+          var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
+          if (newColumnWidth) {
+            existingLayoutNode.content.forEach(function (node, offset) {
+              if (node.type === layoutColumn) {
+                tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
+              }
+            });
+          }
+          var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
+          tr = tr.insert(toPos,
+          // resolve again the source node after node updated (remove breakout marks)
+          layoutColumn.create({
+            width: newColumnWidth
+          }, tr.doc.resolve(from).nodeAfter));
+          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
+          var mappedFrom = tr.mapping.map(from);
+          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
+          tr = tr.delete(mappedFrom, mappedFromEnd);
+          tr = tr.scrollIntoView();
+          return tr;
+        }
+        return tr;
+      } else {
+        // resolve again the source node after node updated (remove breakout marks)
+        var newFromNode = tr.doc.resolve(from).nodeAfter;
+        if (!newFromNode) {
+          return tr;
+        }
+        var layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr.delete(from, fromNodeEndPos);
+          tr = tr.delete(from, from + fromNode.nodeSize);
           var mappedTo = tr.mapping.map(to);
-          tr.delete(mappedTo, toNodeEndPos);
-          tr.insert(mappedTo, newLayout); // insert the content at the new position
+          tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
+          tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
+          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
+          tr = tr.scrollIntoView();
         }
         return tr;
       }
-      return tr;
     };
   };
 };

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

@@ -282,6 +282,7 @@ var ObjHash = /*#__PURE__*/function () {
 }();
 _defineProperty(ObjHash, "caching", new WeakMap());
 var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  // TODO use isWrappedMedia when clean up the featue flag
   if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
     if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
       return true;
@@ -289,6 +290,16 @@ var shouldIgnoreNode = function shouldIgnoreNode(node) {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
+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')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
 export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
   var docFrom = from === undefined || from < 0 ? 0 : from;
@@ -297,7 +308,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
     var _Decoration$node2;
     var depth = 0;
     var anchorName;
-    var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+    var shouldDescend = shouldDescendIntoNode(node);
     var handleId = ObjHash.getForNode(node);
     anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
     if (editorExperiment('nested-dnd', true)) {

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

@@ -14,17 +14,15 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { getNodeAnchor } from '../pm-plugins/decorations';
 import { isAnchorSupported } from '../utils/anchor-utils';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 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
+  // above the top and bottom drop zone as block hover zone
+  zIndex: 120
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -32,6 +30,60 @@ var GAP = 4;
 var HOVER_ZONE_WIDTH_OFFSET = 40;
 var HOVER_ZONE_HEIGHT_OFFSET = 10;
 var HOVER_ZONE_DEFAULT_WIDTH = 40;
+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);
+    }
+  }
+  return {
+    left: 0,
+    right: 0
+  };
+};
 export var InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -51,22 +103,25 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   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 () {
     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)"),
+        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "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"),
+      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, position]);
+  }, [anchorName, anchorRectCache, offsets.left, offsets.right, 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()) || {},
@@ -83,8 +138,8 @@ 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 && hideDropTargetStyle]
-  }, jsx(DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
     edge: position
   })), jsx(InlineHoverZone, {
     position: position,
@@ -93,7 +148,8 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 export var InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -101,6 +157,7 @@ export var InlineHoverZone = function InlineHoverZone(_ref3) {
     editorWidthState = _ref3.editorWidthState,
     anchorRectCache = _ref3.anchorRectCache,
     position = _ref3.position,
+    offsets = _ref3.offsets,
     onDragEnter = _ref3.onDragEnter,
     onDragLeave = _ref3.onDragLeave,
     onDrop = _ref3.onDrop;
@@ -119,27 +176,29 @@ export var InlineHoverZone = function InlineHoverZone(_ref3) {
     }
   }, [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, "px)"),
-        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
+        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(HOVER_ZONE_DEFAULT_WIDTH, "px"),
+        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 : HOVER_ZONE_DEFAULT_WIDTH;
+    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, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      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, position]);
+  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
   return jsx("div", {
     ref: ref,
+    "data-test-id": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

package/dist/esm/utils/check-media-layout.js

@@ -0,0 +1,8 @@
+export var isWrappedMedia = function isWrappedMedia(node) {
+  if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return false;
+};

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

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

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

@@ -30,5 +30,6 @@ export declare const findNodeDecs: (decorations: DecorationSet, from?: number, t
 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 shouldDescendIntoNode: (node: PMNode) => boolean;
 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/ui/inline-drop-target.d.ts

@@ -3,6 +3,10 @@ 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';
+type DropTargetOffsets = {
+    left: number;
+    right: number;
+};
 export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, getPos, }: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
     position: 'left' | 'right';
@@ -12,9 +16,10 @@ type InlineHoverZoneProps = {
     editorWidthState?: EditorContainerWidth;
     anchorRectCache?: AnchorRectCache;
     position: 'left' | 'right';
+    offsets: DropTargetOffsets;
     onDragEnter: () => void;
     onDragLeave: () => void;
     onDrop: () => void;
 };
-export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
+export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, offsets, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
 export {};

package/dist/types/utils/check-media-layout.d.ts

@@ -0,0 +1,2 @@
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const isWrappedMedia: (node?: PMNode) => boolean;

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

@@ -30,5 +30,6 @@ export declare const findNodeDecs: (decorations: DecorationSet, from?: number, t
 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 shouldDescendIntoNode: (node: PMNode) => boolean;
 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-ts4.5/ui/inline-drop-target.d.ts

@@ -3,6 +3,10 @@ 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';
+type DropTargetOffsets = {
+    left: number;
+    right: number;
+};
 export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, getPos, }: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
     position: 'left' | 'right';
@@ -12,9 +16,10 @@ type InlineHoverZoneProps = {
     editorWidthState?: EditorContainerWidth;
     anchorRectCache?: AnchorRectCache;
     position: 'left' | 'right';
+    offsets: DropTargetOffsets;
     onDragEnter: () => void;
     onDragLeave: () => void;
     onDrop: () => void;
 };
-export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
+export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, offsets, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/utils/check-media-layout.d.ts

@@ -0,0 +1,2 @@
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const isWrappedMedia: (node?: PMNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.8.0",
+	"version": "2.10.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,25 +30,25 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^42.0.2",
-		"@atlaskit/editor-common": "^93.6.0",
+		"@atlaskit/adf-schema": "^42.3.1",
+		"@atlaskit/editor-common": "^94.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
-		"@atlaskit/editor-plugin-quick-insert": "^1.4.0",
+		"@atlaskit/editor-plugin-quick-insert": "^1.5.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.6.0",
+		"@atlaskit/tmp-editor-statsig": "^2.8.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",