@atlaskit/editor-plugin-block-controls 2.21.1 → 2.21.3

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

@@ -1,267 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = exports.DropTargetV2 = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _hooks = require("@atlaskit/editor-common/hooks");
-var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
-var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _constants = require("@atlaskit/theme/constants");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _decorationsCommon = require("../pm-plugins/decorations-common");
-var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
-var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
-var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
-var _inlineDropTarget = require("../pm-plugins/utils/inline-drop-target");
-var _consts = require("./consts");
-var _inlineDropTarget2 = require("./inline-drop-target");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var DEFAULT_DROP_INDICATOR_WIDTH = 760;
-var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
-var EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
-var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = '--editor-block-controls-drop-indicator-offset';
-var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = '--editor-block-controls-drop-indicator-gap';
-var styleDropTarget = (0, _react2.css)({
-  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0))"),
-  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0)"),
-  position: 'absolute',
-  left: '0',
-  display: 'block',
-  zIndex: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, ", 110)"),
-  transform: "translateY(var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0))")
-});
-var styleDropIndicator = (0, _react2.css)({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
-});
-var nestedDropIndicatorStyle = (0, _react2.css)({
-  position: 'relative'
-});
-var dropZoneStyles = (0, _react2.css)({
-  margin: 0,
-  position: 'absolute',
-  width: '100%',
-  zIndex: 110,
-  minHeight: '4px'
-});
-var nestedDropZoneStyle = (0, _react2.css)({
-  left: '4px',
-  right: '4px',
-  width: 'unset'
-});
-var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
-
-// This z index is used in container like layout
-var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
-  zIndex: 0
-});
-var HoverZone = function HoverZone(_ref) {
-  var _onDragEnter = _ref.onDragEnter,
-    onDragLeave = _ref.onDragLeave,
-    onDrop = _ref.onDrop,
-    node = _ref.node,
-    parent = _ref.parent,
-    editorWidth = _ref.editorWidth,
-    anchorRectCache = _ref.anchorRectCache,
-    position = _ref.position,
-    isNestedDropTarget = _ref.isNestedDropTarget,
-    dropTargetStyle = _ref.dropTargetStyle;
-  var ref = (0, _react.useRef)(null);
-  var isRemainingheight = dropTargetStyle === 'remainingHeight';
-  var anchorName = (0, _react.useMemo)(function () {
-    return node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
-  }, [node]);
-  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
-    _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 2),
-    _isActive = _useActiveAnchorTrack2[0],
-    setActiveAnchor = _useActiveAnchorTrack2[1];
-  (0, _react.useEffect)(function () {
-    if (ref.current) {
-      return (0, _adapter.dropTargetForElements)({
-        element: ref.current,
-        onDragEnter: function onDragEnter() {
-          if (!isNestedDropTarget && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
-            setActiveAnchor();
-          }
-          _onDragEnter();
-        },
-        onDragLeave: onDragLeave,
-        onDrop: onDrop
-      });
-    }
-  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
-  var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
-    var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
-    var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
-    var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
-    var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
-    return (0, _react2.css)({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      height: heightStyle,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      transform: transform,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      maxWidth: "".concat(editorWidth || 0, "px")
-    });
-  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
-
-  /**
-   * 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, _decorationsCommon.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
-    ,
-    className: "drop-target-hover-zone-".concat(position),
-    "data-testid": "drop-target-zone-".concat(position)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    hoverZoneUpperStyle,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
-  });
-};
-var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
-  var _api$blockControls;
-  var api = props.api,
-    getPos = props.getPos,
-    prevNode = props.prevNode,
-    nextNode = props.nextNode,
-    parentNode = props.parentNode,
-    formatMessage = props.formatMessage,
-    anchorRectCache = props.anchorRectCache,
-    _props$dropTargetStyl = props.dropTargetStyle,
-    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl,
-    isSameLayout = props.isSameLayout;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isDraggedOver = _useState2[0],
-    setIsDraggedOver = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
-    widthState = _useSharedPluginState.widthState;
-  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
-  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-    activeNode = _ref2.activeNode;
-  var onDrop = function onDrop() {
-    if (!activeNode) {
-      return;
-    }
-    var pos = getPos();
-    if (activeNode && pos !== undefined) {
-      var _api$core, _api$blockControls2;
-      var start = activeNode.pos;
-      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 dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    width: isNestedDropTarget ? 'unset' : '100%'
-  }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card());
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
-    onDragEnter: function onDragEnter() {
-      return setIsDraggedOver(true);
-    },
-    onDragLeave: function onDragLeave() {
-      return setIsDraggedOver(false);
-    },
-    onDrop: onDrop,
-    node: prevNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorRectCache: anchorRectCache,
-    position: "upper",
-    isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
-  }), (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: dynamicStyle,
-    "data-testid": "block-ctrl-drop-target"
-  },
-  // 4px gap to clear expand node border
-  (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
-    css: styleDropIndicator,
-    "data-testid": "block-ctrl-drop-indicator"
-  }, (0, _react2.jsx)(_box.DropIndicator, {
-    edge: "bottom"
-  }))), dropTargetStyle !== 'remainingHeight' && (0, _react2.jsx)(HoverZone, {
-    onDragEnter: function onDragEnter() {
-      return setIsDraggedOver(true);
-    },
-    onDragLeave: function onDragLeave() {
-      return setIsDraggedOver(false);
-    },
-    onDrop: onDrop,
-    node: nextNode,
-    parent: parentNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorRectCache: anchorRectCache,
-    position: "lower",
-    isNestedDropTarget: isNestedDropTarget
-  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  , (0, _extends2.default)({}, props, {
-    position: "left"
-  })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  , (0, _extends2.default)({}, props, {
-    position: "right"
-  }))));
-};

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

@@ -1,252 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { layers } from '@atlaskit/theme/constants';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNodeAnchor } from '../pm-plugins/decorations-common';
-import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
-import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
-import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
-import { shouldAllowInlineDropTarget } from '../pm-plugins/utils/inline-drop-target';
-import { getNestedNodeLeftPaddingMargin } from './consts';
-import { InlineDropTarget } from './inline-drop-target';
-const DEFAULT_DROP_INDICATOR_WIDTH = 760;
-const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-const EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
-const EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
-export const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = '--editor-block-controls-drop-indicator-offset';
-export const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = '--editor-block-controls-drop-indicator-gap';
-const styleDropTarget = css({
-  marginLeft: `calc(-1 * var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0))`,
-  paddingLeft: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0)`,
-  position: 'absolute',
-  left: '0',
-  display: 'block',
-  zIndex: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX}, 110)`,
-  transform: `translateY(var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0))`
-});
-const styleDropIndicator = css({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
-});
-const nestedDropIndicatorStyle = css({
-  position: 'relative'
-});
-const dropZoneStyles = css({
-  margin: 0,
-  position: 'absolute',
-  width: '100%',
-  zIndex: 110,
-  minHeight: '4px'
-});
-const nestedDropZoneStyle = css({
-  left: '4px',
-  right: '4px',
-  width: 'unset'
-});
-const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
-
-// This z index is used in container like layout
-const fullHeightStyleAdjustZIndexStyle = css({
-  zIndex: 0
-});
-const HoverZone = ({
-  onDragEnter,
-  onDragLeave,
-  onDrop,
-  node,
-  parent,
-  editorWidth,
-  anchorRectCache,
-  position,
-  isNestedDropTarget,
-  dropTargetStyle
-}) => {
-  const ref = useRef(null);
-  const isRemainingheight = dropTargetStyle === 'remainingHeight';
-  const anchorName = useMemo(() => {
-    return node ? getNodeAnchor(node) : '';
-  }, [node]);
-  const [_isActive, setActiveAnchor] = useActiveAnchorTracker(anchorName);
-  useEffect(() => {
-    if (ref.current) {
-      return dropTargetForElements({
-        element: ref.current,
-        onDragEnter: () => {
-          if (!isNestedDropTarget && editorExperiment('advanced_layouts', true)) {
-            setActiveAnchor();
-          }
-          onDragEnter();
-        },
-        onDragLeave,
-        onDrop
-      });
-    }
-  }, [isNestedDropTarget, onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
-  const hoverZoneUpperStyle = useMemo(() => {
-    const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
-    const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
-    const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
-    const transform = position === 'upper' ? `translateY(calc(-100% + ${transformOffset}))` : `translateY(${transformOffset})`;
-    return css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      height: heightStyle,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      transform: transform,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      maxWidth: `${editorWidth || 0}px`
-    });
-  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
-
-  /**
-   * 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
-    ,
-    className: `drop-target-hover-zone-${position}`,
-    "data-testid": `drop-target-zone-${position}`
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    hoverZoneUpperStyle,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
-  });
-};
-export const DropTargetV2 = props => {
-  var _api$blockControls;
-  const {
-    api,
-    getPos,
-    prevNode,
-    nextNode,
-    parentNode,
-    formatMessage,
-    anchorRectCache,
-    dropTargetStyle = 'default',
-    isSameLayout
-  } = props;
-  const [isDraggedOver, setIsDraggedOver] = useState(false);
-  const {
-    widthState
-  } = useSharedPluginState(api, ['width']);
-  const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
-  const {
-    activeNode
-  } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
-  const onDrop = () => {
-    if (!activeNode) {
-      return;
-    }
-    const pos = getPos();
-    if (activeNode && pos !== undefined) {
-      var _api$core, _api$blockControls2, _api$blockControls2$c;
-      const {
-        pos: start
-      } = activeNode;
-      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 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, jsx(HoverZone, {
-    onDragEnter: () => setIsDraggedOver(true),
-    onDragLeave: () => setIsDraggedOver(false),
-    onDrop: onDrop,
-    node: prevNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorRectCache: anchorRectCache,
-    position: "upper",
-    isNestedDropTarget: isNestedDropTarget,
-    dropTargetStyle: dropTargetStyle
-  }), jsx("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: dynamicStyle,
-    "data-testid": "block-ctrl-drop-target"
-  },
-  // 4px gap to clear expand node border
-  (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
-    css: styleDropIndicator,
-    "data-testid": "block-ctrl-drop-indicator"
-  }, jsx(DropIndicator, {
-    edge: "bottom"
-  }))), dropTargetStyle !== 'remainingHeight' && jsx(HoverZone, {
-    onDragEnter: () => setIsDraggedOver(true),
-    onDragLeave: () => setIsDraggedOver(false),
-    onDrop: onDrop,
-    node: nextNode,
-    parent: parentNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorRectCache: anchorRectCache,
-    position: "lower",
-    isNestedDropTarget: isNestedDropTarget
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends({}, props, {
-    position: "left"
-  })), jsx(InlineDropTarget
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends({}, props, {
-    position: "right"
-  }))));
-};