@atlaskit/editor-plugin-block-menu 4.0.17 → 4.0.19

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 (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/block-menu.js +23 -13
  3. package/dist/cjs/ui/format-menu-nested.js +1 -3
  4. package/dist/es2019/ui/block-menu.js +23 -13
  5. package/dist/es2019/ui/format-menu-nested.js +2 -4
  6. package/dist/esm/ui/block-menu.js +23 -13
  7. package/dist/esm/ui/format-menu-nested.js +2 -4
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-menu
2
2
 
3
+ ## 4.0.19
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e3ca1a4b9b932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3ca1a4b9b932) -
8
+ [ux] ED-29489 Remove focus ring when drag handle is clicked and fix menu closing on menu open
9
+ - Updated dependencies
10
+
11
+ ## 4.0.18
12
+
13
+ ### Patch Changes
14
+
15
+ - [`64b94b53839de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64b94b53839de) -
16
+ Fix the outdated Turn into disabled state in block menu
17
+ - Updated dependencies
18
+
3
19
  ## 4.0.17
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/block-menu.js CHANGED
@@ -31,12 +31,17 @@ var DRAG_HANDLE_OFFSET_PADDING = 5;
31
31
  var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
32
32
  var BlockMenuContent = function BlockMenuContent(_ref) {
33
33
  var _api$blockMenu;
34
- var api = _ref.api;
35
- var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
34
+ var api = _ref.api,
35
+ setRef = _ref.setRef;
36
36
  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
37
+ var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
38
+ var ref = function ref(el) {
39
+ setOutsideClickTargetRef(el);
40
+ setRef === null || setRef === void 0 || setRef(el);
41
+ };
37
42
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
38
43
  testId: "editor-block-menu",
39
- ref: setOutsideClickTargetRef,
44
+ ref: ref,
40
45
  xcss: (0, _css.cx)(styles.base)
41
46
  }, /*#__PURE__*/_react.default.createElement(_blockMenuRenderer.BlockMenuRenderer, {
42
47
  components: blockMenuComponents || [],
@@ -82,15 +87,16 @@ var BlockMenu = function BlockMenu(_ref2) {
82
87
  onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
83
88
  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
84
89
  var prevIsMenuOpenRef = (0, _react.useRef)(false);
85
- 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;
90
+ var popupRef = (0, _react.useRef)(undefined);
91
+ 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 || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== 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;
86
92
  var hasSelection = !!editorView && !editorView.state.selection.empty;
87
93
  // hasSelection true, always show block menu
88
94
  // hasSelection false, only show block menu when empty line experiment is enabled
89
95
  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
90
- var selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
96
+ var selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
91
97
  (0, _react.useEffect)(function () {
92
98
  var _api$userIntent;
93
- if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
99
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
94
100
  return;
95
101
  }
96
102
 
@@ -110,7 +116,7 @@ var BlockMenu = function BlockMenu(_ref2) {
110
116
  // Update the previous state
111
117
  prevIsMenuOpenRef.current = isMenuOpen;
112
118
  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'));
113
- }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
119
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
114
120
  if (!isMenuOpen) {
115
121
  return null;
116
122
  }
@@ -130,10 +136,15 @@ var BlockMenu = function BlockMenu(_ref2) {
130
136
  return tr;
131
137
  });
132
138
  };
133
- if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
139
+ if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
134
140
  closeMenu();
135
141
  return null;
136
142
  }
143
+ var setRef = function setRef(el) {
144
+ if (el) {
145
+ popupRef.current = el;
146
+ }
147
+ };
137
148
  if (targetHandleRef instanceof HTMLElement) {
138
149
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
139
150
  alignX: 'right',
@@ -151,14 +162,13 @@ var BlockMenu = function BlockMenu(_ref2) {
151
162
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
152
163
  ,
153
164
  stick: true,
154
- focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
155
- initialFocus: undefined
156
- } : {
157
- initialFocus: targetHandleRef
165
+ focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
166
+ initialFocus: openedViaKeyboard ? undefined : targetHandleRef
158
167
  } : undefined,
159
168
  offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
160
169
  }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
161
- api: api
170
+ api: api,
171
+ setRef: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
162
172
  }));
163
173
  } else {
164
174
  return null;
package/dist/cjs/ui/format-menu-nested.js CHANGED
@@ -24,9 +24,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
24
24
  var _useIntl = (0, _reactIntlNext.useIntl)(),
25
25
  formatMessage = _useIntl.formatMessage;
26
26
  var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.turnInto) : formatMessage(_blockMenu.messages.turnInto);
27
- var isDisabled = (0, _react.useMemo)(function () {
28
- return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
29
- }, [api]);
27
+ var isDisabled = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
30
28
  var handleClick = (0, _react.useCallback)(function () {
31
29
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
32
30
  var _api$analytics;
package/dist/es2019/ui/block-menu.js CHANGED
@@ -22,14 +22,19 @@ const DEFAULT_MENU_WIDTH = 230;
22
22
  const DRAG_HANDLE_OFFSET_PADDING = 5;
23
23
  const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
24
24
  const BlockMenuContent = ({
25
- api
25
+ api,
26
+ setRef
26
27
  }) => {
27
28
  var _api$blockMenu;
28
- const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
29
29
  const blockMenuComponents = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
30
+ const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
31
+ const ref = el => {
32
+ setOutsideClickTargetRef(el);
33
+ setRef === null || setRef === void 0 ? void 0 : setRef(el);
34
+ };
30
35
  return /*#__PURE__*/React.createElement(Box, {
31
36
  testId: "editor-block-menu",
32
- ref: setOutsideClickTargetRef,
37
+ ref: ref,
33
38
  xcss: cx(styles.base)
34
39
  }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
35
40
  components: blockMenuComponents || [],
@@ -72,15 +77,16 @@ const BlockMenu = ({
72
77
  } = useBlockMenu();
73
78
  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);
74
79
  const prevIsMenuOpenRef = useRef(false);
75
- 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;
80
+ const popupRef = useRef(undefined);
81
+ const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== 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;
76
82
  const hasSelection = !!editorView && !editorView.state.selection.empty;
77
83
  // hasSelection true, always show block menu
78
84
  // hasSelection false, only show block menu when empty line experiment is enabled
79
85
  const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
80
- const selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
86
+ const selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
81
87
  useEffect(() => {
82
88
  var _api$userIntent;
83
- if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
89
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
84
90
  return;
85
91
  }
86
92
 
@@ -100,7 +106,7 @@ const BlockMenu = ({
100
106
  // Update the previous state
101
107
  prevIsMenuOpenRef.current = isMenuOpen;
102
108
  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'));
103
- }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
109
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
104
110
  if (!isMenuOpen) {
105
111
  return null;
106
112
  }
@@ -121,10 +127,15 @@ const BlockMenu = ({
121
127
  return tr;
122
128
  });
123
129
  };
124
- if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
130
+ if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
125
131
  closeMenu();
126
132
  return null;
127
133
  }
134
+ const setRef = el => {
135
+ if (el) {
136
+ popupRef.current = el;
137
+ }
138
+ };
128
139
  if (targetHandleRef instanceof HTMLElement) {
129
140
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
130
141
  alignX: 'right',
@@ -142,14 +153,13 @@ const BlockMenu = ({
142
153
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
143
154
  ,
144
155
  stick: true,
145
- focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
146
- initialFocus: undefined
147
- } : {
148
- initialFocus: targetHandleRef
156
+ focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
157
+ initialFocus: openedViaKeyboard ? undefined : targetHandleRef
149
158
  } : undefined,
150
159
  offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
151
160
  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
152
- api: api
161
+ api: api,
162
+ setRef: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
153
163
  }));
154
164
  } else {
155
165
  return null;
package/dist/es2019/ui/format-menu-nested.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo, useCallback } from 'react';
1
+ import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
4
  import { messages } from '@atlaskit/editor-common/block-menu';
@@ -17,9 +17,7 @@ export const FormatMenuComponent = ({
17
17
  formatMessage
18
18
  } = useIntl();
19
19
  const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
20
- const isDisabled = useMemo(() => {
21
- return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
22
- }, [api]);
20
+ const isDisabled = fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
23
21
  const handleClick = useCallback(() => {
24
22
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
25
23
  tr
package/dist/esm/ui/block-menu.js CHANGED
@@ -23,12 +23,17 @@ var DRAG_HANDLE_OFFSET_PADDING = 5;
23
23
  var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
24
24
  var BlockMenuContent = function BlockMenuContent(_ref) {
25
25
  var _api$blockMenu;
26
- var api = _ref.api;
27
- var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
26
+ var api = _ref.api,
27
+ setRef = _ref.setRef;
28
28
  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
29
+ var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
30
+ var ref = function ref(el) {
31
+ setOutsideClickTargetRef(el);
32
+ setRef === null || setRef === void 0 || setRef(el);
33
+ };
29
34
  return /*#__PURE__*/React.createElement(Box, {
30
35
  testId: "editor-block-menu",
31
- ref: setOutsideClickTargetRef,
36
+ ref: ref,
32
37
  xcss: cx(styles.base)
33
38
  }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
34
39
  components: blockMenuComponents || [],
@@ -74,15 +79,16 @@ var BlockMenu = function BlockMenu(_ref2) {
74
79
  onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
75
80
  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
76
81
  var prevIsMenuOpenRef = useRef(false);
77
- 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;
82
+ var popupRef = useRef(undefined);
83
+ var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== 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;
78
84
  var hasSelection = !!editorView && !editorView.state.selection.empty;
79
85
  // hasSelection true, always show block menu
80
86
  // hasSelection false, only show block menu when empty line experiment is enabled
81
87
  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
82
- var selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
88
+ var selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
83
89
  useEffect(function () {
84
90
  var _api$userIntent;
85
- if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
91
+ if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
86
92
  return;
87
93
  }
88
94
 
@@ -102,7 +108,7 @@ var BlockMenu = function BlockMenu(_ref2) {
102
108
  // Update the previous state
103
109
  prevIsMenuOpenRef.current = isMenuOpen;
104
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'));
105
- }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
111
+ }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
106
112
  if (!isMenuOpen) {
107
113
  return null;
108
114
  }
@@ -122,10 +128,15 @@ var BlockMenu = function BlockMenu(_ref2) {
122
128
  return tr;
123
129
  });
124
130
  };
125
- if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
131
+ if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
126
132
  closeMenu();
127
133
  return null;
128
134
  }
135
+ var setRef = function setRef(el) {
136
+ if (el) {
137
+ popupRef.current = el;
138
+ }
139
+ };
129
140
  if (targetHandleRef instanceof HTMLElement) {
130
141
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
131
142
  alignX: 'right',
@@ -143,14 +154,13 @@ var BlockMenu = function BlockMenu(_ref2) {
143
154
  preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
144
155
  ,
145
156
  stick: true,
146
- focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
147
- initialFocus: undefined
148
- } : {
149
- initialFocus: targetHandleRef
157
+ focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
158
+ initialFocus: openedViaKeyboard ? undefined : targetHandleRef
150
159
  } : undefined,
151
160
  offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
152
161
  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
153
- api: api
162
+ api: api,
163
+ setRef: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
154
164
  }));
155
165
  } else {
156
166
  return null;
package/dist/esm/ui/format-menu-nested.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo, useCallback } from 'react';
1
+ import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
4
  import { messages } from '@atlaskit/editor-common/block-menu';
@@ -15,9 +15,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
15
15
  var _useIntl = useIntl(),
16
16
  formatMessage = _useIntl.formatMessage;
17
17
  var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
18
- var isDisabled = useMemo(function () {
19
- return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
20
- }, [api]);
18
+ var isDisabled = fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
21
19
  var handleClick = useCallback(function () {
22
20
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
23
21
  var _api$analytics;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-menu",
3
- "version": "4.0.17",
3
+ "version": "4.0.19",
4
4
  "description": "BlockMenu plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,16 +39,16 @@
39
39
  "@atlaskit/editor-shared-styles": "^3.6.0",
40
40
  "@atlaskit/editor-tables": "^2.9.0",
41
41
  "@atlaskit/editor-toolbar": "^0.14.0",
42
- "@atlaskit/icon": "^28.4.0",
43
- "@atlaskit/icon-lab": "^5.9.0",
42
+ "@atlaskit/icon": "^28.5.0",
43
+ "@atlaskit/icon-lab": "^5.10.0",
44
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
45
  "@atlaskit/primitives": "^14.15.0",
46
- "@atlaskit/tmp-editor-statsig": "^13.4.0",
46
+ "@atlaskit/tmp-editor-statsig": "^13.5.0",
47
47
  "@atlaskit/tokens": "^6.4.0",
48
48
  "@babel/runtime": "^7.0.0"
49
49
  },
50
50
  "peerDependencies": {
51
- "@atlaskit/editor-common": "^110.7.0",
51
+ "@atlaskit/editor-common": "^110.8.0",
52
52
  "react": "^18.2.0",
53
53
  "react-intl-next": "npm:react-intl@^5.18.1"
54
54
  },