@atlaskit/editor-plugin-block-menu 6.0.15 → 6.0.17

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 6.0.17
+
+### Patch Changes
+
+- [`2d587fc62431a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d587fc62431a) -
+  [ux] Fix block menu position on move / scroll moved selection back to same position if possible
+- Updated dependencies
+
+## 6.0.16
+
+### Patch Changes
+
+- [`0caee373bff2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0caee373bff2d) -
+  Exported additional types to fix typescript portable annotation errors
+- Updated dependencies
+
 ## 6.0.15
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -18,6 +18,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/css/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -18,6 +18,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/css/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -18,6 +18,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/css/afm-products/tsconfig.json"
 		},

package/dist/cjs/blockMenuPlugin.js

@@ -89,7 +89,8 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
       return /*#__PURE__*/_react.default.createElement(_blockMenuProvider.BlockMenuProvider, {
-        api: api
+        api: api,
+        editorView: editorView
       }, /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
         editorView: editorView,
         api: api,

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

@@ -10,7 +10,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   moveDownRef: /*#__PURE__*/_react.default.createRef(),
-  moveUpRef: /*#__PURE__*/_react.default.createRef()
+  moveUpRef: /*#__PURE__*/_react.default.createRef(),
+  getFirstSelectedDomNode: function getFirstSelectedDomNode() {
+    return undefined;
+  }
 });
 var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
   var context = (0, _react.useContext)(BlockMenuContext);
@@ -21,9 +24,20 @@ var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
 };
 var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_ref) {
   var children = _ref.children,
-    api = _ref.api;
+    api = _ref.api,
+    editorView = _ref.editorView;
   var moveUpRef = (0, _react.useRef)(null);
   var moveDownRef = (0, _react.useRef)(null);
+  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;
+    if (from !== undefined) {
+      var nodeDOM = editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(from);
+      if (nodeDOM instanceof Element) {
+        return nodeDOM;
+      }
+    }
+  }, [api, editorView]);
   var onDropdownOpenChanged = (0, _react.useCallback)(function (isOpen) {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -40,7 +54,8 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
       moveDownRef: moveDownRef,
-      moveUpRef: moveUpRef
+      moveUpRef: moveUpRef,
+      getFirstSelectedDomNode: getFirstSelectedDomNode
     }
   }, children);
 };

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveDownDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -16,6 +17,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
 var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
+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 MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
@@ -23,7 +25,8 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     formatMessage = _useIntl.formatMessage;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     moveUpRef = _useBlockMenu.moveUpRef,
-    moveDownRef = _useBlockMenu.moveDownRef;
+    moveDownRef = _useBlockMenu.moveDownRef,
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -32,8 +35,11 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       };
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
+
+  // Maybe don't need this
   (0, _react.useEffect)(function () {
-    if (!canMoveDown && moveDownRef.current && moveDownRef.current === document.activeElement && moveUpRef.current) {
+    var doc = (0, _browserApis.getDocument)();
+    if (!canMoveDown && moveDownRef.current && doc && moveDownRef.current === doc.activeElement && moveUpRef.current) {
       moveUpRef.current.focus();
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
@@ -55,6 +61,10 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       });
       return tr;
     });
+    requestAnimationFrame(function () {
+      var newFirstNode = getFirstSelectedDomNode();
+      (0, _fixBlockMenuPositionAndScroll.fixBlockMenuPositionAndScroll)(newFirstNode);
+    });
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     triggerRef: moveDownRef,

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveUpDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -16,6 +17,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
+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 MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
@@ -23,7 +25,8 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     formatMessage = _useIntl.formatMessage;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     moveUpRef = _useBlockMenu.moveUpRef,
-    moveDownRef = _useBlockMenu.moveDownRef;
+    moveDownRef = _useBlockMenu.moveDownRef,
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -33,7 +36,8 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
   (0, _react.useEffect)(function () {
-    if (!canMoveUp && moveUpRef.current && moveUpRef.current === document.activeElement && moveDownRef.current) {
+    var doc = (0, _browserApis.getDocument)();
+    if (!canMoveUp && moveUpRef.current && doc && moveUpRef.current === doc.activeElement && moveDownRef.current) {
       moveDownRef.current.focus();
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
@@ -55,6 +59,10 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       });
       return tr;
     });
+    requestAnimationFrame(function () {
+      var newFirstNode = getFirstSelectedDomNode();
+      (0, _fixBlockMenuPositionAndScroll.fixBlockMenuPositionAndScroll)(newFirstNode);
+    });
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     triggerRef: moveUpRef,

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixBlockMenuPositionAndScroll = void 0;
+var _browserApis = require("@atlaskit/browser-apis");
+var fixBlockMenuPositionAndScroll = exports.fixBlockMenuPositionAndScroll = function fixBlockMenuPositionAndScroll(firstSelectedNode) {
+  var doc = (0, _browserApis.getDocument)();
+  if (!doc) {
+    return;
+  }
+  var blockMenuEl = doc.querySelector('[data-testid="editor-block-menu"]');
+  if (!(blockMenuEl !== null && blockMenuEl !== void 0 && blockMenuEl.parentElement)) {
+    return;
+  }
+  var scrollableContainer = doc.querySelector('[data-testid="editor-content-container"]');
+  if (!firstSelectedNode || !scrollableContainer) {
+    return;
+  }
+  var parentElement = blockMenuEl.parentElement;
+  var currentTop = parentElement.getBoundingClientRect().top;
+  var distance = firstSelectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
+  scrollableContainer.scrollBy({
+    behavior: 'instant',
+    top: distance
+  });
+  var newTop = parentElement.getBoundingClientRect().top;
+  var topDifference = currentTop - newTop;
+  var hasTopProperty = parentElement.style.top !== '';
+  var hasBottomProperty = parentElement.style.bottom !== '';
+  if (hasBottomProperty && !hasTopProperty) {
+    var currentBottomValue = parseFloat(parentElement.style.bottom || '0');
+    parentElement.style.bottom = "".concat(currentBottomValue - topDifference, "px");
+  } else {
+    var currentTopValue = parseFloat(parentElement.style.top || '0');
+    parentElement.style.top = "".concat(currentTopValue + topDifference, "px");
+  }
+};

package/dist/es2019/blockMenuPlugin.js

@@ -82,7 +82,8 @@ export const blockMenuPlugin = ({
       popupsScrollableElement
     }) {
       return /*#__PURE__*/React.createElement(BlockMenuProvider, {
-        api: api
+        api: api,
+        editorView: editorView
       }, /*#__PURE__*/React.createElement(BlockMenu, {
         editorView: editorView,
         api: api,

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

@@ -2,7 +2,8 @@ import React, { useCallback, createContext, useContext, useRef } from 'react';
 const BlockMenuContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
   moveDownRef: /*#__PURE__*/React.createRef(),
-  moveUpRef: /*#__PURE__*/React.createRef()
+  moveUpRef: /*#__PURE__*/React.createRef(),
+  getFirstSelectedDomNode: () => undefined
 });
 export const useBlockMenu = () => {
   const context = useContext(BlockMenuContext);
@@ -13,10 +14,21 @@ export const useBlockMenu = () => {
 };
 export const BlockMenuProvider = ({
   children,
-  api
+  api,
+  editorView
 }) => {
   const moveUpRef = useRef(null);
   const moveDownRef = useRef(null);
+  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;
+    if (from !== undefined) {
+      const nodeDOM = editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(from);
+      if (nodeDOM instanceof Element) {
+        return nodeDOM;
+      }
+    }
+  }, [api, editorView]);
   const onDropdownOpenChanged = useCallback(isOpen => {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -31,7 +43,8 @@ export const BlockMenuProvider = ({
     value: {
       onDropdownOpenChanged,
       moveDownRef,
-      moveUpRef
+      moveUpRef,
+      getFirstSelectedDomNode
     }
   }, children);
 };

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
@@ -8,6 +9,7 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
+import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
 const MoveDownDropdownItemContent = ({
   api
 }) => {
@@ -16,7 +18,8 @@ const MoveDownDropdownItemContent = ({
   } = useIntl();
   const {
     moveUpRef,
-    moveDownRef
+    moveDownRef,
+    getFirstSelectedDomNode
   } = useBlockMenu();
   const {
     canMoveDown
@@ -28,8 +31,11 @@ const MoveDownDropdownItemContent = ({
       canMoveDown: blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveDown
     };
   });
+
+  // Maybe don't need this
   useEffect(() => {
-    if (!canMoveDown && moveDownRef.current && moveDownRef.current === document.activeElement && moveUpRef.current) {
+    const doc = getDocument();
+    if (!canMoveDown && moveDownRef.current && doc && moveDownRef.current === doc.activeElement && moveUpRef.current) {
       moveUpRef.current.focus();
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
@@ -52,6 +58,10 @@ const MoveDownDropdownItemContent = ({
       });
       return tr;
     });
+    requestAnimationFrame(() => {
+      const newFirstNode = getFirstSelectedDomNode();
+      fixBlockMenuPositionAndScroll(newFirstNode);
+    });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveDownRef,

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
@@ -8,6 +9,7 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
+import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
 const MoveUpDropdownItemContent = ({
   api
 }) => {
@@ -16,7 +18,8 @@ const MoveUpDropdownItemContent = ({
   } = useIntl();
   const {
     moveUpRef,
-    moveDownRef
+    moveDownRef,
+    getFirstSelectedDomNode
   } = useBlockMenu();
   const {
     canMoveUp
@@ -29,7 +32,8 @@ const MoveUpDropdownItemContent = ({
     };
   });
   useEffect(() => {
-    if (!canMoveUp && moveUpRef.current && moveUpRef.current === document.activeElement && moveDownRef.current) {
+    const doc = getDocument();
+    if (!canMoveUp && moveUpRef.current && doc && moveUpRef.current === doc.activeElement && moveDownRef.current) {
       moveDownRef.current.focus();
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
@@ -52,6 +56,10 @@ const MoveUpDropdownItemContent = ({
       });
       return tr;
     });
+    requestAnimationFrame(() => {
+      const newFirstNode = getFirstSelectedDomNode();
+      fixBlockMenuPositionAndScroll(newFirstNode);
+    });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveUpRef,

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

@@ -0,0 +1,33 @@
+import { getDocument } from '@atlaskit/browser-apis';
+export const fixBlockMenuPositionAndScroll = firstSelectedNode => {
+  const doc = getDocument();
+  if (!doc) {
+    return;
+  }
+  const blockMenuEl = doc.querySelector('[data-testid="editor-block-menu"]');
+  if (!(blockMenuEl !== null && blockMenuEl !== void 0 && blockMenuEl.parentElement)) {
+    return;
+  }
+  const scrollableContainer = doc.querySelector('[data-testid="editor-content-container"]');
+  if (!firstSelectedNode || !scrollableContainer) {
+    return;
+  }
+  const parentElement = blockMenuEl.parentElement;
+  const currentTop = parentElement.getBoundingClientRect().top;
+  const distance = firstSelectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
+  scrollableContainer.scrollBy({
+    behavior: 'instant',
+    top: distance
+  });
+  const newTop = parentElement.getBoundingClientRect().top;
+  const topDifference = currentTop - newTop;
+  const hasTopProperty = parentElement.style.top !== '';
+  const hasBottomProperty = parentElement.style.bottom !== '';
+  if (hasBottomProperty && !hasTopProperty) {
+    const currentBottomValue = parseFloat(parentElement.style.bottom || '0');
+    parentElement.style.bottom = `${currentBottomValue - topDifference}px`;
+  } else {
+    const currentTopValue = parseFloat(parentElement.style.top || '0');
+    parentElement.style.top = `${currentTopValue + topDifference}px`;
+  }
+};

package/dist/esm/blockMenuPlugin.js

@@ -82,7 +82,8 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
       return /*#__PURE__*/React.createElement(BlockMenuProvider, {
-        api: api
+        api: api,
+        editorView: editorView
       }, /*#__PURE__*/React.createElement(BlockMenu, {
         editorView: editorView,
         api: api,

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

@@ -2,7 +2,10 @@ import React, { useCallback, createContext, useContext, useRef } from 'react';
 var BlockMenuContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   moveDownRef: /*#__PURE__*/React.createRef(),
-  moveUpRef: /*#__PURE__*/React.createRef()
+  moveUpRef: /*#__PURE__*/React.createRef(),
+  getFirstSelectedDomNode: function getFirstSelectedDomNode() {
+    return undefined;
+  }
 });
 export var useBlockMenu = function useBlockMenu() {
   var context = useContext(BlockMenuContext);
@@ -13,9 +16,20 @@ export var useBlockMenu = function useBlockMenu() {
 };
 export var BlockMenuProvider = function BlockMenuProvider(_ref) {
   var children = _ref.children,
-    api = _ref.api;
+    api = _ref.api,
+    editorView = _ref.editorView;
   var moveUpRef = useRef(null);
   var moveDownRef = useRef(null);
+  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;
+    if (from !== undefined) {
+      var nodeDOM = editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(from);
+      if (nodeDOM instanceof Element) {
+        return nodeDOM;
+      }
+    }
+  }, [api, editorView]);
   var onDropdownOpenChanged = useCallback(function (isOpen) {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -32,7 +46,8 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
       moveDownRef: moveDownRef,
-      moveUpRef: moveUpRef
+      moveUpRef: moveUpRef,
+      getFirstSelectedDomNode: getFirstSelectedDomNode
     }
   }, children);
 };

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
@@ -8,13 +9,15 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
+import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useBlockMenu = useBlockMenu(),
     moveUpRef = _useBlockMenu.moveUpRef,
-    moveDownRef = _useBlockMenu.moveDownRef;
+    moveDownRef = _useBlockMenu.moveDownRef,
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -23,8 +26,11 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       };
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
+
+  // Maybe don't need this
   useEffect(function () {
-    if (!canMoveDown && moveDownRef.current && moveDownRef.current === document.activeElement && moveUpRef.current) {
+    var doc = getDocument();
+    if (!canMoveDown && moveDownRef.current && doc && moveDownRef.current === doc.activeElement && moveUpRef.current) {
       moveUpRef.current.focus();
     }
   }, [canMoveDown, moveUpRef, moveDownRef]);
@@ -46,6 +52,10 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       });
       return tr;
     });
+    requestAnimationFrame(function () {
+      var newFirstNode = getFirstSelectedDomNode();
+      fixBlockMenuPositionAndScroll(newFirstNode);
+    });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveDownRef,

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
@@ -8,13 +9,15 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
+import { fixBlockMenuPositionAndScroll } from './utils/fixBlockMenuPositionAndScroll';
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useBlockMenu = useBlockMenu(),
     moveUpRef = _useBlockMenu.moveUpRef,
-    moveDownRef = _useBlockMenu.moveDownRef;
+    moveDownRef = _useBlockMenu.moveDownRef,
+    getFirstSelectedDomNode = _useBlockMenu.getFirstSelectedDomNode;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -24,7 +27,8 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
   useEffect(function () {
-    if (!canMoveUp && moveUpRef.current && moveUpRef.current === document.activeElement && moveDownRef.current) {
+    var doc = getDocument();
+    if (!canMoveUp && moveUpRef.current && doc && moveUpRef.current === doc.activeElement && moveDownRef.current) {
       moveDownRef.current.focus();
     }
   }, [canMoveUp, moveDownRef, moveUpRef]);
@@ -46,6 +50,10 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       });
       return tr;
     });
+    requestAnimationFrame(function () {
+      var newFirstNode = getFirstSelectedDomNode();
+      fixBlockMenuPositionAndScroll(newFirstNode);
+    });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     triggerRef: moveUpRef,

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

@@ -0,0 +1,33 @@
+import { getDocument } from '@atlaskit/browser-apis';
+export var fixBlockMenuPositionAndScroll = function fixBlockMenuPositionAndScroll(firstSelectedNode) {
+  var doc = getDocument();
+  if (!doc) {
+    return;
+  }
+  var blockMenuEl = doc.querySelector('[data-testid="editor-block-menu"]');
+  if (!(blockMenuEl !== null && blockMenuEl !== void 0 && blockMenuEl.parentElement)) {
+    return;
+  }
+  var scrollableContainer = doc.querySelector('[data-testid="editor-content-container"]');
+  if (!firstSelectedNode || !scrollableContainer) {
+    return;
+  }
+  var parentElement = blockMenuEl.parentElement;
+  var currentTop = parentElement.getBoundingClientRect().top;
+  var distance = firstSelectedNode.getBoundingClientRect().top - blockMenuEl.getBoundingClientRect().top;
+  scrollableContainer.scrollBy({
+    behavior: 'instant',
+    top: distance
+  });
+  var newTop = parentElement.getBoundingClientRect().top;
+  var topDifference = currentTop - newTop;
+  var hasTopProperty = parentElement.style.top !== '';
+  var hasBottomProperty = parentElement.style.bottom !== '';
+  if (hasBottomProperty && !hasTopProperty) {
+    var currentBottomValue = parseFloat(parentElement.style.bottom || '0');
+    parentElement.style.bottom = "".concat(currentBottomValue - topDifference, "px");
+  } else {
+    var currentTopValue = parseFloat(parentElement.style.top || '0');
+    parentElement.style.top = "".concat(currentTopValue + topDifference, "px");
+  }
+};

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { blockMenuPlugin } from './blockMenuPlugin';
 export type { BlockMenuPlugin, RegisterBlockMenuComponent, Parent, BlockMenuPluginOptions, BlockMenuSharedState, } from './blockMenuPluginType';
-export type { TransformNodeMetadata } from './editor-commands/transforms/types';
+export type { TransformNodeMetadata, FormatNodeAnalyticsAttrs, TransfromNodeTargetType, FormatNodeTargetType, } from './editor-commands/transforms/types';

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 export type Direction = 'moveUp' | 'moveDown';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
+    editorView: EditorView | undefined;
 };
 export type BlockMenuContextType = {
+    getFirstSelectedDomNode: () => Element | undefined;
     moveDownRef: React.MutableRefObject<HTMLButtonElement | null>;
     moveUpRef: React.MutableRefObject<HTMLButtonElement | null>;
     /**
@@ -17,5 +20,5 @@ export type BlockMenuContextType = {
     onDropdownOpenChanged: (isOpen: boolean) => void;
 };
 export declare const useBlockMenu: () => BlockMenuContextType;
-export declare const BlockMenuProvider: ({ children, api }: BlockMenuProviderProps) => React.JSX.Element;
+export declare const BlockMenuProvider: ({ children, api, editorView, }: BlockMenuProviderProps) => React.JSX.Element;
 export {};

package/dist/types/ui/utils/fixBlockMenuPositionAndScroll.d.ts

@@ -0,0 +1 @@
+export declare const fixBlockMenuPositionAndScroll: (firstSelectedNode: Element | undefined) => void;

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

@@ -1,3 +1,3 @@
 export { blockMenuPlugin } from './blockMenuPlugin';
 export type { BlockMenuPlugin, RegisterBlockMenuComponent, Parent, BlockMenuPluginOptions, BlockMenuSharedState, } from './blockMenuPluginType';
-export type { TransformNodeMetadata } from './editor-commands/transforms/types';
+export type { TransformNodeMetadata, FormatNodeAnalyticsAttrs, TransfromNodeTargetType, FormatNodeTargetType, } from './editor-commands/transforms/types';

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 export type Direction = 'moveUp' | 'moveDown';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
+    editorView: EditorView | undefined;
 };
 export type BlockMenuContextType = {
+    getFirstSelectedDomNode: () => Element | undefined;
     moveDownRef: React.MutableRefObject<HTMLButtonElement | null>;
     moveUpRef: React.MutableRefObject<HTMLButtonElement | null>;
     /**
@@ -17,5 +20,5 @@ export type BlockMenuContextType = {
     onDropdownOpenChanged: (isOpen: boolean) => void;
 };
 export declare const useBlockMenu: () => BlockMenuContextType;
-export declare const BlockMenuProvider: ({ children, api }: BlockMenuProviderProps) => React.JSX.Element;
+export declare const BlockMenuProvider: ({ children, api, editorView, }: BlockMenuProviderProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/utils/fixBlockMenuPositionAndScroll.d.ts

@@ -0,0 +1 @@
+export declare const fixBlockMenuPositionAndScroll: (firstSelectedNode: Element | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "6.0.15",
+	"version": "6.0.17",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,6 +28,7 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
@@ -43,13 +44,13 @@
 		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.15.0",
+		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/tmp-editor-statsig": "^16.23.0",
 		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.7.0",
+		"@atlaskit/editor-common": "^111.8.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},