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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.2.12
+
+### Patch Changes
+
+- [`b3c4249a34e4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b3c4249a34e4b) -
+  EDITOR-3880 Improve block menu rendering to support infinite nesting
+
+## 5.2.11
+
+### Patch Changes
+
+- [`0c673432d72e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c673432d72e9) -
+  [ux] Fix bug / make wrap of expand convert to nestedExpand node
+
 ## 5.2.10
 
 ### Patch Changes

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

@@ -89,9 +89,9 @@ var TRANSFORM_STEPS_OVERRIDE = {
     decisionList: [_unwrapStep.unwrapStep, _wrapBlockquoteToDecisionListStep.wrapBlockquoteToDecisionListStep]
   },
   layoutSection: {
-    blockquote: [_unwrapLayoutStep.unwrapLayoutStep, _wrapStep.wrapStep],
+    blockquote: [_unwrapLayoutStep.unwrapLayoutStep, _wrapMixedContentStep.wrapMixedContentStep],
     expand: [_unwrapLayoutStep.unwrapLayoutStep, _wrapStep.wrapStep],
-    panel: [_unwrapLayoutStep.unwrapLayoutStep, _wrapStep.wrapStep],
+    panel: [_unwrapLayoutStep.unwrapLayoutStep, _wrapMixedContentStep.wrapMixedContentStep],
     codeBlock: [_unwrapLayoutStep.unwrapLayoutStep, _flattenStep.flattenStep, _wrapStep.wrapStep],
     paragraph: [_unwrapLayoutStep.unwrapLayoutStep]
   },

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isListType = exports.getTargetNodeTypeNameInContext = exports.getSelectedNode = exports.getBlockNodesInRange = exports.expandSelectionToBlockRange = exports.convertNestedExpandToExpand = void 0;
+exports.isListType = exports.getTargetNodeTypeNameInContext = exports.getSelectedNode = exports.getBlockNodesInRange = exports.expandSelectionToBlockRange = exports.convertNestedExpandToExpand = exports.convertExpandToNestedExpand = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -67,7 +67,7 @@ var getTargetNodeTypeNameInContext = exports.getTargetNodeTypeNameInContext = fu
  */
 var expandSelectionToBlockRange = exports.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
@@ -76,10 +76,11 @@ var expandSelectionToBlockRange = exports.expandSelectionToBlockRange = function
     var table = (0, _utils2.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)
       };
     }
   }
@@ -128,7 +129,26 @@ var convertNestedExpandToExpand = exports.convertNestedExpandToExpand = function
     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.
+ */
+var convertExpandToNestedExpand = exports.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);
+};
 var getBlockNodesInRange = exports.getBlockNodesInRange = function getBlockNodesInRange(range) {
+  if (range.startIndex === range.endIndex) {
+    return [];
+  }
   if (range.endIndex - range.startIndex <= 1) {
     return [range.parent.child(range.startIndex)];
   }

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

@@ -4,10 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapStep = void 0;
+var _utils = require("./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.
+ */
 var wrapStep = exports.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 = (0, _utils.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/cjs/ui/block-menu-components.js

@@ -17,7 +17,8 @@ var _formatMenuNested = require("./format-menu-nested");
 var _formatMenuSection = require("./format-menu-section");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
-var _suggestedItemsRenderer = require("./suggested-items-renderer");
+var _suggestedItemsMenuSection = require("./suggested-items-menu-section");
+var _suggestedMenuItems = require("./suggested-menu-items");
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -74,9 +75,13 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_suggestedItemsRenderer.SuggestedItemsRenderer, {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_suggestedItemsMenuSection.SuggestedItemsMenuSection, {
         api: api
-      });
+      }, children);
     }
   }, {
     type: 'block-menu-item',
@@ -85,6 +90,11 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       type: 'block-menu-section',
       key: _blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION.key,
       rank: _blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION_RANK[_blockMenu.TRANSFORM_SUGGESTED_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_suggestedMenuItems.SuggestedMenuItems, {
+        api: api
+      });
     }
   }, {
     type: 'block-menu-section',
@@ -95,10 +105,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.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.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Create"
       }, children);
@@ -112,10 +122,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.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.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Structure"
       }, children);
@@ -129,10 +139,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.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.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Headings",
         hasSeparator: true
@@ -142,23 +152,23 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     type: 'block-menu-section',
     key: _blockMenu.TRANSFORM_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.TRANSFORM_MENU_SECTION.key],
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/_react.default.createElement(_formatMenuSection.FormatMenuSection, {
         api: api
       }, children);
     }
   }];
 };
-var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
-  var api = _ref6.api,
-    config = _ref6.config;
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
+  var api = _ref7.api,
+    config = _ref7.config;
   return [].concat((0, _toConsumableArray2.default)(getTurnIntoMenuComponents(api)), [{
     type: 'block-menu-section',
     key: _blockMenu.BLOCK_ACTIONS_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.BLOCK_ACTIONS_MENU_SECTION.key],
-    component: function component(_ref7) {
-      var children = _ref7.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/_react.default.createElement(_copySection.CopySection, {
         api: api
       }, children);
@@ -181,8 +191,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: _blockMenu.POSITION_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.POSITION_MENU_SECTION.key],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -191,8 +201,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: _blockMenu.DELETE_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.DELETE_MENU_SECTION.key],
-    component: function component(_ref9) {
-      var children = _ref9.children;
+    component: function component(_ref0) {
+      var children = _ref0.children;
       return /*#__PURE__*/_react.default.createElement(_deleteSection.DeleteSection, {
         api: api
       }, children);

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BlockMenuComponents = require("./BlockMenuComponents");
+var _utils = require("./utils");
+/**
+ * Renders the given registered component based on its type
+ */
+var BlockMenuComponent = exports.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.default.createElement(ItemComponent, {
+      key: registeredComponent.key
+    });
+  }
+  if (!(0, _utils.willComponentRender)(registeredComponent, childrenMap)) {
+    return null;
+  }
+  var ParentComponent = registeredComponent.component || fallbacks[registeredComponent.type];
+  var childrenMapKey = (0, _utils.getChildrenMapKey)(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey);
+  return /*#__PURE__*/_react.default.createElement(ParentComponent, {
+    key: registeredComponent.key
+  }, /*#__PURE__*/_react.default.createElement(_BlockMenuComponents.BlockMenuComponents, {
+    registeredComponents: registeredComponents,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  }));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BlockMenuComponent = require("./BlockMenuComponent");
+/**
+ * Renders the given registered components
+ * Returns null if no components are rendered
+ */
+var BlockMenuComponents = exports.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.default.createElement(_react.default.Fragment, null, registeredComponents.map(function (registeredComponent) {
+    return /*#__PURE__*/_react.default.createElement(_BlockMenuComponent.BlockMenuComponent, {
+      key: registeredComponent.key,
+      registeredComponent: registeredComponent,
+      childrenMap: childrenMap,
+      fallbacks: fallbacks
+    });
+  }));
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BlockMenuComponents = require("./BlockMenuComponents");
+var _fallbacks = require("./fallbacks");
+var _utils = require("./utils");
+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); }
+/**
+ * BlockMenuRenderer orchestrates the rendering of the entire block menu hierarchy
+ */
+var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_ref) {
+  var allRegisteredComponents = _ref.allRegisteredComponents,
+    _ref$fallbacks = _ref.fallbacks,
+    fallbacks = _ref$fallbacks === void 0 ? _fallbacks.BLOCK_MENU_FALLBACKS : _ref$fallbacks;
+  var _useMemo = (0, _react.useMemo)(function () {
+      return {
+        childrenMap: (0, _utils.buildChildrenMap)(allRegisteredComponents),
+        topLevelSections: (0, _utils.getSortedTopLevelSections)(allRegisteredComponents)
+      };
+    }, [allRegisteredComponents]),
+    childrenMap = _useMemo.childrenMap,
+    topLevelSections = _useMemo.topLevelSections;
+  return /*#__PURE__*/_react.default.createElement(_BlockMenuComponents.BlockMenuComponents, {
+    registeredComponents: topLevelSections,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  });
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BLOCK_MENU_FALLBACKS = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var BLOCK_MENU_FALLBACKS = exports.BLOCK_MENU_FALLBACKS = {
+  'block-menu-nested': function blockMenuNested(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+      elemBefore: undefined,
+      elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+        label: ""
+      }),
+      text: "Nested Menu",
+      enableMaxHeight: true,
+      shouldFitContainer: true
+    }, children);
+  },
+  'block-menu-section': function blockMenuSection(_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+  },
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  'block-menu-item': function blockMenuItem() {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item");
+  }
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.willComponentRender = exports.getSortedTopLevelSections = exports.getChildrenMapKey = exports.buildChildrenMap = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@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
+ */
+var getSortedTopLevelSections = exports.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
+ */
+var getChildrenMapKey = exports.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
+ */
+var buildChildrenMap = exports.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 = (0, _slicedToArray2.default)(_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 = exports.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);
+  });
+};

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

@@ -19,15 +19,15 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuProvider = require("./block-menu-provider");
-var _blockMenuRenderer = require("./block-menu-renderer");
+var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
@@ -120,24 +120,11 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
     testId: "editor-block-menu",
     ref: ref,
     xcss: (0, _css.cx)(styles.base, (0, _experiments.editorExperiment)('platform_synced_block', true) && styles.emptyMenuSectionStyles)
-  }, /*#__PURE__*/_react.default.createElement(_blockMenuRenderer.BlockMenuRenderer, {
-    components: blockMenuComponents || [],
-    fallbacks: {
-      nestedMenu: function nestedMenu() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-          elemBefore: undefined,
-          elemAfter: undefined
-        }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item")));
-      },
-      section: function section() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item"));
-      },
-      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
-      item: function item() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item");
-      }
-    }
-  }));
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU
+  }, /*#__PURE__*/_react.default.createElement(_BlockMenuRenderer.BlockMenuRenderer, {
+    allRegisteredComponents: blockMenuComponents || []
+  })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
   var _editorView$dom, _ref5;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSuggestedItems = void 0;
+var _react = require("react");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _utils = require("../../editor-commands/transform-node-utils/utils");
+var _suggestedItemsRank = require("../utils/suggested-items-rank");
+var useSuggestedItems = exports.useSuggestedItems = function useSuggestedItems(api) {
+  var _api$blockMenu;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.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 = (0, _react.useMemo)(function () {
+    var currentSelection = preservedSelection || selection;
+    if (menuItemsMap.size === 0 || !currentSelection) {
+      return [];
+    }
+    var _expandSelectionToBlo = (0, _utils.expandSelectionToBlockRange)(currentSelection, currentSelection.$from.doc.type.schema),
+      range = _expandSelectionToBlo.range;
+    if (!range) {
+      return [];
+    }
+    var blockNodes = (0, _utils.getBlockNodesInRange)(range);
+    var singleNode = blockNodes.length === 1 ? blockNodes[0] : undefined;
+    if (!singleNode) {
+      return [];
+    }
+    var nodeTypeName = singleNode.type.name;
+    var sortedKeys = (0, _suggestedItemsRank.getSortedSuggestedItems)(nodeTypeName);
+    return sortedKeys.map(function (key) {
+      return menuItemsMap.get(key);
+    }).filter(function (item) {
+      return item !== undefined;
+    });
+  }, [menuItemsMap, preservedSelection, selection]);
+  return suggestedItems;
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuggestedItemsMenuSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _useSuggestedItems = require("./hooks/useSuggestedItems");
+var SuggestedItemsMenuSection = exports.SuggestedItemsMenuSection = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var suggestedItems = (0, _useSuggestedItems.useSuggestedItems)(api);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, children);
+});