@atlaskit/editor-plugin-block-menu 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.6
+
+### Patch Changes
+
+- [`353075175e7ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/353075175e7ff) -
+  [ux] ED-28584 Register move up and down options in block menu
+- Updated dependencies
+
+## 0.0.5
+
+### Patch Changes
+
+- [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
+  [ux] [ED-28473] minor UI updates for editor-toolbar
+
+  - Use ADS ButtonGroup for ToolbarButtonGroup
+  - Remove groupLocation prop and use CSS instead
+  - Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and
+    title
+  - Support ReactNode as content for ToolbarTooltip and add missing shortcuts in tooltips
+  - Center Icons for split buttons and make chevron icon 24px wide
+  - Align dropdown menu UI with current editor design
+
+- Updated dependencies
+
 ## 0.0.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/blockMenuPlugin.js

@@ -13,7 +13,7 @@ var _blockMenuComponents = require("./ui/block-menu-components");
 var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api;
   var registry = (0, _editorActions.createBlockMenuRegistry)();
-  registry.register((0, _blockMenuComponents.getBlockMenuComponents)());
+  registry.register((0, _blockMenuComponents.getBlockMenuComponents)(api));
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {

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

@@ -5,17 +5,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getBlockMenuComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _jira = _interopRequireDefault(require("@atlaskit/icon-lab/core/jira"));
-var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
-var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
-var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents() {
+var _moveDown = require("./move-down");
+var _moveUp = require("./move-up");
+var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
+  var _api$blockControls;
+  if (!(api !== null && api !== void 0 && (_api$blockControls = api.blockControls) !== null && _api$blockControls !== void 0 && _api$blockControls.commands.moveNode)) {
+    return [];
+  }
+  return [{
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-up',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 100
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_moveUp.MoveUpDropdownItem, {
+        api: api
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-down',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_moveDown.MoveDownDropdownItem, {
+        api: api
+      });
+    }
+  }];
+};
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(api) {
   return [{
     type: 'block-menu-section',
     key: 'block-menu-section-format',
@@ -30,7 +64,9 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     rank: 200,
     component: function component(_ref2) {
       var children = _ref2.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-section',
@@ -38,7 +74,9 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     rank: 300,
     component: function component(_ref3) {
       var children = _ref3.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-nested',
@@ -82,37 +120,7 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         })
       }, "Create Jira work item");
     }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-up',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 100
-    },
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
-          label: ""
-        })
-      }, "Move up");
-    }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-down',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 200
-    },
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
-          label: ""
-        })
-      }, "Move down");
-    }
-  }, {
+  }].concat((0, _toConsumableArray2.default)(getMoveUpMoveDownMenuComponents(api)), [{
     type: 'block-menu-item',
     key: 'block-menu-item-delete',
     parent: {
@@ -127,5 +135,5 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         })
       }, "Delete");
     }
-  }];
+  }]);
 };

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

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _css = require("@atlaskit/css");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -22,9 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
-var DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
-var DRAG_HANDLE_WIDTH = 12;
-var DRAG_HANDLE_PADDING = 5;
+var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var _api$blockMenu;
@@ -75,20 +74,36 @@ var BlockMenu = function BlockMenu(_ref2) {
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
+  (0, _react.useEffect)(function () {
+    var _api$userIntent;
+    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+      return;
+    }
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, hasSelection, currentUserIntent]);
   if (!isMenuOpen) {
     return null;
   }
   var closeMenu = function closeMenu() {
-    var _api$blockControls;
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
-      closeMenu: true
-    }));
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$userIntent2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr: tr
+      });
+      return tr;
+    });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
+  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
-  var targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
       alignX: 'left',
@@ -102,7 +117,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
       forcePlacement: true,
       stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
+      offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
       api: api
     }));

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveDownDropdownItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+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 MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
+      var _blockControlsState$b;
+      var blockControlsState = _ref2.blockControlsState;
+      return {
+        canMoveDown: blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveDown
+      };
+    }),
+    canMoveDown = _useSharedPluginState.canMoveDown;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$blockControls2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(_types.DIRECTION.DOWN)({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
+      label: ""
+    }),
+    isDisabled: !canMoveDown
+  }, formatMessage(_messages.blockMenuMessages.moveDownBlock));
+};
+var MoveDownDropdownItem = exports.MoveDownDropdownItem = (0, _reactIntlNext.injectIntl)(MoveDownDropdownItemContent);

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveUpDropdownItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+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 MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
+      var _blockControlsState$b;
+      var blockControlsState = _ref2.blockControlsState;
+      return {
+        canMoveUp: blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveUp
+      };
+    }),
+    canMoveUp = _useSharedPluginState.canMoveUp;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$blockControls2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(_types.DIRECTION.UP)({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
+      label: ""
+    }),
+    isDisabled: !canMoveUp
+  }, formatMessage(_messages.blockMenuMessages.moveUpBlock));
+};
+var MoveUpDropdownItem = exports.MoveUpDropdownItem = (0, _reactIntlNext.injectIntl)(MoveUpDropdownItemContent);

package/dist/es2019/blockMenuPlugin.js

@@ -7,7 +7,7 @@ export const blockMenuPlugin = ({
   api
 }) => {
   const registry = createBlockMenuRegistry();
-  registry.register(getBlockMenuComponents());
+  registry.register(getBlockMenuComponents(api));
   return {
     name: 'blockMenu',
     pmPlugins() {

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

@@ -1,14 +1,43 @@
 import React from 'react';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import JiraIcon from '@atlaskit/icon-lab/core/jira';
-import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import TaskIcon from '@atlaskit/icon/core/task';
-export const getBlockMenuComponents = () => {
+import { MoveDownDropdownItem } from './move-down';
+import { MoveUpDropdownItem } from './move-up';
+const getMoveUpMoveDownMenuComponents = api => {
+  var _api$blockControls;
+  if (!(api !== null && api !== void 0 && (_api$blockControls = api.blockControls) !== null && _api$blockControls !== void 0 && _api$blockControls.commands.moveNode)) {
+    return [];
+  }
+  return [{
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-up',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 100
+    },
+    component: () => /*#__PURE__*/React.createElement(MoveUpDropdownItem, {
+      api: api
+    })
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-down',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 200
+    },
+    component: () => /*#__PURE__*/React.createElement(MoveDownDropdownItem, {
+      api: api
+    })
+  }];
+};
+export const getBlockMenuComponents = api => {
   return [{
     type: 'block-menu-section',
     key: 'block-menu-section-format',
@@ -25,7 +54,9 @@ export const getBlockMenuComponents = () => {
     component: ({
       children
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-section',
@@ -34,7 +65,9 @@ export const getBlockMenuComponents = () => {
     component: ({
       children
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-nested',
@@ -78,37 +111,7 @@ export const getBlockMenuComponents = () => {
         })
       }, "Create Jira work item");
     }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-up',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 100
-    },
-    component: () => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
-          label: ""
-        })
-      }, "Move up");
-    }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-down',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 200
-    },
-    component: () => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
-          label: ""
-        })
-      }, "Move down");
-    }
-  }, {
+  }, ...getMoveUpMoveDownMenuComponents(api), {
     type: 'block-menu-item',
     key: 'block-menu-item-delete',
     parent: {

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

@@ -1,10 +1,11 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -14,9 +15,7 @@ import { BlockMenuRenderer } from './block-menu-renderer';
 const styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
-const DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
-const DRAG_HANDLE_WIDTH = 12;
-const DRAG_HANDLE_PADDING = 5;
+const DRAG_HANDLE_OFFSET_PADDING = 5;
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const BlockMenuContent = ({
   api
@@ -64,20 +63,37 @@ const BlockMenu = ({
   });
   const hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
+  useEffect(() => {
+    var _api$userIntent;
+    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+      return;
+    }
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, hasSelection, currentUserIntent]);
   if (!isMenuOpen) {
     return null;
   }
   const closeMenu = () => {
-    var _api$blockControls;
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
-      closeMenu: true
-    }));
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$userIntent2;
+      api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr
+      });
+      return tr;
+    });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
+  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
-  const targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'left',
@@ -91,7 +107,7 @@ const BlockMenu = ({
       zIndex: akEditorFloatingOverlapPanelZIndex,
       forcePlacement: true,
       stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
+      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api
     }));

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+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';
+const MoveDownDropdownItemContent = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    canMoveDown
+  } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
+    blockControlsState
+  }) => {
+    var _blockControlsState$b;
+    return {
+      canMoveDown: blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveDown
+    };
+  });
+  const handleClick = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$blockControls$co, _api$blockControls2, _api$blockControls2$c;
+      api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveNodeWithBlockMenu(DIRECTION.DOWN)({
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      label: ""
+    }),
+    isDisabled: !canMoveDown
+  }, formatMessage(messages.moveDownBlock));
+};
+export const MoveDownDropdownItem = injectIntl(MoveDownDropdownItemContent);

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+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';
+const MoveUpDropdownItemContent = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    canMoveUp
+  } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
+    blockControlsState
+  }) => {
+    var _blockControlsState$b;
+    return {
+      canMoveUp: blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveUp
+    };
+  });
+  const handleClick = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$blockControls$co, _api$blockControls2, _api$blockControls2$c;
+      api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveNodeWithBlockMenu(DIRECTION.UP)({
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
+      label: ""
+    }),
+    isDisabled: !canMoveUp
+  }, formatMessage(messages.moveUpBlock));
+};
+export const MoveUpDropdownItem = injectIntl(MoveUpDropdownItemContent);

package/dist/esm/blockMenuPlugin.js

@@ -6,7 +6,7 @@ import { getBlockMenuComponents } from './ui/block-menu-components';
 export var blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api;
   var registry = createBlockMenuRegistry();
-  registry.register(getBlockMenuComponents());
+  registry.register(getBlockMenuComponents(api));
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {

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

@@ -1,14 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import JiraIcon from '@atlaskit/icon-lab/core/jira';
-import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import TaskIcon from '@atlaskit/icon/core/task';
-export var getBlockMenuComponents = function getBlockMenuComponents() {
+import { MoveDownDropdownItem } from './move-down';
+import { MoveUpDropdownItem } from './move-up';
+var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
+  var _api$blockControls;
+  if (!(api !== null && api !== void 0 && (_api$blockControls = api.blockControls) !== null && _api$blockControls !== void 0 && _api$blockControls.commands.moveNode)) {
+    return [];
+  }
+  return [{
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-up',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 100
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveUpDropdownItem, {
+        api: api
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-down',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveDownDropdownItem, {
+        api: api
+      });
+    }
+  }];
+};
+export var getBlockMenuComponents = function getBlockMenuComponents(api) {
   return [{
     type: 'block-menu-section',
     key: 'block-menu-section-format',
@@ -23,7 +57,9 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
     rank: 200,
     component: function component(_ref2) {
       var children = _ref2.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-section',
@@ -31,7 +67,9 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
     rank: 300,
     component: function component(_ref3) {
       var children = _ref3.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }, {
     type: 'block-menu-nested',
@@ -75,37 +113,7 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
         })
       }, "Create Jira work item");
     }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-up',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 100
-    },
-    component: function component() {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
-          label: ""
-        })
-      }, "Move up");
-    }
-  }, {
-    type: 'block-menu-item',
-    key: 'block-menu-item-move-down',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-move-up-down',
-      rank: 200
-    },
-    component: function component() {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
-          label: ""
-        })
-      }, "Move down");
-    }
-  }, {
+  }].concat(_toConsumableArray(getMoveUpMoveDownMenuComponents(api)), [{
     type: 'block-menu-item',
     key: 'block-menu-item-delete',
     parent: {
@@ -120,5 +128,5 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
         })
       }, "Delete");
     }
-  }];
+  }]);
 };

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

@@ -1,10 +1,11 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -14,9 +15,7 @@ import { BlockMenuRenderer } from './block-menu-renderer';
 var styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
-var DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
-var DRAG_HANDLE_WIDTH = 12;
-var DRAG_HANDLE_PADDING = 5;
+var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var _api$blockMenu;
@@ -67,20 +66,36 @@ var BlockMenu = function BlockMenu(_ref2) {
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
+  useEffect(function () {
+    var _api$userIntent;
+    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+      return;
+    }
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, hasSelection, currentUserIntent]);
   if (!isMenuOpen) {
     return null;
   }
   var closeMenu = function closeMenu() {
-    var _api$blockControls;
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
-      closeMenu: true
-    }));
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$userIntent2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr: tr
+      });
+      return tr;
+    });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
+  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
-  var targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'left',
@@ -94,7 +109,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       zIndex: akEditorFloatingOverlapPanelZIndex,
       forcePlacement: true,
       stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
+      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api
     }));

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+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';
+var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
+      var _blockControlsState$b;
+      var blockControlsState = _ref2.blockControlsState;
+      return {
+        canMoveDown: blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveDown
+      };
+    }),
+    canMoveDown = _useSharedPluginState.canMoveDown;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$blockControls2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.DOWN)({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      label: ""
+    }),
+    isDisabled: !canMoveDown
+  }, formatMessage(messages.moveDownBlock));
+};
+export var MoveDownDropdownItem = injectIntl(MoveDownDropdownItemContent);

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+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';
+var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
+      var _blockControlsState$b;
+      var blockControlsState = _ref2.blockControlsState;
+      return {
+        canMoveUp: blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveUp
+      };
+    }),
+    canMoveUp = _useSharedPluginState.canMoveUp;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$blockControls, _api$blockControls2;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.UP)({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
+      label: ""
+    }),
+    isDisabled: !canMoveUp
+  }, formatMessage(messages.moveUpBlock));
+};
+export var MoveUpDropdownItem = injectIntl(MoveUpDropdownItemContent);

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

@@ -1,2 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
-export declare const getBlockMenuComponents: () => RegisterBlockMenuComponent[];
+export declare const getBlockMenuComponents: (api: ExtractInjectionAPI<BlockMenuPlugin> | undefined) => RegisterBlockMenuComponent[];

package/dist/types/ui/move-down.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockMenuPlugin>;
+};
+export declare const MoveDownDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};
+export {};

package/dist/types/ui/move-up.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockMenuPlugin>;
+};
+export declare const MoveUpDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};
+export {};

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

@@ -1,2 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
-export declare const getBlockMenuComponents: () => RegisterBlockMenuComponent[];
+export declare const getBlockMenuComponents: (api: ExtractInjectionAPI<BlockMenuPlugin> | undefined) => RegisterBlockMenuComponent[];

package/dist/types-ts4.5/ui/move-down.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockMenuPlugin>;
+};
+export declare const MoveDownDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};
+export {};

package/dist/types-ts4.5/ui/move-up.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockMenuPlugin>;
+};
+export declare const MoveUpDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,10 +33,11 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/editor-plugin-block-controls": "^4.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^4.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
+		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.3.0",
 		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/icon-lab": "^5.6.0",
@@ -45,7 +46,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.23.0",
+		"@atlaskit/editor-common": "^107.26.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},