@atlaskit/editor-plugin-block-menu 3.2.9 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/block-menu-renderer.js +5 -2
  3. package/dist/cjs/ui/block-menu.js +5 -4
  4. package/dist/cjs/ui/delete-button.js +7 -4
  5. package/dist/cjs/ui/format-menu-nested.js +2 -1
  6. package/dist/es2019/ui/block-menu-renderer.js +5 -2
  7. package/dist/es2019/ui/block-menu.js +5 -4
  8. package/dist/es2019/ui/delete-button.js +7 -4
  9. package/dist/es2019/ui/format-menu-nested.js +2 -1
  10. package/dist/esm/ui/block-menu-renderer.js +5 -2
  11. package/dist/esm/ui/block-menu.js +5 -4
  12. package/dist/esm/ui/delete-button.js +7 -4
  13. package/dist/esm/ui/format-menu-nested.js +2 -1
  14. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-block-menu
2
2
 
3
+ ## 4.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f4c0936dc05fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4c0936dc05fe) -
8
+ ED-29391 Add keyboard support for block menu
9
+ - Updated dependencies
10
+
11
+ ## 4.0.0
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 3.2.9
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/block-menu-renderer.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.BlockMenuRenderer = void 0;
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
+ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
11
12
  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); }
12
13
  var NoOp = function NoOp(props) {
13
14
  return null;
@@ -49,7 +50,9 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
49
50
  var menuSections = getSortedNonNestedSections(components);
50
51
  var menuItems = components.filter(isMenuItem);
51
52
  var nestedMenus = components.filter(isNestedMenu);
52
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
53
+ return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
54
+ type: _uiMenu.ArrowKeyNavigationType.MENU
55
+ }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
53
56
  // Get all items for the current section, including nested menus, and sort them by rank
54
57
  var currentSectionItemsSorted = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key);
55
58
  if (currentSectionItemsSorted.length === 0) {
@@ -90,5 +93,5 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
90
93
  return /*#__PURE__*/_react.default.createElement(SectionComponent, {
91
94
  key: section.key
92
95
  }, children);
93
- }));
96
+ })));
94
97
  };
package/dist/cjs/ui/block-menu.js CHANGED
@@ -83,13 +83,13 @@ var BlockMenu = function BlockMenu(_ref2) {
83
83
  var prevIsMenuOpenRef = (0, _react.useRef)(false);
84
84
  var hasFocus = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
85
85
  var hasSelection = !!editorView && !editorView.state.selection.empty;
86
-
87
86
  // hasSelection true, always show block menu
88
87
  // hasSelection false, only show block menu when empty line experiment is enabled
89
88
  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
89
+ var selectedByShortcutORDragHandle = isSelectedViaDragHandle;
90
90
  (0, _react.useEffect)(function () {
91
91
  var _api$userIntent;
92
- if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
92
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
93
93
  return;
94
94
  }
95
95
 
@@ -108,7 +108,7 @@ var BlockMenu = function BlockMenu(_ref2) {
108
108
  // Update the previous state
109
109
  prevIsMenuOpenRef.current = isMenuOpen;
110
110
  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'));
111
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
111
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
112
112
  if (!isMenuOpen) {
113
113
  return null;
114
114
  }
@@ -128,7 +128,7 @@ var BlockMenu = function BlockMenu(_ref2) {
128
128
  return tr;
129
129
  });
130
130
  };
131
- if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
131
+ if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
132
132
  closeMenu();
133
133
  return null;
134
134
  }
@@ -149,6 +149,7 @@ var BlockMenu = function BlockMenu(_ref2) {
149
149
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
150
150
  ,
151
151
  stick: true,
152
+ focusTrap: true,
152
153
  offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
153
154
  }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
154
155
  api: api
package/dist/cjs/ui/delete-button.js CHANGED
@@ -18,6 +18,7 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
18
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
19
  var _box = require("@atlaskit/primitives/box");
20
20
  var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
21
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
21
22
  var _blockMenuProvider = require("./block-menu-provider");
22
23
  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); }
23
24
  var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
@@ -64,7 +65,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
64
65
  });
65
66
  api === null || api === void 0 || api.core.actions.focus();
66
67
  };
67
- var onMouseEnter = (0, _react.useCallback)(function () {
68
+ var onShowHoverDecoration = (0, _react.useCallback)(function () {
68
69
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
69
70
  var _api$decorations, _api$decorations$hove;
70
71
  var tr = _ref3.tr;
@@ -77,14 +78,16 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
77
78
  return tr;
78
79
  });
79
80
  }, [api, nodeTypes]);
80
- var onMouseLeave = function onMouseLeave() {
81
+ var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
81
82
  var _api$decorations2, _api$decorations2$rem;
82
83
  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));
83
84
  };
84
85
  var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.deleteBlock) : formatMessage(_blockMenu.messages.deleteBlock);
85
86
  return /*#__PURE__*/_react.default.createElement(_box.Box, {
86
- onMouseEnter: onMouseEnter,
87
- onMouseLeave: onMouseLeave
87
+ onMouseEnter: onShowHoverDecoration,
88
+ onMouseLeave: onRemoveHoverDecoration,
89
+ onFocus: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
90
+ onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
88
91
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
89
92
  elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
90
93
  color: "var(--ds-icon-danger, #C9372C)",
package/dist/cjs/ui/format-menu-nested.js CHANGED
@@ -50,6 +50,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
50
50
  }),
51
51
  enableMaxHeight: true,
52
52
  isDisabled: isDisabled,
53
- onClick: handleClick
53
+ onClick: handleClick,
54
+ dropdownTestId: "editor-nested-turn-into-menu"
54
55
  }, children);
55
56
  };
package/dist/es2019/ui/block-menu-renderer.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { Fragment } from 'react';
2
+ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
2
3
  const NoOp = props => null;
3
4
  const isNonNestedMenuSection = component => {
4
5
  return component.type === 'block-menu-section' && !('parent' in component);
@@ -28,7 +29,9 @@ export const BlockMenuRenderer = ({
28
29
  const menuSections = getSortedNonNestedSections(components);
29
30
  const menuItems = components.filter(isMenuItem);
30
31
  const nestedMenus = components.filter(isNestedMenu);
31
- return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
32
+ return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
33
+ type: ArrowKeyNavigationType.MENU
34
+ }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
32
35
  // Get all items for the current section, including nested menus, and sort them by rank
33
36
  const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
34
37
  if (currentSectionItemsSorted.length === 0) {
@@ -69,5 +72,5 @@ export const BlockMenuRenderer = ({
69
72
  return /*#__PURE__*/React.createElement(SectionComponent, {
70
73
  key: section.key
71
74
  }, children);
72
- }));
75
+ })));
73
76
  };
package/dist/es2019/ui/block-menu.js CHANGED
@@ -73,13 +73,13 @@ const BlockMenu = ({
73
73
  const prevIsMenuOpenRef = useRef(false);
74
74
  const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref !== void 0 ? _ref : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
75
75
  const hasSelection = !!editorView && !editorView.state.selection.empty;
76
-
77
76
  // hasSelection true, always show block menu
78
77
  // hasSelection false, only show block menu when empty line experiment is enabled
79
78
  const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
79
+ const selectedByShortcutORDragHandle = isSelectedViaDragHandle;
80
80
  useEffect(() => {
81
81
  var _api$userIntent;
82
- if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
82
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
83
83
  return;
84
84
  }
85
85
 
@@ -98,7 +98,7 @@ const BlockMenu = ({
98
98
  // Update the previous state
99
99
  prevIsMenuOpenRef.current = isMenuOpen;
100
100
  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'));
101
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
101
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
102
102
  if (!isMenuOpen) {
103
103
  return null;
104
104
  }
@@ -119,7 +119,7 @@ const BlockMenu = ({
119
119
  return tr;
120
120
  });
121
121
  };
122
- if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
122
+ if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
123
123
  closeMenu();
124
124
  return null;
125
125
  }
@@ -140,6 +140,7 @@ const BlockMenu = ({
140
140
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
141
141
  ,
142
142
  stick: true,
143
+ focusTrap: true,
143
144
  offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
144
145
  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
145
146
  api: api
package/dist/es2019/ui/delete-button.js CHANGED
@@ -10,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import { Box } from '@atlaskit/primitives/box';
12
12
  import Text from '@atlaskit/primitives/text';
13
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
13
14
  import { useBlockMenu } from './block-menu-provider';
14
15
  const DeleteDropdownItemContent = ({
15
16
  api
@@ -59,7 +60,7 @@ const DeleteDropdownItemContent = ({
59
60
  });
60
61
  api === null || api === void 0 ? void 0 : api.core.actions.focus();
61
62
  };
62
- const onMouseEnter = useCallback(() => {
63
+ const onShowHoverDecoration = useCallback(() => {
63
64
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
64
65
  tr
65
66
  }) => {
@@ -73,14 +74,16 @@ const DeleteDropdownItemContent = ({
73
74
  return tr;
74
75
  });
75
76
  }, [api, nodeTypes]);
76
- const onMouseLeave = () => {
77
+ const onRemoveHoverDecoration = () => {
77
78
  var _api$decorations2, _api$decorations2$com, _api$decorations2$com2;
78
79
  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));
79
80
  };
80
81
  const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
81
82
  return /*#__PURE__*/React.createElement(Box, {
82
- onMouseEnter: onMouseEnter,
83
- onMouseLeave: onMouseLeave
83
+ onMouseEnter: onShowHoverDecoration,
84
+ onMouseLeave: onRemoveHoverDecoration,
85
+ onFocus: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
86
+ onBlur: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
84
87
  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
85
88
  elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
86
89
  color: "var(--ds-icon-danger, #C9372C)",
package/dist/es2019/ui/format-menu-nested.js CHANGED
@@ -44,6 +44,7 @@ export const FormatMenuComponent = ({
44
44
  }),
45
45
  enableMaxHeight: true,
46
46
  isDisabled: isDisabled,
47
- onClick: handleClick
47
+ onClick: handleClick,
48
+ dropdownTestId: "editor-nested-turn-into-menu"
48
49
  }, children);
49
50
  };
package/dist/esm/ui/block-menu-renderer.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import React, { Fragment } from 'react';
3
+ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
3
4
  var NoOp = function NoOp(props) {
4
5
  return null;
5
6
  };
@@ -40,7 +41,9 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
40
41
  var menuSections = getSortedNonNestedSections(components);
41
42
  var menuItems = components.filter(isMenuItem);
42
43
  var nestedMenus = components.filter(isNestedMenu);
43
- return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
44
+ return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
45
+ type: ArrowKeyNavigationType.MENU
46
+ }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
44
47
  // Get all items for the current section, including nested menus, and sort them by rank
45
48
  var currentSectionItemsSorted = getSortedChildren([].concat(_toConsumableArray(menuItems), _toConsumableArray(nestedMenus)), section.key);
46
49
  if (currentSectionItemsSorted.length === 0) {
@@ -81,5 +84,5 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
81
84
  return /*#__PURE__*/React.createElement(SectionComponent, {
82
85
  key: section.key
83
86
  }, children);
84
- }));
87
+ })));
85
88
  };
package/dist/esm/ui/block-menu.js CHANGED
@@ -75,13 +75,13 @@ var BlockMenu = function BlockMenu(_ref2) {
75
75
  var prevIsMenuOpenRef = useRef(false);
76
76
  var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
77
77
  var hasSelection = !!editorView && !editorView.state.selection.empty;
78
-
79
78
  // hasSelection true, always show block menu
80
79
  // hasSelection false, only show block menu when empty line experiment is enabled
81
80
  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
81
+ var selectedByShortcutORDragHandle = isSelectedViaDragHandle;
82
82
  useEffect(function () {
83
83
  var _api$userIntent;
84
- if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
84
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
85
85
  return;
86
86
  }
87
87
 
@@ -100,7 +100,7 @@ var BlockMenu = function BlockMenu(_ref2) {
100
100
  // Update the previous state
101
101
  prevIsMenuOpenRef.current = isMenuOpen;
102
102
  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'));
103
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
103
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
104
104
  if (!isMenuOpen) {
105
105
  return null;
106
106
  }
@@ -120,7 +120,7 @@ var BlockMenu = function BlockMenu(_ref2) {
120
120
  return tr;
121
121
  });
122
122
  };
123
- if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
123
+ if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
124
124
  closeMenu();
125
125
  return null;
126
126
  }
@@ -141,6 +141,7 @@ var BlockMenu = function BlockMenu(_ref2) {
141
141
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
142
142
  ,
143
143
  stick: true,
144
+ focusTrap: true,
144
145
  offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
145
146
  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
146
147
  api: api
package/dist/esm/ui/delete-button.js CHANGED
@@ -10,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import { Box } from '@atlaskit/primitives/box';
12
12
  import Text from '@atlaskit/primitives/text';
13
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
13
14
  import { useBlockMenu } from './block-menu-provider';
14
15
  var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
15
16
  var _api$core$sharedState;
@@ -55,7 +56,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
55
56
  });
56
57
  api === null || api === void 0 || api.core.actions.focus();
57
58
  };
58
- var onMouseEnter = useCallback(function () {
59
+ var onShowHoverDecoration = useCallback(function () {
59
60
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
60
61
  var _api$decorations, _api$decorations$hove;
61
62
  var tr = _ref3.tr;
@@ -68,14 +69,16 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
68
69
  return tr;
69
70
  });
70
71
  }, [api, nodeTypes]);
71
- var onMouseLeave = function onMouseLeave() {
72
+ var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
72
73
  var _api$decorations2, _api$decorations2$rem;
73
74
  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));
74
75
  };
75
76
  var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
76
77
  return /*#__PURE__*/React.createElement(Box, {
77
- onMouseEnter: onMouseEnter,
78
- onMouseLeave: onMouseLeave
78
+ onMouseEnter: onShowHoverDecoration,
79
+ onMouseLeave: onRemoveHoverDecoration,
80
+ onFocus: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
81
+ onBlur: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
79
82
  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
80
83
  elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
81
84
  color: "var(--ds-icon-danger, #C9372C)",
package/dist/esm/ui/format-menu-nested.js CHANGED
@@ -41,6 +41,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
41
41
  }),
42
42
  enableMaxHeight: true,
43
43
  isDisabled: isDisabled,
44
- onClick: handleClick
44
+ onClick: handleClick,
45
+ dropdownTestId: "editor-nested-turn-into-menu"
45
46
  }, children);
46
47
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-menu",
3
- "version": "3.2.9",
3
+ "version": "4.0.1",
4
4
  "description": "BlockMenu plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,24 +30,24 @@
30
30
  "dependencies": {
31
31
  "@atlaskit/css": "^0.14.0",
32
32
  "@atlaskit/dropdown-menu": "^16.3.0",
33
- "@atlaskit/editor-plugin-block-controls": "^6.4.0",
34
- "@atlaskit/editor-plugin-decorations": "^5.0.0",
35
- "@atlaskit/editor-plugin-selection": "^5.0.0",
36
- "@atlaskit/editor-plugin-user-intent": "^3.0.0",
33
+ "@atlaskit/editor-plugin-block-controls": "^7.1.0",
34
+ "@atlaskit/editor-plugin-decorations": "^6.1.0",
35
+ "@atlaskit/editor-plugin-selection": "^6.0.0",
36
+ "@atlaskit/editor-plugin-user-intent": "^4.0.0",
37
37
  "@atlaskit/editor-prosemirror": "7.0.0",
38
38
  "@atlaskit/editor-shared-styles": "^3.6.0",
39
39
  "@atlaskit/editor-tables": "^2.9.0",
40
- "@atlaskit/editor-toolbar": "^0.9.0",
40
+ "@atlaskit/editor-toolbar": "^0.10.0",
41
41
  "@atlaskit/icon": "^28.3.0",
42
42
  "@atlaskit/icon-lab": "^5.7.0",
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
44
  "@atlaskit/primitives": "^14.15.0",
45
- "@atlaskit/tmp-editor-statsig": "^12.31.0",
45
+ "@atlaskit/tmp-editor-statsig": "^12.32.0",
46
46
  "@atlaskit/tokens": "^6.3.0",
47
47
  "@babel/runtime": "^7.0.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "@atlaskit/editor-common": "^109.16.0",
50
+ "@atlaskit/editor-common": "^110.1.0",
51
51
  "react": "^18.2.0",
52
52
  "react-intl-next": "npm:react-intl@^5.18.1"
53
53
  },