@atlaskit/editor-plugin-block-menu 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.11
+
+### Patch Changes
+
+- [`f0b0ea63f59bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b0ea63f59bc) -
+  [ux] ED-28803 Register Delete Button in block menu and add delete functionality and hover styles
+- [`580ef908f3abf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/580ef908f3abf) -
+  ED-28592: Close menu after copy click
+- Updated dependencies
+
 ## 0.0.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -2,9 +2,9 @@
 	"extends": "../../../../tsconfig.entry-points.confluence.json",
 	"compilerOptions": {
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-block-menu",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -26,6 +26,12 @@
 		{
 			"path": "../../editor-plugin-block-controls/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-townsquare/tsconfig.json"
 		},

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

@@ -10,11 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 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 _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _copyLink = require("./copy-link");
+var _deleteButton = require("./delete-button");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
@@ -151,14 +151,12 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     parent: {
       type: 'block-menu-section',
       key: 'block-menu-section-delete',
-      rank: 100
+      rank: 50
     },
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
-          label: ""
-        })
-      }, "Delete");
+      return /*#__PURE__*/_react.default.createElement(_deleteButton.DeleteDropdownItem, {
+        api: api
+      });
     }
   }]);
 };

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

@@ -29,6 +29,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
     // 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 _api$blockControls;
       var schema = selection.$from.doc.type.schema;
       // for texts and inline nodes
       if (selection instanceof _state.TextSelection) {
@@ -68,6 +69,12 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
         var _domNode2 = (0, _copyButton.toDOM)(selection.node, schema);
         (0, _copyButton.copyDomNode)(_domNode2, _nodeType, selection);
       }
+
+      // close the block menu after copying
+      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.focus();
     }
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {

package/dist/cjs/ui/copy-link.js

@@ -19,6 +19,17 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockControls;
+      var tr = _ref2.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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
     return (0, _copyLink.copyLink)(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
   }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {

package/dist/cjs/ui/delete-button.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _box = require("@atlaskit/primitives/box");
+var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
+  var _api$core$sharedState;
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockControls;
+      var tr = _ref2.tr;
+      var selection = tr.selection;
+      var from = selection.$from.pos;
+      var to = selection.$to.pos;
+      if (selection instanceof _state.TextSelection) {
+        from = from - 1;
+        to = to + 1;
+      } else if ((0, _utils.isTableSelected)(selection)) {
+        var table = (0, _utils.findTable)(selection);
+        if (table) {
+          from = table.start - 1;
+          to = table.start + table.node.nodeSize;
+        }
+      }
+      tr.deleteRange(from, to);
+      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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$decorations, _api$decorations$hove;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || (_api$decorations = _api$decorations.commands) === null || _api$decorations === void 0 || (_api$decorations$hove = _api$decorations.hoverDecoration) === null || _api$decorations$hove === void 0 || _api$decorations$hove.call(_api$decorations, {
+        nodeType: nodeTypes,
+        add: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api, nodeTypes]);
+  var onMouseLeave = function onMouseLeave() {
+    var _api$decorations2, _api$decorations2$rem;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
+  };
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: ""
+    }),
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    as: "span",
+    color: "color.text.danger"
+  }, formatMessage(_blockMenu.messages.deleteBlock))));
+};
+var DeleteDropdownItem = exports.DeleteDropdownItem = (0, _reactIntlNext.injectIntl)(DeleteDropdownItemContent);

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 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';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
+import { DeleteDropdownItem } from './delete-button';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 const getMoveUpMoveDownMenuComponents = api => {
@@ -142,14 +142,10 @@ export const getBlockMenuComponents = ({
     parent: {
       type: 'block-menu-section',
       key: 'block-menu-section-delete',
-      rank: 100
+      rank: 50
     },
-    component: () => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
-          label: ""
-        })
-      }, "Delete");
-    }
+    component: () => /*#__PURE__*/React.createElement(DeleteDropdownItem, {
+      api: api
+    })
   }];
 };

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

@@ -24,6 +24,7 @@ const CopyBlockMenuItem = ({
     // 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) {
+      var _api$blockControls;
       const schema = selection.$from.doc.type.schema;
       // for texts and inline nodes
       if (selection instanceof TextSelection) {
@@ -63,6 +64,12 @@ const CopyBlockMenuItem = ({
         const domNode = toDOM(selection.node, schema);
         copyDomNode(domNode, nodeType, selection);
       }
+
+      // close the block menu after copying
+      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.focus();
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/es2019/ui/copy-link.js

@@ -12,6 +12,18 @@ const CopyLinkDropdownItemContent = ({
     formatMessage
   } = useIntl();
   const handleClick = useCallback(() => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$blockControls$co;
+      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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
     return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
   }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/es2019/ui/delete-button.js

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import { Box } from '@atlaskit/primitives/box';
+import Text from '@atlaskit/primitives/text';
+const DeleteDropdownItemContent = ({
+  api
+}) => {
+  var _api$core$sharedState, _api$core$sharedState2;
+  const {
+    formatMessage
+  } = useIntl();
+  const nodeTypes = Object.values((api === null || api === void 0 ? void 0 : (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.nodes) || {});
+  const onClick = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$blockControls$co;
+      const selection = tr.selection;
+      let from = selection.$from.pos;
+      let to = selection.$to.pos;
+      if (selection instanceof TextSelection) {
+        from = from - 1;
+        to = to + 1;
+      } else if (isTableSelected(selection)) {
+        const table = findTable(selection);
+        if (table) {
+          from = table.start - 1;
+          to = table.start + table.node.nodeSize;
+        }
+      }
+      tr.deleteRange(from, to);
+      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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  };
+  const onMouseEnter = useCallback(() => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$decorations, _api$decorations$comm, _api$decorations$comm2;
+      api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : (_api$decorations$comm = _api$decorations.commands) === null || _api$decorations$comm === void 0 ? void 0 : (_api$decorations$comm2 = _api$decorations$comm.hoverDecoration) === null || _api$decorations$comm2 === void 0 ? void 0 : _api$decorations$comm2.call(_api$decorations$comm, {
+        nodeType: nodeTypes,
+        add: true
+      })({
+        tr
+      });
+      return tr;
+    });
+  }, [api, nodeTypes]);
+  const onMouseLeave = () => {
+    var _api$decorations2, _api$decorations2$com, _api$decorations2$com2;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : (_api$decorations2$com = _api$decorations2.commands) === null || _api$decorations2$com === void 0 ? void 0 : (_api$decorations2$com2 = _api$decorations2$com.removeDecoration) === null || _api$decorations2$com2 === void 0 ? void 0 : _api$decorations2$com2.call(_api$decorations2$com));
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: ""
+    }),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    color: "color.text.danger"
+  }, formatMessage(messages.deleteBlock))));
+};
+export const DeleteDropdownItem = injectIntl(DeleteDropdownItemContent);

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

@@ -3,11 +3,11 @@ import React from 'react';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 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';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
+import { DeleteDropdownItem } from './delete-button';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
@@ -144,14 +144,12 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref) {
     parent: {
       type: 'block-menu-section',
       key: 'block-menu-section-delete',
-      rank: 100
+      rank: 50
     },
     component: function component() {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
-          label: ""
-        })
-      }, "Delete");
+      return /*#__PURE__*/React.createElement(DeleteDropdownItem, {
+        api: api
+      });
     }
   }]);
 };

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

@@ -22,6 +22,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
     // 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 _api$blockControls;
       var schema = selection.$from.doc.type.schema;
       // for texts and inline nodes
       if (selection instanceof TextSelection) {
@@ -61,6 +62,12 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
         var _domNode2 = toDOM(selection.node, schema);
         copyDomNode(_domNode2, _nodeType, selection);
       }
+
+      // close the block menu after copying
+      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.focus();
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/copy-link.js

@@ -10,6 +10,17 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockControls;
+      var tr = _ref2.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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
     return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
   }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/delete-button.js

@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import { useIntl, injectIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import { Box } from '@atlaskit/primitives/box';
+import Text from '@atlaskit/primitives/text';
+var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
+  var _api$core$sharedState;
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockControls;
+      var tr = _ref2.tr;
+      var selection = tr.selection;
+      var from = selection.$from.pos;
+      var to = selection.$to.pos;
+      if (selection instanceof TextSelection) {
+        from = from - 1;
+        to = to + 1;
+      } else if (isTableSelected(selection)) {
+        var table = findTable(selection);
+        if (table) {
+          from = table.start - 1;
+          to = table.start + table.node.nodeSize;
+        }
+      }
+      tr.deleteRange(from, to);
+      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.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  var onMouseEnter = useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var _api$decorations, _api$decorations$hove;
+      var tr = _ref3.tr;
+      api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || (_api$decorations = _api$decorations.commands) === null || _api$decorations === void 0 || (_api$decorations$hove = _api$decorations.hoverDecoration) === null || _api$decorations$hove === void 0 || _api$decorations$hove.call(_api$decorations, {
+        nodeType: nodeTypes,
+        add: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api, nodeTypes]);
+  var onMouseLeave = function onMouseLeave() {
+    var _api$decorations2, _api$decorations2$rem;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: ""
+    }),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    color: "color.text.danger"
+  }, formatMessage(messages.deleteBlock))));
+};
+export var DeleteDropdownItem = injectIntl(DeleteDropdownItemContent);

package/dist/types/blockMenuPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
+import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
@@ -10,7 +11,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
     dependencies: [
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<UserIntentPlugin>,
-        OptionalPlugin<SelectionPlugin>
+        OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<DecorationsPlugin>
     ];
     pluginConfiguration?: BlockMenuPluginOptions;
 }>;

package/dist/types/ui/delete-button.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> | undefined;
+} & WrappedComponentProps;
+export declare const DeleteDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props>> & {
+    WrappedComponent: React.ComponentType<Props>;
+};
+export {};

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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
+import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
@@ -10,7 +11,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
     dependencies: [
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<UserIntentPlugin>,
-        OptionalPlugin<SelectionPlugin>
+        OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<DecorationsPlugin>
     ];
     pluginConfiguration?: BlockMenuPluginOptions;
 }>;

package/dist/types-ts4.5/ui/delete-button.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> | undefined;
+} & WrappedComponentProps;
+export declare const DeleteDropdownItem: React.FC<import("react-intl-next").WithIntlProps<Props>> & {
+    WrappedComponent: React.ComponentType<Props>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,6 +34,8 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/editor-plugin-block-controls": "^4.2.0",
+		"@atlaskit/editor-plugin-decorations": "^3.1.0",
+		"@atlaskit/editor-plugin-selection": "^3.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
@@ -46,7 +48,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.28.0",
+		"@atlaskit/editor-common": "^107.29.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},