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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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/pm-plugins/decorations.js

@@ -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')) {

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/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')) {

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/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')) {

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/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/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.8.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",