@atlaskit/editor-plugin-block-menu 5.0.10 → 5.0.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.0.11
+
+### Patch Changes
+
+- [`bf1f847655683`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf1f847655683) -
+  ED-29512: Fixed not able to delete node when block menu is visible
+- Updated dependencies
+
 ## 5.0.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -6,10 +6,7 @@
 		"rootDir": "../",
 		"composite": true
 	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
+	"include": ["../src/**/*.ts", "../src/**/*.tsx"],
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",

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

@@ -14,6 +14,7 @@ var _css = require("@atlaskit/css");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
@@ -185,15 +186,28 @@ var BlockMenu = function BlockMenu(_ref4) {
   if (!isMenuOpen) {
     return null;
   }
-  var closeMenu = function closeMenu() {
+  var handleBackspaceDeleteKeydown = function handleBackspaceDeleteKeydown() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
-      var _api$blockControls, _api$userIntent3;
+      var _api$blockControls;
       var tr = _ref6.tr;
+      (0, _selection.deleteSelectedRange)(tr);
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
         tr: tr
       });
+      return tr;
+    });
+  };
+  var closeMenu = function closeMenu() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
+      var _api$blockControls2, _api$userIntent3;
+      var tr = _ref7.tr;
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
       onDropdownOpenChanged(false);
       api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 || _api$userIntent3.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
         tr: tr
@@ -222,6 +236,7 @@ var BlockMenu = function BlockMenu(_ref4) {
       ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
+      handleBackspaceDeleteKeydown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleBackspaceDeleteKeydown : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
@@ -232,8 +247,10 @@ var BlockMenu = function BlockMenu(_ref4) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
-        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
+      focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && openedViaKeyboard ?
+      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+      {
+        initialFocus: undefined
       } : undefined,
       offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {

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

@@ -11,6 +11,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
+var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -40,20 +41,24 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
         eventType: _analytics.EVENT_TYPE.UI
       };
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(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.pos;
-          to = table.pos + table.node.nodeSize;
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        (0, _selection.deleteSelectedRange)(tr);
+      } else {
+        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.pos;
+            to = table.pos + table.node.nodeSize;
+          }
         }
+        tr.deleteRange(from, to);
       }
-      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
       })({

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

@@ -7,6 +7,7 @@ import { cx } from '@atlaskit/css';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 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';
@@ -175,16 +176,30 @@ const BlockMenu = ({
   if (!isMenuOpen) {
     return null;
   }
-  const closeMenu = () => {
+  const handleBackspaceDeleteKeydown = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
-      var _api$blockControls, _api$userIntent3;
+      var _api$blockControls;
+      deleteSelectedRange(tr);
       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
       });
+      return tr;
+    });
+  };
+  const closeMenu = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls2, _api$userIntent3;
+      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
       onDropdownOpenChanged(false);
       api === null || api === void 0 ? void 0 : (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 ? void 0 : _api$userIntent3.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
         tr
@@ -213,6 +228,7 @@ const BlockMenu = ({
       ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
+      handleBackspaceDeleteKeydown: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleBackspaceDeleteKeydown : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
@@ -223,8 +239,10 @@ const BlockMenu = ({
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
-        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && openedViaKeyboard ?
+      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+      {
+        initialFocus: undefined
       } : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {

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

@@ -3,6 +3,7 @@ import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
@@ -34,20 +35,24 @@ const DeleteDropdownItemContent = ({
         eventType: EVENT_TYPE.UI
       };
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
-      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.pos;
-          to = table.pos + table.node.nodeSize;
+      if (expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        deleteSelectedRange(tr);
+      } else {
+        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.pos;
+            to = table.pos + table.node.nodeSize;
+          }
         }
+        tr.deleteRange(from, to);
       }
-      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
       })({

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

@@ -7,6 +7,7 @@ import { cx } from '@atlaskit/css';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 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';
@@ -177,15 +178,28 @@ var BlockMenu = function BlockMenu(_ref4) {
   if (!isMenuOpen) {
     return null;
   }
-  var closeMenu = function closeMenu() {
+  var handleBackspaceDeleteKeydown = function handleBackspaceDeleteKeydown() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
-      var _api$blockControls, _api$userIntent3;
+      var _api$blockControls;
       var tr = _ref6.tr;
+      deleteSelectedRange(tr);
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
         tr: tr
       });
+      return tr;
+    });
+  };
+  var closeMenu = function closeMenu() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
+      var _api$blockControls2, _api$userIntent3;
+      var tr = _ref7.tr;
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
       onDropdownOpenChanged(false);
       api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 || _api$userIntent3.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
         tr: tr
@@ -214,6 +228,7 @@ var BlockMenu = function BlockMenu(_ref4) {
       ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
+      handleBackspaceDeleteKeydown: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleBackspaceDeleteKeydown : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
@@ -224,8 +239,10 @@ var BlockMenu = function BlockMenu(_ref4) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
-        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && openedViaKeyboard ?
+      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+      {
+        initialFocus: undefined
       } : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {

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

@@ -3,6 +3,7 @@ import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
@@ -31,20 +32,24 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
         eventType: EVENT_TYPE.UI
       };
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(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.pos;
-          to = table.pos + table.node.nodeSize;
+      if (expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        deleteSelectedRange(tr);
+      } else {
+        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.pos;
+            to = table.pos + table.node.nodeSize;
+          }
         }
+        tr.deleteRange(from, to);
       }
-      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
       })({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "5.0.10",
+	"version": "5.0.11",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",