@atlaskit/editor-plugin-block-menu 4.0.2 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 4.0.4
+
+### Patch Changes
+
+- [`1eda79686167c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eda79686167c) -
+  ED-29418: Fix empty code block convert to lists
+- [`0778701e62192`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0778701e62192) -
+  [ux] ED-29424 Focus first menu item when block menu is opened and remove decorations when delete
+  button unmounts
+- Updated dependencies
+
+## 4.0.3
+
+### Patch Changes
+
+- [`c158b1ba4f0fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c158b1ba4f0fd) -
+  ED-29388: fix converting empty list
+- Updated dependencies
+
 ## 4.0.2
 
 ### Patch Changes

package/afm-dev-agents/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/editor-commands/formatNode.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatNode = void 0;
+exports.formatNodeSelectEmptyList = exports.formatNode = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _selection = require("./selection");
 var _layoutTransforms = require("./transforms/layout-transforms");
 var _transformNodeToTargetType = require("./transforms/transformNodeToTargetType");
+var _utils2 = require("./transforms/utils");
 /**
  * Handles formatting when selection is empty by inserting a new target node
  */
@@ -50,6 +52,42 @@ var formatNodeWhenSelectionEmpty = function formatNodeWhenSelectionEmpty(tr, tar
   return tr;
 };
 
+/**
+ * Handles formatting when an empty list is selected
+ * Converting an empty list to a target node, will remove the list and replace with an empty target node
+ */
+var formatNodeSelectEmptyList = exports.formatNodeSelectEmptyList = function formatNodeSelectEmptyList(tr, targetType, listNode, schema) {
+  var nodes = schema.nodes;
+  var headingLevel = 1;
+  var finalTargetType = targetType;
+  if (targetType.startsWith('heading')) {
+    var levelString = targetType.slice(-1);
+    var level = parseInt(levelString, 10);
+    if (!isNaN(level) && level >= 1 && level <= 6) {
+      headingLevel = level;
+      finalTargetType = 'heading';
+    }
+  }
+  var replaceNode = null;
+  if (finalTargetType === 'layoutSection') {
+    var emptyPara = nodes.paragraph.createAndFill();
+    if (emptyPara) {
+      replaceNode = (0, _layoutTransforms.createDefaultLayoutSection)(schema, emptyPara);
+    }
+  } else if (finalTargetType === 'heading') {
+    replaceNode = nodes.heading.createAndFill({
+      level: headingLevel
+    });
+  } else {
+    replaceNode = nodes[finalTargetType].createAndFill();
+  }
+  if (replaceNode) {
+    tr.replaceWith(listNode.pos, listNode.pos + listNode.node.nodeSize, replaceNode);
+    tr.setSelection(new _state.TextSelection(tr.doc.resolve(listNode.pos)));
+  }
+  return tr;
+};
+
 /**
  * Formats the current node or selection to the specified target type
  * @param api - The editor API injection that provides access to analytics and other plugin actions
@@ -69,7 +107,26 @@ var formatNode = exports.formatNode = function formatNode(api) {
 
       // when selection is empty, we insert a empty target node
       if (selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
-        return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+        var listNodes = [];
+        // need to find if there is any list node in the current selection
+        // As when select a empty list, selection is empty, but we want to convert the list instead of inserting a target node
+        // findSelectedNodeOfType does not work when selection is empty, so we use nodesBetween
+        tr.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
+          if ((0, _utils2.isListNodeType)(node.type)) {
+            listNodes.push({
+              node: node,
+              pos: pos
+            });
+          }
+        });
+        //	get the first list node as when click on drag handle if there are list node
+        //  can only select one list at a time, so we just need to find the first one
+        if (listNodes.length > 0 && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_2')) {
+          var firstChild = listNodes[0];
+          return formatNodeSelectEmptyList(tr, targetType, firstChild, schema);
+        } else {
+          return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+        }
       }
 
       // Try to find the current node from selection

package/dist/cjs/editor-commands/transforms/container-transforms.js

@@ -8,6 +8,7 @@ exports.unwrapAndConvertToList = exports.unwrapAndConvertToBlockType = exports.t
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _inlineNodeTransforms = require("./inline-node-transforms");
 var _utils2 = require("./utils");
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
@@ -203,7 +204,11 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
     heading = _schema$nodes2.heading;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(content) {
-    return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    if (!content && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_2')) {
+      return isTargetTaskList ? taskItem.create() : listItem.create(null, paragraph.create());
+    } else {
+      return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    }
   };
   var getInlineContent = function getInlineContent(textblock) {
     var inlineContent = [];
@@ -233,6 +238,15 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
   };
   if (sourceNode.type.name === 'codeBlock') {
     var codeText = sourceNode.textContent;
+    // check if code block only contains newline characters
+    // eslint-disable-next-line require-unicode-regexp
+    var isOnlyNewLines = function isOnlyNewLines(codeText) {
+      return codeText.replace(/\n/g, '').trim() === '';
+    };
+    if ((!codeText || isOnlyNewLines(codeText)) && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_2')) {
+      // Empty code block - create an empty list item
+      currentListItems.push(createListItemFromInline());
+    }
     if (codeText) {
       var lines = codeText.split('\n');
       // Remove empty lines

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

@@ -9,6 +9,7 @@ exports.BlockMenuRenderer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 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 NoOp = function NoOp(props) {
   return null;
@@ -50,48 +51,51 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
   var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
-    type: _uiMenu.ArrowKeyNavigationType.MENU
-  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
-    // Get all items for the current section, including nested menus, and sort them by rank
-    var currentSectionItemsSorted = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key);
-    if (currentSectionItemsSorted.length === 0) {
-      return null;
-    }
+  var renderMenu = function renderMenu() {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
+      // Get all items for the current section, including nested menus, and sort them by rank
+      var currentSectionItemsSorted = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key);
+      if (currentSectionItemsSorted.length === 0) {
+        return null;
+      }
 
-    // iterate over the current section items, if it is nested menu, get their children, sort them
-    // if they are menu items, just render as they are sorted above
-    var getChildrenWithNestedItems = function getChildrenWithNestedItems(items) {
-      return items.map(function (item) {
-        if (isNestedMenu(item)) {
-          var sortedNestedSections = getSortedNestedSections(components, item.key);
-          return sortedNestedSections.map(function (section) {
-            var sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
-            var NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
-            var NestedSection = section.component || fallbacks.section || NoOp;
-            return /*#__PURE__*/_react.default.createElement(NestedMenuComponent, {
+      // iterate over the current section items, if it is nested menu, get their children, sort them
+      // if they are menu items, just render as they are sorted above
+      var getChildrenWithNestedItems = function getChildrenWithNestedItems(items) {
+        return items.map(function (item) {
+          if (isNestedMenu(item)) {
+            var sortedNestedSections = getSortedNestedSections(components, item.key);
+            return sortedNestedSections.map(function (section) {
+              var sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
+              var NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
+              var NestedSection = section.component || fallbacks.section || NoOp;
+              return /*#__PURE__*/_react.default.createElement(NestedMenuComponent, {
+                key: item.key
+              }, /*#__PURE__*/_react.default.createElement(NestedSection, {
+                key: section.key
+              }, sortedNestedMenuItems.map(function (nestedItem) {
+                var NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
+                return /*#__PURE__*/_react.default.createElement(NestedMenuItemComponent, {
+                  key: nestedItem.key
+                });
+              })));
+            });
+          } else {
+            var ItemComponent = item.component || fallbacks.item || NoOp;
+            return /*#__PURE__*/_react.default.createElement(ItemComponent, {
               key: item.key
-            }, /*#__PURE__*/_react.default.createElement(NestedSection, {
-              key: section.key
-            }, sortedNestedMenuItems.map(function (nestedItem) {
-              var NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
-              return /*#__PURE__*/_react.default.createElement(NestedMenuItemComponent, {
-                key: nestedItem.key
-              });
-            })));
-          });
-        } else {
-          var ItemComponent = item.component || fallbacks.item || NoOp;
-          return /*#__PURE__*/_react.default.createElement(ItemComponent, {
-            key: item.key
-          });
-        }
-      });
-    };
-    var children = getChildrenWithNestedItems(currentSectionItemsSorted);
-    var SectionComponent = section.component || fallbacks.section || NoOp;
-    return /*#__PURE__*/_react.default.createElement(SectionComponent, {
-      key: section.key
-    }, children);
-  })));
+            });
+          }
+        });
+      };
+      var children = getChildrenWithNestedItems(currentSectionItemsSorted);
+      var SectionComponent = section.component || fallbacks.section || NoOp;
+      return /*#__PURE__*/_react.default.createElement(SectionComponent, {
+        key: section.key
+      }, children);
+    }));
+  };
+  return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU
+  }, renderMenu()) : renderMenu();
 };

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

@@ -64,18 +64,20 @@ var BlockMenu = function BlockMenu(_ref2) {
     boundariesElement = _ref2.boundariesElement,
     scrollableElement = _ref2.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
         menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
         isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
         isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
-        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
+        openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 || (_states$blockControls4 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.openedViaKeyboard
       };
     }),
     menuTriggerBy = _useSharedPluginState.menuTriggerBy,
     isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
     isMenuOpen = _useSharedPluginState.isMenuOpen,
-    currentUserIntent = _useSharedPluginState.currentUserIntent;
+    currentUserIntent = _useSharedPluginState.currentUserIntent,
+    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
     fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
@@ -86,7 +88,7 @@ var BlockMenu = function BlockMenu(_ref2) {
   // 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;
+  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 || '')) {
@@ -149,7 +151,9 @@ var BlockMenu = function BlockMenu(_ref2) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: true,
+      focusTrap: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
+        initialFocus: undefined
+      } : true : undefined,
       offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
       api: api

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

@@ -78,10 +78,22 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       return tr;
     });
   }, [api, nodeTypes]);
-  var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
+  var onRemoveHoverDecoration = (0, _react.useCallback)(function () {
     var _api$decorations2, _api$decorations2$rem;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
-  };
+  }, [api]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      return;
+    }
+    return function () {
+      if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        return;
+      }
+      // clean up hover decoration when unmounting
+      onRemoveHoverDecoration();
+    };
+  }, [onRemoveHoverDecoration]);
   var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.deleteBlock) : formatMessage(_blockMenu.messages.deleteBlock);
   return /*#__PURE__*/_react.default.createElement(_box.Box, {
     onMouseEnter: onShowHoverDecoration,

package/dist/es2019/editor-commands/formatNode.js

@@ -1,10 +1,13 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { setSelectionAfterTransform } from './selection';
 import { createDefaultLayoutSection } from './transforms/layout-transforms';
 import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
+import { isListNodeType } from './transforms/utils';
+
 /**
  * Handles formatting when selection is empty by inserting a new target node
  */
@@ -48,6 +51,44 @@ const formatNodeWhenSelectionEmpty = (tr, targetType, nodePos, schema) => {
   return tr;
 };
 
+/**
+ * Handles formatting when an empty list is selected
+ * Converting an empty list to a target node, will remove the list and replace with an empty target node
+ */
+export const formatNodeSelectEmptyList = (tr, targetType, listNode, schema) => {
+  const {
+    nodes
+  } = schema;
+  let headingLevel = 1;
+  let finalTargetType = targetType;
+  if (targetType.startsWith('heading')) {
+    const levelString = targetType.slice(-1);
+    const level = parseInt(levelString, 10);
+    if (!isNaN(level) && level >= 1 && level <= 6) {
+      headingLevel = level;
+      finalTargetType = 'heading';
+    }
+  }
+  let replaceNode = null;
+  if (finalTargetType === 'layoutSection') {
+    const emptyPara = nodes.paragraph.createAndFill();
+    if (emptyPara) {
+      replaceNode = createDefaultLayoutSection(schema, emptyPara);
+    }
+  } else if (finalTargetType === 'heading') {
+    replaceNode = nodes.heading.createAndFill({
+      level: headingLevel
+    });
+  } else {
+    replaceNode = nodes[finalTargetType].createAndFill();
+  }
+  if (replaceNode) {
+    tr.replaceWith(listNode.pos, listNode.pos + listNode.node.nodeSize, replaceNode);
+    tr.setSelection(new TextSelection(tr.doc.resolve(listNode.pos)));
+  }
+  return tr;
+};
+
 /**
  * Formats the current node or selection to the specified target type
  * @param api - The editor API injection that provides access to analytics and other plugin actions
@@ -71,7 +112,26 @@ export const formatNode = api => targetType => {
 
     // when selection is empty, we insert a empty target node
     if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
-      return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+      const listNodes = [];
+      // need to find if there is any list node in the current selection
+      // As when select a empty list, selection is empty, but we want to convert the list instead of inserting a target node
+      // findSelectedNodeOfType does not work when selection is empty, so we use nodesBetween
+      tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+        if (isListNodeType(node.type)) {
+          listNodes.push({
+            node,
+            pos
+          });
+        }
+      });
+      //	get the first list node as when click on drag handle if there are list node
+      //  can only select one list at a time, so we just need to find the first one
+      if (listNodes.length > 0 && fg('platform_editor_block_menu_patch_2')) {
+        const firstChild = listNodes[0];
+        return formatNodeSelectEmptyList(tr, targetType, firstChild, schema);
+      } else {
+        return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+      }
     }
 
     // Try to find the current node from selection

package/dist/es2019/editor-commands/transforms/container-transforms.js

@@ -1,5 +1,6 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType, getMarksWithBreakout } from './utils';
 const convertInvalidNodeToValidNodeType = (sourceContent, sourceNodeType, validNodeType, withMarks) => {
@@ -204,7 +205,11 @@ export const unwrapAndConvertToList = ({
   } = schema.nodes;
   const isTargetTaskList = targetNodeType === taskList;
   const createListItemFromInline = content => {
-    return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    if (!content && fg('platform_editor_block_menu_patch_2')) {
+      return isTargetTaskList ? taskItem.create() : listItem.create(null, paragraph.create());
+    } else {
+      return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    }
   };
   const getInlineContent = textblock => {
     const inlineContent = [];
@@ -234,6 +239,13 @@ export const unwrapAndConvertToList = ({
   };
   if (sourceNode.type.name === 'codeBlock') {
     const codeText = sourceNode.textContent;
+    // check if code block only contains newline characters
+    // eslint-disable-next-line require-unicode-regexp
+    const isOnlyNewLines = codeText => codeText.replace(/\n/g, '').trim() === '';
+    if ((!codeText || isOnlyNewLines(codeText)) && fg('platform_editor_block_menu_patch_2')) {
+      // Empty code block - create an empty list item
+      currentListItems.push(createListItemFromInline());
+    }
     if (codeText) {
       const lines = codeText.split('\n');
       // Remove empty lines

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 const NoOp = props => null;
 const isNonNestedMenuSection = component => {
   return component.type === 'block-menu-section' && !('parent' in component);
@@ -29,48 +30,51 @@ export const BlockMenuRenderer = ({
   const menuSections = getSortedNonNestedSections(components);
   const menuItems = components.filter(isMenuItem);
   const nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
-    type: ArrowKeyNavigationType.MENU
-  }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
-    // Get all items for the current section, including nested menus, and sort them by rank
-    const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
-    if (currentSectionItemsSorted.length === 0) {
-      return null;
-    }
+  const renderMenu = () => {
+    return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
+      // Get all items for the current section, including nested menus, and sort them by rank
+      const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
+      if (currentSectionItemsSorted.length === 0) {
+        return null;
+      }
 
-    // iterate over the current section items, if it is nested menu, get their children, sort them
-    // if they are menu items, just render as they are sorted above
-    const getChildrenWithNestedItems = items => {
-      return items.map(item => {
-        if (isNestedMenu(item)) {
-          const sortedNestedSections = getSortedNestedSections(components, item.key);
-          return sortedNestedSections.map(section => {
-            const sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
-            const NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
-            const NestedSection = section.component || fallbacks.section || NoOp;
-            return /*#__PURE__*/React.createElement(NestedMenuComponent, {
+      // iterate over the current section items, if it is nested menu, get their children, sort them
+      // if they are menu items, just render as they are sorted above
+      const getChildrenWithNestedItems = items => {
+        return items.map(item => {
+          if (isNestedMenu(item)) {
+            const sortedNestedSections = getSortedNestedSections(components, item.key);
+            return sortedNestedSections.map(section => {
+              const sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
+              const NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
+              const NestedSection = section.component || fallbacks.section || NoOp;
+              return /*#__PURE__*/React.createElement(NestedMenuComponent, {
+                key: item.key
+              }, /*#__PURE__*/React.createElement(NestedSection, {
+                key: section.key
+              }, sortedNestedMenuItems.map(nestedItem => {
+                const NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
+                return /*#__PURE__*/React.createElement(NestedMenuItemComponent, {
+                  key: nestedItem.key
+                });
+              })));
+            });
+          } else {
+            const ItemComponent = item.component || fallbacks.item || NoOp;
+            return /*#__PURE__*/React.createElement(ItemComponent, {
               key: item.key
-            }, /*#__PURE__*/React.createElement(NestedSection, {
-              key: section.key
-            }, sortedNestedMenuItems.map(nestedItem => {
-              const NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
-              return /*#__PURE__*/React.createElement(NestedMenuItemComponent, {
-                key: nestedItem.key
-              });
-            })));
-          });
-        } else {
-          const ItemComponent = item.component || fallbacks.item || NoOp;
-          return /*#__PURE__*/React.createElement(ItemComponent, {
-            key: item.key
-          });
-        }
-      });
-    };
-    const children = getChildrenWithNestedItems(currentSectionItemsSorted);
-    const SectionComponent = section.component || fallbacks.section || NoOp;
-    return /*#__PURE__*/React.createElement(SectionComponent, {
-      key: section.key
-    }, children);
-  })));
+            });
+          }
+        });
+      };
+      const children = getChildrenWithNestedItems(currentSectionItemsSorted);
+      const SectionComponent = section.component || fallbacks.section || NoOp;
+      return /*#__PURE__*/React.createElement(SectionComponent, {
+        key: section.key
+      }, children);
+    }));
+  };
+  return expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
+  }, renderMenu()) : renderMenu();
 };

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

@@ -55,14 +55,16 @@ const BlockMenu = ({
     menuTriggerBy,
     isSelectedViaDragHandle,
     isMenuOpen,
-    currentUserIntent
+    currentUserIntent,
+    openedViaKeyboard
   } = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], states => {
-    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
+    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4, _states$blockControls5;
     return {
       menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
       isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
       isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
-      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
+      openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : (_states$blockControls5 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.openedViaKeyboard
     };
   });
   const {
@@ -76,7 +78,7 @@ const BlockMenu = ({
   // 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;
+  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 || '')) {
@@ -140,7 +142,9 @@ const BlockMenu = ({
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: true,
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
+        initialFocus: undefined
+      } : true : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
@@ -74,10 +74,22 @@ const DeleteDropdownItemContent = ({
       return tr;
     });
   }, [api, nodeTypes]);
-  const onRemoveHoverDecoration = () => {
+  const onRemoveHoverDecoration = useCallback(() => {
     var _api$decorations2, _api$decorations2$com, _api$decorations2$com2;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : (_api$decorations2$com = _api$decorations2.commands) === null || _api$decorations2$com === void 0 ? void 0 : (_api$decorations2$com2 = _api$decorations2$com.removeDecoration) === null || _api$decorations2$com2 === void 0 ? void 0 : _api$decorations2$com2.call(_api$decorations2$com));
-  };
+  }, [api]);
+  useEffect(() => {
+    if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      return;
+    }
+    return () => {
+      if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        return;
+      }
+      // clean up hover decoration when unmounting
+      onRemoveHoverDecoration();
+    };
+  }, [onRemoveHoverDecoration]);
   const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
   return /*#__PURE__*/React.createElement(Box, {
     onMouseEnter: onShowHoverDecoration,

package/dist/esm/editor-commands/formatNode.js

@@ -1,10 +1,13 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { setSelectionAfterTransform } from './selection';
 import { createDefaultLayoutSection } from './transforms/layout-transforms';
 import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
+import { isListNodeType } from './transforms/utils';
+
 /**
  * Handles formatting when selection is empty by inserting a new target node
  */
@@ -44,6 +47,42 @@ var formatNodeWhenSelectionEmpty = function formatNodeWhenSelectionEmpty(tr, tar
   return tr;
 };
 
+/**
+ * Handles formatting when an empty list is selected
+ * Converting an empty list to a target node, will remove the list and replace with an empty target node
+ */
+export var formatNodeSelectEmptyList = function formatNodeSelectEmptyList(tr, targetType, listNode, schema) {
+  var nodes = schema.nodes;
+  var headingLevel = 1;
+  var finalTargetType = targetType;
+  if (targetType.startsWith('heading')) {
+    var levelString = targetType.slice(-1);
+    var level = parseInt(levelString, 10);
+    if (!isNaN(level) && level >= 1 && level <= 6) {
+      headingLevel = level;
+      finalTargetType = 'heading';
+    }
+  }
+  var replaceNode = null;
+  if (finalTargetType === 'layoutSection') {
+    var emptyPara = nodes.paragraph.createAndFill();
+    if (emptyPara) {
+      replaceNode = createDefaultLayoutSection(schema, emptyPara);
+    }
+  } else if (finalTargetType === 'heading') {
+    replaceNode = nodes.heading.createAndFill({
+      level: headingLevel
+    });
+  } else {
+    replaceNode = nodes[finalTargetType].createAndFill();
+  }
+  if (replaceNode) {
+    tr.replaceWith(listNode.pos, listNode.pos + listNode.node.nodeSize, replaceNode);
+    tr.setSelection(new TextSelection(tr.doc.resolve(listNode.pos)));
+  }
+  return tr;
+};
+
 /**
  * Formats the current node or selection to the specified target type
  * @param api - The editor API injection that provides access to analytics and other plugin actions
@@ -63,7 +102,26 @@ export var formatNode = function formatNode(api) {
 
       // when selection is empty, we insert a empty target node
       if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
-        return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+        var listNodes = [];
+        // need to find if there is any list node in the current selection
+        // As when select a empty list, selection is empty, but we want to convert the list instead of inserting a target node
+        // findSelectedNodeOfType does not work when selection is empty, so we use nodesBetween
+        tr.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
+          if (isListNodeType(node.type)) {
+            listNodes.push({
+              node: node,
+              pos: pos
+            });
+          }
+        });
+        //	get the first list node as when click on drag handle if there are list node
+        //  can only select one list at a time, so we just need to find the first one
+        if (listNodes.length > 0 && fg('platform_editor_block_menu_patch_2')) {
+          var firstChild = listNodes[0];
+          return formatNodeSelectEmptyList(tr, targetType, firstChild, schema);
+        } else {
+          return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+        }
       }
 
       // Try to find the current node from selection

package/dist/esm/editor-commands/transforms/container-transforms.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType, getMarksWithBreakout } from './utils';
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
@@ -196,7 +197,11 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
     heading = _schema$nodes2.heading;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(content) {
-    return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    if (!content && fg('platform_editor_block_menu_patch_2')) {
+      return isTargetTaskList ? taskItem.create() : listItem.create(null, paragraph.create());
+    } else {
+      return isTargetTaskList ? taskItem.create(null, content) : listItem.create(null, paragraph.create(null, content));
+    }
   };
   var getInlineContent = function getInlineContent(textblock) {
     var inlineContent = [];
@@ -226,6 +231,15 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
   };
   if (sourceNode.type.name === 'codeBlock') {
     var codeText = sourceNode.textContent;
+    // check if code block only contains newline characters
+    // eslint-disable-next-line require-unicode-regexp
+    var isOnlyNewLines = function isOnlyNewLines(codeText) {
+      return codeText.replace(/\n/g, '').trim() === '';
+    };
+    if ((!codeText || isOnlyNewLines(codeText)) && fg('platform_editor_block_menu_patch_2')) {
+      // Empty code block - create an empty list item
+      currentListItems.push(createListItemFromInline());
+    }
     if (codeText) {
       var lines = codeText.split('\n');
       // Remove empty lines

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

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { Fragment } from 'react';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var NoOp = function NoOp(props) {
   return null;
 };
@@ -41,48 +42,51 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
   var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
-    type: ArrowKeyNavigationType.MENU
-  }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
-    // Get all items for the current section, including nested menus, and sort them by rank
-    var currentSectionItemsSorted = getSortedChildren([].concat(_toConsumableArray(menuItems), _toConsumableArray(nestedMenus)), section.key);
-    if (currentSectionItemsSorted.length === 0) {
-      return null;
-    }
+  var renderMenu = function renderMenu() {
+    return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
+      // Get all items for the current section, including nested menus, and sort them by rank
+      var currentSectionItemsSorted = getSortedChildren([].concat(_toConsumableArray(menuItems), _toConsumableArray(nestedMenus)), section.key);
+      if (currentSectionItemsSorted.length === 0) {
+        return null;
+      }
 
-    // iterate over the current section items, if it is nested menu, get their children, sort them
-    // if they are menu items, just render as they are sorted above
-    var getChildrenWithNestedItems = function getChildrenWithNestedItems(items) {
-      return items.map(function (item) {
-        if (isNestedMenu(item)) {
-          var sortedNestedSections = getSortedNestedSections(components, item.key);
-          return sortedNestedSections.map(function (section) {
-            var sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
-            var NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
-            var NestedSection = section.component || fallbacks.section || NoOp;
-            return /*#__PURE__*/React.createElement(NestedMenuComponent, {
+      // iterate over the current section items, if it is nested menu, get their children, sort them
+      // if they are menu items, just render as they are sorted above
+      var getChildrenWithNestedItems = function getChildrenWithNestedItems(items) {
+        return items.map(function (item) {
+          if (isNestedMenu(item)) {
+            var sortedNestedSections = getSortedNestedSections(components, item.key);
+            return sortedNestedSections.map(function (section) {
+              var sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
+              var NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
+              var NestedSection = section.component || fallbacks.section || NoOp;
+              return /*#__PURE__*/React.createElement(NestedMenuComponent, {
+                key: item.key
+              }, /*#__PURE__*/React.createElement(NestedSection, {
+                key: section.key
+              }, sortedNestedMenuItems.map(function (nestedItem) {
+                var NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
+                return /*#__PURE__*/React.createElement(NestedMenuItemComponent, {
+                  key: nestedItem.key
+                });
+              })));
+            });
+          } else {
+            var ItemComponent = item.component || fallbacks.item || NoOp;
+            return /*#__PURE__*/React.createElement(ItemComponent, {
               key: item.key
-            }, /*#__PURE__*/React.createElement(NestedSection, {
-              key: section.key
-            }, sortedNestedMenuItems.map(function (nestedItem) {
-              var NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
-              return /*#__PURE__*/React.createElement(NestedMenuItemComponent, {
-                key: nestedItem.key
-              });
-            })));
-          });
-        } else {
-          var ItemComponent = item.component || fallbacks.item || NoOp;
-          return /*#__PURE__*/React.createElement(ItemComponent, {
-            key: item.key
-          });
-        }
-      });
-    };
-    var children = getChildrenWithNestedItems(currentSectionItemsSorted);
-    var SectionComponent = section.component || fallbacks.section || NoOp;
-    return /*#__PURE__*/React.createElement(SectionComponent, {
-      key: section.key
-    }, children);
-  })));
+            });
+          }
+        });
+      };
+      var children = getChildrenWithNestedItems(currentSectionItemsSorted);
+      var SectionComponent = section.component || fallbacks.section || NoOp;
+      return /*#__PURE__*/React.createElement(SectionComponent, {
+        key: section.key
+      }, children);
+    }));
+  };
+  return expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
+  }, renderMenu()) : renderMenu();
 };

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

@@ -56,18 +56,20 @@ var BlockMenu = function BlockMenu(_ref2) {
     boundariesElement = _ref2.boundariesElement,
     scrollableElement = _ref2.scrollableElement;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
         menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
         isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
         isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
-        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
+        openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 || (_states$blockControls4 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.openedViaKeyboard
       };
     }),
     menuTriggerBy = _useSharedPluginState.menuTriggerBy,
     isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
     isMenuOpen = _useSharedPluginState.isMenuOpen,
-    currentUserIntent = _useSharedPluginState.currentUserIntent;
+    currentUserIntent = _useSharedPluginState.currentUserIntent,
+    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
   var _useBlockMenu = useBlockMenu(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
     fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
@@ -78,7 +80,7 @@ var BlockMenu = function BlockMenu(_ref2) {
   // 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;
+  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 || '')) {
@@ -141,7 +143,9 @@ var BlockMenu = function BlockMenu(_ref2) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
-      focusTrap: true,
+      focusTrap: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? openedViaKeyboard ? {
+        initialFocus: undefined
+      } : true : undefined,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
@@ -69,10 +69,22 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       return tr;
     });
   }, [api, nodeTypes]);
-  var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
+  var onRemoveHoverDecoration = useCallback(function () {
     var _api$decorations2, _api$decorations2$rem;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
-  };
+  }, [api]);
+  useEffect(function () {
+    if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      return;
+    }
+    return function () {
+      if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+        return;
+      }
+      // clean up hover decoration when unmounting
+      onRemoveHoverDecoration();
+    };
+  }, [onRemoveHoverDecoration]);
   var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
   return /*#__PURE__*/React.createElement(Box, {
     onMouseEnter: onShowHoverDecoration,

package/dist/types/editor-commands/formatNode.d.ts

@@ -1,6 +1,16 @@
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Schema, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import type { FormatNodeTargetType } from './transforms/types';
+/**
+ * Handles formatting when an empty list is selected
+ * Converting an empty list to a target node, will remove the list and replace with an empty target node
+ */
+export declare const formatNodeSelectEmptyList: (tr: Transaction, targetType: FormatNodeTargetType, listNode: {
+    node: PMNode;
+    pos: number;
+}, schema: Schema) => Transaction;
 /**
  * Formats the current node or selection to the specified target type
  * @param api - The editor API injection that provides access to analytics and other plugin actions

package/dist/types-ts4.5/editor-commands/formatNode.d.ts

@@ -1,6 +1,16 @@
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Schema, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import type { FormatNodeTargetType } from './transforms/types';
+/**
+ * Handles formatting when an empty list is selected
+ * Converting an empty list to a target node, will remove the list and replace with an empty target node
+ */
+export declare const formatNodeSelectEmptyList: (tr: Transaction, targetType: FormatNodeTargetType, listNode: {
+    node: PMNode;
+    pos: number;
+}, schema: Schema) => Transaction;
 /**
  * Formats the current node or selection to the specified target type
  * @param api - The editor API injection that provides access to analytics and other plugin actions

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "4.0.2",
+	"version": "4.0.4",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,8 +30,8 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/editor-plugin-analytics": "^6.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^7.1.0",
+		"@atlaskit/editor-plugin-analytics": "^6.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^7.2.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-selection": "^6.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.10.0",
 		"@atlaskit/icon": "^28.3.0",
-		"@atlaskit/icon-lab": "^5.7.0",
+		"@atlaskit/icon-lab": "^5.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tmp-editor-statsig": "^12.32.0",
@@ -48,7 +48,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.2.0",
+		"@atlaskit/editor-common": "^110.4.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},