@atlaskit/editor-plugin-block-menu 5.2.10 → 5.2.12

package/dist/esm/editor-commands/transform-node-utils/utils.js

@@ -61,7 +61,7 @@ export var getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInCont
  */
 export var expandSelectionToBlockRange = function expandSelectionToBlockRange(selection, schema) {
   var nodes = schema.nodes;
-  var nodesNeedToExpandRange = [nodes.listItem, nodes.taskItem];
+  var nodesNeedToExpandRange = [nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.listItem, nodes.taskItem];
 
   // when adding nodes.tableRow, tableHeader, tableCell in nodesNeedToExpandRang,
   // expandToBlockRange does not return expected table start position, sometimes even freeze editor
@@ -70,10 +70,11 @@ export var expandSelectionToBlockRange = function expandSelectionToBlockRange(se
     var table = findTable(selection);
     if (table) {
       var $from = selection.$from.doc.resolve(table.pos);
-      var $to = selection.$from.doc.resolve(table.pos + table.node.nodeSize);
+      var $to = selection.$from.doc.resolve(table.pos + table.node.nodeSize - 1);
       return {
         $from: $from,
-        $to: $to
+        $to: $to,
+        range: $from.blockRange($to)
       };
     }
   }
@@ -122,7 +123,26 @@ export var convertNestedExpandToExpand = function convertNestedExpandToExpand(no
     title: ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title) || ''
   }, node.content);
 };
+
+/**
+ * Converts an expand to a nestedExpand node.
+ * When placing an expand inside another expand, it must become a nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
+export var convertExpandToNestedExpand = function convertExpandToNestedExpand(node, schema) {
+  var _node$attrs2;
+  var nestedExpandType = schema.nodes.nestedExpand;
+  if (!nestedExpandType) {
+    return null;
+  }
+  return nestedExpandType.createAndFill({
+    title: ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.title) || ''
+  }, node.content);
+};
 export var getBlockNodesInRange = function getBlockNodesInRange(range) {
+  if (range.startIndex === range.endIndex) {
+    return [];
+  }
   if (range.endIndex - range.startIndex <= 1) {
     return [range.parent.child(range.startIndex)];
   }

package/dist/esm/editor-commands/transform-node-utils/wrapStep.js

@@ -1,7 +1,27 @@
+import { convertExpandToNestedExpand } from './utils';
+
+/**
+ * Wraps nodes into the target container type.
+ * When wrapping into expand, any expand children are converted to nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
 export var wrapStep = function wrapStep(nodes, context) {
   var schema = context.schema,
     targetNodeTypeName = context.targetNodeTypeName;
-  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
+
+  // When wrapping into expand, convert any expand children to nestedExpand
+  // since expand cannot be a direct child of expand
+  var processedNodes = nodes;
+  if (targetNodeTypeName === 'expand') {
+    processedNodes = nodes.map(function (node) {
+      if (node.type.name === 'expand') {
+        var nestedExpandNode = convertExpandToNestedExpand(node, schema);
+        return nestedExpandNode !== null && nestedExpandNode !== void 0 ? nestedExpandNode : node;
+      }
+      return node;
+    });
+  }
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, processedNodes);
   if (outputNode) {
     return [outputNode];
   }

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

@@ -10,7 +10,8 @@ import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
-import { SuggestedItemsRenderer } from './suggested-items-renderer';
+import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
+import { SuggestedMenuItems } from './suggested-menu-items';
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -67,9 +68,13 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
     component: function component() {
-      return /*#__PURE__*/React.createElement(SuggestedItemsRenderer, {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref2.children;
+      return /*#__PURE__*/React.createElement(SuggestedItemsMenuSection, {
         api: api
-      });
+      }, children);
     }
   }, {
     type: 'block-menu-item',
@@ -78,6 +83,11 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       type: 'block-menu-section',
       key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
       rank: TRANSFORM_SUGGESTED_MENU_SECTION_RANK[TRANSFORM_SUGGESTED_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SuggestedMenuItems, {
+        api: api
+      });
     }
   }, {
     type: 'block-menu-section',
@@ -88,10 +98,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref2.children;
+        children = _ref3.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Create"
       }, children);
@@ -105,10 +115,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_STRUCTURE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref3.children;
+        children = _ref4.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Structure"
       }, children);
@@ -122,10 +132,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_HEADINGS_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref4.children;
+        children = _ref5.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Headings",
         hasSeparator: true
@@ -135,23 +145,23 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     type: 'block-menu-section',
     key: TRANSFORM_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[TRANSFORM_MENU_SECTION.key],
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/React.createElement(FormatMenuSection, {
         api: api
       }, children);
     }
   }];
 };
-export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
-  var api = _ref6.api,
-    config = _ref6.config;
+export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
+  var api = _ref7.api,
+    config = _ref7.config;
   return [].concat(_toConsumableArray(getTurnIntoMenuComponents(api)), [{
     type: 'block-menu-section',
     key: BLOCK_ACTIONS_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_MENU_SECTION.key],
-    component: function component(_ref7) {
-      var children = _ref7.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/React.createElement(CopySection, {
         api: api
       }, children);
@@ -174,8 +184,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
     type: 'block-menu-section',
     key: POSITION_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[POSITION_MENU_SECTION.key],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -184,8 +194,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
     type: 'block-menu-section',
     key: DELETE_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
-    component: function component(_ref9) {
-      var children = _ref9.children;
+    component: function component(_ref0) {
+      var children = _ref0.children;
       return /*#__PURE__*/React.createElement(DeleteSection, {
         api: api
       }, children);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { getChildrenMapKey, willComponentRender } from './utils';
+/**
+ * Renders the given registered component based on its type
+ */
+export var BlockMenuComponent = function BlockMenuComponent(_ref) {
+  var registeredComponent = _ref.registeredComponent,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (registeredComponent.type === 'block-menu-item') {
+    var ItemComponent = registeredComponent.component || fallbacks['block-menu-item'];
+    return /*#__PURE__*/React.createElement(ItemComponent, {
+      key: registeredComponent.key
+    });
+  }
+  if (!willComponentRender(registeredComponent, childrenMap)) {
+    return null;
+  }
+  var ParentComponent = registeredComponent.component || fallbacks[registeredComponent.type];
+  var childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey);
+  return /*#__PURE__*/React.createElement(ParentComponent, {
+    key: registeredComponent.key
+  }, /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: registeredComponents,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  }));
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BlockMenuComponent } from './BlockMenuComponent';
+/**
+ * Renders the given registered components
+ * Returns null if no components are rendered
+ */
+export var BlockMenuComponents = function BlockMenuComponents(_ref) {
+  var registeredComponents = _ref.registeredComponents,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (!(registeredComponents !== null && registeredComponents !== void 0 && registeredComponents.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, registeredComponents.map(function (registeredComponent) {
+    return /*#__PURE__*/React.createElement(BlockMenuComponent, {
+      key: registeredComponent.key,
+      registeredComponent: registeredComponent,
+      childrenMap: childrenMap,
+      fallbacks: fallbacks
+    });
+  }));
+};

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

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { BLOCK_MENU_FALLBACKS } from './fallbacks';
+import { buildChildrenMap, getSortedTopLevelSections } from './utils';
+/**
+ * BlockMenuRenderer orchestrates the rendering of the entire block menu hierarchy
+ */
+export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
+  var allRegisteredComponents = _ref.allRegisteredComponents,
+    _ref$fallbacks = _ref.fallbacks,
+    fallbacks = _ref$fallbacks === void 0 ? BLOCK_MENU_FALLBACKS : _ref$fallbacks;
+  var _useMemo = useMemo(function () {
+      return {
+        childrenMap: buildChildrenMap(allRegisteredComponents),
+        topLevelSections: getSortedTopLevelSections(allRegisteredComponents)
+      };
+    }, [allRegisteredComponents]),
+    childrenMap = _useMemo.childrenMap,
+    topLevelSections = _useMemo.topLevelSections;
+  return /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: topLevelSections,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  });
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+export var BLOCK_MENU_FALLBACKS = {
+  'block-menu-nested': function blockMenuNested(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+      elemBefore: undefined,
+      elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+        label: ""
+      }),
+      text: "Nested Menu",
+      enableMaxHeight: true,
+      shouldFitContainer: true
+    }, children);
+  },
+  'block-menu-section': function blockMenuSection(_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+  },
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  'block-menu-item': function blockMenuItem() {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item");
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,121 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Type guard to check if a component has a parent
+ *
+ * @param component The block menu component to check
+ * @returns True if the component has a parent, false otherwise
+ */
+var hasParent = function hasParent(component) {
+  return 'parent' in component && !!component.parent;
+};
+
+/**
+ * Type guard to identify top-level sections (sections without a parent)
+ *
+ * @param component The block menu component to check
+ * @returns True if the component is a top-level section, false otherwise
+ */
+var isTopLevelSection = function isTopLevelSection(component) {
+  return component.type === 'block-menu-section' && !hasParent(component);
+};
+
+/**
+ * Gets all top-level sections (those without a parent) sorted by rank
+ *
+ * @param components All registered block menu components
+ * @returns Sorted array of top-level sections
+ */
+export var getSortedTopLevelSections = function getSortedTopLevelSections(components) {
+  return components.filter(isTopLevelSection).sort(function (a, b) {
+    return (a.rank || 0) - (b.rank || 0);
+  });
+};
+
+/**
+ * Generates a unique key from a key and type
+ * Used to lookup children in the childrenMap
+ *
+ * @param key The component's key
+ * @param type The component's type
+ * @returns A unique string key combining type and key
+ */
+export var getChildrenMapKey = function getChildrenMapKey(key, type) {
+  return "".concat(type, ":").concat(key);
+};
+
+/**
+ * Builds a map of parent keys to their sorted children
+ * This enables efficient hierarchical rendering of the menu structure
+ *
+ * @param components All registered block menu components
+ * @returns Map where keys are parent identifiers and values are sorted child components
+ */
+export var buildChildrenMap = function buildChildrenMap(components) {
+  var childrenMap = new Map();
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      // Only components with parents can be children
+      if ('parent' in component && !!component.parent) {
+        var childrenMapKey = getChildrenMapKey(component.parent.key, component.parent.type);
+        var existing = childrenMap.get(childrenMapKey) || [];
+        existing.push(component);
+        childrenMap.set(childrenMapKey, existing);
+      }
+    }
+
+    // Sort children by their rank within their parent
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(childrenMap.entries()),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray(_step2.value, 2),
+        children = _step2$value[1];
+      children.sort(function (a, b) {
+        var rankA = hasParent(a) ? a.parent.rank || 0 : 0;
+        var rankB = hasParent(b) ? b.parent.rank || 0 : 0;
+        return rankA - rankB;
+      });
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return childrenMap;
+};
+
+/**
+ * Determines whether a component will render based on its type and children
+ *
+ * Rules:
+ * - An item will not render if has a component that returns null
+ * - A nested menu will render if it has at least one registered child component
+ * - A section will render if it has at least one registered child component that will render
+ *
+ * NOTE: This requires invoking each item's component function to check for null return
+ */
+var _willComponentRender = function willComponentRender(registeredComponent, childrenMap) {
+  if (registeredComponent.type === 'block-menu-item') {
+    return registeredComponent.component ? registeredComponent.component() !== null : true;
+  }
+  var childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey) || [];
+  if (registeredComponent.type === 'block-menu-nested') {
+    return registeredComponents.length > 0;
+  }
+  return registeredComponents.some(function (childComponent) {
+    return _willComponentRender(childComponent, childrenMap);
+  });
+};
+export { _willComponentRender as willComponentRender };

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

@@ -11,15 +11,15 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { Box } from '@atlaskit/primitives/compiled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useBlockMenu } from './block-menu-provider';
-import { BlockMenuRenderer } from './block-menu-renderer';
+import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
@@ -111,24 +111,11 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
     testId: "editor-block-menu",
     ref: ref,
     xcss: cx(styles.base, editorExperiment('platform_synced_block', true) && styles.emptyMenuSectionStyles)
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
   }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
-    components: blockMenuComponents || [],
-    fallbacks: {
-      nestedMenu: function nestedMenu() {
-        return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-          elemBefore: undefined,
-          elemAfter: undefined
-        }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")));
-      },
-      section: function section() {
-        return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item"));
-      },
-      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
-      item: function item() {
-        return /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item");
-      }
-    }
-  }));
+    allRegisteredComponents: blockMenuComponents || []
+  })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
   var _editorView$dom, _ref5;

package/dist/esm/ui/hooks/useSuggestedItems.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getBlockNodesInRange, expandSelectionToBlockRange } from '../../editor-commands/transform-node-utils/utils';
+import { getSortedSuggestedItems } from '../utils/suggested-items-rank';
+export var useSuggestedItems = function useSuggestedItems(api) {
+  var _api$blockMenu;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'selection'], function (states) {
+      var _states$blockControls, _states$selectionStat;
+      return {
+        preservedSelection: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.preservedSelection,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    preservedSelection = _useSharedPluginState.preservedSelection,
+    selection = _useSharedPluginState.selection;
+  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var menuItemsMap = useMemo(function () {
+    if (!blockMenuComponents) {
+      return new Map();
+    }
+    return new Map(blockMenuComponents.filter(function (c) {
+      return c.type === 'block-menu-item';
+    }).map(function (item) {
+      return [item.key, item];
+    }));
+  }, [blockMenuComponents]);
+  var suggestedItems = useMemo(function () {
+    var currentSelection = preservedSelection || selection;
+    if (menuItemsMap.size === 0 || !currentSelection) {
+      return [];
+    }
+    var _expandSelectionToBlo = expandSelectionToBlockRange(currentSelection, currentSelection.$from.doc.type.schema),
+      range = _expandSelectionToBlo.range;
+    if (!range) {
+      return [];
+    }
+    var blockNodes = getBlockNodesInRange(range);
+    var singleNode = blockNodes.length === 1 ? blockNodes[0] : undefined;
+    if (!singleNode) {
+      return [];
+    }
+    var nodeTypeName = singleNode.type.name;
+    var sortedKeys = getSortedSuggestedItems(nodeTypeName);
+    return sortedKeys.map(function (key) {
+      return menuItemsMap.get(key);
+    }).filter(function (item) {
+      return item !== undefined;
+    });
+  }, [menuItemsMap, preservedSelection, selection]);
+  return suggestedItems;
+};

package/dist/esm/ui/suggested-items-menu-section.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useSuggestedItems } from './hooks/useSuggestedItems';
+export var SuggestedItemsMenuSection = /*#__PURE__*/React.memo(function (_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var suggestedItems = useSuggestedItems(api);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, children);
+});

package/dist/esm/ui/suggested-menu-items.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSuggestedItems } from './hooks/useSuggestedItems';
+export var SuggestedMenuItems = /*#__PURE__*/React.memo(function (_ref) {
+  var api = _ref.api;
+  var suggestedItems = useSuggestedItems(api);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, suggestedItems.map(function (item) {
+    var ItemComponent = item.component;
+    return ItemComponent ? /*#__PURE__*/React.createElement(ItemComponent, {
+      key: item.key
+    }) : null;
+  }));
+});

package/dist/esm/ui/utils/suggested-items-rank.js

@@ -17,7 +17,7 @@ var _TRANSFORM_SUGGESTED_;
  * }
  */
 
-import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_HEADINGS_H3_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM, TRANSFORM_HEADINGS_H1_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
 export var BLOCK_MENU_NODE_TYPES = {
   PARAGRAPH: 'paragraph',
   EXPAND: 'expand',
@@ -37,7 +37,7 @@ export var BLOCK_MENU_NODE_TYPES = {
   EMBED_CARD: 'embedCard',
   TABLE: 'table'
 };
-export var TRANSFORM_SUGGESTED_ITEMS_RANK = (_TRANSFORM_SUGGESTED_ = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.PARAGRAPH, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), TRANSFORM_HEADINGS_H3_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXPAND, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCKQUOTE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.LAYOUT_SECTION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 200), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.PANEL, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.CODE_BLOCK, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.DECISION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BULLET_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.ORDERED_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.HEADING, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.TASK_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.MEDIA_SINGLE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BODIED_EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCK_CARD, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.EMBED_CARD, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.TABLE, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200)));
+export var TRANSFORM_SUGGESTED_ITEMS_RANK = (_TRANSFORM_SUGGESTED_ = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.PARAGRAPH, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_HEADINGS_H1_MENU_ITEM.key, 200), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXPAND, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCKQUOTE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.LAYOUT_SECTION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.PANEL, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.CODE_BLOCK, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.DECISION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BULLET_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.ORDERED_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.HEADING, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 300)), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.TASK_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.MEDIA_SINGLE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BODIED_EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)));
 export var getSuggestedItemsForNodeType = function getSuggestedItemsForNodeType(nodeType) {
   return TRANSFORM_SUGGESTED_ITEMS_RANK[nodeType];
 };

package/dist/types/blockMenuPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -84,7 +84,7 @@ type BlockMenuNested = {
     key: string;
     type: 'block-menu-nested';
 };
-export type BlockMenuNestedComponent = (props?: {
+export type BlockMenuNestedComponent = (props: {
     children: React.ReactNode;
 }) => React.ReactNode;
 export type BlockMenuSectionComponent = (props: {
@@ -108,4 +108,5 @@ export type RegisterBlockMenuItem = BlockMenuItem & {
     parent: Parent<BlockMenuSection>;
 };
 export type RegisterBlockMenuComponent = RegisterBlockMenuNested | RegisterBlockMenuSection | RegisterBlockMenuItem;
+export type RegisterBlockMenuComponentType = RegisterBlockMenuComponent['type'];
 export {};

package/dist/types/editor-commands/transform-node-utils/utils.d.ts

@@ -14,6 +14,11 @@ export declare const getTargetNodeTypeNameInContext: (nodeTypeName: NodeTypeName
 export declare const expandSelectionToBlockRange: (selection: Selection, schema: Schema) => {
     $from: import("prosemirror-model").ResolvedPos;
     $to: import("prosemirror-model").ResolvedPos;
+    range: NodeRange | null;
+} | {
+    $from: import("prosemirror-model").ResolvedPos;
+    $to: import("prosemirror-model").ResolvedPos;
+    range?: undefined;
 };
 export declare const isListType: (node: PMNode, schema: Schema) => boolean;
 /**
@@ -22,4 +27,10 @@ export declare const isListType: (node: PMNode, schema: Schema) => boolean;
  * in containers that don't support nesting, they must be converted.
  */
 export declare const convertNestedExpandToExpand: (node: PMNode, schema: Schema) => PMNode | null;
+/**
+ * Converts an expand to a nestedExpand node.
+ * When placing an expand inside another expand, it must become a nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
+export declare const convertExpandToNestedExpand: (node: PMNode, schema: Schema) => PMNode | null;
 export declare const getBlockNodesInRange: (range: NodeRange) => PMNode[];

package/dist/types/editor-commands/transform-node-utils/wrapStep.d.ts

@@ -1,2 +1,7 @@
 import type { TransformStep } from './types';
+/**
+ * Wraps nodes into the target container type.
+ * When wrapping into expand, any expand children are converted to nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
 export declare const wrapStep: TransformStep;