@atlaskit/editor-plugin-block-menu 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.3
+
+### Patch Changes
+
+- [`c930aab37d2a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c930aab37d2a6) -
+  ED-28563: Block menu API to register menu items
+- Updated dependencies
+
+## 0.0.2
+
+### Patch Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`53b66ca466092`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/53b66ca466092) -
+  ED-28963 Update block menu to be aligned with drag handle
+- Updated dependencies
+
 ## 0.0.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,51 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__editor-plugin-block-menu/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/css/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-block-controls/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/blockMenuPlugin.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockMenuPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _editorActions = require("./editor-actions");
 var _main = require("./pm-plugins/main");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
+var _blockMenuComponents = require("./ui/block-menu-components");
 var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api;
+  var registry = (0, _editorActions.createBlockMenuRegistry)();
+  registry.register((0, _blockMenuComponents.getBlockMenuComponents)());
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {
@@ -18,6 +22,14 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         plugin: _main.createPlugin
       }];
     },
+    actions: {
+      registerBlockMenuComponents: function registerBlockMenuComponents(blockMenuComponents) {
+        registry.register(blockMenuComponents);
+      },
+      getBlockMenuComponents: function getBlockMenuComponents() {
+        return registry.components;
+      }
+    },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint,

package/dist/cjs/editor-actions/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBlockMenuRegistry = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * Create a simple registry for block menu components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createBlockMenuRegistry();
+ * registry.register(
+ *   [{
+ *     type: 'block-menu-section' as const,
+ *     key: 'block-menu-section-format',
+ *     rank: 100,
+ *     component: ({ children }: { children: React.ReactNode }) => {
+ *       return <ToolbarDropdownItemSection>{children}</ToolbarDropdownItemSection>;
+ *     },
+ *   },
+ *   {
+ *     type: 'block-menu-nested' as const,
+ *     key: 'nested-menu',
+ *     parent: {
+ *       type: 'block-menu-section' as const,
+ *       key: 'block-menu-section-format',
+ *       rank: 100,
+ *     },
+ *     component: () => {
+ *       return (
+ *         <ToolbarNestedDropdownMenu>{...}</ToolbarNestedDropdownMenu>
+ *       );
+ *     },
+ *   },
+ *   {
+ *     type: 'block-menu-item' as const,
+ *     key: 'block-menu-item-create-jira',
+ *     parent: {
+ *       type: 'block-menu-section' as const,
+ *       key: 'block-menu-section-format',
+ *       rank: 200,
+ *     },
+ *     component: () => {
+ *       return <ToolbarDropdownItem elemBefore={<JiraIcon label="" />}>Create Jira work item</ToolbarDropdownItem>;
+ *     },
+ *   },
+ *   ]);
+ * ```
+ *
+ */
+var createBlockMenuRegistry = exports.createBlockMenuRegistry = function createBlockMenuRegistry() {
+  var components = [];
+  var register = function register(blockMenuComponents) {
+    components.push.apply(components, (0, _toConsumableArray2.default)(blockMenuComponents));
+  };
+  return {
+    register: register,
+    components: components
+  };
+};

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _jira = _interopRequireDefault(require("@atlaskit/icon-lab/core/jira"));
+var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
+var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents() {
+  return [{
+    type: 'block-menu-section',
+    key: 'block-menu-section-format',
+    rank: 100,
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-move-up-down',
+    rank: 200,
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 300,
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, 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")));
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-create-jira',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-format',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/_react.default.createElement(_jira.default, {
+          label: ""
+        })
+      }, "Create Jira work item");
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-up',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 100
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
+          label: ""
+        })
+      }, "Move up");
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-move-down',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-move-up-down',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
+          label: ""
+        })
+      }, "Move down");
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-delete',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-delete',
+      rank: 100
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
+          label: ""
+        })
+      }, "Delete");
+    }
+  }];
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var NoOp = function NoOp(props) {
+  return null;
+};
+var isMenuSection = function isMenuSection(component) {
+  return component.type === 'block-menu-section';
+};
+var isMenuItem = function isMenuItem(component) {
+  return component.type === 'block-menu-item';
+};
+var isNestedMenu = function isNestedMenu(component) {
+  return component.type === 'block-menu-nested';
+};
+var getSortedChildren = function getSortedChildren(components, parentKey) {
+  return components.filter(function (component) {
+    return 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) {
+    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 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
+      });
+    });
+    var SectionComponent = section.component || fallbacks.section || NoOp;
+    return /*#__PURE__*/_react.default.createElement(SectionComponent, {
+      key: section.key
+    }, children);
+  }));
+};

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

@@ -1,7 +1,6 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -12,87 +11,50 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _css = require("@atlaskit/css");
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _jira = _interopRequireDefault(require("@atlaskit/icon-lab/core/jira"));
-var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
-var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
-var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
-var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
-var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _blockMenuRenderer = require("./block-menu-renderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
+var DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
+var DRAG_HANDLE_WIDTH = 12;
+var DRAG_HANDLE_PADDING = 5;
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
-var FormatDropdown = function FormatDropdown() {
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-    placement: "right-start",
-    shouldFitContainer: true,
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        ariaControls = _ref['aria-controls'],
-        ariaHasPopup = _ref['aria-haspopup'],
-        ariaExpanded = _ref['aria-expanded'];
-      return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-        "aria-controls": ariaControls,
-        "aria-haspopup": ariaHasPopup,
-        "aria-expanded": ariaExpanded,
-        ref: triggerRef,
-        elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-          label: ""
-        })
-      }, "Format");
-    }
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_task.default, {
-      label: ""
-    })
-  }, "Action item"), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_listBulleted.default, {
-      label: ""
-    })
-  }, "Bullet list")));
-};
-var BlockMenuContent = function BlockMenuContent() {
+var BlockMenuContent = function BlockMenuContent(_ref) {
+  var _api$blockMenu;
+  var api = _ref.api;
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     testId: "editor-block-menu",
     ref: setOutsideClickTargetRef,
     xcss: (0, _css.cx)(styles.base)
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(FormatDropdown, null), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_jira.default, {
-      label: ""
-    })
-  }, "Create Jira work item")), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
-    hasSeparator: true
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
-      label: ""
-    })
-  }, "Move up"), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
-      label: ""
-    })
-  }, "Move down")), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
-    hasSeparator: true
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
-      label: ""
-    })
-  }, "Delete")));
+  }, /*#__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"));
+      },
+      item: function item() {
+        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item");
+      }
+    }
+  }));
 };
 var BlockMenu = function BlockMenu(_ref2) {
-  var _editorView$hasFocus;
+  var _editorView$hasFocus, _editorView$dom;
   var editorView = _ref2.editorView,
     api = _ref2.api,
     mountTo = _ref2.mountTo,
@@ -126,8 +88,7 @@ var BlockMenu = function BlockMenu(_ref2) {
     closeMenu();
     return null;
   }
-  var activeNodeSelector = menuTriggerBy && "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
-  var targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
+  var targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
       alignX: 'left',
@@ -141,8 +102,10 @@ var BlockMenu = function BlockMenu(_ref2) {
       zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
       forcePlacement: true,
       stick: true,
-      offset: [-6, 8]
-    }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, null));
+      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
+    }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
+      api: api
+    }));
   } else {
     return null;
   }

package/dist/cjs/ui/consts.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BLOCK_MENU_LABEL = void 0;
+var BLOCK_MENU_LABEL = exports.BLOCK_MENU_LABEL = 'Editor Block Menu';

package/dist/es2019/blockMenuPlugin.js

@@ -1,28 +1,42 @@
 import React from 'react';
+import { createBlockMenuRegistry } from './editor-actions';
 import { createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
+import { getBlockMenuComponents } from './ui/block-menu-components';
 export const blockMenuPlugin = ({
   api
-}) => ({
-  name: 'blockMenu',
-  pmPlugins() {
-    return [{
-      name: 'blockMenuPlugin',
-      plugin: createPlugin
-    }];
-  },
-  contentComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement
-  }) {
-    return /*#__PURE__*/React.createElement(BlockMenu, {
-      editorView: editorView,
-      api: api,
-      mountTo: popupsMountPoint,
-      boundariesElement: popupsBoundariesElement,
-      scrollableElement: popupsScrollableElement
-    });
-  }
-});
+}) => {
+  const registry = createBlockMenuRegistry();
+  registry.register(getBlockMenuComponents());
+  return {
+    name: 'blockMenu',
+    pmPlugins() {
+      return [{
+        name: 'blockMenuPlugin',
+        plugin: createPlugin
+      }];
+    },
+    actions: {
+      registerBlockMenuComponents: blockMenuComponents => {
+        registry.register(blockMenuComponents);
+      },
+      getBlockMenuComponents: () => {
+        return registry.components;
+      }
+    },
+    contentComponent({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) {
+      return /*#__PURE__*/React.createElement(BlockMenu, {
+        editorView: editorView,
+        api: api,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
+      });
+    }
+  };
+};

package/dist/es2019/editor-actions/index.js

@@ -0,0 +1,57 @@
+/**
+ * Create a simple registry for block menu components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createBlockMenuRegistry();
+ * registry.register(
+ *   [{
+ *     type: 'block-menu-section' as const,
+ *     key: 'block-menu-section-format',
+ *     rank: 100,
+ *     component: ({ children }: { children: React.ReactNode }) => {
+ *       return <ToolbarDropdownItemSection>{children}</ToolbarDropdownItemSection>;
+ *     },
+ *   },
+ *   {
+ *     type: 'block-menu-nested' as const,
+ *     key: 'nested-menu',
+ *     parent: {
+ *       type: 'block-menu-section' as const,
+ *       key: 'block-menu-section-format',
+ *       rank: 100,
+ *     },
+ *     component: () => {
+ *       return (
+ *         <ToolbarNestedDropdownMenu>{...}</ToolbarNestedDropdownMenu>
+ *       );
+ *     },
+ *   },
+ *   {
+ *     type: 'block-menu-item' as const,
+ *     key: 'block-menu-item-create-jira',
+ *     parent: {
+ *       type: 'block-menu-section' as const,
+ *       key: 'block-menu-section-format',
+ *       rank: 200,
+ *     },
+ *     component: () => {
+ *       return <ToolbarDropdownItem elemBefore={<JiraIcon label="" />}>Create Jira work item</ToolbarDropdownItem>;
+ *     },
+ *   },
+ *   ]);
+ * ```
+ *
+ */
+export const createBlockMenuRegistry = () => {
+  const components = [];
+  const register = blockMenuComponents => {
+    components.push(...blockMenuComponents);
+  };
+  return {
+    register,
+    components
+  };
+};