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

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

@@ -18,6 +18,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';
@@ -28,9 +29,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';
 var iconWrapperStyles = xcss({
   display: 'flex',
@@ -101,6 +101,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 spacingBetweenNodesForPreview['default'];
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || spacingBetweenNodesForPreview['default'];
+  }
+  return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
+};
 export var DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4;
   var view = _ref.view,
@@ -126,6 +136,9 @@ export var DragHandle = function DragHandle(_ref) {
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isLayoutColumn = nodeType === 'layoutColumn';
+  var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
   useEffect(function () {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -170,7 +183,14 @@ export var 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 (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,
@@ -234,56 +254,140 @@ export var 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;
         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 = findDomRefAtPos(nodesStartPos[i], domAtPos);
+                  var maybeCurrentNode = expandedSlice.content.maybeChild(i);
+                  var 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
+                  var maybeNextNode = expandedSlice.content.maybeChild(i);
+                  activeNodeMarginTop = maybeNextNode ? 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 dragPreview(container, dom, nodeType);
+            if (!isDraggingMultiLine) {
+              return 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 = 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 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 = 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(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
-            if (multiSelectDnD) {
-              var 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;
-            }
+          var multiSelectDnD = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
+          if (multiSelectDnD) {
+            var 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 || (_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);
@@ -305,7 +409,7 @@ export var 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 = useCallback(function () {
     var parentNodeType;
@@ -390,14 +494,11 @@ export var DragHandle = function DragHandle(_ref) {
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   useEffect(function () {
-    var 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]);
   var helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -423,7 +524,12 @@ export var DragHandle = function DragHandle(_ref) {
   }];
   var 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';
+    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(_toConsumableArray(helpDescriptors), [{
         description: formatMessage(blockControlsMessages.moveLeft),

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

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { browser } from '@atlaskit/editor-common/browser';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, N20, N30 } from '@atlaskit/theme/colors';
@@ -15,14 +16,8 @@ var previewStyleOld = {
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
-export var 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 (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
     var iframeContainer = dom.querySelector('iframe');
     if (nodeType === 'embedCard') {
@@ -30,41 +25,94 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
     } 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 = 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.windows ? '1' : 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 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.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
-    parent.appendChild(clonedDom);
+    return createContentPreviewElement(dom, nodeType, nodeSpacing);
+  }
+};
+export var dragPreview = function dragPreview(container, dragPreviewContent) {
+  container.style.pointerEvents = 'none';
+  if (!Array.isArray(dragPreviewContent) && _typeof(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(parent);
+  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/types/blockControlsPluginType.d.ts

@@ -86,6 +86,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        toggleBlockMenu: (options?: {
+            closeMenu?: boolean;
+        }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };

package/dist/types/pm-plugins/utils/getSelection.d.ts

@@ -1,10 +1,10 @@
 import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => TextSelection | NodeSelection;
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**
@@ -14,6 +14,6 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
  * @param handlePos
  * @returns
  */
-export declare const isHandleInSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
+export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;

package/dist/types/pm-plugins/utils/validation.d.ts

@@ -17,4 +17,4 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
-export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, doc: PMNode, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
+export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/dist/types/ui/block-menu-items.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const getBlockMenuItems: (formatMessage: IntlShape['formatMessage']) => {
+    items: MenuItem[];
+}[];
+export declare const menuItemsCallback: {
+    moveUp: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    moveDown: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    copy: () => void;
+    delete: () => void;
+};

package/dist/types/ui/block-menu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type BlockMenuProps = {
+    editorView: EditorView | undefined;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+};
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/ui/consts.d.ts

@@ -29,6 +29,12 @@ export declare const dropTargetMarginMap: {
 export declare const spaceLookupMap: {
     [k: string]: string;
 };
+export declare const spacingBetweenNodesForPreview: {
+    [key: string]: {
+        top: string;
+        bottom: string;
+    };
+};
 export declare const nodeMargins: {
     [key: string]: {
         top: number;
@@ -38,3 +44,4 @@ export declare const nodeMargins: {
 export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
+export declare const BLOCK_MENU_WIDTH = 220;

package/dist/types/ui/drag-preview.d.ts

@@ -1 +1,9 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
+export type DragPreviewContent = {
+    dom: HTMLElement;
+    nodeType: string;
+    nodeSpacing?: {
+        top: string;
+        bottom: string;
+    };
+};
+export declare const dragPreview: (container: HTMLElement, dragPreviewContent: DragPreviewContent | DragPreviewContent[]) => () => HTMLElement;

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -86,6 +86,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        toggleBlockMenu: (options?: {
+            closeMenu?: boolean;
+        }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };

package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts

@@ -1,10 +1,10 @@
 import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => TextSelection | NodeSelection;
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**
@@ -14,6 +14,6 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
  * @param handlePos
  * @returns
  */
-export declare const isHandleInSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
+export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;

package/dist/types-ts4.5/pm-plugins/utils/validation.d.ts

@@ -17,4 +17,4 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
-export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, doc: PMNode, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
+export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/dist/types-ts4.5/ui/block-menu-items.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const getBlockMenuItems: (formatMessage: IntlShape['formatMessage']) => {
+    items: MenuItem[];
+}[];
+export declare const menuItemsCallback: {
+    moveUp: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    moveDown: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    copy: () => void;
+    delete: () => void;
+};

package/dist/types-ts4.5/ui/block-menu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type BlockMenuProps = {
+    editorView: EditorView | undefined;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+};
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -29,6 +29,12 @@ export declare const dropTargetMarginMap: {
 export declare const spaceLookupMap: {
     [k: string]: string;
 };
+export declare const spacingBetweenNodesForPreview: {
+    [key: string]: {
+        top: string;
+        bottom: string;
+    };
+};
 export declare const nodeMargins: {
     [key: string]: {
         top: number;
@@ -38,3 +44,4 @@ export declare const nodeMargins: {
 export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
+export declare const BLOCK_MENU_WIDTH = 220;

package/dist/types-ts4.5/ui/drag-preview.d.ts

@@ -1 +1,9 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
+export type DragPreviewContent = {
+    dom: HTMLElement;
+    nodeType: string;
+    nodeSpacing?: {
+        top: string;
+        bottom: string;
+    };
+};
+export declare const dragPreview: (container: HTMLElement, dragPreviewContent: DragPreviewContent | DragPreviewContent[]) => () => HTMLElement;