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

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/copy-block.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { injectIntl, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
+import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
+import { Fragment, DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import CopyIcon from '@atlaskit/icon/core/copy';
+const toDOMFromFragment = (fragment, schema) => {
+  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+const CopyBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const copyHandler = event => {
+    var _api$selection, _api$selection$shared, _api$selection$shared2;
+    // prevent click event from bubbling up to the ancestor elements
+    event.stopPropagation();
+    // get the current selection
+    const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
+    if (selection) {
+      const schema = selection.$from.doc.type.schema;
+      // for texts and inline nodes
+      if (selection instanceof TextSelection) {
+        var _fragment;
+        let 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') {
+          const layoutSectionNode = fragment.firstChild;
+          const layoutColumnNode = layoutSectionNode.firstChild;
+          const layoutContent = layoutColumnNode === null || layoutColumnNode === void 0 ? void 0 : layoutColumnNode.firstChild;
+          fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || Fragment.empty;
+        }
+        const domNode = toDOMFromFragment(fragment, schema);
+        const div = document.createElement('div');
+        div.appendChild(domNode);
+        copyHTMLToClipboard(div);
+      }
+
+      // for table
+      if (isTableSelected(selection)) {
+        const nodeType = schema.nodes.table;
+        const tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        const domNode = toDOM(tableNode, schema);
+        copyDomNode(domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof NodeSelection) {
+        const nodeType = selection.node.type;
+        const domNode = toDOM(selection.node, schema);
+        copyDomNode(domNode, nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      label: ""
+    }),
+    onClick: e => copyHandler(e)
+  }, formatMessage(messages.copyBlock));
+};
+export default injectIntl(CopyBlockMenuItem);

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,49 @@
+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 CopyBlockMenuItem from './copy-block';
+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',
@@ -19,7 +54,7 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
     }
   }, {
     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;
@@ -27,9 +62,22 @@ export var getBlockMenuComponents = function 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: function 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: function component(_ref3) {
       var children = _ref3.children;
@@ -37,6 +85,16 @@ export var getBlockMenuComponents = function getBlockMenuComponents() {
         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.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',
@@ -79,37 +137,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: {
@@ -124,5 +152,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/copy-block.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { injectIntl, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
+import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
+import { Fragment, DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import CopyIcon from '@atlaskit/icon/core/copy';
+var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
+  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = 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 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) || Fragment.empty;
+        }
+        var domNode = toDOMFromFragment(fragment, schema);
+        var div = document.createElement('div');
+        div.appendChild(domNode);
+        copyHTMLToClipboard(div);
+      }
+
+      // for table
+      if (isTableSelected(selection)) {
+        var nodeType = schema.nodes.table;
+        var tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        var _domNode = toDOM(tableNode, schema);
+        copyDomNode(_domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof NodeSelection) {
+        var _nodeType = selection.node.type;
+        var _domNode2 = toDOM(selection.node, schema);
+        copyDomNode(_domNode2, _nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      label: ""
+    }),
+    onClick: function onClick(e) {
+      return copyHandler(e);
+    }
+  }, formatMessage(messages.copyBlock));
+};
+export default injectIntl(CopyBlockMenuItem);

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/blockMenuPluginType.d.ts

@@ -1,8 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
-    dependencies: [OptionalPlugin<BlockControlsPlugin>, OptionalPlugin<UserIntentPlugin>];
+    dependencies: [
+        OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<SelectionPlugin>
+    ];
     actions: {
         registerBlockMenuComponents: (blockMenuComponents: Array<RegisterBlockMenuComponent>) => void;
         getBlockMenuComponents: () => Array<RegisterBlockMenuComponent>;