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

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

@@ -18,6 +18,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -28,7 +29,6 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
-var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
@@ -106,6 +106,16 @@ var handleIconDragStart = function handleIconDragStart(e) {
     (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 || _e$target$closest.dispatchEvent(dragEvent);
   }
 };
+var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
+  if (!node) {
+    return _consts.spacingBetweenNodesForPreview['default'];
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return _consts.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts.spacingBetweenNodesForPreview['default'];
+  }
+  return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
+};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4;
   var view = _ref.view,
@@ -131,6 +141,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isLayoutColumn = nodeType === 'layoutColumn';
+  var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
   (0, _react.useEffect)(function () {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -175,7 +188,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, nodeType]);
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      var startPos = getPos();
+      if (startPos === undefined) {
+        return false;
+      }
+      api === null || api === void 0 || api.core.actions.execute(api.blockControls.commands.toggleBlockMenu());
+    }
+  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === 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,
@@ -239,56 +259,140 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         };
       },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var _api$blockControls2;
         var nativeSetDragImage = _ref4.nativeSetDragImage;
+        if (isMultiSelect) {
+          var _api$core5;
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
+            var tr = _ref5.tr;
+            var 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 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
+                tr: tr
+              });
+            }
+            return tr;
+          });
+        }
+        var startPos = getPos();
+        var state = view.state;
+        var doc = state.doc,
+          selection = state.selection;
+        var _ref6 = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {},
+          multiSelectDnD = _ref6.multiSelectDnD;
+        var sliceFrom = selection.from;
+        var sliceTo = selection.to;
+        if (multiSelectDnD) {
+          var anchor = multiSelectDnD.anchor,
+            head = multiSelectDnD.head;
+          sliceFrom = Math.min(anchor, head);
+          sliceTo = Math.max(anchor, head);
+        }
+        var expandedSlice = doc.slice(sliceFrom, sliceTo);
+        var isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos <= sliceTo && expandedSlice.content.childCount > 1;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
-          render: function render(_ref5) {
-            var container = _ref5.container;
+          getOffset: function 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
+              var domAtPos = view.domAtPos.bind(view);
+              var domElementsHeightBeforeHandle = 0;
+              var nodesStartPos = [];
+              var nodesEndPos = [];
+              var activeNodeMarginTop = 0;
+              for (var 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
+                  var currentNodeElement = (0, _utils.findDomRefAtPos)(nodesStartPos[i], domAtPos);
+                  var maybeCurrentNode = expandedSlice.content.maybeChild(i);
+                  var currentNodeSpacing = maybeCurrentNode ? _consts.nodeMargins[maybeCurrentNode.type.name].top + _consts.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
+                  var maybeNextNode = expandedSlice.content.maybeChild(i);
+                  activeNodeMarginTop = maybeNextNode ? _consts.nodeMargins[maybeNextNode.type.name].top : 0;
+                  break;
+                }
+              }
+              return {
+                x: 0,
+                y: domElementsHeightBeforeHandle + activeNodeMarginTop
+              };
+            }
+          },
+          render: function render(_ref7) {
+            var container = _ref7.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
             }
-            return (0, _dragPreview.dragPreview)(container, dom, nodeType);
+            if (!isDraggingMultiLine) {
+              return (0, _dragPreview.dragPreview)(container, {
+                dom: dom,
+                nodeType: nodeType
+              });
+            } else {
+              var domAtPos = view.domAtPos.bind(view);
+              var previewContent = [];
+              expandedSlice.content.descendants(function (node, pos, parent, index) {
+                // Get the dom element of the node
+                //eslint-disable-next-line @atlaskit/editor/no-as-casting
+                var nodeDomElement = (0, _utils.findDomRefAtPos)(sliceFrom + pos, domAtPos);
+                var currentNodeSpacing = getNodeSpacingForPreview(node);
+                previewContent.push({
+                  dom: nodeDomElement,
+                  nodeType: node.type.name,
+                  nodeSpacing: currentNodeSpacing
+                });
+                return false; // Only iterate through the first level of nodes
+              });
+              return (0, _dragPreview.dragPreview)(container, previewContent);
+            }
           },
           nativeSetDragImage: nativeSetDragImage
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5;
+        var _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-          var _api$blockControls2, _api$analytics3;
-          var tr = _ref6.tr;
-          var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
-            exposure: true
-          });
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
+          var _tr$getMeta, _api$blockControls3, _api$analytics3;
+          var tr = _ref8.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          if (isMultiSelect) {
-            var _tr$getMeta;
-            var 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 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
-                tr: tr
-              });
-            }
-            var multiSelectDnD = (_tr$getMeta = tr.getMeta(_main.key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
-            if (multiSelectDnD) {
-              var attributes = (0, _analytics2.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;
-            }
+          var multiSelectDnD = (_tr$getMeta = tr.getMeta(_main.key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
+          if (multiSelectDnD) {
+            var attributes = (0, _analytics2.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 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -310,7 +414,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
     var parentNodeType;
@@ -395,14 +499,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   (0, _react.useEffect)(function () {
-    var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
-      exposure: true
-    });
     if (!isMultiSelect || typeof start !== 'number' || !selection) {
       return;
     }
-    setDragHandleSelected((0, _getSelection.isHandleInSelection)(view.state, selection, start));
-  }, [start, selection, view.state]);
+    setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
+  }, [start, selection, view.state, isMultiSelect]);
   var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
@@ -428,7 +529,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   }];
   var isParentNodeOfTypeLayout;
   if (!isTopLevelNode && ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') || handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused) && (0, _experiments.editorExperiment)('nested-dnd', true)) {
-    isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve((0, _getNestedNodePosition.getNestedNodePosition)(view.state)).node().type.name === 'layoutColumn';
+    var pos = getPos();
+    if (typeof pos === 'number') {
+      var _$pos$parent;
+      var $pos = view.state.doc.resolve(pos);
+      isParentNodeOfTypeLayout = ($pos === null || $pos === void 0 || (_$pos$parent = $pos.parent) === null || _$pos$parent === void 0 ? void 0 : _$pos$parent.type.name) === 'layoutColumn';
+    }
     if (isParentNodeOfTypeLayout) {
       helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
         description: formatMessage(_messages.blockControlsMessages.moveLeft),

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
@@ -21,14 +23,8 @@ var previewStyleOld = {
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
-var dragPreview = exports.dragPreview = function dragPreview(container, dom, nodeType) {
+var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
   var nodeContainer = dom;
-  container.style.pointerEvents = 'none';
-  var 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');
-  var embedCard = dom.querySelector('.embedCardView-content-wrap');
-  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
   if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189')) {
     var iframeContainer = dom.querySelector('iframe');
     if (nodeType === 'embedCard') {
@@ -36,41 +32,94 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
     } else if (nodeType === 'extension' && iframeContainer) {
       nodeContainer = iframeContainer;
     }
-    shouldBeGenericPreview = nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!iframeContainer;
   }
   var nodeContainerRect = nodeContainer.getBoundingClientRect();
-  container.style.width = "".concat(nodeContainerRect.width, "px");
-  container.style.height = "".concat(nodeContainerRect.height, "px");
+  return {
+    width: nodeContainerRect.width,
+    height: nodeContainerRect.height
+  };
+};
+var getPreviewContainerDimensions = function getPreviewContainerDimensions(dragPreviewContent) {
+  var maxWidth = 0;
+  var heightSum = 0;
+  for (var index = 0; index < dragPreviewContent.length; index++) {
+    var element = dragPreviewContent[index];
+    var _getPreviewContainerD = getPreviewContainerDimensionsForSingle(element.dom, element.nodeType),
+      width = _getPreviewContainerD.width,
+      height = _getPreviewContainerD.height;
+    if (width > maxWidth) {
+      maxWidth = width;
+    }
+    heightSum += height;
+  }
+  return {
+    width: maxWidth,
+    height: heightSum
+  };
+};
+var createGenericPreview = function createGenericPreview() {
+  var 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');
   var previewStyle = (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
+  generalPreview.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(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;
+};
+var createContentPreviewElement = function createContentPreviewElement(dom, nodeType, nodeSpacing) {
+  var contentPreviewOneElement = document.createElement('div');
+  contentPreviewOneElement.classList.add('ProseMirror', 'block-ctrl-drag-preview');
+  var resizer = dom.querySelector('.resizer-item');
+  var 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 ? "".concat(nodeSpacing.top) : '0';
+  clonedDom.style.marginRight = '0';
+  clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
+  clonedDom.style.boxShadow = 'none';
+  clonedDom.style.opacity = _browser.browser.windows ? '1' : (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
+  contentPreviewOneElement.appendChild(clonedDom);
+  return contentPreviewOneElement;
+};
+var isGenericPreview = function isGenericPreview(dom, nodeType) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  return (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe') : nodeType === 'embedCard' || !!embedCard || nodeType === 'extension';
+};
+var createPreviewForElement = function createPreviewForElement(dom, nodeType, nodeSpacing) {
+  var shouldBeGenericPreview = isGenericPreview(dom, nodeType);
   if (shouldBeGenericPreview) {
-    parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(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 {
-    var resizer = dom.querySelector('.resizer-item');
-    var 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.browser.windows ? '1' : (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
-    parent.appendChild(clonedDom);
+    return createContentPreviewElement(dom, nodeType, nodeSpacing);
   }
-  container.appendChild(parent);
+};
+var dragPreview = exports.dragPreview = function dragPreview(container, dragPreviewContent) {
+  container.style.pointerEvents = 'none';
+  if (!Array.isArray(dragPreviewContent) && (0, _typeof2.default)(dragPreviewContent) === 'object') {
+    dragPreviewContent = [dragPreviewContent];
+  }
+  var _getPreviewContainerD2 = getPreviewContainerDimensions(dragPreviewContent),
+    maxWidth = _getPreviewContainerD2.width,
+    maxHeight = _getPreviewContainerD2.height;
+  container.style.width = "".concat(maxWidth, "px");
+  container.style.height = "".concat(maxHeight, "px");
+  var previewWrapperFragment = document.createDocumentFragment();
+  for (var index = 0; index < dragPreviewContent.length; index++) {
+    var element = dragPreviewContent[index];
+    var contentPreviewOneElement = createPreviewForElement(element.dom, element.nodeType, element.nodeSpacing);
+    previewWrapperFragment.appendChild(contentPreviewOneElement);
+  }
+  container.appendChild(previewWrapperFragment);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var 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');

package/dist/es2019/blockControlsPlugin.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { createPlugin, key } from './pm-plugins/main';
+import BlockMenu from './ui/block-menu';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const blockControlsPlugin = ({
@@ -33,7 +35,25 @@ export const blockControlsPlugin = ({
           anchorName,
           nodeType,
           handleOptions
-        }
+        },
+        closeMenu: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
+      });
+      return tr;
+    },
+    toggleBlockMenu: options => ({
+      tr
+    }) => {
+      const currMeta = tr.getMeta(key);
+      if (options !== null && options !== void 0 && options.closeMenu) {
+        tr.setMeta(key, {
+          ...currMeta,
+          closeMenu: true
+        });
+        return tr;
+      }
+      tr.setMeta(key, {
+        ...currMeta,
+        toggleMenu: true
       });
       return tr;
     },
@@ -108,8 +128,19 @@ export const blockControlsPlugin = ({
       multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined
     };
   },
-  contentComponent() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragHandleMenu, {
+  contentComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
+  }) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(BlockMenu, {
+      editorView: editorView,
+      mountPoint: popupsMountPoint,
+      boundariesElement: popupsBoundariesElement,
+      scrollableElement: popupsScrollableElement,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragHandleMenu, {
       api: api
     }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
   }

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

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
 import uuid from 'uuid';
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -153,6 +154,16 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
     prevNodeStack.push(node);
   };
   const isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
+
+  // For deciding to show drop targets or not when multiple nodes are selected
+  const selection = newState.selection;
+  const {
+    $anchor: expandedAnchor,
+    $head: expandedHead
+  } = expandSelectionBounds(selection.$anchor, selection.$head);
+  const selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  const selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
@@ -187,10 +198,6 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
 
       // When multi select is on, validate all the nodes in the selection instead of just the handle node
       if (isMultiSelect) {
-        const selection = newState.selection;
-        const selectionFrom = selection.$from.pos;
-        const selectionTo = selection.$to.pos;
-        const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
         const selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
         const selectionSliceChildCount = selectionSlice.content.childCount;
         let canDropSingleNode = true;
@@ -198,7 +205,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
 
         // when there is only one node in the slice, use the same logic as when multi select is not on
         if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, parent, index, $pos);
         } else {
           canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
         }

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

@@ -281,11 +281,12 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     }
   }
   const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
+  const isMenuOpenNew = editorExperiment('platform_editor_controls', 'variant1') ? meta !== null && meta !== void 0 && meta.closeMenu ? false : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen;
   return {
     decorations,
     activeNode: newActiveNode,
     isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
-    isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
+    isMenuOpen: isMenuOpenNew,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
     editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,

package/dist/es2019/pm-plugins/utils/getSelection.js

@@ -96,7 +96,7 @@ export const setCursorPositionAtMovedNode = (tr, start) => {
  * @param handlePos
  * @returns
  */
-export const isHandleInSelection = (state, selection, handlePos) => {
+export const isHandleCorrelatedToSelection = (state, selection, handlePos) => {
   if (selection.empty) {
     return false;
   }

package/dist/es2019/pm-plugins/utils/validation.js

@@ -114,8 +114,9 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
-export function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+export function canMoveSliceToIndex(slice, sliceFromPos, destParent, indexIntoParent, $destNodePos, destNode) {
   let canMoveNodes = true;
+  const doc = $destNodePos.doc;
   const nodesPos = [];
   for (let i = 0; i < slice.content.childCount; i++) {
     const node = slice.content.maybeChild(i);

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

@@ -0,0 +1,92 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { copy, deleteKey, dragToMoveDown, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import commonMessages, { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import CopyIcon from '@atlaskit/icon/core/copy';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import { moveNodeViaShortcut } from '../editor-commands/move-node';
+import { DIRECTION } from '../pm-plugins/utils/consts';
+export const getBlockMenuItems = formatMessage => {
+  return [{
+    items: [{
+      content: formatMessage(blockControlsMessages.moveUp),
+      elemBefore: jsx(ArrowUpIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveUp'
+      },
+      key: 'move_up',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(dragToMoveUp))
+    }, {
+      content: formatMessage(blockControlsMessages.moveDown),
+      elemBefore: jsx(ArrowDownIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveDown'
+      },
+      key: 'move_down',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(dragToMoveDown))
+    }]
+  }, {
+    items: [{
+      content: formatMessage(commonMessages.copyToClipboard),
+      value: {
+        name: 'copy'
+      },
+      elemBefore: jsx(CopyIcon, {
+        label: ""
+      }),
+      key: 'copy',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(copy))
+    }, {
+      content: formatMessage(blockControlsMessages.delete),
+      value: {
+        name: 'delete'
+      },
+      elemBefore: jsx(DeleteIcon, {
+        label: ""
+      }),
+      key: 'delete',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(deleteKey))
+    }]
+  }];
+};
+export const menuItemsCallback = {
+  moveUp: (api, formatMessage) => {
+    return moveNodeViaShortcut(api, DIRECTION.UP, formatMessage);
+  },
+  moveDown: (api, formatMessage) => {
+    return moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage);
+  },
+  copy: () => {
+    // TODO: implement copy
+    // console.log('copy');
+  },
+  delete: () => {
+    // TODO: implement delete
+    // console.log('delete');
+  }
+};