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

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

@@ -4,86 +4,49 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { cx } from '@atlaskit/css';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import JiraIcon from '@atlaskit/icon-lab/core/jira';
-import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
-import ChangesIcon from '@atlaskit/icon/core/changes';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import DeleteIcon from '@atlaskit/icon/core/delete';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-import TaskIcon from '@atlaskit/icon/core/task';
+import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { BlockMenuRenderer } from './block-menu-renderer';
 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 = withReactEditorViewOuterListeners(Popup);
-var FormatDropdown = function FormatDropdown() {
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    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.createElement(DropdownItem, {
-        "aria-controls": ariaControls,
-        "aria-haspopup": ariaHasPopup,
-        "aria-expanded": ariaExpanded,
-        ref: triggerRef,
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: ""
-        })
-      }, "Format");
-    }
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
-      label: ""
-    })
-  }, "Action item"), /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
-      label: ""
-    })
-  }, "Bullet list")));
-};
-var BlockMenuContent = function BlockMenuContent() {
+var BlockMenuContent = function BlockMenuContent(_ref) {
+  var _api$blockMenu;
+  var api = _ref.api;
   var setOutsideClickTargetRef = useContext(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.createElement(Box, {
     testId: "editor-block-menu",
     ref: setOutsideClickTargetRef,
     xcss: cx(styles.base)
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(FormatDropdown, null), /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(JiraIcon, {
-      label: ""
-    })
-  }, "Create Jira work item")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
-    hasSeparator: true
-  }, /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
-      label: ""
-    })
-  }, "Move up"), /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
-      label: ""
-    })
-  }, "Move down")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
-    hasSeparator: true
-  }, /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
-      label: ""
-    })
-  }, "Delete")));
+  }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
+    components: blockMenuComponents || [],
+    fallbacks: {
+      nestedMenu: function nestedMenu() {
+        return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+          elemBefore: undefined,
+          elemAfter: undefined
+        }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")));
+      },
+      section: function section() {
+        return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item"));
+      },
+      item: function item() {
+        return /*#__PURE__*/React.createElement(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,
@@ -117,8 +80,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.createElement(PopupWithListeners, {
       alignX: 'left',
@@ -132,8 +94,10 @@ var BlockMenu = function BlockMenu(_ref2) {
       zIndex: akEditorFloatingOverlapPanelZIndex,
       forcePlacement: true,
       stick: true,
-      offset: [-6, 8]
-    }, /*#__PURE__*/React.createElement(BlockMenuContent, null));
+      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
+    }, /*#__PURE__*/React.createElement(BlockMenuContent, {
+      api: api
+    }));
   } else {
     return null;
   }

package/dist/esm/ui/consts.js

@@ -0,0 +1 @@
+export var BLOCK_MENU_LABEL = 'Editor Block Menu';

package/dist/types/blockMenuPluginType.d.ts

@@ -3,4 +3,45 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
     dependencies: [OptionalPlugin<BlockControlsPlugin>, OptionalPlugin<UserIntentPlugin>];
+    actions: {
+        registerBlockMenuComponents: (blockMenuComponents: Array<RegisterBlockMenuComponent>) => void;
+        getBlockMenuComponents: () => Array<RegisterBlockMenuComponent>;
+    };
 }>;
+type WithRank<T> = T & {
+    rank: number;
+};
+export type Parent<T> = WithRank<T>;
+type ComponentType = BlockMenuSection | BlockMenuItem | BlockMenuNested;
+export type ComponentTypes = Array<ComponentType>;
+type BlockMenuItem = {
+    key: string;
+    type: 'block-menu-item';
+};
+type BlockMenuSection = {
+    key: string;
+    type: 'block-menu-section';
+};
+type BlockMenuNested = {
+    key: string;
+    type: 'block-menu-nested';
+};
+export type BlockMenuNestedComponent = () => React.ReactNode;
+export type BlockMenuSectionComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export type BlockMenuItemComponent = () => React.ReactNode;
+export type RegisterBlockMenuNested = BlockMenuNested & {
+    parent: Parent<BlockMenuSection>;
+    component?: BlockMenuNestedComponent;
+};
+export type RegisterBlockMenuSection = BlockMenuSection & {
+    rank: number;
+    component?: BlockMenuSectionComponent;
+};
+export type RegisterBlockMenuItem = BlockMenuItem & {
+    parent: Parent<BlockMenuSection>;
+    component?: BlockMenuItemComponent;
+};
+export type RegisterBlockMenuComponent = RegisterBlockMenuNested | RegisterBlockMenuSection | RegisterBlockMenuItem;
+export {};

package/dist/types/editor-actions/index.d.ts

@@ -0,0 +1,52 @@
+import type { RegisterBlockMenuComponent } from '../blockMenuPluginType';
+/**
+ * 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 declare const createBlockMenuRegistry: () => {
+    register: (blockMenuComponents: RegisterBlockMenuComponent[]) => void;
+    components: RegisterBlockMenuComponent[];
+};

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockMenuPlugin } from './blockMenuPlugin';
-export type { BlockMenuPlugin } from './blockMenuPluginType';
+export type { BlockMenuPlugin, RegisterBlockMenuComponent, Parent } from './blockMenuPluginType';

package/dist/types/ui/block-menu-components.d.ts

@@ -0,0 +1,2 @@
+import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
+export declare const getBlockMenuComponents: () => RegisterBlockMenuComponent[];

package/dist/types/ui/block-menu-renderer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { RegisterBlockMenuComponent, BlockMenuNestedComponent, BlockMenuSectionComponent, BlockMenuItemComponent } from '../blockMenuPluginType';
+type BlockMenuProps = {
+    /**
+     * Every registered block menu component
+     */
+    components: RegisterBlockMenuComponent[];
+    /**
+     * Fallback components used in rendering
+     */
+    fallbacks: {
+        nestedMenu: BlockMenuNestedComponent;
+        section: BlockMenuSectionComponent;
+        item: BlockMenuItemComponent;
+    };
+};
+export declare const BlockMenuRenderer: ({ components, fallbacks }: BlockMenuProps) => React.JSX.Element;
+export {};

package/dist/types/ui/consts.d.ts

@@ -0,0 +1 @@
+export declare const BLOCK_MENU_LABEL = "Editor Block Menu";

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

@@ -6,4 +6,45 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<UserIntentPlugin>
     ];
+    actions: {
+        registerBlockMenuComponents: (blockMenuComponents: Array<RegisterBlockMenuComponent>) => void;
+        getBlockMenuComponents: () => Array<RegisterBlockMenuComponent>;
+    };
 }>;
+type WithRank<T> = T & {
+    rank: number;
+};
+export type Parent<T> = WithRank<T>;
+type ComponentType = BlockMenuSection | BlockMenuItem | BlockMenuNested;
+export type ComponentTypes = Array<ComponentType>;
+type BlockMenuItem = {
+    key: string;
+    type: 'block-menu-item';
+};
+type BlockMenuSection = {
+    key: string;
+    type: 'block-menu-section';
+};
+type BlockMenuNested = {
+    key: string;
+    type: 'block-menu-nested';
+};
+export type BlockMenuNestedComponent = () => React.ReactNode;
+export type BlockMenuSectionComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export type BlockMenuItemComponent = () => React.ReactNode;
+export type RegisterBlockMenuNested = BlockMenuNested & {
+    parent: Parent<BlockMenuSection>;
+    component?: BlockMenuNestedComponent;
+};
+export type RegisterBlockMenuSection = BlockMenuSection & {
+    rank: number;
+    component?: BlockMenuSectionComponent;
+};
+export type RegisterBlockMenuItem = BlockMenuItem & {
+    parent: Parent<BlockMenuSection>;
+    component?: BlockMenuItemComponent;
+};
+export type RegisterBlockMenuComponent = RegisterBlockMenuNested | RegisterBlockMenuSection | RegisterBlockMenuItem;
+export {};

package/dist/types-ts4.5/editor-actions/index.d.ts

@@ -0,0 +1,52 @@
+import type { RegisterBlockMenuComponent } from '../blockMenuPluginType';
+/**
+ * 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 declare const createBlockMenuRegistry: () => {
+    register: (blockMenuComponents: RegisterBlockMenuComponent[]) => void;
+    components: RegisterBlockMenuComponent[];
+};

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

@@ -1,2 +1,2 @@
 export { blockMenuPlugin } from './blockMenuPlugin';
-export type { BlockMenuPlugin } from './blockMenuPluginType';
+export type { BlockMenuPlugin, RegisterBlockMenuComponent, Parent } from './blockMenuPluginType';

package/dist/types-ts4.5/ui/block-menu-components.d.ts

@@ -0,0 +1,2 @@
+import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
+export declare const getBlockMenuComponents: () => RegisterBlockMenuComponent[];

package/dist/types-ts4.5/ui/block-menu-renderer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { RegisterBlockMenuComponent, BlockMenuNestedComponent, BlockMenuSectionComponent, BlockMenuItemComponent } from '../blockMenuPluginType';
+type BlockMenuProps = {
+    /**
+     * Every registered block menu component
+     */
+    components: RegisterBlockMenuComponent[];
+    /**
+     * Fallback components used in rendering
+     */
+    fallbacks: {
+        nestedMenu: BlockMenuNestedComponent;
+        section: BlockMenuSectionComponent;
+        item: BlockMenuItemComponent;
+    };
+};
+export declare const BlockMenuRenderer: ({ components, fallbacks }: BlockMenuProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/consts.d.ts

@@ -0,0 +1 @@
+export declare const BLOCK_MENU_LABEL = "Editor Block Menu";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,15 +36,16 @@
 		"@atlaskit/editor-plugin-block-controls": "^4.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.5.0",
-		"@atlaskit/icon": "^27.9.0",
-		"@atlaskit/icon-lab": "^5.3.0",
+		"@atlaskit/editor-shared-styles": "^3.6.0",
+		"@atlaskit/editor-toolbar": "^0.2.0",
+		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon-lab": "^5.4.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.18.0",
+		"@atlaskit/editor-common": "^107.20.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},