@atlaskit/editor-plugin-block-menu 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.13
+
+### Patch Changes
+
+- [`6dd96d8ae168d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6dd96d8ae168d) -
+  [ux] ED-28581 ED-28581: Updated renderer logic to better support nest menu items register from
+  outside block menu
+- Updated dependencies
+
 ## 0.0.12
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},
@@ -60,4 +63,4 @@
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}
 	]
-}
+}

package/afm-dev-agents/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-townsquare/tsconfig.json"
 		},

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

@@ -10,8 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
-var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _copyLink = require("./copy-link");
 var _deleteButton = require("./delete-button");
@@ -46,23 +45,64 @@ var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(a
     }
   }];
 };
-var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref) {
-  var api = _ref.api,
-    config = _ref.config;
+var getFormatMenuComponents = function getFormatMenuComponents() {
   return [{
+    type: 'block-menu-nested',
+    key: 'nested-menu-format',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-primary',
+      rank: 100
+    },
+    component: function component() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+        text: "Format",
+        elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
+          label: ""
+        }),
+        elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+          label: 'example nested menu'
+        })
+      }, children);
+    }
+  }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-format',
+    key: 'nested-menu-format-section-primary',
+    parent: {
+      type: 'block-menu-nested',
+      key: 'nested-menu-format',
+      rank: 100
+    },
+    component: function component() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+    }
+  }];
+};
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref3) {
+  var api = _ref3.api,
+    config = _ref3.config;
+  return [].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_block_menu_format') ? getFormatMenuComponents() : []), [{
+    type: 'block-menu-section',
+    key: 'block-menu-section-primary',
     rank: 100,
-    component: function component(_ref2) {
-      var children = _ref2.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
     }
   }, {
     type: 'block-menu-section',
     key: 'block-menu-section-copy',
     rank: 200,
-    component: function component(_ref3) {
-      var children = _ref3.children;
+    component: function component(_ref5) {
+      var children = _ref5.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -98,8 +138,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: 'block-menu-section-move-up-down',
     rank: 300,
-    component: function component(_ref4) {
-      var children = _ref4.children;
+    component: function component(_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -108,40 +148,13 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: 'block-menu-section-delete',
     rank: 400,
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
     }
-  }, {
-    type: 'block-menu-nested',
-    key: 'nested-menu',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-format',
-      rank: 100
-    },
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-          label: 'example nested menu'
-        })
-      }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/_react.default.createElement(_task.default, {
-          label: ""
-        })
-      }, "Action item"), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/_react.default.createElement(_listBulleted.default, {
-          label: ""
-        })
-      }, "Bullet list")));
-    }
-  }].concat((0, _toConsumableArray2.default)(getMoveUpMoveDownMenuComponents(api)), [{
+  }], (0, _toConsumableArray2.default)(getMoveUpMoveDownMenuComponents(api)), [{
     type: 'block-menu-item',
     key: 'block-menu-item-delete',
     parent: {

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

@@ -12,8 +12,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var NoOp = function NoOp(props) {
   return null;
 };
-var isMenuSection = function isMenuSection(component) {
-  return component.type === 'block-menu-section';
+var isNonNestedMenuSection = function isNonNestedMenuSection(component) {
+  return component.type === 'block-menu-section' && !('parent' in component);
 };
 var isMenuItem = function isMenuItem(component) {
   return component.type === 'block-menu-item';
@@ -21,31 +21,68 @@ var isMenuItem = function isMenuItem(component) {
 var isNestedMenu = function isNestedMenu(component) {
   return component.type === 'block-menu-nested';
 };
+var isNestedMenuSection = function isNestedMenuSection(component) {
+  return 'parent' in component && component.parent !== undefined && component.parent.type === 'block-menu-nested';
+};
 var getSortedChildren = function getSortedChildren(components, parentKey) {
   return components.filter(function (component) {
-    return component.parent.key === parentKey;
+    return 'parent' in component && component.parent !== undefined && component.parent.key === parentKey;
   }).sort(function (a, b) {
     return (a.parent.rank || 0) - (b.parent.rank || 0);
   });
 };
-var getSortedSections = function getSortedSections(components) {
-  return components.filter(isMenuSection).sort(function (a, b) {
+var getSortedNestedSections = function getSortedNestedSections(components, parentKey) {
+  var nestedMenuSections = components.filter(isNestedMenuSection);
+  var nestedMenuSectionsWithParent = nestedMenuSections.filter(function (section) {
+    return section.parent !== undefined;
+  });
+  return getSortedChildren(nestedMenuSectionsWithParent, parentKey);
+};
+var getSortedNonNestedSections = function getSortedNonNestedSections(components) {
+  return components.filter(isNonNestedMenuSection).sort(function (a, b) {
     return (a.rank || 0) - (b.rank || 0);
   });
 };
 var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_ref) {
   var components = _ref.components,
     fallbacks = _ref.fallbacks;
-  var menuSections = getSortedSections(components);
+  var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
-    var children = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key).map(function (item) {
-      var ItemComponent = item.component || fallbacks.item || NoOp;
-      return /*#__PURE__*/_react.default.createElement(ItemComponent, {
-        key: item.key
+    // 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);
+
+    // 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
+          });
+        }
       });
-    });
+    };
+    var children = getChildrenWithNestedItems(currentSectionItemsSorted);
     var SectionComponent = section.component || fallbacks.section || NoOp;
     return /*#__PURE__*/_react.default.createElement(SectionComponent, {
       key: section.key

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-import TaskIcon from '@atlaskit/icon/core/task';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { DeleteDropdownItem } from './delete-button';
@@ -34,13 +33,54 @@ const getMoveUpMoveDownMenuComponents = api => {
     })
   }];
 };
+const getFormatMenuComponents = () => {
+  return [{
+    type: 'block-menu-nested',
+    key: 'nested-menu-format',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-primary',
+      rank: 100
+    },
+    component: ({
+      children
+    } = {
+      children: null
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+        text: "Format",
+        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+          label: ""
+        }),
+        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+          label: 'example nested menu'
+        })
+      }, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'nested-menu-format-section-primary',
+    parent: {
+      type: 'block-menu-nested',
+      key: 'nested-menu-format',
+      rank: 100
+    },
+    component: ({
+      children
+    } = {
+      children: null
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+    }
+  }];
+};
 export const getBlockMenuComponents = ({
   api,
   config
 }) => {
-  return [{
+  return [...(fg('platform_editor_block_menu_format') ? getFormatMenuComponents() : []), {
     type: 'block-menu-section',
-    key: 'block-menu-section-format',
+    key: 'block-menu-section-primary',
     rank: 100,
     component: ({
       children
@@ -105,33 +145,6 @@ export const getBlockMenuComponents = ({
         hasSeparator: true
       }, children);
     }
-  }, {
-    type: 'block-menu-nested',
-    key: 'nested-menu',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-format',
-      rank: 100
-    },
-    component: () => {
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        })
-      }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
-          label: ""
-        })
-      }, "Action item"), /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
-          label: ""
-        })
-      }, "Bullet list")));
-    }
   }, ...getMoveUpMoveDownMenuComponents(api), {
     type: 'block-menu-item',
     key: 'block-menu-item-delete',

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 const NoOp = props => null;
-const isMenuSection = component => {
-  return component.type === 'block-menu-section';
+const isNonNestedMenuSection = component => {
+  return component.type === 'block-menu-section' && !('parent' in component);
 };
 const isMenuItem = component => {
   return component.type === 'block-menu-item';
@@ -9,24 +9,59 @@ const isMenuItem = component => {
 const isNestedMenu = component => {
   return component.type === 'block-menu-nested';
 };
-const getSortedChildren = (components, parentKey) => components.filter(component => component.parent.key === parentKey).sort((a, b) => (a.parent.rank || 0) - (b.parent.rank || 0));
-const getSortedSections = components => {
-  return components.filter(isMenuSection).sort((a, b) => (a.rank || 0) - (b.rank || 0));
+const isNestedMenuSection = component => {
+  return 'parent' in component && component.parent !== undefined && component.parent.type === 'block-menu-nested';
+};
+const getSortedChildren = (components, parentKey) => components.filter(component => 'parent' in component && component.parent !== undefined && component.parent.key === parentKey).sort((a, b) => (a.parent.rank || 0) - (b.parent.rank || 0));
+const getSortedNestedSections = (components, parentKey) => {
+  const nestedMenuSections = components.filter(isNestedMenuSection);
+  const nestedMenuSectionsWithParent = nestedMenuSections.filter(section => section.parent !== undefined);
+  return getSortedChildren(nestedMenuSectionsWithParent, parentKey);
+};
+const getSortedNonNestedSections = components => {
+  return components.filter(isNonNestedMenuSection).sort((a, b) => (a.rank || 0) - (b.rank || 0));
 };
 export const BlockMenuRenderer = ({
   components,
   fallbacks
 }) => {
-  const menuSections = getSortedSections(components);
+  const menuSections = getSortedNonNestedSections(components);
   const menuItems = components.filter(isMenuItem);
   const nestedMenus = components.filter(isNestedMenu);
   return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
-    const children = getSortedChildren([...menuItems, ...nestedMenus], section.key).map(item => {
-      const ItemComponent = item.component || fallbacks.item || NoOp;
-      return /*#__PURE__*/React.createElement(ItemComponent, {
-        key: item.key
+    // Get all items for the current section, including nested menus, and sort them by rank
+    const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
+
+    // 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
+          });
+        }
       });
-    });
+    };
+    const children = getChildrenWithNestedItems(currentSectionItemsSorted);
     const SectionComponent = section.component || fallbacks.section || NoOp;
     return /*#__PURE__*/React.createElement(SectionComponent, {
       key: section.key

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

@@ -1,10 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-import TaskIcon from '@atlaskit/icon/core/task';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { DeleteDropdownItem } from './delete-button';
@@ -39,23 +38,64 @@ var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(a
     }
   }];
 };
-export var getBlockMenuComponents = function getBlockMenuComponents(_ref) {
-  var api = _ref.api,
-    config = _ref.config;
+var getFormatMenuComponents = function getFormatMenuComponents() {
   return [{
+    type: 'block-menu-nested',
+    key: 'nested-menu-format',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-primary',
+      rank: 100
+    },
+    component: function component() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref.children;
+      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+        text: "Format",
+        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+          label: ""
+        }),
+        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+          label: 'example nested menu'
+        })
+      }, children);
+    }
+  }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-format',
+    key: 'nested-menu-format-section-primary',
+    parent: {
+      type: 'block-menu-nested',
+      key: 'nested-menu-format',
+      rank: 100
+    },
+    component: function component() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref2.children;
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+    }
+  }];
+};
+export var getBlockMenuComponents = function getBlockMenuComponents(_ref3) {
+  var api = _ref3.api,
+    config = _ref3.config;
+  return [].concat(_toConsumableArray(fg('platform_editor_block_menu_format') ? getFormatMenuComponents() : []), [{
+    type: 'block-menu-section',
+    key: 'block-menu-section-primary',
     rank: 100,
-    component: function component(_ref2) {
-      var children = _ref2.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
     }
   }, {
     type: 'block-menu-section',
     key: 'block-menu-section-copy',
     rank: 200,
-    component: function component(_ref3) {
-      var children = _ref3.children;
+    component: function component(_ref5) {
+      var children = _ref5.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -91,8 +131,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref) {
     type: 'block-menu-section',
     key: 'block-menu-section-move-up-down',
     rank: 300,
-    component: function component(_ref4) {
-      var children = _ref4.children;
+    component: function component(_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -101,40 +141,13 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref) {
     type: 'block-menu-section',
     key: 'block-menu-section-delete',
     rank: 400,
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
     }
-  }, {
-    type: 'block-menu-nested',
-    key: 'nested-menu',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-format',
-      rank: 100
-    },
-    component: function component() {
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        })
-      }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
-          label: ""
-        })
-      }, "Action item"), /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
-          label: ""
-        })
-      }, "Bullet list")));
-    }
-  }].concat(_toConsumableArray(getMoveUpMoveDownMenuComponents(api)), [{
+  }], _toConsumableArray(getMoveUpMoveDownMenuComponents(api)), [{
     type: 'block-menu-item',
     key: 'block-menu-item-delete',
     parent: {

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

@@ -3,8 +3,8 @@ import React, { Fragment } from 'react';
 var NoOp = function NoOp(props) {
   return null;
 };
-var isMenuSection = function isMenuSection(component) {
-  return component.type === 'block-menu-section';
+var isNonNestedMenuSection = function isNonNestedMenuSection(component) {
+  return component.type === 'block-menu-section' && !('parent' in component);
 };
 var isMenuItem = function isMenuItem(component) {
   return component.type === 'block-menu-item';
@@ -12,31 +12,68 @@ var isMenuItem = function isMenuItem(component) {
 var isNestedMenu = function isNestedMenu(component) {
   return component.type === 'block-menu-nested';
 };
+var isNestedMenuSection = function isNestedMenuSection(component) {
+  return 'parent' in component && component.parent !== undefined && component.parent.type === 'block-menu-nested';
+};
 var getSortedChildren = function getSortedChildren(components, parentKey) {
   return components.filter(function (component) {
-    return component.parent.key === parentKey;
+    return 'parent' in component && component.parent !== undefined && component.parent.key === parentKey;
   }).sort(function (a, b) {
     return (a.parent.rank || 0) - (b.parent.rank || 0);
   });
 };
-var getSortedSections = function getSortedSections(components) {
-  return components.filter(isMenuSection).sort(function (a, b) {
+var getSortedNestedSections = function getSortedNestedSections(components, parentKey) {
+  var nestedMenuSections = components.filter(isNestedMenuSection);
+  var nestedMenuSectionsWithParent = nestedMenuSections.filter(function (section) {
+    return section.parent !== undefined;
+  });
+  return getSortedChildren(nestedMenuSectionsWithParent, parentKey);
+};
+var getSortedNonNestedSections = function getSortedNonNestedSections(components) {
+  return components.filter(isNonNestedMenuSection).sort(function (a, b) {
     return (a.rank || 0) - (b.rank || 0);
   });
 };
 export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
   var components = _ref.components,
     fallbacks = _ref.fallbacks;
-  var menuSections = getSortedSections(components);
+  var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
   return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
-    var children = getSortedChildren([].concat(_toConsumableArray(menuItems), _toConsumableArray(nestedMenus)), section.key).map(function (item) {
-      var ItemComponent = item.component || fallbacks.item || NoOp;
-      return /*#__PURE__*/React.createElement(ItemComponent, {
-        key: item.key
+    // 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);
+
+    // 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
+          });
+        }
       });
-    });
+    };
+    var children = getChildrenWithNestedItems(currentSectionItemsSorted);
     var SectionComponent = section.component || fallbacks.section || NoOp;
     return /*#__PURE__*/React.createElement(SectionComponent, {
       key: section.key

package/dist/types/blockMenuPluginType.d.ts

@@ -33,6 +33,19 @@ type WithRank<T> = T & {
 export type Parent<T> = WithRank<T>;
 type ComponentType = BlockMenuSection | BlockMenuItem | BlockMenuNested;
 export type ComponentTypes = Array<ComponentType>;
+/**
+ * The relationship between BlockMenuItem, BlockMenuSection, BlockMenuNested
+ * BlockMenuSection can have BlockMenuItem or BlockMenuNested as children
+ * BlockMenuNested can have BlockMenuSection as children,
+ * BlockMenuNested, with BlockMenuSection and BlockMenuItem, is a nested menu
+ *  _______________________________________
+ * | Block menu (no typing)
+ * |  |BlockMenuSection
+ * |  |  |BlockMenuItem
+ * |  |  |BlockMenuNested
+ * |  |  |  |BlockMenuSection
+ * |  |  |  |  |BlockMenuItem
+ */
 type BlockMenuItem = {
     key: string;
     type: 'block-menu-item';
@@ -45,10 +58,15 @@ type BlockMenuNested = {
     key: string;
     type: 'block-menu-nested';
 };
-export type BlockMenuNestedComponent = () => React.ReactNode;
+export type BlockMenuNestedComponent = (props?: {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type BlockMenuSectionComponent = (props: {
     children: React.ReactNode;
 }) => React.ReactNode;
+export type BlockMenuNestedSectionComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type BlockMenuItemComponent = () => React.ReactNode;
 export type RegisterBlockMenuNested = BlockMenuNested & {
     component?: BlockMenuNestedComponent;
@@ -56,7 +74,8 @@ export type RegisterBlockMenuNested = BlockMenuNested & {
 };
 export type RegisterBlockMenuSection = BlockMenuSection & {
     component?: BlockMenuSectionComponent;
-    rank: number;
+    parent?: Parent<BlockMenuNested>;
+    rank?: number;
 };
 export type RegisterBlockMenuItem = BlockMenuItem & {
     component?: BlockMenuItemComponent;

package/dist/types-ts4.5/blockMenuPluginType.d.ts

@@ -33,6 +33,19 @@ type WithRank<T> = T & {
 export type Parent<T> = WithRank<T>;
 type ComponentType = BlockMenuSection | BlockMenuItem | BlockMenuNested;
 export type ComponentTypes = Array<ComponentType>;
+/**
+ * The relationship between BlockMenuItem, BlockMenuSection, BlockMenuNested
+ * BlockMenuSection can have BlockMenuItem or BlockMenuNested as children
+ * BlockMenuNested can have BlockMenuSection as children,
+ * BlockMenuNested, with BlockMenuSection and BlockMenuItem, is a nested menu
+ *  _______________________________________
+ * | Block menu (no typing)
+ * |  |BlockMenuSection
+ * |  |  |BlockMenuItem
+ * |  |  |BlockMenuNested
+ * |  |  |  |BlockMenuSection
+ * |  |  |  |  |BlockMenuItem
+ */
 type BlockMenuItem = {
     key: string;
     type: 'block-menu-item';
@@ -45,10 +58,15 @@ type BlockMenuNested = {
     key: string;
     type: 'block-menu-nested';
 };
-export type BlockMenuNestedComponent = () => React.ReactNode;
+export type BlockMenuNestedComponent = (props?: {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type BlockMenuSectionComponent = (props: {
     children: React.ReactNode;
 }) => React.ReactNode;
+export type BlockMenuNestedSectionComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type BlockMenuItemComponent = () => React.ReactNode;
 export type RegisterBlockMenuNested = BlockMenuNested & {
     component?: BlockMenuNestedComponent;
@@ -56,7 +74,8 @@ export type RegisterBlockMenuNested = BlockMenuNested & {
 };
 export type RegisterBlockMenuSection = BlockMenuSection & {
     component?: BlockMenuSectionComponent;
-    rank: number;
+    parent?: Parent<BlockMenuNested>;
+    rank?: number;
 };
 export type RegisterBlockMenuItem = BlockMenuItem & {
     component?: BlockMenuItemComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,8 +41,9 @@
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.3.0",
-		"@atlaskit/icon": "^28.0.0",
-		"@atlaskit/icon-lab": "^5.6.0",
+		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon-lab": "^5.7.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0"
@@ -87,5 +88,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_block_menu_format": {
+			"type": "boolean"
+		}
 	}
 }