@atlaskit/editor-plugin-selection-extension 4.0.0 → 4.1.0

package/dist/es2019/ui/toolbar-components/ToolbarButton.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarTooltip, ToolbarButton as BaseToolbarButton } from '@atlaskit/editor-toolbar';
+export const ToolbarButton = ({
+  api,
+  config
+}) => {
+  const dockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  const Icon = config.icon;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/React.createElement(BaseToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, config.label));
+};

package/dist/es2019/ui/toolbar-components/ToolbarMenu.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarTooltip, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+export const ToolbarMenu = ({
+  api,
+  config,
+  children
+}) => {
+  const dockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  const Icon = config.icon;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, children));
+};

package/dist/es2019/ui/toolbar-components/register-inline-toolbar.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION } from '@atlaskit/editor-common/toolbar';
+import { MenuItem } from './MenuItem';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarMenu } from './ToolbarMenu';
+const EXTENSION_RANK_MULTIPLIER = 100;
+export const registerInlineToolbar = ({
+  api,
+  extension,
+  index
+}) => {
+  const {
+    key,
+    inlineToolbar
+  } = extension;
+  const baseKey = `selection-extension-${key}`;
+  const components = [];
+  if (!inlineToolbar) {
+    return components;
+  }
+  const {
+    getToolbarItem,
+    getMenuItems
+  } = inlineToolbar;
+  const groupKey = `${baseKey}-toolbar-group`;
+  const toolbarItemKey = `${baseKey}-toolbar-${getMenuItems ? 'menu' : 'button'}`;
+  const menuSectionKey = `${baseKey}-toolbar-menu-section`;
+  if (getToolbarItem) {
+    // first we register the group for the button or menu to be added to
+    components.push({
+      type: 'group',
+      key: groupKey,
+      parents: [{
+        type: APPS_SECTION.type,
+        key: APPS_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }]
+    });
+    const toolbarItemConfig = getToolbarItem();
+
+    // if toolbar item has menu items, assume it's a menu
+    if (getMenuItems) {
+      components.push({
+        type: 'menu',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: () => {
+          return /*#__PURE__*/React.createElement(ToolbarMenu, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    } else {
+      // else just regsiter a button
+      components.push({
+        type: 'button',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: () => {
+          return /*#__PURE__*/React.createElement(ToolbarButton, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    }
+  }
+  if (getMenuItems) {
+    if (getToolbarItem) {
+      components.push({
+        type: 'menu-section',
+        key: menuSectionKey,
+        parents: [{
+          type: 'menu',
+          key: toolbarItemKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }]
+      });
+    }
+
+    // Remove ExtensionMenuSectionConfiguration - only care about items
+    const menuItems = getMenuItems().filter(item => 'label' in item && 'icon' in item);
+    components.push({
+      type: 'menu-item',
+      key,
+      parents: [{
+        type: 'menu-section',
+        // if we have a custom menu, place items in there, otherwise in the overflow menu
+        key: getToolbarItem ? menuSectionKey : SELECTION_EXTENSION_MENU_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }],
+      component: () => {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: menuItems
+        });
+      }
+    });
+  }
+  return components;
+};

package/dist/es2019/ui/toolbar-components.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { APPS_SECTION, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { MenuItem } from './toolbar-components/MenuItem';
+import { registerInlineToolbar } from './toolbar-components/register-inline-toolbar';
+import { migrateSelectionExtensionToMenuItem } from './utils/migrate-selection-extention';
+export const getToolbarComponents = ({
+  api,
+  config
+}) => {
+  var _config$extensionList, _config$extensions, _config$extensions$fi;
+  const extensionToolbarComponents = (config === null || config === void 0 ? void 0 : (_config$extensionList = config.extensionList) === null || _config$extensionList === void 0 ? void 0 : _config$extensionList.flatMap((extension, index) => registerInlineToolbar({
+    api,
+    extension,
+    index
+  }))) || [];
+
+  /**
+   * Continue to support firstParty apps for now as some apps haven't migrated yet, this simply converts apps to new ExtensionMenuItemConfiguration type
+   * to process easier. extensionList and extensions?.firstParty will most likely be mutually exclusive.
+   *
+   * **Warning:** This is called on every selection change to ensure calls to api?.selectionExtension.actions.getSelectionAdf() are
+   * fresh and up to date.
+   */
+  const firstPartyExtensions = (config === null || config === void 0 ? void 0 : (_config$extensions = config.extensions) === null || _config$extensions === void 0 ? void 0 : (_config$extensions$fi = _config$extensions.firstParty) === null || _config$extensions$fi === void 0 ? void 0 : _config$extensions$fi.map(extension => migrateSelectionExtensionToMenuItem(extension, api)).filter(extension => extension !== undefined)) || [];
+  return [{
+    type: APPS_SECTION.type,
+    key: APPS_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[APPS_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[APPS_SECTION.key]
+    }]
+  },
+  // also register a section inside the overflow menu for extensions which only have menu items
+  {
+    type: SELECTION_EXTENSION_MENU_SECTION.type,
+    key: SELECTION_EXTENSION_MENU_SECTION.key,
+    parents: [{
+      key: OVERFLOW_MENU.key,
+      type: OVERFLOW_MENU.type,
+      rank: OVERFLOW_MENU_RANK[SELECTION_EXTENSION_MENU_SECTION.key]
+    }]
+  }, ...extensionToolbarComponents, ...registerFirstPartyExtensions(api, firstPartyExtensions)];
+};
+const registerFirstPartyExtensions = (api, extensions) => {
+  const components = [];
+  components.push({
+    type: 'menu-item',
+    key: 'first-party-extensions-menu-item',
+    parents: [{
+      type: 'menu-section',
+      key: SELECTION_EXTENSION_MENU_SECTION.key,
+      rank: 100
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        api: api,
+        extensionMenuItems: extensions
+      });
+    }
+  });
+  return components;
+};

package/dist/es2019/ui/utils/migrate-selection-extention.js

@@ -0,0 +1,46 @@
+/**
+ *
+ * TODO: ED-29157 - remove once Confluence migrates to `extensionList`API
+ *
+ * NOTES:
+ * - This is temporary until we deprecate SelectionExtension and DynamicSelectionExtension.
+ * - Only supporing SelectionExtension as DynamicSelectionExtension is not being used and will be deprecated.
+ *
+ * Converts a SelectionExtension -> ExtensionMenuItemConfiguration. This allows existing extensions to appear in the new toolbar.
+ */
+export const migrateSelectionExtensionToMenuItem = (extension, api) => {
+  if (!extension.icon) {
+    return undefined;
+  }
+
+  // Warning! These are inlined because the onClick handler must have up to date references to selection (which is awkwaradly set during extension.onClick invocation).
+  const getSelection = () => {
+    var _sharedState$activeEx;
+    const sharedState = api === null || api === void 0 ? void 0 : api.selectionExtension.sharedState.currentState();
+    return sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$activeEx = sharedState.activeExtension) === null || _sharedState$activeEx === void 0 ? void 0 : _sharedState$activeEx.selection;
+  };
+  return {
+    label: extension.name,
+    icon: extension.icon,
+    isDisabled: extension.isDisabled && extension.isDisabled({
+      selection: getSelection(),
+      // pass undefined as no consumers use this
+      selectedNodeAdf: undefined,
+      selectionRanges: undefined
+    }),
+    /**
+     * SelectionExtension supports passing through selection, selectionAdf, and selectionRanges.
+     *
+     * To support backwards compatibility wrap the onClick with these parameters here and let MenuItem invoke onClick using its expected signature.
+     */
+    onClick: () => {
+      const selectionAdf = api === null || api === void 0 ? void 0 : api.selectionExtension.actions.getSelectionAdf();
+      extension.onClick && extension.onClick({
+        selection: getSelection(),
+        selectedNodeAdf: selectionAdf === null || selectionAdf === void 0 ? void 0 : selectionAdf.selectedNodeAdf,
+        selectionRanges: selectionAdf === null || selectionAdf === void 0 ? void 0 : selectionAdf.selectionRanges
+      });
+    },
+    contentComponent: extension.component
+  };
+};

package/dist/esm/pm-plugins/utils/index.js

@@ -122,4 +122,26 @@ export function getSelectionAdfInfo(state) {
   return _objectSpread(_objectSpread({}, selectionInfo), {}, {
     selectedNodeAdf: selectedNodeAdf
   });
+}
+export function getSelectionAdfInfoNew(selection) {
+  var selectionInfo = {
+    selectedNode: selection.$from.node(),
+    nodePos: selection.$from.depth > 0 ? selection.$from.before() : selection.from
+  };
+  if (selection instanceof TextSelection) {
+    var $from = selection.$from,
+      $to = selection.$to;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  var serializer = new JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return _objectSpread(_objectSpread({}, selectionInfo), {}, {
+    selectedNodeAdf: selectedNodeAdf
+  });
 }

package/dist/esm/selectionExtensionPlugin.js

@@ -4,6 +4,7 @@ import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { insertAdfAtEndOfDoc as _insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
 import { replaceWithAdf as _replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
@@ -13,7 +14,8 @@ import { SelectionExtensionActionTypes } from './types';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getMenuItemExtensions, getToolbarItemExtensions } from './ui/extensions';
 import { LegacyPrimaryToolbarComponent } from './ui/LegacyToolbarComponent';
-import { selectionToolbar as _selectionToolbar } from './ui/selectionToolbar';
+import { selectionToolbar } from './ui/selectionToolbar';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { registerBlockMenuItems } from './ui/utils/registerBlockMenuItems';
 export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
@@ -23,6 +25,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   };
   var cachedSelection;
   var cachedOverflowMenuOptions;
+  var isToolbarAIFCEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   var _ref2 = config || {},
     _ref2$extensionList = _ref2.extensionList,
     extensionList = _ref2$extensionList === void 0 ? [] : _ref2$extensionList,
@@ -33,7 +36,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
     firstParty = _ref3$firstParty === void 0 ? [] : _ref3$firstParty,
     _ref3$external = _ref3.external,
     external = _ref3$external === void 0 ? [] : _ref3$external;
-  if (fg('platform_editor_selection_extension_api_v2')) {
+  if (!isToolbarAIFCEnabled && fg('platform_editor_selection_extension_api_v2')) {
     var primaryToolbarItemExtensions = getToolbarItemExtensions(extensionList, 'primaryToolbar');
     if (primaryToolbarItemExtensions !== null && primaryToolbarItemExtensions !== void 0 && primaryToolbarItemExtensions.length) {
       var _api$primaryToolbar;
@@ -128,6 +131,13 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
           registerBlockMenuItems(extensionList, api);
         }
+        if (isToolbarAIFCEnabled && expValEquals('platform_editor_toolbar_aifc_selection_extension', 'isEnabled', true)) {
+          var _api$toolbar;
+          api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents({
+            api: api,
+            config: config
+          }), true);
+        }
       });
     },
     contentComponent: function contentComponent(_ref7) {
@@ -140,7 +150,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
       });
     },
     pluginsOptions: {
-      selectionToolbar: function selectionToolbar(state, intl) {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : function (state, intl) {
         var _api$editorViewMode;
         if (!config) {
           return;
@@ -287,7 +297,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         // NEXT PR: Make sure we cache the whole generated selection toolbar
         // also debug this to make sure it's actually preventing unnecessary re-renders / work
         if (cachedOverflowMenuOptions && state.selection.eq(cachedSelection) && fg('platform_editor_selection_extension_api_v2')) {
-          return _selectionToolbar({
+          return selectionToolbar({
             overflowOptions: cachedOverflowMenuOptions,
             extensionList: extensionList
           });
@@ -301,7 +311,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         var groupedExtensionsArray = [].concat(_toConsumableArray(getFirstPartyExtensions(allFirstParty)), _toConsumableArray(getExternalExtensions(allExternal)));
         cachedOverflowMenuOptions = groupedExtensionsArray;
         cachedSelection = state.selection;
-        return _selectionToolbar({
+        return selectionToolbar({
           overflowOptions: cachedOverflowMenuOptions,
           extensionList: extensionList
         });

package/dist/esm/ui/extension/SelectionExtensionComponentWrapper.js

@@ -55,6 +55,8 @@ export var SelectionExtensionComponentWrapper = function SelectionExtensionCompo
   if (!(activeExtension !== null && activeExtension !== void 0 && activeExtension.extension.component)) {
     return null;
   }
+
+  // TODO: ED-29142 - Currently this only accepts old extensions with `component` instead of `contentComponent`. Need to support ExtensionMenuItemConfiguration as well
   var ExtensionComponent = activeExtension.extension.component;
   return /*#__PURE__*/React.createElement(ExtensionComponent, {
     closeExtension: handleOnClose,

package/dist/esm/ui/toolbar-components/MenuItem.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { selectionExtensionPluginKey } from '../../pm-plugins/main';
+import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
+import { SelectionExtensionActionTypes } from '../../types';
+export var MenuItem = function MenuItem(_ref) {
+  var extensionMenuItems = _ref.extensionMenuItems,
+    api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length) || !editorView || !api) {
+    return null;
+  }
+  var onClickHandle = function onClickHandle(extension) {
+    return function () {
+      if (extension.contentComponent) {
+        var selection = getSelectionTextInfo(editorView, api);
+        api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+          extension: extension,
+          selection: selection
+        }));
+      }
+      api.core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        var _getSelectionAdfInfoN = getSelectionAdfInfoNew(tr.selection),
+          selectedNode = _getSelectionAdfInfoN.selectedNode,
+          nodePos = _getSelectionAdfInfoN.nodePos;
+        tr.setMeta(selectionExtensionPluginKey, {
+          type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
+          selectedNode: selectedNode,
+          nodePos: nodePos
+        });
+        return tr;
+      });
+      extension.onClick && extension.onClick();
+    };
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(function (extension) {
+    var Icon = extension.icon;
+    return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      key: extension.label,
+      elemBefore: /*#__PURE__*/React.createElement(Icon, {
+        label: ""
+      }),
+      onClick: onClickHandle(extension),
+      isDisabled: extension.isDisabled
+    }, extension.label);
+  }));
+};

package/dist/esm/ui/toolbar-components/ToolbarButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarTooltip, ToolbarButton as BaseToolbarButton } from '@atlaskit/editor-toolbar';
+export var ToolbarButton = function ToolbarButton(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  var dockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  var Icon = config.icon;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/React.createElement(BaseToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, config.label));
+};

package/dist/esm/ui/toolbar-components/ToolbarMenu.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarTooltip, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+export var ToolbarMenu = function ToolbarMenu(_ref) {
+  var api = _ref.api,
+    config = _ref.config,
+    children = _ref.children;
+  var dockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  var Icon = config.icon;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, children));
+};

package/dist/esm/ui/toolbar-components/register-inline-toolbar.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION } from '@atlaskit/editor-common/toolbar';
+import { MenuItem } from './MenuItem';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarMenu } from './ToolbarMenu';
+var EXTENSION_RANK_MULTIPLIER = 100;
+export var registerInlineToolbar = function registerInlineToolbar(_ref) {
+  var api = _ref.api,
+    extension = _ref.extension,
+    index = _ref.index;
+  var key = extension.key,
+    inlineToolbar = extension.inlineToolbar;
+  var baseKey = "selection-extension-".concat(key);
+  var components = [];
+  if (!inlineToolbar) {
+    return components;
+  }
+  var getToolbarItem = inlineToolbar.getToolbarItem,
+    getMenuItems = inlineToolbar.getMenuItems;
+  var groupKey = "".concat(baseKey, "-toolbar-group");
+  var toolbarItemKey = "".concat(baseKey, "-toolbar-").concat(getMenuItems ? 'menu' : 'button');
+  var menuSectionKey = "".concat(baseKey, "-toolbar-menu-section");
+  if (getToolbarItem) {
+    // first we register the group for the button or menu to be added to
+    components.push({
+      type: 'group',
+      key: groupKey,
+      parents: [{
+        type: APPS_SECTION.type,
+        key: APPS_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }]
+    });
+    var toolbarItemConfig = getToolbarItem();
+
+    // if toolbar item has menu items, assume it's a menu
+    if (getMenuItems) {
+      components.push({
+        type: 'menu',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: function component() {
+          return /*#__PURE__*/React.createElement(ToolbarMenu, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    } else {
+      // else just regsiter a button
+      components.push({
+        type: 'button',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: function component() {
+          return /*#__PURE__*/React.createElement(ToolbarButton, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    }
+  }
+  if (getMenuItems) {
+    if (getToolbarItem) {
+      components.push({
+        type: 'menu-section',
+        key: menuSectionKey,
+        parents: [{
+          type: 'menu',
+          key: toolbarItemKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }]
+      });
+    }
+
+    // Remove ExtensionMenuSectionConfiguration - only care about items
+    var menuItems = getMenuItems().filter(function (item) {
+      return 'label' in item && 'icon' in item;
+    });
+    components.push({
+      type: 'menu-item',
+      key: key,
+      parents: [{
+        type: 'menu-section',
+        // if we have a custom menu, place items in there, otherwise in the overflow menu
+        key: getToolbarItem ? menuSectionKey : SELECTION_EXTENSION_MENU_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: menuItems
+        });
+      }
+    });
+  }
+  return components;
+};

package/dist/esm/ui/toolbar-components.js

@@ -0,0 +1,73 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { APPS_SECTION, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { MenuItem } from './toolbar-components/MenuItem';
+import { registerInlineToolbar } from './toolbar-components/register-inline-toolbar';
+import { migrateSelectionExtensionToMenuItem } from './utils/migrate-selection-extention';
+export var getToolbarComponents = function getToolbarComponents(_ref) {
+  var _config$extensionList, _config$extensions;
+  var api = _ref.api,
+    config = _ref.config;
+  var extensionToolbarComponents = (config === null || config === void 0 || (_config$extensionList = config.extensionList) === null || _config$extensionList === void 0 ? void 0 : _config$extensionList.flatMap(function (extension, index) {
+    return registerInlineToolbar({
+      api: api,
+      extension: extension,
+      index: index
+    });
+  })) || [];
+
+  /**
+   * Continue to support firstParty apps for now as some apps haven't migrated yet, this simply converts apps to new ExtensionMenuItemConfiguration type
+   * to process easier. extensionList and extensions?.firstParty will most likely be mutually exclusive.
+   *
+   * **Warning:** This is called on every selection change to ensure calls to api?.selectionExtension.actions.getSelectionAdf() are
+   * fresh and up to date.
+   */
+  var firstPartyExtensions = (config === null || config === void 0 || (_config$extensions = config.extensions) === null || _config$extensions === void 0 || (_config$extensions = _config$extensions.firstParty) === null || _config$extensions === void 0 ? void 0 : _config$extensions.map(function (extension) {
+    return migrateSelectionExtensionToMenuItem(extension, api);
+  }).filter(function (extension) {
+    return extension !== undefined;
+  })) || [];
+  return [{
+    type: APPS_SECTION.type,
+    key: APPS_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[APPS_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[APPS_SECTION.key]
+    }]
+  },
+  // also register a section inside the overflow menu for extensions which only have menu items
+  {
+    type: SELECTION_EXTENSION_MENU_SECTION.type,
+    key: SELECTION_EXTENSION_MENU_SECTION.key,
+    parents: [{
+      key: OVERFLOW_MENU.key,
+      type: OVERFLOW_MENU.type,
+      rank: OVERFLOW_MENU_RANK[SELECTION_EXTENSION_MENU_SECTION.key]
+    }]
+  }].concat(_toConsumableArray(extensionToolbarComponents), _toConsumableArray(registerFirstPartyExtensions(api, firstPartyExtensions)));
+};
+var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, extensions) {
+  var components = [];
+  components.push({
+    type: 'menu-item',
+    key: 'first-party-extensions-menu-item',
+    parents: [{
+      type: 'menu-section',
+      key: SELECTION_EXTENSION_MENU_SECTION.key,
+      rank: 100
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        api: api,
+        extensionMenuItems: extensions
+      });
+    }
+  });
+  return components;
+};