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

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+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';
+export const getBlockMenuComponents = () => {
+  return [{
+    type: 'block-menu-section',
+    key: 'block-menu-section-format',
+    rank: 100,
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-move-up-down',
+    rank: 200,
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 300,
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, 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")));
+    }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-item-create-jira',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-format',
+      rank: 200
+    },
+    component: () => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(JiraIcon, {
+          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: () => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
+          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: () => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
+          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: () => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: ""
+        })
+      }, "Delete");
+    }
+  }];
+};

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

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+const NoOp = props => null;
+const isMenuSection = component => {
+  return component.type === 'block-menu-section';
+};
+const isMenuItem = component => {
+  return component.type === 'block-menu-item';
+};
+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));
+};
+export const BlockMenuRenderer = ({
+  components,
+  fallbacks
+}) => {
+  const menuSections = getSortedSections(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
+      });
+    });
+    const SectionComponent = section.component || fallbacks.section || NoOp;
+    return /*#__PURE__*/React.createElement(SectionComponent, {
+      key: section.key
+    }, children);
+  }));
+};

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

@@ -4,82 +4,41 @@ 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';
 const styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
+const DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
+const DRAG_HANDLE_WIDTH = 12;
+const DRAG_HANDLE_PADDING = 5;
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-const FormatDropdown = () => {
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    placement: "right-start",
-    shouldFitContainer: true,
-    trigger: ({
-      triggerRef,
-      'aria-controls': ariaControls,
-      'aria-haspopup': ariaHasPopup,
-      'aria-expanded': ariaExpanded
-    }) => /*#__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")));
-};
-const BlockMenuContent = () => {
+const BlockMenuContent = ({
+  api
+}) => {
+  var _api$blockMenu;
   const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const blockMenuComponents = api === null || api === void 0 ? 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: () => /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+        elemBefore: undefined,
+        elemAfter: undefined
+      }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item"))),
+      section: () => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")),
+      item: () => /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")
+    }
+  }));
 };
 const BlockMenu = ({
   editorView,
@@ -88,7 +47,7 @@ const BlockMenu = ({
   boundariesElement,
   scrollableElement
 }) => {
-  var _editorView$hasFocus;
+  var _editorView$hasFocus, _editorView$dom;
   const {
     menuTriggerBy,
     isSelectedViaDragHandle,
@@ -118,8 +77,7 @@ const BlockMenu = ({
     closeMenu();
     return null;
   }
-  const activeNodeSelector = menuTriggerBy && `[data-drag-handler-anchor-name=${menuTriggerBy}]`;
-  const targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
+  const 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',
@@ -133,8 +91,10 @@ const BlockMenu = ({
       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/es2019/ui/consts.js

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

package/dist/esm/blockMenuPlugin.js

@@ -1,8 +1,12 @@
 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 var blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api;
+  var registry = createBlockMenuRegistry();
+  registry.register(getBlockMenuComponents());
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {
@@ -11,6 +15,14 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         plugin: 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/esm/editor-actions/index.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from "@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>;
+ *     },
+ *   },
+ *   ]);
+ * ```
+ *
+ */
+export var createBlockMenuRegistry = function createBlockMenuRegistry() {
+  var components = [];
+  var register = function register(blockMenuComponents) {
+    components.push.apply(components, _toConsumableArray(blockMenuComponents));
+  };
+  return {
+    register: register,
+    components: components
+  };
+};

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+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';
+export var 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.createElement(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.createElement(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.createElement(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.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")));
+    }
+  }, {
+    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.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(JiraIcon, {
+          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.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
+          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.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
+          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.createElement(ToolbarDropdownItem, {
+        elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: ""
+        })
+      }, "Delete");
+    }
+  }];
+};

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

@@ -0,0 +1,45 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { Fragment } from 'react';
+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);
+  });
+};
+export var 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.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
+      });
+    });
+    var SectionComponent = section.component || fallbacks.section || NoOp;
+    return /*#__PURE__*/React.createElement(SectionComponent, {
+      key: section.key
+    }, children);
+  }));
+};