@atlaskit/editor-plugin-block-menu 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.7
+
+### Patch Changes
+
+- [`31fc6b9e10762`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/31fc6b9e10762) -
+  [ux] ED-28592 ED-28592:Add copy block menu item to block menu
+- Updated dependencies
+
+## 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

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,52 @@ 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 _copyBlock = _interopRequireDefault(require("./copy-block"));
+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',
@@ -26,7 +61,7 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-move-up-down',
+    key: 'block-menu-section-copy',
     rank: 200,
     component: function component(_ref2) {
       var children = _ref2.children;
@@ -34,9 +69,22 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-copy-block',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-copy',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_copyBlock.default, {
+        api: api
+      });
+    }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-delete',
+    key: 'block-menu-section-move-up-down',
     rank: 300,
     component: function component(_ref3) {
       var children = _ref3.children;
@@ -44,6 +92,16 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 400,
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',
@@ -86,37 +144,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: {
@@ -131,5 +159,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/copy-block.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _clipboard = require("@atlaskit/editor-common/clipboard");
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
+  return _model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var copyHandler = function copyHandler(event) {
+    var _api$selection;
+    // prevent click event from bubbling up to the ancestor elements
+    event.stopPropagation();
+    // get the current selection
+    var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+    if (selection) {
+      var schema = selection.$from.doc.type.schema;
+      // for texts and inline nodes
+      if (selection instanceof _state.TextSelection) {
+        var _fragment;
+        var fragment = selection === null || selection === void 0 ? void 0 : selection.content().content;
+        if (!fragment) {
+          return;
+        }
+        // if text is inside of a layout column, the selection contains the layoutSection and layoutColumn for some reason
+        // But the layoutSection only contains the layoutColumn that the selected text is in, hence we can use the .firstChild
+        if ((_fragment = fragment) !== null && _fragment !== void 0 && _fragment.firstChild && fragment.firstChild.type.name === 'layoutSection') {
+          var layoutSectionNode = fragment.firstChild;
+          var layoutColumnNode = layoutSectionNode.firstChild;
+          var layoutContent = layoutColumnNode === null || layoutColumnNode === void 0 ? void 0 : layoutColumnNode.firstChild;
+          fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || _model.Fragment.empty;
+        }
+        var domNode = toDOMFromFragment(fragment, schema);
+        var div = document.createElement('div');
+        div.appendChild(domNode);
+        (0, _clipboard.copyHTMLToClipboard)(div);
+      }
+
+      // for table
+      if ((0, _utils.isTableSelected)(selection)) {
+        var nodeType = schema.nodes.table;
+        var tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        var _domNode = (0, _copyButton.toDOM)(tableNode, schema);
+        (0, _copyButton.copyDomNode)(_domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof _state.NodeSelection) {
+        var _nodeType = selection.node.type;
+        var _domNode2 = (0, _copyButton.toDOM)(selection.node, schema);
+        (0, _copyButton.copyDomNode)(_domNode2, _nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
+      label: ""
+    }),
+    onClick: function onClick(e) {
+      return copyHandler(e);
+    }
+  }, formatMessage(_blockMenu.messages.copyBlock));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(CopyBlockMenuItem);

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,44 @@
 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 CopyBlockMenuItem from './copy-block';
+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',
@@ -20,7 +50,7 @@ export const getBlockMenuComponents = () => {
     }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-move-up-down',
+    key: 'block-menu-section-copy',
     rank: 200,
     component: ({
       children
@@ -29,9 +59,22 @@ export const getBlockMenuComponents = () => {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-copy-block',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-copy',
+      rank: 200
+    },
+    component: () => {
+      return /*#__PURE__*/React.createElement(CopyBlockMenuItem, {
+        api: api
+      });
+    }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-delete',
+    key: 'block-menu-section-move-up-down',
     rank: 300,
     component: ({
       children
@@ -40,6 +83,17 @@ export const getBlockMenuComponents = () => {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 400,
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',
@@ -82,37 +136,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: {