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

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

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -11,21 +12,27 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 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 { dropTargetMarginMap, getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
+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({
-  height: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-negative-100, -8px)",
   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)`
+  zIndex: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX}, 110)`,
+  transform: `translateY(var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0))`
 });
 const styleDropIndicator = css({
   height: '100%',
@@ -36,168 +43,210 @@ const styleDropIndicator = css({
 const nestedDropIndicatorStyle = css({
   position: 'relative'
 });
-const marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(([key, value], i) => [key,
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-css({
-  transform: `translateY(${value})`
-})]));
-const getNodeMargins = node => {
-  if (!node) {
-    return nodeMargins['default'];
-  }
-  const nodeTypeName = node.type.name;
-  if (nodeTypeName === 'heading') {
-    return nodeMargins[`heading${node.attrs.level}`] || nodeMargins['default'];
-  }
-  return nodeMargins[nodeTypeName] || nodeMargins['default'];
-};
-const getNestedDropTargetMarginTop = (prevNode, nextNode, isNestedDropTarget) => {
-  if (!prevNode || !nextNode) {
-    return css({
-      marginTop: "var(--ds-space-negative-100, -8px)"
-    });
-  }
-  const top = getNodeMargins(nextNode).top;
-  const bottom = getNodeMargins(prevNode).bottom;
-  if (['rule', 'media', 'mediaSingle'].includes(prevNode.type.name) && isNestedDropTarget && top > 0 && bottom > 0) {
-    const collapsedMarginOffset = top === bottom ? top : Math.abs(top - bottom);
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    const marginTop = dropTargetMarginMap[-collapsedMarginOffset - 8] || `-${collapsedMarginOffset + 8}px`;
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+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({
-      marginTop
+      // 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`
     });
-  }
-};
-const getDropTargetOffsetStyle = (prevNode, nextNode) => {
-  if (!prevNode || !nextNode) {
-    return null;
-  }
-  const top = getNodeMargins(nextNode).top;
-  const bottom = getNodeMargins(prevNode).bottom;
-  const marginDiff = Math.round((top - bottom) / 2);
-  if (marginDiff === 0) {
+  }, [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;
-  }
-  const offset = Math.max(Math.min(marginDiff, 24), -24);
-  return marginLookupMap[offset];
+  }, [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 DropTarget = ({
-  api,
-  getPos,
-  prevNode,
-  nextNode,
-  parentNode,
-  formatMessage
-}) => {
-  const ref = useRef(null);
+export const DropTarget = 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';
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
+  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;
     }
-
-    // This should be moved to platform/packages/editor/editor-plugin-block-controls/src/pm-plugins/utils/validation.ts
-    // Since we are moved to drop-target-v2
-    // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-    if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {
-      var _api$blockControls;
+    const pos = getPos();
+    if (activeNode && pos !== undefined) {
+      var _api$core, _api$blockControls2, _api$blockControls2$c;
       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 parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
-      const activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
-      if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
-        return;
-      }
+        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));
     }
-    if (editorExperiment('nested-expand-in-expand', false)) {
-      var _api$blockControls2;
-      const {
-        activeNode
-      } = (api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {};
-      const parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
-      const activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
-      if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
-        return;
-      }
-    }
-    return dropTargetForElements({
-      element,
-      getIsSticky: () => true,
-      onDragEnter: () => {
-        setIsDraggedOver(true);
-      },
-      onDragLeave: () => {
-        setIsDraggedOver(false);
-      },
-      onDrop: () => {
-        var _api$blockControls3;
-        const {
-          activeNode
-        } = (api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {};
-        if (!activeNode) {
-          return;
-        }
-        const pos = getPos();
-        if (activeNode && pos !== undefined) {
-          var _api$core, _api$blockControls4, _api$blockControls4$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$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveNode(start, pos, undefined, formatMessage));
-        }
-      }
-    });
-  }, [api, formatMessage, getPos, parentNode]);
-  const dropTargetOffsetStyle = useMemo(() => {
-    /**
-     * First child of a nested node.
-     * Disable the position adjustment temporarily
-     */
-    if (parentNode === prevNode) {
-      return null;
-    }
-    return getDropTargetOffsetStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode]);
-  const dropTargetMarginTopStyles = useMemo(() => {
-    if (parentNode === prevNode) {
-      return null;
-    }
-    return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+  };
   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 (
-    // Note: Firefox has trouble with using a button element as the handle for drag and drop
-    jsx("div", {
-      css: [styleDropTarget,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      dropTargetMarginTopStyles]
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
-      style: dynamicStyle,
-      ref: ref,
-      "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",
-      gap: "4px"
-    })))
-  );
+  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"
+  }))));
 };

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

@@ -9,8 +9,8 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
+import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
-import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
@@ -102,14 +102,14 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     element.style.setProperty('display', 'block');
     if (fg('platform_editor_react18_plugin_portalprovider')) {
       nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+        return /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
           getPos: getPos,
           anchorRectCache: anchorRectCache,
           isSameLayout: isSameLayout
         }));
       }, element, key);
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout