@atlaskit/editor-plugin-block-controls 2.7.1 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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
+
+- [`ed73a2928e080`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ed73a2928e080) -
+  ED-25375 fix drop target v2 end position drop area
+
 ## 2.7.1
 
 ### Patch Changes

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.moveToLayout = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
-var _consts = require("../ui/consts");
+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 +19,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 +35,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 +58,48 @@ 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 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(null, tr.doc.resolve(from).nodeAfter));
+          var mappedFrom = tr.mapping.map(from);
+          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
+          tr = tr.delete(mappedFrom, mappedFromEnd);
+          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
         }
         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"));
@@ -48,6 +48,12 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
 };
+var shouldCollapseMargin = function shouldCollapseMargin(prevNode, nextNode) {
+  if (((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' || (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') && (prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) !== (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name)) {
+    return false;
+  }
+  return true;
+};
 var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
   if (!prevNode && nextNode) {
     // first node
@@ -63,7 +69,7 @@ var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
   }
   var top = getNodeMargins(nextNode).top || 4;
   var bottom = getNodeMargins(prevNode).bottom || 4;
-  var gap = Math.max(top, bottom);
+  var gap = shouldCollapseMargin(prevNode, nextNode) ? Math.max(top, bottom) : top + bottom;
   var offset = top - gap / 2;
   if ((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') {
     offset = -offset;
@@ -140,8 +146,7 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
         offset = _getGapAndOffset.offset;
       element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
       element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
-    }
-    if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
+      element.style.setProperty('display', 'block');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
@@ -221,16 +226,14 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
 
     // only table and layout need to render full height drop target
     var isInSupportedContainer = (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
-
-    // container with only an empty paragrah
-    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (parent === null || parent === void 0 ? void 0 : parent.childCount) === 1 && (0, _utils.isEmptyParagraph)(node) && (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2');
+    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (0, _utils.isEmptyParagraph)(node);
     decs.push(createDropTargetDecoration(pos, {
       api: api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
       formatMessage: formatMessage,
-      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
+      dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
     }, -1, anchorRectCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
@@ -238,7 +241,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         prevNode: (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
         formatMessage: formatMessage,
-        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
+        dropTargetStyle: 'remainingHeight'
       }, -1, anchorRectCache));
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
@@ -293,6 +296,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;
@@ -301,7 +314,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/consts.js

@@ -162,6 +162,10 @@ var nodeMargins = exports.nodeMargins = {
     top: 8,
     bottom: 0
   },
+  blockquote: {
+    top: 12,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -65,12 +65,6 @@ var nestedDropZoneStyle = (0, _react2.css)({
   width: 'unset'
 });
 var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
-var fullHeightStyle = (0, _react2.css)({
-  top: '4px',
-  bottom: '4px',
-  height: 'unset',
-  zIndex: 10
-});
 
 // This z index is used in container like layout
 var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
@@ -98,6 +92,7 @@ var HoverZone = function HoverZone(_ref) {
       });
     }
   }, [onDragEnter, onDragLeave, onDrop]);
+  var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
     var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
@@ -113,12 +108,47 @@ var HoverZone = function HoverZone(_ref) {
       maxWidth: "".concat(editorWidth || 0, "px")
     });
   }, [anchorRectCache, editorWidth, node, position]);
-  var isFullHeight = (0, _react.useMemo)(function () {
-    return dropTargetStyle === 'fullHeight';
-  }, [dropTargetStyle]);
-  var isFullHeightInLayout = (0, _react.useMemo)(function () {
-    return isFullHeight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
-  }, [isFullHeight, parent === null || parent === void 0 ? void 0 : parent.type.name]);
+
+  /**
+   * 1. Above the last empty line
+   * 2. Below the last element
+   *
+   * Both cases will take the remaining height of the the container
+   */
+  var heightStyle = (0, _react.useMemo)(function () {
+    // only apply upper drop zone
+    if (isRemainingheight && position === 'upper') {
+      // previous node
+      var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+      var top = 'unset';
+      if (anchorName) {
+        var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        if ((0, _anchorUtils.isAnchorSupported)()) {
+          top = enabledDropZone ? "calc(anchor(".concat(anchorName, " 50%))") : "calc(anchor(".concat(anchorName, " bottom) - 4px)");
+        } else if (anchorRectCache) {
+          var preNodeTopPos = anchorRectCache.getTop(anchorName) || 0;
+          var prevNodeHeight = anchorRectCache.getHeight(anchorName) || 0;
+          top = enabledDropZone ? "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight / 2, "px)") : "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight, "px - 4px)");
+        } else {
+          // Should not happen
+          return null;
+        }
+      } else {
+        // first empty paragraph
+        top = '4px';
+      }
+      return (0, _react2.css)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        top: top,
+        bottom: '4px',
+        height: 'unset',
+        zIndex: 10,
+        transform: 'none'
+      });
+    }
+    return null;
+  }, [anchorRectCache, isRemainingheight, node, position]);
+  var isFullHeightInLayout = isRemainingheight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
   return (0, _react2.jsx)("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -129,7 +159,9 @@ var HoverZone = function HoverZone(_ref) {
     ,
     css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
+    hoverZoneUpperStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
 var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
@@ -141,7 +173,8 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     parentNode = props.parentNode,
     formatMessage = props.formatMessage,
     anchorRectCache = props.anchorRectCache,
-    dropTargetStyle = props.dropTargetStyle;
+    _props$dropTargetStyl = props.dropTargetStyle,
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -163,11 +196,10 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
     }
   };
-  var isFullHeight = dropTargetStyle === 'fullHeight';
   var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
   }, (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card()), _dynamicStyle);
-  return (0, _react2.jsx)(_react.Fragment, null, !isFullHeight && (0, _react2.jsx)(HoverZone, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
     },
@@ -179,7 +211,8 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    dropTargetStyle: dropTargetStyle
   }), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
@@ -194,7 +227,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     "data-testid": "block-ctrl-drop-indicator"
   }, (0, _react2.jsx)(_box.DropIndicator, {
     edge: "bottom"
-  }))), (0, _react2.jsx)(HoverZone, {
+  }))), dropTargetStyle !== 'remainingHeight' && (0, _react2.jsx)(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
     },
@@ -207,8 +240,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
+    isNestedDropTarget: isNestedDropTarget
   }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode) && (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, {

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

@@ -1,8 +1,8 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+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 +14,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 +29,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 +54,44 @@ 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 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(null, tr.doc.resolve(from).nodeAfter));
+      const mappedFrom = tr.mapping.map(from);
+      const mappedFromEnd = mappedFrom + fromNode.nodeSize;
+      tr = tr.delete(mappedFrom, mappedFromEnd);
+      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
     }
     return tr;
   }
-  return tr;
 };

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

@@ -35,6 +35,12 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+const shouldCollapseMargin = (prevNode, nextNode) => {
+  if (((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' || (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') && (prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) !== (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name)) {
+    return false;
+  }
+  return true;
+};
 const getGapAndOffset = (prevNode, nextNode, parentNode) => {
   if (!prevNode && nextNode) {
     // first node
@@ -50,7 +56,7 @@ const getGapAndOffset = (prevNode, nextNode, parentNode) => {
   }
   const top = getNodeMargins(nextNode).top || 4;
   const bottom = getNodeMargins(prevNode).bottom || 4;
-  const gap = Math.max(top, bottom);
+  const gap = shouldCollapseMargin(prevNode, nextNode) ? Math.max(top, bottom) : top + bottom;
   let offset = top - gap / 2;
   if ((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') {
     offset = -offset;
@@ -122,8 +128,7 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache) =>
       } = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode);
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
-    }
-    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      element.style.setProperty('display', 'block');
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
         ...props,
         getPos,
@@ -205,16 +210,14 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
 
     // only table and layout need to render full height drop target
     const isInSupportedContainer = fg('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
-
-    // container with only an empty paragrah
-    const shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (parent === null || parent === void 0 ? void 0 : parent.childCount) === 1 && isEmptyParagraph(node) && fg('platform_editor_drag_and_drop_target_v2');
+    const shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && isEmptyParagraph(node);
     decs.push(createDropTargetDecoration(pos, {
       api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
       formatMessage,
-      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
+      dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
     }, -1, anchorRectCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
@@ -222,7 +225,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
         prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
         formatMessage,
-        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
+        dropTargetStyle: 'remainingHeight'
       }, -1, anchorRectCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
@@ -271,6 +274,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;
@@ -278,7 +291,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/consts.js

@@ -171,6 +171,10 @@ export const nodeMargins = {
     top: 8,
     bottom: 0
   },
+  blockquote: {
+    top: 12,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -55,12 +55,6 @@ const nestedDropZoneStyle = css({
   width: 'unset'
 });
 const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
-const fullHeightStyle = css({
-  top: '4px',
-  bottom: '4px',
-  height: 'unset',
-  zIndex: 10
-});
 
 // This z index is used in container like layout
 const fullHeightStyleAdjustZIndexStyle = css({
@@ -89,6 +83,7 @@ const HoverZone = ({
       });
     }
   }, [onDragEnter, onDragLeave, onDrop]);
+  const isRemainingheight = dropTargetStyle === 'remainingHeight';
   const hoverZoneUpperStyle = useMemo(() => {
     const anchorName = node ? getNodeAnchor(node) : '';
     const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
@@ -104,12 +99,47 @@ const HoverZone = ({
       maxWidth: `${editorWidth || 0}px`
     });
   }, [anchorRectCache, editorWidth, node, position]);
-  const isFullHeight = useMemo(() => {
-    return dropTargetStyle === 'fullHeight';
-  }, [dropTargetStyle]);
-  const isFullHeightInLayout = useMemo(() => {
-    return isFullHeight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
-  }, [isFullHeight, parent === null || parent === void 0 ? void 0 : parent.type.name]);
+
+  /**
+   * 1. Above the last empty line
+   * 2. Below the last element
+   *
+   * Both cases will take the remaining height of the the container
+   */
+  const heightStyle = useMemo(() => {
+    // only apply upper drop zone
+    if (isRemainingheight && position === 'upper') {
+      // previous node
+      const anchorName = node ? getNodeAnchor(node) : '';
+      let top = 'unset';
+      if (anchorName) {
+        const enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        if (isAnchorSupported()) {
+          top = enabledDropZone ? `calc(anchor(${anchorName} 50%))` : `calc(anchor(${anchorName} bottom) - 4px)`;
+        } else if (anchorRectCache) {
+          const preNodeTopPos = anchorRectCache.getTop(anchorName) || 0;
+          const prevNodeHeight = anchorRectCache.getHeight(anchorName) || 0;
+          top = enabledDropZone ? `calc(${preNodeTopPos}px + ${prevNodeHeight / 2}px)` : `calc(${preNodeTopPos}px + ${prevNodeHeight}px - 4px)`;
+        } else {
+          // Should not happen
+          return null;
+        }
+      } else {
+        // first empty paragraph
+        top = '4px';
+      }
+      return css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        top: top,
+        bottom: '4px',
+        height: 'unset',
+        zIndex: 10,
+        transform: 'none'
+      });
+    }
+    return null;
+  }, [anchorRectCache, isRemainingheight, node, position]);
+  const isFullHeightInLayout = isRemainingheight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
   return jsx("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -120,7 +150,9 @@ const HoverZone = ({
     ,
     css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
+    hoverZoneUpperStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
 export const DropTargetV2 = props => {
@@ -132,7 +164,7 @@ export const DropTargetV2 = props => {
     parentNode,
     formatMessage,
     anchorRectCache,
-    dropTargetStyle
+    dropTargetStyle = 'default'
   } = props;
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const {
@@ -156,14 +188,13 @@ export const DropTargetV2 = props => {
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos, undefined, formatMessage));
     }
   };
-  const isFullHeight = dropTargetStyle === 'fullHeight';
   const dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%',
     [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()
   };
-  return jsx(Fragment, null, !isFullHeight && jsx(HoverZone, {
+  return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: () => setIsDraggedOver(true),
     onDragLeave: () => setIsDraggedOver(false),
     onDrop: onDrop,
@@ -171,7 +202,8 @@ export const DropTargetV2 = props => {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    dropTargetStyle: dropTargetStyle
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
@@ -186,7 +218,7 @@ export const DropTargetV2 = props => {
     "data-testid": "block-ctrl-drop-indicator"
   }, jsx(DropIndicator, {
     edge: "bottom"
-  }))), jsx(HoverZone, {
+  }))), dropTargetStyle !== 'remainingHeight' && jsx(HoverZone, {
     onDragEnter: () => setIsDraggedOver(true),
     onDragLeave: () => setIsDraggedOver(false),
     onDrop: onDrop,
@@ -195,8 +227,7 @@ export const DropTargetV2 = props => {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
+    isNestedDropTarget: isNestedDropTarget
   }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
     position: "left"
   })), jsx(InlineDropTarget, _extends({}, props, {

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

@@ -1,8 +1,8 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+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 +13,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 +29,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 +52,48 @@ 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 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(null, tr.doc.resolve(from).nodeAfter));
+          var mappedFrom = tr.mapping.map(from);
+          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
+          tr = tr.delete(mappedFrom, mappedFromEnd);
+          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
         }
         return tr;
       }
-      return tr;
     };
   };
 };

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

@@ -41,6 +41,12 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+var shouldCollapseMargin = function shouldCollapseMargin(prevNode, nextNode) {
+  if (((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' || (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') && (prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) !== (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name)) {
+    return false;
+  }
+  return true;
+};
 var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
   if (!prevNode && nextNode) {
     // first node
@@ -56,7 +62,7 @@ var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
   }
   var top = getNodeMargins(nextNode).top || 4;
   var bottom = getNodeMargins(prevNode).bottom || 4;
-  var gap = Math.max(top, bottom);
+  var gap = shouldCollapseMargin(prevNode, nextNode) ? Math.max(top, bottom) : top + bottom;
   var offset = top - gap / 2;
   if ((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') {
     offset = -offset;
@@ -133,8 +139,7 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
         offset = _getGapAndOffset.offset;
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
-    }
-    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      element.style.setProperty('display', 'block');
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
@@ -214,16 +219,14 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
 
     // only table and layout need to render full height drop target
     var isInSupportedContainer = fg('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
-
-    // container with only an empty paragrah
-    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (parent === null || parent === void 0 ? void 0 : parent.childCount) === 1 && isEmptyParagraph(node) && fg('platform_editor_drag_and_drop_target_v2');
+    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && isEmptyParagraph(node);
     decs.push(createDropTargetDecoration(pos, {
       api: api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
       formatMessage: formatMessage,
-      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
+      dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
     }, -1, anchorRectCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
@@ -231,7 +234,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
         formatMessage: formatMessage,
-        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
+        dropTargetStyle: 'remainingHeight'
       }, -1, anchorRectCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
@@ -286,6 +289,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;
@@ -294,7 +307,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/consts.js

@@ -155,6 +155,10 @@ export var nodeMargins = {
     top: 8,
     bottom: 0
   },
+  blockquote: {
+    top: 12,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -57,12 +57,6 @@ var nestedDropZoneStyle = css({
   width: 'unset'
 });
 var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
-var fullHeightStyle = css({
-  top: '4px',
-  bottom: '4px',
-  height: 'unset',
-  zIndex: 10
-});
 
 // This z index is used in container like layout
 var fullHeightStyleAdjustZIndexStyle = css({
@@ -90,6 +84,7 @@ var HoverZone = function HoverZone(_ref) {
       });
     }
   }, [onDragEnter, onDragLeave, onDrop]);
+  var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var hoverZoneUpperStyle = useMemo(function () {
     var anchorName = node ? getNodeAnchor(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
@@ -105,12 +100,47 @@ var HoverZone = function HoverZone(_ref) {
       maxWidth: "".concat(editorWidth || 0, "px")
     });
   }, [anchorRectCache, editorWidth, node, position]);
-  var isFullHeight = useMemo(function () {
-    return dropTargetStyle === 'fullHeight';
-  }, [dropTargetStyle]);
-  var isFullHeightInLayout = useMemo(function () {
-    return isFullHeight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
-  }, [isFullHeight, parent === null || parent === void 0 ? void 0 : parent.type.name]);
+
+  /**
+   * 1. Above the last empty line
+   * 2. Below the last element
+   *
+   * Both cases will take the remaining height of the the container
+   */
+  var heightStyle = useMemo(function () {
+    // only apply upper drop zone
+    if (isRemainingheight && position === 'upper') {
+      // previous node
+      var anchorName = node ? getNodeAnchor(node) : '';
+      var top = 'unset';
+      if (anchorName) {
+        var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        if (isAnchorSupported()) {
+          top = enabledDropZone ? "calc(anchor(".concat(anchorName, " 50%))") : "calc(anchor(".concat(anchorName, " bottom) - 4px)");
+        } else if (anchorRectCache) {
+          var preNodeTopPos = anchorRectCache.getTop(anchorName) || 0;
+          var prevNodeHeight = anchorRectCache.getHeight(anchorName) || 0;
+          top = enabledDropZone ? "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight / 2, "px)") : "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight, "px - 4px)");
+        } else {
+          // Should not happen
+          return null;
+        }
+      } else {
+        // first empty paragraph
+        top = '4px';
+      }
+      return css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        top: top,
+        bottom: '4px',
+        height: 'unset',
+        zIndex: 10,
+        transform: 'none'
+      });
+    }
+    return null;
+  }, [anchorRectCache, isRemainingheight, node, position]);
+  var isFullHeightInLayout = isRemainingheight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
   return jsx("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -121,7 +151,9 @@ var HoverZone = function HoverZone(_ref) {
     ,
     css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
+    hoverZoneUpperStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
 export var DropTargetV2 = function DropTargetV2(props) {
@@ -133,7 +165,8 @@ export var DropTargetV2 = function DropTargetV2(props) {
     parentNode = props.parentNode,
     formatMessage = props.formatMessage,
     anchorRectCache = props.anchorRectCache,
-    dropTargetStyle = props.dropTargetStyle;
+    _props$dropTargetStyl = props.dropTargetStyle,
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -155,11 +188,10 @@ export var DropTargetV2 = function DropTargetV2(props) {
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
     }
   };
-  var isFullHeight = dropTargetStyle === 'fullHeight';
   var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
   }, _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()), _dynamicStyle);
-  return jsx(Fragment, null, !isFullHeight && jsx(HoverZone, {
+  return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
     },
@@ -171,7 +203,8 @@ export var DropTargetV2 = function DropTargetV2(props) {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    dropTargetStyle: dropTargetStyle
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
@@ -186,7 +219,7 @@ export var DropTargetV2 = function DropTargetV2(props) {
     "data-testid": "block-ctrl-drop-indicator"
   }, jsx(DropIndicator, {
     edge: "bottom"
-  }))), jsx(HoverZone, {
+  }))), dropTargetStyle !== 'remainingHeight' && jsx(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
     },
@@ -199,8 +232,7 @@ export var DropTargetV2 = function DropTargetV2(props) {
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
+    isNestedDropTarget: isNestedDropTarget
   }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
     position: "left"
   })), jsx(InlineDropTarget, _extends({}, props, {

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/drop-target.d.ts

@@ -3,7 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export type DropTargetStyle = 'default' | 'fullHeight';
+export type DropTargetStyle = 'default' | 'remainingHeight';
 export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;

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/drop-target.d.ts

@@ -3,7 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export type DropTargetStyle = 'default' | 'fullHeight';
+export type DropTargetStyle = 'default' | 'remainingHeight';
 export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.7.1",
+	"version": "2.9.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,8 +30,8 @@
 		".": "./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.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,14 +41,14 @@
 		"@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.23.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.7.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",