@atlaskit/editor-plugin-selection-extension 7.2.1 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 9.0.0
+
+### Major Changes
+
+- [`d2e5db925723b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2e5db925723b) -
+  EDITOR-2772 Update selection extension types for block menu
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.0.0
+
+### Major Changes
+
+- [`63fe1593adb21`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63fe1593adb21) -
+  EDITOR-2772 Remove support for unused `section` config on selection extensions
+
 ## 7.2.1
 
 ### Patch Changes

package/dist/cjs/types/index.js

@@ -17,4 +17,21 @@ var SelectionExtensionActionTypes = exports.SelectionExtensionActionTypes = /*#_
   SelectionExtensionActionTypes["SET_SELECTED_NODE"] = "set-selected-node";
   SelectionExtensionActionTypes["START_TRACK_CHANGES"] = "start-track-changes";
   return SelectionExtensionActionTypes;
-}({});
+}({});
+/**
+ * Common fields applicable to all extension menu items
+ */
+/**
+ * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ */
+/**
+ * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ */
+/**
+ * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
+ * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ */
+/**
+ * We intentionally only support leaf menu items nested within dropdown menu items so that there will
+ * be at max two levels of nesting from extension menu items.
+ */

package/dist/cjs/ui/extensions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarItemExtensions = exports.getMenuItemExtensions = exports.getBlockMenuItemExtensions = void 0;
+exports.getToolbarItemExtensions = exports.getMenuItemExtensions = void 0;
 /**
  * From the full list of extensions, extract only those that have a toolbar item configuration
  * for the specified type (either 'primaryToolbar' or 'inlineToolbar').
@@ -60,20 +60,4 @@ var getMenuItemExtensions = exports.getMenuItemExtensions = function getMenuItem
     }
     return acc;
   }, []);
-};
-var getBlockMenuItemExtensions = exports.getBlockMenuItemExtensions = function getBlockMenuItemExtensions(extensionList, targetSource) {
-  return extensionList.reduce(function (acc, extension) {
-    var source = extension.source,
-      blockMenu = extension.blockMenu;
-    if (source === targetSource && blockMenu !== null && blockMenu !== void 0 && blockMenu.getMenuItem) {
-      var _blockMenu$getNestedM;
-      var menuItem = blockMenu.getMenuItem();
-      var nestedMenuItems = (_blockMenu$getNestedM = blockMenu.getNestedMenuItems) === null || _blockMenu$getNestedM === void 0 ? void 0 : _blockMenu$getNestedM.call(blockMenu);
-      acc.push({
-        menuItem: menuItem,
-        nestedMenuItems: nestedMenuItems
-      });
-    }
-    return acc;
-  }, []);
 };

package/dist/cjs/ui/utils/registerBlockMenuItems.js

@@ -5,108 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.registerBlockMenuItems = registerBlockMenuItems;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
-var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _extensions = require("../extensions");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 function registerBlockMenuItems(extensionList, api) {
-  var blockMenuExtensions = (0, _extensions.getBlockMenuItemExtensions)(extensionList, 'first-party');
-  if (!(blockMenuExtensions !== null && blockMenuExtensions !== void 0 && blockMenuExtensions.length)) {
-    return;
-  }
-  blockMenuExtensions.forEach(function (extension, index) {
-    var menuItem = extension.menuItem;
-    var nestedMenuItems = extension.nestedMenuItems;
-    var blockMenuItemKey = "selection-extension-".concat(index);
-
-    // If there are nested menu items, create a nested dropdown menu
-    if (nestedMenuItems && nestedMenuItems.length > 0) {
-      var _api$blockMenu;
-      var nestedMenuComponents = [{
-        type: 'block-menu-nested',
-        key: "".concat(blockMenuItemKey, "-nested"),
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        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: menuItem.label,
-            elemBefore: menuItem.icon ? /*#__PURE__*/_react.default.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-              label: 'nested menu'
-            })
-          }, children);
-        }
-      }, {
-        type: 'block-menu-section',
-        key: "".concat(blockMenuItemKey, "-nested-section"),
-        parent: {
-          type: 'block-menu-nested',
-          key: "".concat(blockMenuItemKey, "-nested"),
-          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);
-        }
-      }].concat((0, _toConsumableArray2.default)(nestedMenuItems.reduce(function (acc, nestedItem, nestedIndex) {
-        if ('label' in nestedItem) {
-          acc.push({
-            type: 'block-menu-item',
-            key: "".concat(blockMenuItemKey, "-nested-item-").concat(nestedIndex),
-            parent: {
-              type: 'block-menu-section',
-              key: "".concat(blockMenuItemKey, "-nested-section"),
-              rank: nestedIndex + 100
-            },
-            component: function component() {
-              return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-                elemBefore: nestedItem.icon ? /*#__PURE__*/_react.default.createElement(nestedItem.icon, {
-                  label: ''
-                }) : undefined,
-                onClick: nestedItem.onClick,
-                isDisabled: nestedItem.isDisabled
-              }, nestedItem.label);
-            }
-          });
-        }
-        return acc;
-      }, [])));
-      api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(nestedMenuComponents);
-    } else {
-      var _api$blockMenu2;
-      // If no nested items, create a regular menu item
-      var blockMenuComponent = [{
-        type: 'block-menu-item',
-        key: blockMenuItemKey,
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        component: function component() {
-          return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-            elemBefore: menuItem.icon ? /*#__PURE__*/_react.default.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            onClick: menuItem.onClick,
-            isDisabled: menuItem.isDisabled
-          }, menuItem.label);
-        }
-      }];
-      api === null || api === void 0 || (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 || _api$blockMenu2.actions.registerBlockMenuComponents(blockMenuComponent);
+  extensionList.forEach(function (_ref, index) {
+    var _api$blockMenu;
+    var source = _ref.source,
+      key = _ref.key,
+      blockMenu = _ref.blockMenu;
+    if (source !== 'first-party' || !blockMenu) {
+      return;
     }
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: "selection-extension-".concat(key),
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.TRANSFORM_CREATE_MENU_SECTION.key,
+        rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_CREATE_MENU_SECTION.key]
+      },
+      component: function component() {
+        // EDITOR-2772 implementation of rendering in next PR
+        return /*#__PURE__*/_react.default.createElement("div", null, "Placeholder");
+      }
+    }]);
   });
 }

package/dist/es2019/types/index.js

@@ -13,4 +13,26 @@ export let SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExten
   SelectionExtensionActionTypes["SET_SELECTED_NODE"] = "set-selected-node";
   SelectionExtensionActionTypes["START_TRACK_CHANGES"] = "start-track-changes";
   return SelectionExtensionActionTypes;
-}({});
+}({});
+
+/**
+ * Common fields applicable to all extension menu items
+ */
+
+/**
+ * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ */
+
+/**
+ * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ */
+
+/**
+ * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
+ * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ */
+
+/**
+ * We intentionally only support leaf menu items nested within dropdown menu items so that there will
+ * be at max two levels of nesting from extension menu items.
+ */

package/dist/es2019/ui/extensions.js

@@ -54,22 +54,4 @@ export const getMenuItemExtensions = (extensionList, targetSource) => {
     }
     return acc;
   }, []);
-};
-export const getBlockMenuItemExtensions = (extensionList, targetSource) => {
-  return extensionList.reduce((acc, extension) => {
-    const {
-      source,
-      blockMenu
-    } = extension;
-    if (source === targetSource && blockMenu !== null && blockMenu !== void 0 && blockMenu.getMenuItem) {
-      var _blockMenu$getNestedM;
-      const menuItem = blockMenu.getMenuItem();
-      const nestedMenuItems = (_blockMenu$getNestedM = blockMenu.getNestedMenuItems) === null || _blockMenu$getNestedM === void 0 ? void 0 : _blockMenu$getNestedM.call(blockMenu);
-      acc.push({
-        menuItem,
-        nestedMenuItems
-      });
-    }
-    return acc;
-  }, []);
 };

package/dist/es2019/ui/utils/registerBlockMenuItems.js

@@ -1,106 +1,27 @@
 import React from 'react';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { getBlockMenuItemExtensions } from '../extensions';
+import { TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_MENU_ITEM_RANK } from '@atlaskit/editor-common/block-menu';
 export function registerBlockMenuItems(extensionList, api) {
-  const blockMenuExtensions = getBlockMenuItemExtensions(extensionList, 'first-party');
-  if (!(blockMenuExtensions !== null && blockMenuExtensions !== void 0 && blockMenuExtensions.length)) {
-    return;
-  }
-  blockMenuExtensions.forEach((extension, index) => {
-    const menuItem = extension.menuItem;
-    const nestedMenuItems = extension.nestedMenuItems;
-    const blockMenuItemKey = `selection-extension-${index}`;
-
-    // If there are nested menu items, create a nested dropdown menu
-    if (nestedMenuItems && nestedMenuItems.length > 0) {
-      var _api$blockMenu;
-      const nestedMenuComponents = [{
-        type: 'block-menu-nested',
-        key: `${blockMenuItemKey}-nested`,
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        component: ({
-          children
-        } = {
-          children: null
-        }) => {
-          return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-            text: menuItem.label,
-            elemBefore: menuItem.icon ? /*#__PURE__*/React.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-              label: 'nested menu'
-            })
-          }, children);
-        }
-      }, {
+  extensionList.forEach(({
+    source,
+    key,
+    blockMenu
+  }, index) => {
+    var _api$blockMenu;
+    if (source !== 'first-party' || !blockMenu) {
+      return;
+    }
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: `selection-extension-${key}`,
+      parent: {
         type: 'block-menu-section',
-        key: `${blockMenuItemKey}-nested-section`,
-        parent: {
-          type: 'block-menu-nested',
-          key: `${blockMenuItemKey}-nested`,
-          rank: 100
-        },
-        component: ({
-          children
-        } = {
-          children: null
-        }) => {
-          return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
-        }
+        key: TRANSFORM_CREATE_MENU_SECTION.key,
+        rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
       },
-      // Add nested menu items
-      ...nestedMenuItems.reduce((acc, nestedItem, nestedIndex) => {
-        if ('label' in nestedItem) {
-          acc.push({
-            type: 'block-menu-item',
-            key: `${blockMenuItemKey}-nested-item-${nestedIndex}`,
-            parent: {
-              type: 'block-menu-section',
-              key: `${blockMenuItemKey}-nested-section`,
-              rank: nestedIndex + 100
-            },
-            component: () => {
-              return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-                elemBefore: nestedItem.icon ? /*#__PURE__*/React.createElement(nestedItem.icon, {
-                  label: ''
-                }) : undefined,
-                onClick: nestedItem.onClick,
-                isDisabled: nestedItem.isDisabled
-              }, nestedItem.label);
-            }
-          });
-        }
-        return acc;
-      }, [])];
-      api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(nestedMenuComponents);
-    } else {
-      var _api$blockMenu2;
-      // If no nested items, create a regular menu item
-      const blockMenuComponent = [{
-        type: 'block-menu-item',
-        key: blockMenuItemKey,
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        component: () => {
-          return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-            elemBefore: menuItem.icon ? /*#__PURE__*/React.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            onClick: menuItem.onClick,
-            isDisabled: menuItem.isDisabled
-          }, menuItem.label);
-        }
-      }];
-      api === null || api === void 0 ? void 0 : (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 ? void 0 : _api$blockMenu2.actions.registerBlockMenuComponents(blockMenuComponent);
-    }
+      component: () => {
+        // EDITOR-2772 implementation of rendering in next PR
+        return /*#__PURE__*/React.createElement("div", null, "Placeholder");
+      }
+    }]);
   });
 }

package/dist/esm/types/index.js

@@ -13,4 +13,26 @@ export var SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExten
   SelectionExtensionActionTypes["SET_SELECTED_NODE"] = "set-selected-node";
   SelectionExtensionActionTypes["START_TRACK_CHANGES"] = "start-track-changes";
   return SelectionExtensionActionTypes;
-}({});
+}({});
+
+/**
+ * Common fields applicable to all extension menu items
+ */
+
+/**
+ * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ */
+
+/**
+ * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ */
+
+/**
+ * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
+ * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ */
+
+/**
+ * We intentionally only support leaf menu items nested within dropdown menu items so that there will
+ * be at max two levels of nesting from extension menu items.
+ */

package/dist/esm/ui/extensions.js

@@ -54,20 +54,4 @@ export var getMenuItemExtensions = function getMenuItemExtensions(extensionList,
     }
     return acc;
   }, []);
-};
-export var getBlockMenuItemExtensions = function getBlockMenuItemExtensions(extensionList, targetSource) {
-  return extensionList.reduce(function (acc, extension) {
-    var source = extension.source,
-      blockMenu = extension.blockMenu;
-    if (source === targetSource && blockMenu !== null && blockMenu !== void 0 && blockMenu.getMenuItem) {
-      var _blockMenu$getNestedM;
-      var menuItem = blockMenu.getMenuItem();
-      var nestedMenuItems = (_blockMenu$getNestedM = blockMenu.getNestedMenuItems) === null || _blockMenu$getNestedM === void 0 ? void 0 : _blockMenu$getNestedM.call(blockMenu);
-      acc.push({
-        menuItem: menuItem,
-        nestedMenuItems: nestedMenuItems
-      });
-    }
-    return acc;
-  }, []);
 };

package/dist/esm/ui/utils/registerBlockMenuItems.js

@@ -1,105 +1,26 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { getBlockMenuItemExtensions } from '../extensions';
+import { TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_MENU_ITEM_RANK } from '@atlaskit/editor-common/block-menu';
 export function registerBlockMenuItems(extensionList, api) {
-  var blockMenuExtensions = getBlockMenuItemExtensions(extensionList, 'first-party');
-  if (!(blockMenuExtensions !== null && blockMenuExtensions !== void 0 && blockMenuExtensions.length)) {
-    return;
-  }
-  blockMenuExtensions.forEach(function (extension, index) {
-    var menuItem = extension.menuItem;
-    var nestedMenuItems = extension.nestedMenuItems;
-    var blockMenuItemKey = "selection-extension-".concat(index);
-
-    // If there are nested menu items, create a nested dropdown menu
-    if (nestedMenuItems && nestedMenuItems.length > 0) {
-      var _api$blockMenu;
-      var nestedMenuComponents = [{
-        type: 'block-menu-nested',
-        key: "".concat(blockMenuItemKey, "-nested"),
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        component: function component() {
-          var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-              children: null
-            },
-            children = _ref.children;
-          return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-            text: menuItem.label,
-            elemBefore: menuItem.icon ? /*#__PURE__*/React.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-              label: 'nested menu'
-            })
-          }, children);
-        }
-      }, {
-        type: 'block-menu-section',
-        key: "".concat(blockMenuItemKey, "-nested-section"),
-        parent: {
-          type: 'block-menu-nested',
-          key: "".concat(blockMenuItemKey, "-nested"),
-          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);
-        }
-      }].concat(_toConsumableArray(nestedMenuItems.reduce(function (acc, nestedItem, nestedIndex) {
-        if ('label' in nestedItem) {
-          acc.push({
-            type: 'block-menu-item',
-            key: "".concat(blockMenuItemKey, "-nested-item-").concat(nestedIndex),
-            parent: {
-              type: 'block-menu-section',
-              key: "".concat(blockMenuItemKey, "-nested-section"),
-              rank: nestedIndex + 100
-            },
-            component: function component() {
-              return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-                elemBefore: nestedItem.icon ? /*#__PURE__*/React.createElement(nestedItem.icon, {
-                  label: ''
-                }) : undefined,
-                onClick: nestedItem.onClick,
-                isDisabled: nestedItem.isDisabled
-              }, nestedItem.label);
-            }
-          });
-        }
-        return acc;
-      }, [])));
-      api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(nestedMenuComponents);
-    } else {
-      var _api$blockMenu2;
-      // If no nested items, create a regular menu item
-      var blockMenuComponent = [{
-        type: 'block-menu-item',
-        key: blockMenuItemKey,
-        parent: {
-          type: 'block-menu-section',
-          key: 'block-menu-section-primary',
-          rank: 200
-        },
-        component: function component() {
-          return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-            elemBefore: menuItem.icon ? /*#__PURE__*/React.createElement(menuItem.icon, {
-              label: ''
-            }) : undefined,
-            onClick: menuItem.onClick,
-            isDisabled: menuItem.isDisabled
-          }, menuItem.label);
-        }
-      }];
-      api === null || api === void 0 || (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 || _api$blockMenu2.actions.registerBlockMenuComponents(blockMenuComponent);
+  extensionList.forEach(function (_ref, index) {
+    var _api$blockMenu;
+    var source = _ref.source,
+      key = _ref.key,
+      blockMenu = _ref.blockMenu;
+    if (source !== 'first-party' || !blockMenu) {
+      return;
     }
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: "selection-extension-".concat(key),
+      parent: {
+        type: 'block-menu-section',
+        key: TRANSFORM_CREATE_MENU_SECTION.key,
+        rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
+      },
+      component: function component() {
+        // EDITOR-2772 implementation of rendering in next PR
+        return /*#__PURE__*/React.createElement("div", null, "Placeholder");
+      }
+    }]);
   });
 }

package/dist/types/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentType, PropsWithChildren } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -27,8 +28,8 @@ export type SelectionCoords = {
     top: number;
 };
 export type SelectionExtension = {
-    component?: React.ComponentType<SelectionExtensionComponentProps>;
-    icon?: React.ComponentType<React.PropsWithChildren<{
+    component?: ComponentType<SelectionExtensionComponentProps>;
+    icon?: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
     isDisabled?: (params: SelectionExtensionCallbackOptions) => boolean;
@@ -125,21 +126,17 @@ export type ExtensionConfiguration = {
     source: ExtensionSource;
 };
 export type GetToolbarItemFn = () => ExtensionToolbarItemConfiguration;
-export type GetMenuItemsFn = () => Array<ExtensionMenuItemConfiguration | ExtensionMenuSectionConfiguration>;
-export type GetMenuItemFn = () => Omit<ExtensionMenuItemConfiguration, 'section'>;
-export type BlockMenuItemConfiguration = Omit<ExtensionMenuItemConfiguration, 'contentComponent'>;
-export type GetBlockMenuItemFn = () => Omit<BlockMenuItemConfiguration, 'section'>;
-export type GetBlockMenuNestedItemsFn = () => Array<BlockMenuItemConfiguration | ExtensionMenuSectionConfiguration>;
+export type GetMenuItemsFn = () => Array<ExtensionMenuItemConfiguration>;
+export type GetNestedMenuItemsFn = () => Array<ExtensionMenuItemNestedConfiguration>;
 export type ToolbarExtensionConfiguration = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem?: GetToolbarItemFn;
 };
 export type BlockMenuExtensionConfiguration = {
-    getMenuItem: GetBlockMenuItemFn;
-    getNestedMenuItems?: GetBlockMenuNestedItemsFn;
+    getMenuItems: GetMenuItemsFn;
 };
 export type ExtensionToolbarItemConfiguration = {
-    icon: React.ComponentType<React.PropsWithChildren<{
+    icon: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
     isDisabled?: boolean;
@@ -147,14 +144,27 @@ export type ExtensionToolbarItemConfiguration = {
     onClick?: () => void;
     tooltip: string;
 };
-export type ExtensionMenuItemConfiguration = {
-    contentComponent?: React.ComponentType<SelectionExtensionComponentProps>;
-    icon: React.ComponentType<React.PropsWithChildren<{
+/**
+ * Common fields applicable to all extension menu items
+ */
+type ExtensionMenuItemBaseConfiguration = {
+    icon: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';
     }>>;
-    isDisabled?: boolean;
     label: string;
+    isDisabled?: boolean;
+};
+/**
+ * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ */
+type ExtensionMenuItemLeafConfiguration = {
+    /**
+     * Optional content component to render when this menu item is selected
+     *
+     * Used for forge app extensions that need to render custom UI when selected from the block menu.
+     */
+    contentComponent?: ComponentType<SelectionExtensionComponentProps>;
     /**
      * Optional lozenge to display next to the label in the menu
      */
@@ -162,17 +172,25 @@ export type ExtensionMenuItemConfiguration = {
         label: string;
     };
     onClick?: () => void;
-    /**
-     * Optional menu-section to declare grouping - only used for menu items
-     */
-    section?: {
-        key: string;
-        rank: number;
-    };
 };
-export type ExtensionMenuSectionConfiguration = {
-    key: string;
-    rank: number;
-    title?: string;
+/**
+ * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ */
+type ExtensionMenuItemDropdownMenuConfiguration = {
+    getMenuItems: GetNestedMenuItemsFn;
 };
+type AllNever<T> = {
+    [K in keyof T]?: never;
+};
+/**
+ * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
+ * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ */
+type ExtensionMenuItemUnsupportedConfiguration = AllNever<ExtensionMenuItemDropdownMenuConfiguration | ExtensionMenuItemLeafConfiguration>;
+export type ExtensionMenuItemConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemUnsupportedConfiguration & (ExtensionMenuItemLeafConfiguration | ExtensionMenuItemDropdownMenuConfiguration);
+/**
+ * We intentionally only support leaf menu items nested within dropdown menu items so that there will
+ * be at max two levels of nesting from extension menu items.
+ */
+type ExtensionMenuItemNestedConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemLeafConfiguration;
 export {};

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

@@ -1,4 +1,4 @@
-import type { ExtensionConfiguration, ExtensionSource, GetBlockMenuItemFn, GetBlockMenuNestedItemsFn, GetMenuItemsFn, GetToolbarItemFn, SelectionExtension } from '../types';
+import type { ExtensionConfiguration, ExtensionSource, GetMenuItemsFn, GetToolbarItemFn, SelectionExtension } from '../types';
 export type ToolbarItemExtension = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem: GetToolbarItemFn;
@@ -25,9 +25,3 @@ export declare const getToolbarItemExtensions: (extensionList: ExtensionConfigur
  * @example
  */
 export declare const getMenuItemExtensions: (extensionList: ExtensionConfiguration[], targetSource: ExtensionSource) => SelectionExtension[];
-type BlockMenuItems = {
-    menuItem: ReturnType<GetBlockMenuItemFn>;
-    nestedMenuItems?: ReturnType<GetBlockMenuNestedItemsFn>;
-};
-export declare const getBlockMenuItemExtensions: (extensionList: ExtensionConfiguration[], targetSource: ExtensionSource) => BlockMenuItems[];
-export {};

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

@@ -1,3 +1,4 @@
+import type { ComponentType, PropsWithChildren } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -27,8 +28,8 @@ export type SelectionCoords = {
     top: number;
 };
 export type SelectionExtension = {
-    component?: React.ComponentType<SelectionExtensionComponentProps>;
-    icon?: React.ComponentType<React.PropsWithChildren<{
+    component?: ComponentType<SelectionExtensionComponentProps>;
+    icon?: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
     isDisabled?: (params: SelectionExtensionCallbackOptions) => boolean;
@@ -125,21 +126,17 @@ export type ExtensionConfiguration = {
     source: ExtensionSource;
 };
 export type GetToolbarItemFn = () => ExtensionToolbarItemConfiguration;
-export type GetMenuItemsFn = () => Array<ExtensionMenuItemConfiguration | ExtensionMenuSectionConfiguration>;
-export type GetMenuItemFn = () => Omit<ExtensionMenuItemConfiguration, 'section'>;
-export type BlockMenuItemConfiguration = Omit<ExtensionMenuItemConfiguration, 'contentComponent'>;
-export type GetBlockMenuItemFn = () => Omit<BlockMenuItemConfiguration, 'section'>;
-export type GetBlockMenuNestedItemsFn = () => Array<BlockMenuItemConfiguration | ExtensionMenuSectionConfiguration>;
+export type GetMenuItemsFn = () => Array<ExtensionMenuItemConfiguration>;
+export type GetNestedMenuItemsFn = () => Array<ExtensionMenuItemNestedConfiguration>;
 export type ToolbarExtensionConfiguration = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem?: GetToolbarItemFn;
 };
 export type BlockMenuExtensionConfiguration = {
-    getMenuItem: GetBlockMenuItemFn;
-    getNestedMenuItems?: GetBlockMenuNestedItemsFn;
+    getMenuItems: GetMenuItemsFn;
 };
 export type ExtensionToolbarItemConfiguration = {
-    icon: React.ComponentType<React.PropsWithChildren<{
+    icon: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
     isDisabled?: boolean;
@@ -147,14 +144,27 @@ export type ExtensionToolbarItemConfiguration = {
     onClick?: () => void;
     tooltip: string;
 };
-export type ExtensionMenuItemConfiguration = {
-    contentComponent?: React.ComponentType<SelectionExtensionComponentProps>;
-    icon: React.ComponentType<React.PropsWithChildren<{
+/**
+ * Common fields applicable to all extension menu items
+ */
+type ExtensionMenuItemBaseConfiguration = {
+    icon: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';
     }>>;
-    isDisabled?: boolean;
     label: string;
+    isDisabled?: boolean;
+};
+/**
+ * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ */
+type ExtensionMenuItemLeafConfiguration = {
+    /**
+     * Optional content component to render when this menu item is selected
+     *
+     * Used for forge app extensions that need to render custom UI when selected from the block menu.
+     */
+    contentComponent?: ComponentType<SelectionExtensionComponentProps>;
     /**
      * Optional lozenge to display next to the label in the menu
      */
@@ -162,17 +172,25 @@ export type ExtensionMenuItemConfiguration = {
         label: string;
     };
     onClick?: () => void;
-    /**
-     * Optional menu-section to declare grouping - only used for menu items
-     */
-    section?: {
-        key: string;
-        rank: number;
-    };
 };
-export type ExtensionMenuSectionConfiguration = {
-    key: string;
-    rank: number;
-    title?: string;
+/**
+ * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ */
+type ExtensionMenuItemDropdownMenuConfiguration = {
+    getMenuItems: GetNestedMenuItemsFn;
 };
+type AllNever<T> = {
+    [K in keyof T]?: never;
+};
+/**
+ * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
+ * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ */
+type ExtensionMenuItemUnsupportedConfiguration = AllNever<ExtensionMenuItemDropdownMenuConfiguration | ExtensionMenuItemLeafConfiguration>;
+export type ExtensionMenuItemConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemUnsupportedConfiguration & (ExtensionMenuItemLeafConfiguration | ExtensionMenuItemDropdownMenuConfiguration);
+/**
+ * We intentionally only support leaf menu items nested within dropdown menu items so that there will
+ * be at max two levels of nesting from extension menu items.
+ */
+type ExtensionMenuItemNestedConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemLeafConfiguration;
 export {};

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

@@ -1,4 +1,4 @@
-import type { ExtensionConfiguration, ExtensionSource, GetBlockMenuItemFn, GetBlockMenuNestedItemsFn, GetMenuItemsFn, GetToolbarItemFn, SelectionExtension } from '../types';
+import type { ExtensionConfiguration, ExtensionSource, GetMenuItemsFn, GetToolbarItemFn, SelectionExtension } from '../types';
 export type ToolbarItemExtension = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem: GetToolbarItemFn;
@@ -25,9 +25,3 @@ export declare const getToolbarItemExtensions: (extensionList: ExtensionConfigur
  * @example
  */
 export declare const getMenuItemExtensions: (extensionList: ExtensionConfiguration[], targetSource: ExtensionSource) => SelectionExtension[];
-type BlockMenuItems = {
-    menuItem: ReturnType<GetBlockMenuItemFn>;
-    nestedMenuItems?: ReturnType<GetBlockMenuNestedItemsFn>;
-};
-export declare const getBlockMenuItemExtensions: (extensionList: ExtensionConfiguration[], targetSource: ExtensionSource) => BlockMenuItems[];
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "7.2.1",
+	"version": "9.0.0",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^14.8.0",
+		"@atlaskit/tmp-editor-statsig": "^14.9.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"react-intl-next": "npm:react-intl@^5.18.1",