@atlaskit/editor-plugin-block-menu 15.0.10 → 15.0.12

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

@@ -249,8 +249,9 @@ const BlockMenu = ({
     if (!isMenuOpen) {
       return;
     }
+    onDropdownOpenChanged(true);
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
-  }, [isMenuOpen]);
+  }, [isMenuOpen, onDropdownOpenChanged]);
   const hasFocus = (_ref2 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
@@ -339,6 +340,24 @@ const BlockMenu = ({
     stick: true
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
+    onPositionCalculated: fg('platform_editor_blocks_patch_8') ? position => {
+      if (position.left === undefined) {
+        // Already placed on the gutter side (using `right`) - nothing to correct.
+        return position;
+      }
+      // Popup prefers whichever side has more room, which flips the menu onto the
+      // content side when the gutter is too narrow to fit it. Force it back onto the
+      // gutter side instead - it can still overlap the content once there, but it
+      // must not start on top of the node. `position.left` is shifted by the same
+      // distance regardless of the offset parent/scroll it was calculated against,
+      // since that just moves both by the same amount.
+      return {
+        ...position,
+        left: position.left - DEFAULT_MENU_WIDTH - DRAG_HANDLE_WIDTH - 2 * DRAG_HANDLE_OFFSET_PADDING
+      };
+    } : undefined
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
     focusTrap: openedViaKeyboard ?
     // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item

package/dist/es2019/ui/move-down.js

@@ -8,9 +8,10 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
-import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
+import { getBlockMenuPositionSnapshot, scheduleBlockMenuPositionFix } from './utils/fixBlockMenuPositionAndScroll';
 const MoveDownDropdownItemContent = ({
   api
 }) => {
@@ -20,7 +21,10 @@ const MoveDownDropdownItemContent = ({
   const {
     moveUpRef,
     moveDownRef,
-    getFirstSelectedDomNode
+    getFirstSelectedDomNode,
+    getMovedBlockDomNode,
+    getSelectedBlockDomNode,
+    anchorMetricsRef
   } = useBlockMenu();
   const {
     canMoveDown
@@ -41,6 +45,7 @@ const MoveDownDropdownItemContent = ({
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
   const handleClick = () => {
+    const positionSnapshot = fg('platform_editor_blocks_patch_8') ? getBlockMenuPositionSnapshot(getSelectedBlockDomNode(), anchorMetricsRef.current) : undefined;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
@@ -59,10 +64,7 @@ const MoveDownDropdownItemContent = ({
       });
       return tr;
     });
-    requestAnimationFrame(() => {
-      const newFirstNode = getFirstSelectedDomNode();
-      fixBlockMenuPositionAndScroll(newFirstNode);
-    });
+    scheduleBlockMenuPositionFix(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveDownRef,

package/dist/es2019/ui/move-up.js

@@ -8,9 +8,10 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
-import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
+import { getBlockMenuPositionSnapshot, scheduleBlockMenuPositionFix } from './utils/fixBlockMenuPositionAndScroll';
 const MoveUpDropdownItemContent = ({
   api
 }) => {
@@ -20,7 +21,10 @@ const MoveUpDropdownItemContent = ({
   const {
     moveUpRef,
     moveDownRef,
-    getFirstSelectedDomNode
+    getFirstSelectedDomNode,
+    getMovedBlockDomNode,
+    getSelectedBlockDomNode,
+    anchorMetricsRef
   } = useBlockMenu();
   const {
     canMoveUp
@@ -39,6 +43,7 @@ const MoveUpDropdownItemContent = ({
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
   const handleClick = () => {
+    const positionSnapshot = fg('platform_editor_blocks_patch_8') ? getBlockMenuPositionSnapshot(getSelectedBlockDomNode(), anchorMetricsRef.current) : undefined;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
@@ -57,10 +62,7 @@ const MoveUpDropdownItemContent = ({
       });
       return tr;
     });
-    requestAnimationFrame(() => {
-      const newFirstNode = getFirstSelectedDomNode();
-      fixBlockMenuPositionAndScroll(newFirstNode);
-    });
+    scheduleBlockMenuPositionFix(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveUpRef,

package/dist/es2019/ui/utils/fixBlockMenuPositionAndScroll.js

@@ -1,6 +1,156 @@
 import { getDocument } from '@atlaskit/browser-apis';
 import { BLOCK_MENU_TEST_ID } from '@atlaskit/editor-common/block-menu';
-export const fixBlockMenuPositionAndScroll = firstSelectedNode => {
+import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+const POPUP_WRAPPER_TEST_ID = 'popup-wrapper';
+const EDITOR_CONTENT_CONTAINER_SELECTOR = '[data-testid="editor-content-container"]';
+/**
+ * Breathing room left between the revealed block and the fold it just crossed, so the block does
+ * not end up flush against the edge of the viewport.
+ */
+const REVEAL_MARGIN = 8;
+
+/**
+ * Where the drag handle and the popup sit relative to their block. The drag handle is removed from
+ * the DOM as soon as the pointer moves onto the block menu, so this has to be measured while the
+ * menu opens rather than when a menu item is clicked.
+ */
+
+/**
+ * Minimum scroll needed to bring the drag handle back inside the viewport.
+ * Zero means the handle is already fully visible.
+ */
+export const getScrollDistanceToRevealAnchor = (dragHandleTop, dragHandleHeight, viewport) => {
+  if (dragHandleTop < viewport.top) {
+    return dragHandleTop - viewport.top;
+  }
+  const dragHandleBottom = dragHandleTop + dragHandleHeight;
+  if (dragHandleBottom > viewport.bottom) {
+    return dragHandleBottom - viewport.bottom;
+  }
+  return 0;
+};
+
+/**
+ * The editor content container is not always the element that actually scrolls - depending on the
+ * product it can be an ancestor, or the document itself. Pick the closest one that really scrolls.
+ */
+const getScrollContainer = (doc, selectedBlock) => {
+  const editorContentContainer = doc.querySelector(EDITOR_CONTENT_CONTAINER_SELECTOR);
+  if (editorContentContainer && editorContentContainer.scrollHeight > editorContentContainer.clientHeight) {
+    return editorContentContainer;
+  }
+  let ancestor = selectedBlock.parentElement;
+  while (ancestor) {
+    var _doc$defaultView;
+    const overflowY = (_doc$defaultView = doc.defaultView) === null || _doc$defaultView === void 0 ? void 0 : _doc$defaultView.getComputedStyle(ancestor).overflowY;
+    if ((overflowY === 'auto' || overflowY === 'scroll') && ancestor.scrollHeight > ancestor.clientHeight) {
+      return ancestor;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return doc.scrollingElement;
+};
+const getScrollViewport = (doc, scrollContainer) => {
+  if (scrollContainer === doc.scrollingElement) {
+    var _doc$defaultView$inne, _doc$defaultView2;
+    return {
+      bottom: (_doc$defaultView$inne = (_doc$defaultView2 = doc.defaultView) === null || _doc$defaultView2 === void 0 ? void 0 : _doc$defaultView2.innerHeight) !== null && _doc$defaultView$inne !== void 0 ? _doc$defaultView$inne : 0,
+      top: 0
+    };
+  }
+  const {
+    top,
+    bottom
+  } = scrollContainer.getBoundingClientRect();
+  return {
+    bottom,
+    top
+  };
+};
+
+/**
+ * Float based node views - a media group is one - collapse their top level wrapper to zero height,
+ * so the visual bottom of the block has to come from its children.
+ */
+const getBlockBottom = block => {
+  const rect = block.getBoundingClientRect();
+  if (rect.height > 0) {
+    return rect.bottom;
+  }
+  return Array.from(block.children).reduce((bottom, child) => Math.max(bottom, child.getBoundingClientRect().bottom), rect.bottom);
+};
+const setPopupTop = (blockMenuEl, targetTop) => {
+  var _blockMenuEl$closest;
+  const popupWrapper = (_blockMenuEl$closest = blockMenuEl.closest(`[data-testid="${POPUP_WRAPPER_TEST_ID}"]`)) !== null && _blockMenuEl$closest !== void 0 ? _blockMenuEl$closest : blockMenuEl.parentElement;
+  if (!(popupWrapper instanceof HTMLElement)) {
+    return;
+  }
+  const distance = blockMenuEl.getBoundingClientRect().top - targetTop;
+  const hasTopProperty = popupWrapper.style.top !== '';
+  const hasBottomProperty = popupWrapper.style.bottom !== '';
+  if (hasBottomProperty && !hasTopProperty) {
+    popupWrapper.style.bottom = `${parseFloat(popupWrapper.style.bottom || '0') + distance}px`;
+  } else {
+    popupWrapper.style.top = `${parseFloat(popupWrapper.style.top || '0') - distance}px`;
+  }
+};
+
+/**
+ * Measured while the menu opens, when the popup is still aligned to the drag handle. Moves that
+ * keep the handle visible deliberately leave the popup where it is, so this alignment - not the
+ * drifted one - is what the popup is restored to when a fold is crossed.
+ */
+export const getBlockMenuAnchorMetrics = selectedBlock => {
+  var _doc$querySelector;
+  const doc = getDocument();
+  const blockMenuEl = doc === null || doc === void 0 ? void 0 : doc.querySelector(`[data-testid="${BLOCK_MENU_TEST_ID}"]`);
+  if (!doc || !selectedBlock || !blockMenuEl) {
+    return;
+  }
+  const blockMenuRect = blockMenuEl.getBoundingClientRect();
+  const dragHandleRect = (_doc$querySelector = doc.querySelector(DRAG_HANDLE_SELECTOR)) === null || _doc$querySelector === void 0 ? void 0 : _doc$querySelector.getBoundingClientRect();
+  if (blockMenuRect.height === 0 || !(dragHandleRect !== null && dragHandleRect !== void 0 && dragHandleRect.height)) {
+    return;
+  }
+  const blockTop = selectedBlock.getBoundingClientRect().top;
+  return {
+    blockHeight: getBlockBottom(selectedBlock) - blockTop,
+    dragHandleHeight: dragHandleRect.height,
+    dragHandleOffsetFromBlock: dragHandleRect.top - blockTop,
+    popupOffsetFromBlock: blockMenuRect.top - blockTop,
+    popupHeight: blockMenuRect.height
+  };
+};
+
+/**
+ * Captured before the move transaction, so the popup can be realigned to the block after it.
+ */
+export const getBlockMenuPositionSnapshot = (selectedBlock, anchorMetrics) => {
+  const doc = getDocument();
+  if (!doc || !selectedBlock) {
+    return;
+  }
+  const scrollContainer = getScrollContainer(doc, selectedBlock);
+  const metrics = anchorMetrics !== null && anchorMetrics !== void 0 ? anchorMetrics : getBlockMenuAnchorMetrics(selectedBlock);
+  if (!scrollContainer || !metrics) {
+    return;
+  }
+  return {
+    ...metrics,
+    scrollContainer,
+    scrollTop: scrollContainer.scrollTop
+  };
+};
+
+/**
+ * Called after a move up/down transaction.
+ *
+ * With a `positionSnapshot` the popup is only sticky when it has to be: the editor stays put while
+ * the moved node's drag handle is still visible, and scrolls the minimum needed to reveal the
+ * handle otherwise - realigning the popup to the revealed handle.
+ */
+export const fixBlockMenuPositionAndScroll = (selectedNode, positionSnapshot) => {
   const doc = getDocument();
   if (!doc) {
     return;
@@ -9,13 +159,54 @@ export const fixBlockMenuPositionAndScroll = firstSelectedNode => {
   if (!(blockMenuEl !== null && blockMenuEl !== void 0 && blockMenuEl.parentElement)) {
     return;
   }
-  const scrollableContainer = doc.querySelector('[data-testid="editor-content-container"]');
-  if (!firstSelectedNode || !scrollableContainer) {
+  if (positionSnapshot) {
+    if (!selectedNode) {
+      return;
+    }
+    // Reuse the container resolved when the snapshot was taken - re-resolving it independently
+    // here could pick a different element (e.g. for a node near an overflow boundary), applying
+    // positionSnapshot.scrollTop to the wrong container.
+    const scrollContainer = positionSnapshot.scrollContainer;
+
+    // The move transaction scrolls the new selection into view - undo that, only a drag handle
+    // leaving the viewport is allowed to move the editor.
+    scrollContainer.scrollTo({
+      behavior: 'instant',
+      top: positionSnapshot.scrollTop
+    });
+    const viewport = getScrollViewport(doc, scrollContainer);
+    const anchorTop = selectedNode.getBoundingClientRect().top + positionSnapshot.dragHandleOffsetFromBlock;
+
+    // Whether to scroll at all is decided by the drag handle alone - a block taller than the
+    // viewport is expected to be cut off while its handle stays usable.
+    if (getScrollDistanceToRevealAnchor(anchorTop, positionSnapshot.dragHandleHeight, viewport) === 0) {
+      return;
+    }
+
+    // Once we do scroll, reveal the block and the popup, not just the handle sized sliver of it.
+    // popupOffsetFromBlock is relative to the block - re-express it relative to the handle (the
+    // anchor everything else here is measured from) to build one span covering all three. The
+    // handle itself (0 to dragHandleHeight) always stays inside that span, so its visibility is
+    // never sacrificed to make room for the block or the popup.
+    const popupTopFromHandle = positionSnapshot.popupOffsetFromBlock - positionSnapshot.dragHandleOffsetFromBlock;
+    const revealTop = Math.min(0, popupTopFromHandle);
+    const revealBottom = Math.max(positionSnapshot.dragHandleHeight, positionSnapshot.blockHeight - positionSnapshot.dragHandleOffsetFromBlock, popupTopFromHandle + positionSnapshot.popupHeight);
+    const revealHeight = Math.min(revealBottom - revealTop, Math.max(viewport.bottom - viewport.top - 2 * REVEAL_MARGIN, 0));
+    const scrollDistance = getScrollDistanceToRevealAnchor(anchorTop + revealTop - REVEAL_MARGIN, revealHeight + 2 * REVEAL_MARGIN, viewport);
+    scrollContainer.scrollBy({
+      behavior: 'instant',
+      top: scrollDistance
+    });
+    setPopupTop(blockMenuEl, selectedNode.getBoundingClientRect().top + positionSnapshot.popupOffsetFromBlock);
+    return;
+  }
+  const scrollableContainer = doc.querySelector(EDITOR_CONTENT_CONTAINER_SELECTOR);
+  if (!selectedNode || !scrollableContainer) {
     return;
   }
   const parentElement = blockMenuEl.parentElement;
   const currentTop = parentElement.getBoundingClientRect().top;
-  const distance = firstSelectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
+  const distance = selectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
   scrollableContainer.scrollBy({
     behavior: 'instant',
     top: distance
@@ -31,4 +222,22 @@ export const fixBlockMenuPositionAndScroll = firstSelectedNode => {
     const currentTopValue = parseFloat(parentElement.style.top || '0');
     parentElement.style.top = `${currentTopValue + topDifference}px`;
   }
+};
+
+/**
+ * Shared by move-up.tsx and move-down.tsx: schedules the post-move fix for the frame after
+ * ProseMirror has re-rendered.
+ *
+ * Falls back to the pre-PR always-scroll path (matching gate-off, via `getFirstSelectedDomNode`)
+ * whenever a `positionSnapshot` wasn't captured - e.g. a media/file thumbnail reporting zero height
+ * for a frame when the menu opened - rather than silently doing nothing.
+ */
+export const scheduleBlockMenuPositionFix = (positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode) => {
+  requestAnimationFrame(() => {
+    if (fg('platform_editor_blocks_patch_8') && positionSnapshot) {
+      fixBlockMenuPositionAndScroll(getMovedBlockDomNode(), positionSnapshot);
+      return;
+    }
+    fixBlockMenuPositionAndScroll(getFirstSelectedDomNode());
+  });
 };

package/dist/esm/ui/block-menu-provider.js

@@ -1,10 +1,21 @@
 import React, { useCallback, createContext, useContext, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getBlockMenuAnchorMetrics } from './utils/fixBlockMenuPositionAndScroll';
 var BlockMenuContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   moveDownRef: /*#__PURE__*/React.createRef(),
   moveUpRef: /*#__PURE__*/React.createRef(),
   getFirstSelectedDomNode: function getFirstSelectedDomNode() {
     return undefined;
+  },
+  getMovedBlockDomNode: function getMovedBlockDomNode() {
+    return undefined;
+  },
+  getSelectedBlockDomNode: function getSelectedBlockDomNode() {
+    return undefined;
+  },
+  anchorMetricsRef: {
+    current: undefined
   }
 });
 export var useBlockMenu = function useBlockMenu() {
@@ -20,6 +31,7 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
     editorView = _ref.editorView;
   var moveUpRef = useRef(null);
   var moveDownRef = useRef(null);
+  var anchorMetricsRef = useRef(undefined);
   var getFirstSelectedDomNode = useCallback(function () {
     var _api$selection;
     var from = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState.currentState()) === null || _api$selection === void 0 || (_api$selection = _api$selection.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.from;
@@ -30,25 +42,74 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
       }
     }
   }, [api, editorView]);
+  var getTopLevelBlockDomNodeAt = useCallback(function (from) {
+    if (!editorView) {
+      return;
+    }
+    var nodeDOM = editorView.nodeDOM(from);
+    var domAtPos = nodeDOM instanceof Element ? nodeDOM : editorView.domAtPos(from).node;
+    var element = domAtPos instanceof Element ? domAtPos : domAtPos.parentElement;
+    if (!element || !editorView.dom.contains(element)) {
+      return;
+    }
+    var block = element;
+    while (block.parentElement && block.parentElement !== editorView.dom) {
+      block = block.parentElement;
+    }
+    return block;
+  }, [editorView]);
+  var getSelectedBlockDomNode = useCallback(function () {
+    var _api$blockControls, _ref2, _blockControlsState$a, _blockControlsState$a2, _blockControlsState$m, _blockControlsState$p;
+    var blockControlsState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
+    // The editor selection is not necessarily in the block the menu was opened for.
+    var from = (_ref2 = (_blockControlsState$a = blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a2 = blockControlsState.activeNode) === null || _blockControlsState$a2 === void 0 ? void 0 : _blockControlsState$a2.pos) !== null && _blockControlsState$a !== void 0 ? _blockControlsState$a : blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$m = blockControlsState.menuTriggerByNode) === null || _blockControlsState$m === void 0 ? void 0 : _blockControlsState$m.pos) !== null && _ref2 !== void 0 ? _ref2 : blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$p = blockControlsState.preservedSelection) === null || _blockControlsState$p === void 0 ? void 0 : _blockControlsState$p.from;
+    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
+  }, [api, getTopLevelBlockDomNodeAt]);
+  var getMovedBlockDomNode = useCallback(function () {
+    // A move transaction maps its preserved selection onto the node it just moved, so this is
+    // where that node ended up - unlike the block menu state, which keeps stale positions.
+    var from = editorView === null || editorView === void 0 ? void 0 : editorView.state.selection.from;
+    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
+  }, [editorView, getTopLevelBlockDomNodeAt]);
   var onDropdownOpenChanged = useCallback(function (isOpen) {
-    if (!isOpen) {
-      // On Dropdown closed, return focus to editor
-      setTimeout(function () {
-        return requestAnimationFrame(function () {
-          api === null || api === void 0 || api.core.actions.focus({
-            scrollIntoView: false
+    anchorMetricsRef.current = undefined;
+    if (isOpen) {
+      if (fg('platform_editor_blocks_patch_8')) {
+        // The popup lays itself out next to the drag handle over the next frame or two.
+        var remainingFrames = 3;
+        var _captureAnchorMetrics = function captureAnchorMetrics() {
+          requestAnimationFrame(function () {
+            anchorMetricsRef.current = getBlockMenuAnchorMetrics(getSelectedBlockDomNode());
+            remainingFrames -= 1;
+            if (!anchorMetricsRef.current && remainingFrames > 0) {
+              _captureAnchorMetrics();
+            }
           });
-        });
-      }, 1);
+        };
+        _captureAnchorMetrics();
+      }
+      return;
     }
-  }, [api]);
+
+    // On Dropdown closed, return focus to editor
+    setTimeout(function () {
+      return requestAnimationFrame(function () {
+        api === null || api === void 0 || api.core.actions.focus({
+          scrollIntoView: false
+        });
+      });
+    }, 1);
+  }, [api, getSelectedBlockDomNode]);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     // eslint-disable-next-line @atlassian/perf-linting/no-inline-context-value, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
       moveDownRef: moveDownRef,
       moveUpRef: moveUpRef,
-      getFirstSelectedDomNode: getFirstSelectedDomNode
+      getFirstSelectedDomNode: getFirstSelectedDomNode,
+      getMovedBlockDomNode: getMovedBlockDomNode,
+      getSelectedBlockDomNode: getSelectedBlockDomNode,
+      anchorMetricsRef: anchorMetricsRef
     }
   }, children);
 };

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

@@ -1,7 +1,10 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { cx } from '@atlaskit/css';
@@ -257,8 +260,9 @@ var BlockMenu = function BlockMenu(_ref5) {
     if (!isMenuOpen) {
       return;
     }
+    onDropdownOpenChanged(true);
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
-  }, [isMenuOpen]);
+  }, [isMenuOpen, onDropdownOpenChanged]);
   var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
@@ -347,6 +351,23 @@ var BlockMenu = function BlockMenu(_ref5) {
     stick: true
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
+    onPositionCalculated: fg('platform_editor_blocks_patch_8') ? function (position) {
+      if (position.left === undefined) {
+        // Already placed on the gutter side (using `right`) - nothing to correct.
+        return position;
+      }
+      // Popup prefers whichever side has more room, which flips the menu onto the
+      // content side when the gutter is too narrow to fit it. Force it back onto the
+      // gutter side instead - it can still overlap the content once there, but it
+      // must not start on top of the node. `position.left` is shifted by the same
+      // distance regardless of the offset parent/scroll it was calculated against,
+      // since that just moves both by the same amount.
+      return _objectSpread(_objectSpread({}, position), {}, {
+        left: position.left - DEFAULT_MENU_WIDTH - DRAG_HANDLE_WIDTH - 2 * DRAG_HANDLE_OFFSET_PADDING
+      });
+    } : undefined
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
     focusTrap: openedViaKeyboard ?
     // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item

package/dist/esm/ui/move-down.js

@@ -8,9 +8,10 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
-import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
+import { getBlockMenuPositionSnapshot, scheduleBlockMenuPositionFix } from './utils/fixBlockMenuPositionAndScroll';
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -18,7 +19,10 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var _useBlockMenu = useBlockMenu(),
     moveUpRef = _useBlockMenu.moveUpRef,
     moveDownRef = _useBlockMenu.moveDownRef,
-    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode,
+    getMovedBlockDomNode = _useBlockMenu.getMovedBlockDomNode,
+    getSelectedBlockDomNode = _useBlockMenu.getSelectedBlockDomNode,
+    anchorMetricsRef = _useBlockMenu.anchorMetricsRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -36,6 +40,7 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
   var handleClick = function handleClick() {
+    var positionSnapshot = fg('platform_editor_blocks_patch_8') ? getBlockMenuPositionSnapshot(getSelectedBlockDomNode(), anchorMetricsRef.current) : undefined;
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
@@ -53,10 +58,7 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       });
       return tr;
     });
-    requestAnimationFrame(function () {
-      var newFirstNode = getFirstSelectedDomNode();
-      fixBlockMenuPositionAndScroll(newFirstNode);
-    });
+    scheduleBlockMenuPositionFix(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveDownRef,

package/dist/esm/ui/move-up.js

@@ -8,9 +8,10 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
-import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
+import { getBlockMenuPositionSnapshot, scheduleBlockMenuPositionFix } from './utils/fixBlockMenuPositionAndScroll';
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -18,7 +19,10 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var _useBlockMenu = useBlockMenu(),
     moveUpRef = _useBlockMenu.moveUpRef,
     moveDownRef = _useBlockMenu.moveDownRef,
-    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode,
+    getMovedBlockDomNode = _useBlockMenu.getMovedBlockDomNode,
+    getSelectedBlockDomNode = _useBlockMenu.getSelectedBlockDomNode,
+    anchorMetricsRef = _useBlockMenu.anchorMetricsRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -34,6 +38,7 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
   var handleClick = function handleClick() {
+    var positionSnapshot = fg('platform_editor_blocks_patch_8') ? getBlockMenuPositionSnapshot(getSelectedBlockDomNode(), anchorMetricsRef.current) : undefined;
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
@@ -51,10 +56,7 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       });
       return tr;
     });
-    requestAnimationFrame(function () {
-      var newFirstNode = getFirstSelectedDomNode();
-      fixBlockMenuPositionAndScroll(newFirstNode);
-    });
+    scheduleBlockMenuPositionFix(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveUpRef,