@atlaskit/editor-plugin-block-menu 4.0.18 → 4.0.20

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 4.0.20
+
+### Patch Changes
+
+- [`e053b5e610ac2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e053b5e610ac2) -
+  [ux] EDITOR-1652 add convert to sync block to block menu
+- Updated dependencies
+
+## 4.0.19
+
+### Patch Changes
+
+- [`e3ca1a4b9b932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3ca1a4b9b932) -
+  [ux] ED-29489 Remove focus ring when drag handle is clicked and fix menu closing on menu open
+- Updated dependencies
+
 ## 4.0.18
 
 ### Patch Changes

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

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _addBlocksSection = require("./add-blocks-section");
 var _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _copyLink = require("./copy-link");
 var _copySection = require("./copy-section");
@@ -103,9 +102,9 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     rank: _blockMenu.BLOCK_MENU_SECTION_RANK[_blockMenu.ADD_BLOCKS_MENU_SECTION.key],
     component: function component(_ref5) {
       var children = _ref5.children;
-      return /*#__PURE__*/_react.default.createElement(_addBlocksSection.AddBlocksSection, {
-        api: api
-      }, " ", children, " ");
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }] : []), [{
     type: 'block-menu-section',

package/dist/cjs/ui/block-menu.compiled.css

@@ -1,3 +1,5 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -24,20 +24,26 @@ var _blockMenuProvider = require("./block-menu-provider");
 var _blockMenuRenderer = require("./block-menu-renderer");
 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 styles = {
-  base: "_2rko12b0 _bfhk1bhr _16qs1cd0"
+  base: "_2rko12b0 _bfhk1bhr _16qs1cd0",
+  emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
 };
 var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var _api$blockMenu;
-  var api = _ref.api;
-  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var api = _ref.api,
+    setRef = _ref.setRef;
   var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var ref = function ref(el) {
+    setOutsideClickTargetRef(el);
+    setRef === null || setRef === void 0 || setRef(el);
+  };
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     testId: "editor-block-menu",
-    ref: setOutsideClickTargetRef,
-    xcss: (0, _css.cx)(styles.base)
+    ref: ref,
+    xcss: (0, _css.cx)(styles.base, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_synced_block', 'isEnabled', true) && styles.emptyMenuSectionStyles)
   }, /*#__PURE__*/_react.default.createElement(_blockMenuRenderer.BlockMenuRenderer, {
     components: blockMenuComponents || [],
     fallbacks: {
@@ -82,15 +88,16 @@ var BlockMenu = function BlockMenu(_ref2) {
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
   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);
   var prevIsMenuOpenRef = (0, _react.useRef)(false);
-  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;
+  var popupRef = (0, _react.useRef)(undefined);
+  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;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
-  var selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+  var selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
   (0, _react.useEffect)(function () {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -110,7 +117,7 @@ var BlockMenu = function BlockMenu(_ref2) {
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
   if (!isMenuOpen) {
     return null;
   }
@@ -130,10 +137,15 @@ var BlockMenu = function BlockMenu(_ref2) {
       return tr;
     });
   };
-  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
+  var setRef = function setRef(el) {
+    if (el) {
+      popupRef.current = el;
+    }
+  };
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
       alignX: 'right',
@@ -151,14 +163,13 @@ var BlockMenu = function BlockMenu(_ref2) {
       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) ? openedViaKeyboard ? {
-        initialFocus: undefined
-      } : {
-        initialFocus: targetHandleRef
+      focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
+        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
       } : undefined,
       offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
-      api: api
+      api: api,
+      setRef: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
     }));
   } else {
     return null;

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

@@ -23,6 +23,6 @@ var CopySection = exports.CopySection = function CopySection(_ref) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-    hasSeparator: !isFormatMenuHidden()
+    hasSeparator: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_synced_block', 'isEnabled', true) ? true : !isFormatMenuHidden()
   }, children);
 };

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { ADD_BLOCKS_MENU_SECTION, MOVE_UP_MENU_ITEM, MOVE_UP_DOWN_MENU_SECTION, MOVE_DOWN_MENU_ITEM, MOVE_BLOCK_SECTION_RANK, PRIMARY_MENU_SECTION, BLOCK_MENU_SECTION_RANK, COPY_MENU_SECTION, COPY_BLOCK_MENU_ITEM, COPY_MENU_SECTION_RANK, COPY_LINK_MENU_ITEM, DELETE_MENU_SECTION, DELETE_MENU_ITEM, DELETE_SECTION_RANK, NESTED_FORMAT_MENU_SECTION, NESTED_FORMAT_MENU } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { AddBlocksSection } from './add-blocks-section';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
@@ -93,9 +92,9 @@ export const getBlockMenuComponents = ({
     rank: BLOCK_MENU_SECTION_RANK[ADD_BLOCKS_MENU_SECTION.key],
     component: ({
       children
-    }) => /*#__PURE__*/React.createElement(AddBlocksSection, {
-      api: api
-    }, " ", children, " ")
+    }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+      hasSeparator: true
+    }, children)
   }] : []), {
     type: 'block-menu-section',
     key: COPY_MENU_SECTION.key,

package/dist/es2019/ui/block-menu.compiled.css

@@ -1,3 +1,5 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -16,21 +16,27 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer';
 const styles = {
-  base: "_2rko12b0 _bfhk1bhr _16qs1cd0"
+  base: "_2rko12b0 _bfhk1bhr _16qs1cd0",
+  emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
 };
 const DEFAULT_MENU_WIDTH = 230;
 const DRAG_HANDLE_OFFSET_PADDING = 5;
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const BlockMenuContent = ({
-  api
+  api,
+  setRef
 }) => {
   var _api$blockMenu;
-  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   const blockMenuComponents = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const ref = el => {
+    setOutsideClickTargetRef(el);
+    setRef === null || setRef === void 0 ? void 0 : setRef(el);
+  };
   return /*#__PURE__*/React.createElement(Box, {
     testId: "editor-block-menu",
-    ref: setOutsideClickTargetRef,
-    xcss: cx(styles.base)
+    ref: ref,
+    xcss: cx(styles.base, expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) && styles.emptyMenuSectionStyles)
   }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
     components: blockMenuComponents || [],
     fallbacks: {
@@ -72,15 +78,16 @@ const BlockMenu = ({
   } = useBlockMenu();
   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);
   const prevIsMenuOpenRef = useRef(false);
-  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;
+  const popupRef = useRef(undefined);
+  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;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
-  const selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+  const selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
   useEffect(() => {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -100,7 +107,7 @@ const BlockMenu = ({
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
   if (!isMenuOpen) {
     return null;
   }
@@ -121,10 +128,15 @@ const BlockMenu = ({
       return tr;
     });
   };
-  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
+  const setRef = el => {
+    if (el) {
+      popupRef.current = el;
+    }
+  };
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'right',
@@ -142,14 +154,13 @@ 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) ? openedViaKeyboard ? {
-        initialFocus: undefined
-      } : {
-        initialFocus: targetHandleRef
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
+        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
       } : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-      api: api
+      api: api,
+      setRef: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
     }));
   } else {
     return null;

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

@@ -16,6 +16,6 @@ export const CopySection = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    hasSeparator: !isFormatMenuHidden()
+    hasSeparator: expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) ? true : !isFormatMenuHidden()
   }, children);
 };

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { ADD_BLOCKS_MENU_SECTION, MOVE_UP_MENU_ITEM, MOVE_UP_DOWN_MENU_SECTION, MOVE_DOWN_MENU_ITEM, MOVE_BLOCK_SECTION_RANK, PRIMARY_MENU_SECTION, BLOCK_MENU_SECTION_RANK, COPY_MENU_SECTION, COPY_BLOCK_MENU_ITEM, COPY_MENU_SECTION_RANK, COPY_LINK_MENU_ITEM, DELETE_MENU_SECTION, DELETE_MENU_ITEM, DELETE_SECTION_RANK, NESTED_FORMAT_MENU_SECTION, NESTED_FORMAT_MENU } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { AddBlocksSection } from './add-blocks-section';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
@@ -96,9 +95,9 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref4) {
     rank: BLOCK_MENU_SECTION_RANK[ADD_BLOCKS_MENU_SECTION.key],
     component: function component(_ref5) {
       var children = _ref5.children;
-      return /*#__PURE__*/React.createElement(AddBlocksSection, {
-        api: api
-      }, " ", children, " ");
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
     }
   }] : []), [{
     type: 'block-menu-section',

package/dist/esm/ui/block-menu.compiled.css

@@ -1,3 +1,5 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -16,20 +16,26 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer';
 var styles = {
-  base: "_2rko12b0 _bfhk1bhr _16qs1cd0"
+  base: "_2rko12b0 _bfhk1bhr _16qs1cd0",
+  emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
 };
 var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
   var _api$blockMenu;
-  var api = _ref.api;
-  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  var api = _ref.api,
+    setRef = _ref.setRef;
   var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  var ref = function ref(el) {
+    setOutsideClickTargetRef(el);
+    setRef === null || setRef === void 0 || setRef(el);
+  };
   return /*#__PURE__*/React.createElement(Box, {
     testId: "editor-block-menu",
-    ref: setOutsideClickTargetRef,
-    xcss: cx(styles.base)
+    ref: ref,
+    xcss: cx(styles.base, expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) && styles.emptyMenuSectionStyles)
   }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
     components: blockMenuComponents || [],
     fallbacks: {
@@ -74,15 +80,16 @@ var BlockMenu = function BlockMenu(_ref2) {
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   var prevIsMenuOpenRef = useRef(false);
-  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;
+  var popupRef = useRef(undefined);
+  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;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
-  var selectedByShortcutORDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+  var selectedByShortcutOrDragHandle = isSelectedViaDragHandle || openedViaKeyboard && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
   useEffect(function () {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -102,7 +109,7 @@ var BlockMenu = function BlockMenu(_ref2) {
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, openedViaKeyboard]);
   if (!isMenuOpen) {
     return null;
   }
@@ -122,10 +129,15 @@ var BlockMenu = function BlockMenu(_ref2) {
       return tr;
     });
   };
-  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
+  var setRef = function setRef(el) {
+    if (el) {
+      popupRef.current = el;
+    }
+  };
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'right',
@@ -143,14 +155,13 @@ var BlockMenu = function BlockMenu(_ref2) {
       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) ? openedViaKeyboard ? {
-        initialFocus: undefined
-      } : {
-        initialFocus: targetHandleRef
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? {
+        initialFocus: openedViaKeyboard ? undefined : targetHandleRef
       } : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-      api: api
+      api: api,
+      setRef: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? setRef : undefined
     }));
   } else {
     return null;

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

@@ -15,6 +15,6 @@ export var CopySection = function CopySection(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    hasSeparator: !isFormatMenuHidden()
+    hasSeparator: expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) ? true : !isFormatMenuHidden()
   }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "4.0.18",
+	"version": "4.0.20",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,12 +43,12 @@
 		"@atlaskit/icon-lab": "^5.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/tmp-editor-statsig": "^13.4.0",
+		"@atlaskit/tmp-editor-statsig": "^13.6.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.7.0",
+		"@atlaskit/editor-common": "^110.9.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},

package/dist/cjs/ui/add-blocks-section.js

@@ -1,21 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddBlocksSection = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _editorToolbar = require("@atlaskit/editor-toolbar");
-var AddBlocksSection = exports.AddBlocksSection = function AddBlocksSection(_ref) {
-  var _api$selection;
-  var api = _ref.api,
-    children = _ref.children;
-  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 !== null && selection !== void 0 && selection.empty)) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-    hasSeparator: true
-  }, children);
-};

package/dist/es2019/ui/add-blocks-section.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
-export const AddBlocksSection = ({
-  api,
-  children
-}) => {
-  var _api$selection, _api$selection$shared, _api$selection$shared2;
-  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 !== null && selection !== void 0 && selection.empty)) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    hasSeparator: true
-  }, children);
-};

package/dist/esm/ui/add-blocks-section.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
-export var AddBlocksSection = function AddBlocksSection(_ref) {
-  var _api$selection;
-  var api = _ref.api,
-    children = _ref.children;
-  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 !== null && selection !== void 0 && selection.empty)) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    hasSeparator: true
-  }, children);
-};

package/dist/types/ui/add-blocks-section.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin } from '../blockMenuPluginType';
-export declare const AddBlocksSection: ({ api, children, }: {
-    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
-    children: React.ReactNode;
-}) => React.JSX.Element | null;

package/dist/types-ts4.5/ui/add-blocks-section.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin } from '../blockMenuPluginType';
-export declare const AddBlocksSection: ({ api, children, }: {
-    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
-    children: React.ReactNode;
-}) => React.JSX.Element | null;