@atlaskit/editor-plugin-block-menu 15.0.11 → 15.0.13

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 15.0.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.0.12
+
+### Patch Changes
+
+- [`91559dfb45b53`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/91559dfb45b53) -
+  Behind platform_editor_blocks_patch_8, make the block menu popup conditionally sticky after Move
+  up / Move down: the editor no longer scrolls while the moved block's drag handle stays visible,
+  and scrolls by the minimum needed to bring the drag handle, block and popup back into view -
+  realigning the popup to it - when the handle crosses a fold. The scroll distance accounts for the
+  popup's own height, so a popup taller than the moved block is no longer cut off at the fold.
+
 ## 15.0.11
 
 ### Patch Changes

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBlockMenu = exports.BlockMenuProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _fixBlockMenuPositionAndScroll = require("./utils/fixBlockMenuPositionAndScroll");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
@@ -13,6 +15,15 @@ var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
   moveUpRef: /*#__PURE__*/_react.default.createRef(),
   getFirstSelectedDomNode: function getFirstSelectedDomNode() {
     return undefined;
+  },
+  getMovedBlockDomNode: function getMovedBlockDomNode() {
+    return undefined;
+  },
+  getSelectedBlockDomNode: function getSelectedBlockDomNode() {
+    return undefined;
+  },
+  anchorMetricsRef: {
+    current: undefined
   }
 });
 var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
@@ -28,6 +39,7 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
     editorView = _ref.editorView;
   var moveUpRef = (0, _react.useRef)(null);
   var moveDownRef = (0, _react.useRef)(null);
+  var anchorMetricsRef = (0, _react.useRef)(undefined);
   var getFirstSelectedDomNode = (0, _react.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;
@@ -38,25 +50,74 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
       }
     }
   }, [api, editorView]);
+  var getTopLevelBlockDomNodeAt = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 ((0, _fg.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 = (0, _fixBlockMenuPositionAndScroll.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.default.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/cjs/ui/block-menu.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./block-menu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
@@ -33,6 +34,8 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _blockMenuProvider = require("./block-menu-provider");
 var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   maxWidthStyles: "_p12fnklw",
@@ -266,8 +269,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 && (
@@ -356,6 +360,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: (0, _fg.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 - _styles.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: [_styles.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/cjs/ui/move-down.js

@@ -16,6 +16,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
 var _fixBlockMenuPositionAndScroll = require("./utils/fixBlockMenuPositionAndScroll");
@@ -27,7 +28,10 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     moveUpRef = _useBlockMenu.moveUpRef,
     moveDownRef = _useBlockMenu.moveDownRef,
-    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode,
+    getMovedBlockDomNode = _useBlockMenu.getMovedBlockDomNode,
+    getSelectedBlockDomNode = _useBlockMenu.getSelectedBlockDomNode,
+    anchorMetricsRef = _useBlockMenu.anchorMetricsRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -45,6 +49,7 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
   var handleClick = function handleClick() {
+    var positionSnapshot = (0, _fg.fg)('platform_editor_blocks_patch_8') ? (0, _fixBlockMenuPositionAndScroll.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;
@@ -62,10 +67,7 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       });
       return tr;
     });
-    requestAnimationFrame(function () {
-      var newFirstNode = getFirstSelectedDomNode();
-      (0, _fixBlockMenuPositionAndScroll.fixBlockMenuPositionAndScroll)(newFirstNode);
-    });
+    (0, _fixBlockMenuPositionAndScroll.scheduleBlockMenuPositionFix)(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     triggerRef: moveDownRef,

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

@@ -16,6 +16,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
 var _fixBlockMenuPositionAndScroll = require("./utils/fixBlockMenuPositionAndScroll");
@@ -27,7 +28,10 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     moveUpRef = _useBlockMenu.moveUpRef,
     moveDownRef = _useBlockMenu.moveDownRef,
-    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode,
+    getMovedBlockDomNode = _useBlockMenu.getMovedBlockDomNode,
+    getSelectedBlockDomNode = _useBlockMenu.getSelectedBlockDomNode,
+    anchorMetricsRef = _useBlockMenu.anchorMetricsRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -43,6 +47,7 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
   var handleClick = function handleClick() {
+    var positionSnapshot = (0, _fg.fg)('platform_editor_blocks_patch_8') ? (0, _fixBlockMenuPositionAndScroll.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;
@@ -60,10 +65,7 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       });
       return tr;
     });
-    requestAnimationFrame(function () {
-      var newFirstNode = getFirstSelectedDomNode();
-      (0, _fixBlockMenuPositionAndScroll.fixBlockMenuPositionAndScroll)(newFirstNode);
-    });
+    (0, _fixBlockMenuPositionAndScroll.scheduleBlockMenuPositionFix)(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode);
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     triggerRef: moveUpRef,

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

@@ -1,12 +1,166 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixBlockMenuPositionAndScroll = void 0;
+exports.scheduleBlockMenuPositionFix = exports.getScrollDistanceToRevealAnchor = exports.getBlockMenuPositionSnapshot = exports.getBlockMenuAnchorMetrics = exports.fixBlockMenuPositionAndScroll = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _browserApis = require("@atlaskit/browser-apis");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
-var fixBlockMenuPositionAndScroll = exports.fixBlockMenuPositionAndScroll = function fixBlockMenuPositionAndScroll(firstSelectedNode) {
+var _styles = require("@atlaskit/editor-common/styles");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+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) { (0, _defineProperty2.default)(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; }
+var POPUP_WRAPPER_TEST_ID = 'popup-wrapper';
+var 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.
+ */
+var 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.
+ */
+var getScrollDistanceToRevealAnchor = exports.getScrollDistanceToRevealAnchor = function getScrollDistanceToRevealAnchor(dragHandleTop, dragHandleHeight, viewport) {
+  if (dragHandleTop < viewport.top) {
+    return dragHandleTop - viewport.top;
+  }
+  var 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.
+ */
+var getScrollContainer = function getScrollContainer(doc, selectedBlock) {
+  var editorContentContainer = doc.querySelector(EDITOR_CONTENT_CONTAINER_SELECTOR);
+  if (editorContentContainer && editorContentContainer.scrollHeight > editorContentContainer.clientHeight) {
+    return editorContentContainer;
+  }
+  var ancestor = selectedBlock.parentElement;
+  while (ancestor) {
+    var _doc$defaultView;
+    var 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;
+};
+var getScrollViewport = function 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
+    };
+  }
+  var _scrollContainer$getB = scrollContainer.getBoundingClientRect(),
+    top = _scrollContainer$getB.top,
+    bottom = _scrollContainer$getB.bottom;
+  return {
+    bottom: bottom,
+    top: 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.
+ */
+var getBlockBottom = function getBlockBottom(block) {
+  var rect = block.getBoundingClientRect();
+  if (rect.height > 0) {
+    return rect.bottom;
+  }
+  return Array.from(block.children).reduce(function (bottom, child) {
+    return Math.max(bottom, child.getBoundingClientRect().bottom);
+  }, rect.bottom);
+};
+var setPopupTop = function setPopupTop(blockMenuEl, targetTop) {
+  var _blockMenuEl$closest;
+  var popupWrapper = (_blockMenuEl$closest = blockMenuEl.closest("[data-testid=\"".concat(POPUP_WRAPPER_TEST_ID, "\"]"))) !== null && _blockMenuEl$closest !== void 0 ? _blockMenuEl$closest : blockMenuEl.parentElement;
+  if (!(popupWrapper instanceof HTMLElement)) {
+    return;
+  }
+  var distance = blockMenuEl.getBoundingClientRect().top - targetTop;
+  var hasTopProperty = popupWrapper.style.top !== '';
+  var hasBottomProperty = popupWrapper.style.bottom !== '';
+  if (hasBottomProperty && !hasTopProperty) {
+    popupWrapper.style.bottom = "".concat(parseFloat(popupWrapper.style.bottom || '0') + distance, "px");
+  } else {
+    popupWrapper.style.top = "".concat(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.
+ */
+var getBlockMenuAnchorMetrics = exports.getBlockMenuAnchorMetrics = function getBlockMenuAnchorMetrics(selectedBlock) {
+  var _doc$querySelector;
+  var doc = (0, _browserApis.getDocument)();
+  var blockMenuEl = doc === null || doc === void 0 ? void 0 : doc.querySelector("[data-testid=\"".concat(_blockMenu.BLOCK_MENU_TEST_ID, "\"]"));
+  if (!doc || !selectedBlock || !blockMenuEl) {
+    return;
+  }
+  var blockMenuRect = blockMenuEl.getBoundingClientRect();
+  var dragHandleRect = (_doc$querySelector = doc.querySelector(_styles.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;
+  }
+  var 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.
+ */
+var getBlockMenuPositionSnapshot = exports.getBlockMenuPositionSnapshot = function getBlockMenuPositionSnapshot(selectedBlock, anchorMetrics) {
+  var doc = (0, _browserApis.getDocument)();
+  if (!doc || !selectedBlock) {
+    return;
+  }
+  var scrollContainer = getScrollContainer(doc, selectedBlock);
+  var metrics = anchorMetrics !== null && anchorMetrics !== void 0 ? anchorMetrics : getBlockMenuAnchorMetrics(selectedBlock);
+  if (!scrollContainer || !metrics) {
+    return;
+  }
+  return _objectSpread(_objectSpread({}, metrics), {}, {
+    scrollContainer: 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.
+ */
+var fixBlockMenuPositionAndScroll = exports.fixBlockMenuPositionAndScroll = function fixBlockMenuPositionAndScroll(selectedNode, positionSnapshot) {
   var doc = (0, _browserApis.getDocument)();
   if (!doc) {
     return;
@@ -15,13 +169,54 @@ var fixBlockMenuPositionAndScroll = exports.fixBlockMenuPositionAndScroll = func
   if (!(blockMenuEl !== null && blockMenuEl !== void 0 && blockMenuEl.parentElement)) {
     return;
   }
-  var 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.
+    var 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
+    });
+    var viewport = getScrollViewport(doc, scrollContainer);
+    var 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.
+    var popupTopFromHandle = positionSnapshot.popupOffsetFromBlock - positionSnapshot.dragHandleOffsetFromBlock;
+    var revealTop = Math.min(0, popupTopFromHandle);
+    var revealBottom = Math.max(positionSnapshot.dragHandleHeight, positionSnapshot.blockHeight - positionSnapshot.dragHandleOffsetFromBlock, popupTopFromHandle + positionSnapshot.popupHeight);
+    var revealHeight = Math.min(revealBottom - revealTop, Math.max(viewport.bottom - viewport.top - 2 * REVEAL_MARGIN, 0));
+    var 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;
+  }
+  var scrollableContainer = doc.querySelector(EDITOR_CONTENT_CONTAINER_SELECTOR);
+  if (!selectedNode || !scrollableContainer) {
     return;
   }
   var parentElement = blockMenuEl.parentElement;
   var currentTop = parentElement.getBoundingClientRect().top;
-  var distance = firstSelectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
+  var distance = selectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
   scrollableContainer.scrollBy({
     behavior: 'instant',
     top: distance
@@ -37,4 +232,22 @@ var fixBlockMenuPositionAndScroll = exports.fixBlockMenuPositionAndScroll = func
     var currentTopValue = parseFloat(parentElement.style.top || '0');
     parentElement.style.top = "".concat(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.
+ */
+var scheduleBlockMenuPositionFix = exports.scheduleBlockMenuPositionFix = function scheduleBlockMenuPositionFix(positionSnapshot, getMovedBlockDomNode, getFirstSelectedDomNode) {
+  requestAnimationFrame(function () {
+    if ((0, _fg.fg)('platform_editor_blocks_patch_8') && positionSnapshot) {
+      fixBlockMenuPositionAndScroll(getMovedBlockDomNode(), positionSnapshot);
+      return;
+    }
+    fixBlockMenuPositionAndScroll(getFirstSelectedDomNode());
+  });
 };

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

@@ -1,9 +1,16 @@
 import React, { useCallback, createContext, useContext, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getBlockMenuAnchorMetrics } from './utils/fixBlockMenuPositionAndScroll';
 const BlockMenuContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
   moveDownRef: /*#__PURE__*/React.createRef(),
   moveUpRef: /*#__PURE__*/React.createRef(),
-  getFirstSelectedDomNode: () => undefined
+  getFirstSelectedDomNode: () => undefined,
+  getMovedBlockDomNode: () => undefined,
+  getSelectedBlockDomNode: () => undefined,
+  anchorMetricsRef: {
+    current: undefined
+  }
 });
 export const useBlockMenu = () => {
   const context = useContext(BlockMenuContext);
@@ -19,6 +26,7 @@ export const BlockMenuProvider = ({
 }) => {
   const moveUpRef = useRef(null);
   const moveDownRef = useRef(null);
+  const anchorMetricsRef = useRef(undefined);
   const getFirstSelectedDomNode = useCallback(() => {
     var _api$selection, _api$selection$shared, _api$selection$shared2;
     const from = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState.currentState()) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.selection) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.from;
@@ -29,23 +37,72 @@ export const BlockMenuProvider = ({
       }
     }
   }, [api, editorView]);
+  const getTopLevelBlockDomNodeAt = useCallback(from => {
+    if (!editorView) {
+      return;
+    }
+    const nodeDOM = editorView.nodeDOM(from);
+    const domAtPos = nodeDOM instanceof Element ? nodeDOM : editorView.domAtPos(from).node;
+    const element = domAtPos instanceof Element ? domAtPos : domAtPos.parentElement;
+    if (!element || !editorView.dom.contains(element)) {
+      return;
+    }
+    let block = element;
+    while (block.parentElement && block.parentElement !== editorView.dom) {
+      block = block.parentElement;
+    }
+    return block;
+  }, [editorView]);
+  const getSelectedBlockDomNode = useCallback(() => {
+    var _api$blockControls, _ref, _blockControlsState$a, _blockControlsState$a2, _blockControlsState$m, _blockControlsState$p;
+    const blockControlsState = api === null || api === void 0 ? 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.
+    const from = (_ref = (_blockControlsState$a = blockControlsState === null || blockControlsState === void 0 ? 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 ? void 0 : (_blockControlsState$m = blockControlsState.menuTriggerByNode) === null || _blockControlsState$m === void 0 ? void 0 : _blockControlsState$m.pos) !== null && _ref !== void 0 ? _ref : blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$p = blockControlsState.preservedSelection) === null || _blockControlsState$p === void 0 ? void 0 : _blockControlsState$p.from;
+    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
+  }, [api, getTopLevelBlockDomNodeAt]);
+  const getMovedBlockDomNode = useCallback(() => {
+    // 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.
+    const from = editorView === null || editorView === void 0 ? void 0 : editorView.state.selection.from;
+    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
+  }, [editorView, getTopLevelBlockDomNodeAt]);
   const onDropdownOpenChanged = useCallback(isOpen => {
-    if (!isOpen) {
-      // On Dropdown closed, return focus to editor
-      setTimeout(() => requestAnimationFrame(() => {
-        api === null || api === void 0 ? void 0 : api.core.actions.focus({
-          scrollIntoView: false
-        });
-      }), 1);
+    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.
+        let remainingFrames = 3;
+        const captureAnchorMetrics = () => {
+          requestAnimationFrame(() => {
+            anchorMetricsRef.current = getBlockMenuAnchorMetrics(getSelectedBlockDomNode());
+            remainingFrames -= 1;
+            if (!anchorMetricsRef.current && remainingFrames > 0) {
+              captureAnchorMetrics();
+            }
+          });
+        };
+        captureAnchorMetrics();
+      }
+      return;
     }
-  }, [api]);
+
+    // On Dropdown closed, return focus to editor
+    setTimeout(() => requestAnimationFrame(() => {
+      api === null || api === void 0 ? 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,
       moveDownRef,
       moveUpRef,
-      getFirstSelectedDomNode
+      getFirstSelectedDomNode,
+      getMovedBlockDomNode,
+      getSelectedBlockDomNode,
+      anchorMetricsRef
     }
   }, children);
 };