@atlaskit/editor-plugin-block-controls 2.27.0 → 2.27.4

package/dist/es2019/ui/block-menu.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
+import { BLOCK_MENU_WIDTH } from './consts';
+const dragHandleSelector = '[data-blocks-drag-handle-container="true"] button';
+const BlockMenu = ({
+  editorView,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  api,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const {
+    blockControlsState
+  } = useSharedPluginState(api, ['blockControls']);
+  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+    return null;
+  }
+  const targetHandleRef = document.querySelector(dragHandleSelector);
+  const items = getBlockMenuItems(formatMessage);
+  const handleOpenChange = payload => {
+    if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      }));
+    }
+  };
+  const onMenuItemActivated = ({
+    item
+  }) => {
+    if (editorView) {
+      var _menuItemsCallback, _menuItemsCallback$ca;
+      (_menuItemsCallback = menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 ? void 0 : (_menuItemsCallback$ca = _menuItemsCallback.call(menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback$ca === void 0 ? void 0 : _menuItemsCallback$ca(editorView.state, editorView.dispatch, editorView);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    alignX: 'right',
+    alignY: 'start'
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    ,
+    target: targetHandleRef,
+    mountTo: undefined,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    stick: true,
+    offset: [-18, 8]
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
+    //This needs be removed when the a11y is completely handled
+    //Disabling key navigation now as it works only partially
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    items: items,
+    isOpen: true,
+    fitWidth: BLOCK_MENU_WIDTH,
+    section: {
+      hasSeparator: true
+    },
+    onOpenChange: handleOpenChange,
+    onItemActivated: onMenuItemActivated
+  }));
+};
+export default injectIntl(BlockMenu);

package/dist/es2019/ui/consts.js

@@ -120,6 +120,104 @@ Array.from({
   }, 1000);
   return [currKeyValue, dropTargetMarginMap[value]];
 }));
+export const spacingBetweenNodesForPreview = {
+  paragraph: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  heading1: {
+    top: '1.45833em',
+    bottom: '0'
+  },
+  heading2: {
+    top: '1.4em',
+    bottom: '0'
+  },
+  heading3: {
+    top: '1.31249em',
+    bottom: '0'
+  },
+  heading4: {
+    top: '1.25em',
+    bottom: '0'
+  },
+  heading5: {
+    top: '1.45833em',
+    bottom: '0'
+  },
+  heading6: {
+    top: '1.59091em',
+    bottom: '0'
+  },
+  table: {
+    top: '0',
+    bottom: '0'
+  },
+  bulletList: {
+    top: '10px',
+    bottom: '0'
+  },
+  orderedList: {
+    top: '10px',
+    bottom: '0'
+  },
+  decisionList: {
+    top: '0.5rem',
+    bottom: '0'
+  },
+  taskList: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  codeBlock: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  panel: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  rule: {
+    top: '1.5rem',
+    bottom: '1.5rem'
+  },
+  mediaSingle: {
+    top: '24px',
+    bottom: '24px'
+  },
+  media: {
+    top: '24px',
+    bottom: '24px'
+  },
+  bodiedExtension: {
+    top: '0',
+    bottom: '0'
+  },
+  extension: {
+    top: '0',
+    bottom: '0'
+  },
+  layoutSection: {
+    top: '0',
+    bottom: '0'
+  },
+  blockquote: {
+    top: '0',
+    bottom: '0'
+  },
+  embedCard: {
+    top: '24px',
+    bottom: '24px'
+  },
+  blockCard: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  default: {
+    top: '0',
+    bottom: '0'
+  }
+};
 
 // This table contains the "margins" of different nodes
 // Note this is not the actually margin of the DOM elements,
@@ -221,4 +319,5 @@ export const DEFAULT_COLUMN_DISTRIBUTIONS = {
   3: 33.33,
   4: 25,
   5: 20
-};
+};
+export const BLOCK_MENU_WIDTH = 220;

package/dist/es2019/ui/drag-handle.js

@@ -13,6 +13,7 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -23,9 +24,8 @@ import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
-import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
-import { isHandleInSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 const iconWrapperStyles = xcss({
   display: 'flex',
@@ -96,6 +96,16 @@ const handleIconDragStart = e => {
     (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.dispatchEvent(dragEvent);
   }
 };
+const getNodeSpacingForPreview = node => {
+  if (!node) {
+    return spacingBetweenNodesForPreview['default'];
+  }
+  const nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return spacingBetweenNodesForPreview[`heading${node.attrs.level}`] || spacingBetweenNodesForPreview['default'];
+  }
+  return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
+};
 export const DragHandle = ({
   view,
   api,
@@ -116,6 +126,9 @@ export const DragHandle = ({
   } = useSharedPluginState(api, ['featureFlags']);
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isLayoutColumn = nodeType === 'layoutColumn';
+  const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
   useEffect(() => {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -159,7 +172,14 @@ export const DragHandle = ({
       return tr;
     });
     view.focus();
-  }, [dragHandleSelected, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, nodeType]);
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
+      const startPos = getPos();
+      if (startPos === undefined) {
+        return false;
+      }
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api.blockControls.commands.toggleBlockMenu());
+    }
+  }, [dragHandleSelected, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.blockControls.commands, view, getPos, nodeType]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -222,7 +242,92 @@ export const DragHandle = ({
       onGenerateDragPreview: ({
         nativeSetDragImage
       }) => {
+        var _api$blockControls2;
+        if (isMultiSelect) {
+          var _api$core5;
+          api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+            tr
+          }) => {
+            const handlePos = getPos();
+            if (typeof handlePos !== 'number') {
+              return tr;
+            }
+            if (!tr.selection.empty && handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to) {
+              var _api$blockControls;
+              api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setMultiSelectPositions()({
+                tr
+              });
+            }
+            return tr;
+          });
+        }
+        const startPos = getPos();
+        const state = view.state;
+        const {
+          doc,
+          selection
+        } = state;
+        const {
+          multiSelectDnD
+        } = (api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {};
+        let sliceFrom = selection.from;
+        let sliceTo = selection.to;
+        if (multiSelectDnD) {
+          const {
+            anchor,
+            head
+          } = multiSelectDnD;
+          sliceFrom = Math.min(anchor, head);
+          sliceTo = Math.max(anchor, head);
+        }
+        const expandedSlice = doc.slice(sliceFrom, sliceTo);
+        const isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos <= sliceTo && expandedSlice.content.childCount > 1;
         setCustomNativeDragPreview({
+          getOffset: () => {
+            if (!isDraggingMultiLine) {
+              return {
+                x: 0,
+                y: 0
+              };
+            } else {
+              // Calculate the offset of the preview container,
+              // So when drag multiple nodes, the preview align with the position of the selected nodes
+              const domAtPos = view.domAtPos.bind(view);
+              let domElementsHeightBeforeHandle = 0;
+              const nodesStartPos = [];
+              const nodesEndPos = [];
+              let activeNodeMarginTop = 0;
+              for (let i = 0; i < expandedSlice.content.childCount; i++) {
+                if (i === 0) {
+                  var _expandedSlice$conten;
+                  nodesStartPos[i] = sliceFrom;
+                  nodesEndPos[i] = sliceFrom + (((_expandedSlice$conten = expandedSlice.content.maybeChild(i)) === null || _expandedSlice$conten === void 0 ? void 0 : _expandedSlice$conten.nodeSize) || 0);
+                } else {
+                  var _expandedSlice$conten2;
+                  nodesStartPos[i] = nodesEndPos[i - 1];
+                  nodesEndPos[i] = nodesStartPos[i] + (((_expandedSlice$conten2 = expandedSlice.content.maybeChild(i)) === null || _expandedSlice$conten2 === void 0 ? void 0 : _expandedSlice$conten2.nodeSize) || 0);
+                }
+
+                // when the node is before the handle, calculate the height of the node
+                if (nodesEndPos[i] <= startPos) {
+                  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+                  const currentNodeElement = findDomRefAtPos(nodesStartPos[i], domAtPos);
+                  const maybeCurrentNode = expandedSlice.content.maybeChild(i);
+                  const currentNodeSpacing = maybeCurrentNode ? nodeMargins[maybeCurrentNode.type.name].top + nodeMargins[maybeCurrentNode.type.name].bottom : 0;
+                  domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
+                } else {
+                  // when the node is after the handle, calculate the top margin of the active node
+                  const maybeNextNode = expandedSlice.content.maybeChild(i);
+                  activeNodeMarginTop = maybeNextNode ? nodeMargins[maybeNextNode.type.name].top : 0;
+                  break;
+                }
+              }
+              return {
+                x: 0,
+                y: domElementsHeightBeforeHandle + activeNodeMarginTop
+              };
+            }
+          },
           render: ({
             container
           }) => {
@@ -230,49 +335,54 @@ export const DragHandle = ({
             if (!dom) {
               return;
             }
-            return dragPreview(container, dom, nodeType);
+            if (!isDraggingMultiLine) {
+              return dragPreview(container, {
+                dom,
+                nodeType
+              });
+            } else {
+              const domAtPos = view.domAtPos.bind(view);
+              const previewContent = [];
+              expandedSlice.content.descendants((node, pos, parent, index) => {
+                // Get the dom element of the node
+                //eslint-disable-next-line @atlaskit/editor/no-as-casting
+                const nodeDomElement = findDomRefAtPos(sliceFrom + pos, domAtPos);
+                const currentNodeSpacing = getNodeSpacingForPreview(node);
+                previewContent.push({
+                  dom: nodeDomElement,
+                  nodeType: node.type.name,
+                  nodeSpacing: currentNodeSpacing
+                });
+                return false; // Only iterate through the first level of nodes
+              });
+              return dragPreview(container, previewContent);
+            }
           },
           nativeSetDragImage
         });
       },
       onDragStart() {
-        var _api$core5;
+        var _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
           tr
         }) => {
-          var _api$blockControls2, _api$analytics3;
-          const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
-            exposure: true
-          });
+          var _tr$getMeta, _api$blockControls3, _api$analytics3;
           let nodeTypes, hasSelectedMultipleNodes;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
-          if (isMultiSelect) {
-            var _tr$getMeta;
-            const handlePos = getPos();
-            if (typeof handlePos !== 'number') {
-              return tr;
-            }
-            if (!tr.selection.empty && handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to) {
-              var _api$blockControls;
-              api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setMultiSelectPositions()({
-                tr
-              });
-            }
-            const multiSelectDnD = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
-            if (multiSelectDnD) {
-              const attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
-              nodeTypes = attributes.nodeTypes;
-              hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
-            } else {
-              nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
-              hasSelectedMultipleNodes = false;
-            }
+          const multiSelectDnD = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
+          if (multiSelectDnD) {
+            const attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
+            nodeTypes = attributes.nodeTypes;
+            hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+          } else {
+            nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
+            hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -295,7 +405,7 @@ export const DragHandle = ({
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
     let parentNodeType;
@@ -377,14 +487,11 @@ export const DragHandle = ({
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   useEffect(() => {
-    const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
-      exposure: true
-    });
     if (!isMultiSelect || typeof start !== 'number' || !selection) {
       return;
     }
-    setDragHandleSelected(isHandleInSelection(view.state, selection, start));
-  }, [start, selection, view.state]);
+    setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
+  }, [start, selection, view.state, isMultiSelect]);
   let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -410,7 +517,12 @@ export const DragHandle = ({
   }];
   let isParentNodeOfTypeLayout;
   if (!isTopLevelNode && (fg('platform_editor_advanced_layouts_accessibility') || handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused) && editorExperiment('nested-dnd', true)) {
-    isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
+    const pos = getPos();
+    if (typeof pos === 'number') {
+      var _$pos$parent;
+      const $pos = view.state.doc.resolve(pos);
+      isParentNodeOfTypeLayout = ($pos === null || $pos === void 0 ? void 0 : (_$pos$parent = $pos.parent) === null || _$pos$parent === void 0 ? void 0 : _$pos$parent.type.name) === 'layoutColumn';
+    }
     if (isParentNodeOfTypeLayout) {
       helpDescriptors = [...helpDescriptors, {
         description: formatMessage(blockControlsMessages.moveLeft),

package/dist/es2019/ui/drag-preview.js

@@ -15,14 +15,8 @@ const previewStyleOld = {
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
-export const dragPreview = (container, dom, nodeType) => {
+const getPreviewContainerDimensionsForSingle = (dom, nodeType) => {
   let nodeContainer = dom;
-  container.style.pointerEvents = 'none';
-  const parent = document.createElement('div');
-  // ProseMirror class is required to make sure the cloned dom is styled correctly
-  parent.classList.add('ProseMirror', 'block-ctrl-drag-preview');
-  const embedCard = dom.querySelector('.embedCardView-content-wrap');
-  let shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
   if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
     const iframeContainer = dom.querySelector('iframe');
     if (nodeType === 'embedCard') {
@@ -30,41 +24,96 @@ export const dragPreview = (container, dom, nodeType) => {
     } else if (nodeType === 'extension' && iframeContainer) {
       nodeContainer = iframeContainer;
     }
-    shouldBeGenericPreview = nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!iframeContainer;
   }
   const nodeContainerRect = nodeContainer.getBoundingClientRect();
-  container.style.width = `${nodeContainerRect.width}px`;
-  container.style.height = `${nodeContainerRect.height}px`;
+  return {
+    width: nodeContainerRect.width,
+    height: nodeContainerRect.height
+  };
+};
+const getPreviewContainerDimensions = dragPreviewContent => {
+  let maxWidth = 0;
+  let heightSum = 0;
+  for (let index = 0; index < dragPreviewContent.length; index++) {
+    const element = dragPreviewContent[index];
+    const {
+      width,
+      height
+    } = getPreviewContainerDimensionsForSingle(element.dom, element.nodeType);
+    if (width > maxWidth) {
+      maxWidth = width;
+    }
+    heightSum += height;
+  }
+  return {
+    width: maxWidth,
+    height: heightSum
+  };
+};
+const createGenericPreview = () => {
+  const generalPreview = document.createElement('div');
+  // ProseMirror class is required to make sure the cloned dom is styled correctly
+  generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
   const previewStyle = fg('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
+  generalPreview.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
+  generalPreview.style.borderRadius = previewStyle.borderRadius;
+  generalPreview.style.backgroundColor = previewStyle.backgroundColor;
+  generalPreview.style.height = '100%';
+  generalPreview.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+  return generalPreview;
+};
+const createContentPreviewElement = (dom, nodeType, nodeSpacing) => {
+  const contentPreviewOneElement = document.createElement('div');
+  contentPreviewOneElement.classList.add('ProseMirror', 'block-ctrl-drag-preview');
+  const resizer = dom.querySelector('.resizer-item');
+  const clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ?
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  resizer.cloneNode(true) :
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  dom.cloneNode(true);
+  clonedDom.style.marginLeft = '0';
+  clonedDom.style.marginTop = nodeSpacing ? `${nodeSpacing.top}` : '0';
+  clonedDom.style.marginRight = '0';
+  clonedDom.style.marginBottom = nodeSpacing ? `${nodeSpacing.bottom}` : '0';
+  clonedDom.style.boxShadow = 'none';
+  clonedDom.style.opacity = browser.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
+  contentPreviewOneElement.appendChild(clonedDom);
+  return contentPreviewOneElement;
+};
+const isGenericPreview = (dom, nodeType) => {
+  const embedCard = dom.querySelector('.embedCardView-content-wrap');
+  return fg('platform_editor_elements_drag_and_drop_ed_23189') ? nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe') : nodeType === 'embedCard' || !!embedCard || nodeType === 'extension';
+};
+const createPreviewForElement = (dom, nodeType, nodeSpacing) => {
+  const shouldBeGenericPreview = isGenericPreview(dom, nodeType);
   if (shouldBeGenericPreview) {
-    parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
-    parent.style.borderRadius = previewStyle.borderRadius;
-    parent.style.backgroundColor = previewStyle.backgroundColor;
-    parent.style.height = '100%';
-    parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+    return createGenericPreview();
   } else {
-    const resizer = dom.querySelector('.resizer-item');
-    const clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ?
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    resizer.cloneNode(true) :
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    dom.cloneNode(true);
-
-    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-    clonedDom.style.marginLeft = '0';
-    clonedDom.style.marginTop = '0';
-    clonedDom.style.marginRight = '0';
-    clonedDom.style.marginBottom = '0';
-    clonedDom.style.boxShadow = 'none';
-    clonedDom.style.opacity = browser.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
-    parent.appendChild(clonedDom);
+    return createContentPreviewElement(dom, nodeType, nodeSpacing);
+  }
+};
+export const dragPreview = (container, dragPreviewContent) => {
+  container.style.pointerEvents = 'none';
+  if (!Array.isArray(dragPreviewContent) && typeof dragPreviewContent === 'object') {
+    dragPreviewContent = [dragPreviewContent];
+  }
+  const {
+    width: maxWidth,
+    height: maxHeight
+  } = getPreviewContainerDimensions(dragPreviewContent);
+  container.style.width = `${maxWidth}px`;
+  container.style.height = `${maxHeight}px`;
+  const previewWrapperFragment = document.createDocumentFragment();
+  for (let index = 0; index < dragPreviewContent.length; index++) {
+    const element = dragPreviewContent[index];
+    const contentPreviewOneElement = createPreviewForElement(element.dom, element.nodeType, element.nodeSpacing);
+    previewWrapperFragment.appendChild(contentPreviewOneElement);
   }
-  container.appendChild(parent);
+  container.appendChild(previewWrapperFragment);
   const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   const scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
-
   // Add the scroll parent class to the container to ensure the cloned element is styled correctly
   container.className = scrollParentClassNames || '';
   container.classList.remove('fabric-editor-popup-scroll-parent');