@atlaskit/editor-plugin-selection-extension 3.4.0 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 3.4.1
+
+### Patch Changes
+
+- [#192343](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192343)
+  [`9cb0878241016`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cb0878241016) -
+  ED-28736 more extensible selection extensions API
+- Updated dependencies
+
 ## 3.4.0
 
 ### Minor Changes

package/dist/cjs/selectionExtensionPlugin.js

@@ -17,7 +17,9 @@ var _main = require("./pm-plugins/main");
 var _utils = require("./pm-plugins/utils");
 var _types = require("./types");
 var _SelectionExtensionComponentWrapper = require("./ui/extension/SelectionExtensionComponentWrapper");
+var _extensions = require("./ui/extensions");
 var _getBoundingBoxFromSelection = require("./ui/getBoundingBoxFromSelection");
+var _LegacyToolbarComponent = require("./ui/LegacyToolbarComponent");
 var _selectionToolbar2 = require("./ui/selectionToolbar");
 var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
@@ -27,6 +29,30 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
   };
   var cachedSelection;
   var cachedOverflowMenuOptions;
+  var _ref2 = config || {},
+    _ref2$extensionList = _ref2.extensionList,
+    extensionList = _ref2$extensionList === void 0 ? [] : _ref2$extensionList,
+    _ref2$extensions = _ref2.extensions,
+    extensions = _ref2$extensions === void 0 ? {} : _ref2$extensions;
+  var _ref3 = extensions || {},
+    _ref3$firstParty = _ref3.firstParty,
+    firstParty = _ref3$firstParty === void 0 ? [] : _ref3$firstParty,
+    _ref3$external = _ref3.external,
+    external = _ref3$external === void 0 ? [] : _ref3$external;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+    var primaryToolbarItemExtensions = (0, _extensions.getToolbarItemExtensions)(extensionList, 'primaryToolbar');
+    if (primaryToolbarItemExtensions !== null && primaryToolbarItemExtensions !== void 0 && primaryToolbarItemExtensions.length) {
+      var _api$primaryToolbar;
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
+        name: 'selectionExtension',
+        component: function component() {
+          return /*#__PURE__*/_react.default.createElement(_LegacyToolbarComponent.LegacyPrimaryToolbarComponent, {
+            primaryToolbarItemExtensions: primaryToolbarItemExtensions
+          });
+        }
+      });
+    }
+  }
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -37,8 +63,8 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
     },
     commands: {
       setActiveExtension: function setActiveExtension(extension) {
-        return function (_ref2) {
-          var tr = _ref2.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(_main.selectionExtensionPluginKey, {
             type: 'set-active-extension',
             extension: extension
@@ -46,8 +72,8 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         };
       },
       clearActiveExtension: function clearActiveExtension() {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           return tr.setMeta(_main.selectionExtensionPluginKey, {
             type: 'clear-active-extension'
           });
@@ -89,10 +115,14 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           dispatch = _editorViewRef$curren3.dispatch;
         return (0, _insertAdfAtEndOfDoc2.insertAdfAtEndOfDoc)(nodeAdf)(state, dispatch);
       }
+      // NEXT PR: Implement this to return selectedNodeAdf, selectionRanges
+      // getSelectionAdf: () => {},
+      // NEXT PR: Implement this to return text, coords
+      // getSelectionText: () => {},
     },
-    contentComponent: function contentComponent(_ref4) {
+    contentComponent: function contentComponent(_ref6) {
       var _api$analytics;
-      var editorView = _ref4.editorView;
+      var editorView = _ref6.editorView;
       return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentWrapper.SelectionExtensionComponentWrapper, {
         editorView: editorView,
         api: api,
@@ -105,25 +135,17 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         if (!config) {
           return;
         }
-        var pageModes = config.pageModes,
-          extensions = config.extensions;
+        var pageModes = config.pageModes;
 
-        /**
-         * Extensions Config Validation
-         *
-         * Check whether plugin contains any selection extensions
-         */
-        if ((!(extensions !== null && extensions !== void 0 && extensions.firstParty) || extensions.firstParty.length === 0) && (!(extensions !== null && extensions !== void 0 && extensions.external) || extensions.external.length === 0)) {
+        // Extensions Config Validation
+        // Check whether plugin contains any selection extensions
+        if (!(firstParty !== null && firstParty !== void 0 && firstParty.length) && !(external !== null && external !== void 0 && external.length) && !(extensionList !== null && extensionList !== void 0 && extensionList.length)) {
           return;
         }
 
-        /**
-         * Content Mode Validation
-         *
-         * Check if pageModes is provided and matches against current content mode
-         *
-         * TODO: This will eventially transition from mode to contentMode
-         */
+        // Content Mode Validation
+        // Check if pageModes is provided and matches against current content mode
+        // This will eventially transition from mode to contentMode
         var editorContentMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
         if (pageModes) {
           // Early Exit: consumer has set pageModes but editorContentMode is undefined
@@ -140,11 +162,8 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           }
         }
 
-        /**
-         * Active Extension
-         *
-         * Check if there is an active extension and hide the selection extension dropdown
-         */
+        // Active Extension
+        // Check if there is an active extension and hide the selection extension dropdown
         var selectionExtensionState = _main.selectionExtensionPluginKey.getState(state);
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
@@ -187,8 +206,8 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
                 selectionRanges: selectionRanges
               };
               (_extension$onClick = extension.onClick) === null || _extension$onClick === void 0 || _extension$onClick.call(extension, onClickCallbackOptions);
-              api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref5) {
-                var tr = _ref5.tr;
+              api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref7) {
+                var tr = _ref7.tr;
                 tr.setMeta(_main.selectionExtensionPluginKey, {
                   type: _types.SelectionExtensionActionTypes.SET_SELECTED_NODE,
                   selectedNode: selectedNode,
@@ -251,9 +270,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           });
         };
 
-        /**
-         * Add a heading to the external extensions
-         */
+        // Add a heading to the external extensions
         var getExternalExtensions = function getExternalExtensions(extensions) {
           var prefilteredExtensions = prefilterExtensions(extensions);
           var externalExtensions = [];
@@ -270,13 +287,28 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           }
           return externalExtensions;
         };
+
+        // 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) && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
-          return (0, _selectionToolbar2.selectionToolbar)(cachedOverflowMenuOptions);
+          return (0, _selectionToolbar2.selectionToolbar)({
+            overflowOptions: cachedOverflowMenuOptions,
+            extensionList: extensionList
+          });
+        }
+        var allFirstParty = (0, _toConsumableArray2.default)(firstParty);
+        var allExternal = (0, _toConsumableArray2.default)(external);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+          allFirstParty = [].concat((0, _toConsumableArray2.default)(firstParty), (0, _toConsumableArray2.default)((0, _extensions.getMenuItemExtensions)(extensionList, 'first-party')));
+          allExternal = [].concat((0, _toConsumableArray2.default)(external), (0, _toConsumableArray2.default)((0, _extensions.getMenuItemExtensions)(extensionList, 'external')));
         }
-        var groupedExtensionsArray = [].concat((0, _toConsumableArray2.default)(getFirstPartyExtensions(extensions.firstParty || [])), (0, _toConsumableArray2.default)(getExternalExtensions(extensions.external || [])));
+        var groupedExtensionsArray = [].concat((0, _toConsumableArray2.default)(getFirstPartyExtensions(allFirstParty)), (0, _toConsumableArray2.default)(getExternalExtensions(allExternal)));
         cachedOverflowMenuOptions = groupedExtensionsArray;
         cachedSelection = state.selection;
-        return (0, _selectionToolbar2.selectionToolbar)(groupedExtensionsArray);
+        return (0, _selectionToolbar2.selectionToolbar)({
+          overflowOptions: cachedOverflowMenuOptions,
+          extensionList: extensionList
+        });
       }
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/ui/LegacyToolbarComponent.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegacyPrimaryToolbarComponent = exports.LegacyExtensionToolbarItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LegacyPrimaryToolbarComponent = exports.LegacyPrimaryToolbarComponent = function LegacyPrimaryToolbarComponent(_ref) {
+  var primaryToolbarItemExtensions = _ref.primaryToolbarItemExtensions;
+  // NEXT PR: need to render a separator after – if there are extensions added
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, primaryToolbarItemExtensions.map(function (toolbarItemExtension, i) {
+    var toolbarItem = toolbarItemExtension.getToolbarItem();
+    return /*#__PURE__*/_react.default.createElement(LegacyExtensionToolbarItem, {
+      key: toolbarItem.tooltip,
+      toolbarItem: toolbarItem
+    });
+  }));
+};
+var LegacyExtensionToolbarItem = exports.LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref2) {
+  var toolbarItem = _ref2.toolbarItem,
+    getMenuItems = _ref2.getMenuItems;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var Icon = toolbarItem.icon,
+    tooltip = toolbarItem.tooltip,
+    isDisabled = toolbarItem.isDisabled,
+    onClick = toolbarItem.onClick,
+    _label = toolbarItem.label;
+  if (!getMenuItems) {
+    return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+      spacing: "default",
+      disabled: isDisabled,
+      selected: isOpen,
+      title: tooltip,
+      "aria-label": tooltip,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
+      onClick: onClick,
+      iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+        label: tooltip
+      })
+    });
+  }
+  var toggleOpen = function toggleOpen() {
+    setIsOpen(function (prev) {
+      return !prev;
+    });
+  };
+  var toggleOpenByKeyboard = function toggleOpenByKeyboard(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      toggleOpen();
+    }
+  };
+  var handleItemActivated = function handleItemActivated(_ref3) {
+    var _item$onClick;
+    var item = _ref3.item,
+      _ref3$shouldCloseMenu = _ref3.shouldCloseMenu,
+      shouldCloseMenu = _ref3$shouldCloseMenu === void 0 ? true : _ref3$shouldCloseMenu;
+    (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
+    if (shouldCloseMenu) {
+      setIsOpen(false);
+    }
+  };
+  var handleOnOpenChange = function handleOnOpenChange(attrs) {
+    setIsOpen(!!(attrs !== null && attrs !== void 0 && attrs.isOpen));
+  };
+  var items = isOpen ? getMenuItems().map(function (menuItem, i) {
+    return {
+      key: "menu-item-".concat(i),
+      content: menuItem.label,
+      elemBefore: /*#__PURE__*/_react.default.createElement(menuItem.icon, {
+        label: menuItem.label
+      }),
+      onClick: function onClick() {
+        var _menuItem$onClick;
+        (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);
+        // NEXT PR: here we need to set the active extension so the contentComponent can render
+        // menuItem.contentComponent
+      },
+      isDisabled: menuItem.isDisabled,
+      'aria-label': menuItem.label,
+      value: {
+        name: menuItem.label
+      }
+    };
+  }) : [];
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU
+    },
+    items: [{
+      items: items
+    }],
+    isOpen: isOpen,
+    onItemActivated: handleItemActivated,
+    onOpenChange: handleOnOpenChange,
+    fitWidth: 200
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    spacing: "default",
+    disabled: isDisabled,
+    selected: isOpen,
+    title: tooltip,
+    "aria-label": tooltip,
+    "aria-expanded": isOpen,
+    "aria-haspopup": true,
+    onClick: toggleOpen,
+    onKeyDown: toggleOpenByKeyboard,
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: tooltip
+    })
+  }));
+};

package/dist/cjs/ui/extensions.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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').
+ *
+ * @param extensionList - List of all extensions
+ * @param toolbarType - Type of toolbar ('primaryToolbar' or 'inlineToolbar')
+ * @returns Array of ToolbarItemExtension objects
+ * @example
+ */
+var getToolbarItemExtensions = exports.getToolbarItemExtensions = function getToolbarItemExtensions(extensionList, toolbarType) {
+  return extensionList.reduce(function (acc, extension) {
+    var toolbarConfig = extension[toolbarType];
+    if (toolbarConfig !== null && toolbarConfig !== void 0 && toolbarConfig.getToolbarItem) {
+      acc.push({
+        getToolbarItem: toolbarConfig.getToolbarItem,
+        getMenuItems: toolbarConfig.getMenuItems
+      });
+    }
+    return acc;
+  }, []);
+};
+
+/**
+ * From the full list of extensions, extract only those that have a menu item configuration
+ * for the specified source (either 'first-party' or 'external').
+ *
+ * Map each to the legacy format for SelectionExtensionConfig.
+ *
+ * @param extensionList - List of all extensions
+ * @param targetSource - Source of the extensions ('first-party' or 'external')
+ * @returns Array of SelectionExtensionConfig objects
+ * @example
+ */
+var getMenuItemExtensions = exports.getMenuItemExtensions = function getMenuItemExtensions(extensionList, targetSource) {
+  return extensionList.reduce(function (acc, extension) {
+    var source = extension.source,
+      inlineToolbar = extension.inlineToolbar;
+    if (source === targetSource && inlineToolbar !== null && inlineToolbar !== void 0 && inlineToolbar.getMenuItems && !inlineToolbar.getToolbarItem) {
+      var menuItems = inlineToolbar.getMenuItems();
+      menuItems.forEach(function (menuItem) {
+        acc.push({
+          name: menuItem.label,
+          icon: menuItem.icon,
+          onClick: menuItem.onClick,
+          isDisabled: function isDisabled() {
+            return !!menuItem.isDisabled;
+          },
+          component: menuItem.contentComponent
+        });
+      });
+    }
+    return acc;
+  }, []);
+};

package/dist/cjs/ui/selectionToolbar.js

@@ -1,13 +1,40 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectionToolbar = void 0;
-var selectionToolbar = exports.selectionToolbar = function selectionToolbar(options) {
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _extensions = require("./extensions");
+var _LegacyToolbarComponent = require("./LegacyToolbarComponent");
+var selectionToolbar = exports.selectionToolbar = function selectionToolbar(_ref) {
+  var overflowOptions = _ref.overflowOptions,
+    _ref$extensionList = _ref.extensionList,
+    extensionList = _ref$extensionList === void 0 ? [] : _ref$extensionList;
+  var inlineToolbarItemExtensions = (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2') ? (0, _extensions.getToolbarItemExtensions)(extensionList, 'inlineToolbar') : [];
   return {
-    isToolbarAbove: true,
-    items: [{
+    items: [].concat((0, _toConsumableArray2.default)(inlineToolbarItemExtensions.length ? [{
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }].concat((0, _toConsumableArray2.default)(inlineToolbarItemExtensions.map(function (_ref2) {
+      var getToolbarItem = _ref2.getToolbarItem,
+        getMenuItems = _ref2.getMenuItems;
+      return {
+        type: 'custom',
+        render: function render() {
+          return /*#__PURE__*/_react.default.createElement(_LegacyToolbarComponent.LegacyExtensionToolbarItem, {
+            toolbarItem: getToolbarItem(),
+            getMenuItems: getMenuItems
+          });
+        },
+        fallback: [],
+        supportsViewMode: true
+      };
+    }))) : []), [{
       type: 'separator',
       fullHeight: true,
       supportsViewMode: true
@@ -15,8 +42,8 @@ var selectionToolbar = exports.selectionToolbar = function selectionToolbar(opti
       type: 'overflow-dropdown',
       dropdownWidth: 240,
       supportsViewMode: true,
-      options: options
-    }],
+      options: overflowOptions
+    }]),
     rank: -6
   };
 };

package/dist/es2019/selectionExtensionPlugin.js

@@ -9,7 +9,9 @@ import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
 import { getSelectionInfo } from './pm-plugins/utils';
 import { SelectionExtensionActionTypes } from './types';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
+import { getMenuItemExtensions, getToolbarItemExtensions } from './ui/extensions';
 import { getBoundingBoxFromSelection } from './ui/getBoundingBoxFromSelection';
+import { LegacyPrimaryToolbarComponent } from './ui/LegacyToolbarComponent';
 import { selectionToolbar } from './ui/selectionToolbar';
 export const selectionExtensionPlugin = ({
   api,
@@ -20,6 +22,26 @@ export const selectionExtensionPlugin = ({
   };
   let cachedSelection;
   let cachedOverflowMenuOptions;
+  const {
+    extensionList = [],
+    extensions = {}
+  } = config || {};
+  const {
+    firstParty = [],
+    external = []
+  } = extensions || {};
+  if (fg('platform_editor_selection_extension_api_v2')) {
+    const primaryToolbarItemExtensions = getToolbarItemExtensions(extensionList, 'primaryToolbar');
+    if (primaryToolbarItemExtensions !== null && primaryToolbarItemExtensions !== void 0 && primaryToolbarItemExtensions.length) {
+      var _api$primaryToolbar, _api$primaryToolbar$a;
+      api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : (_api$primaryToolbar$a = _api$primaryToolbar.actions) === null || _api$primaryToolbar$a === void 0 ? void 0 : _api$primaryToolbar$a.registerComponent({
+        name: 'selectionExtension',
+        component: () => /*#__PURE__*/React.createElement(LegacyPrimaryToolbarComponent, {
+          primaryToolbarItemExtensions: primaryToolbarItemExtensions
+        })
+      });
+    }
+  }
   return {
     name: 'selectionExtension',
     getSharedState(editorState) {
@@ -83,6 +105,10 @@ export const selectionExtensionPlugin = ({
         } = editorViewRef.current;
         return insertAdfAtEndOfDoc(nodeAdf)(state, dispatch);
       }
+      // NEXT PR: Implement this to return selectedNodeAdf, selectionRanges
+      // getSelectionAdf: () => {},
+      // NEXT PR: Implement this to return text, coords
+      // getSelectionText: () => {},
     },
     contentComponent: ({
       editorView
@@ -101,26 +127,18 @@ export const selectionExtensionPlugin = ({
           return;
         }
         const {
-          pageModes,
-          extensions
+          pageModes
         } = config;
 
-        /**
-         * Extensions Config Validation
-         *
-         * Check whether plugin contains any selection extensions
-         */
-        if ((!(extensions !== null && extensions !== void 0 && extensions.firstParty) || extensions.firstParty.length === 0) && (!(extensions !== null && extensions !== void 0 && extensions.external) || extensions.external.length === 0)) {
+        // Extensions Config Validation
+        // Check whether plugin contains any selection extensions
+        if (!(firstParty !== null && firstParty !== void 0 && firstParty.length) && !(external !== null && external !== void 0 && external.length) && !(extensionList !== null && extensionList !== void 0 && extensionList.length)) {
           return;
         }
 
-        /**
-         * Content Mode Validation
-         *
-         * Check if pageModes is provided and matches against current content mode
-         *
-         * TODO: This will eventially transition from mode to contentMode
-         */
+        // Content Mode Validation
+        // Check if pageModes is provided and matches against current content mode
+        // This will eventially transition from mode to contentMode
         const editorContentMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
         if (pageModes) {
           // Early Exit: consumer has set pageModes but editorContentMode is undefined
@@ -137,11 +155,8 @@ export const selectionExtensionPlugin = ({
           }
         }
 
-        /**
-         * Active Extension
-         *
-         * Check if there is an active extension and hide the selection extension dropdown
-         */
+        // Active Extension
+        // Check if there is an active extension and hide the selection extension dropdown
         const selectionExtensionState = selectionExtensionPluginKey.getState(state);
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
@@ -251,9 +266,7 @@ export const selectionExtensionPlugin = ({
           });
         };
 
-        /**
-         * Add a heading to the external extensions
-         */
+        // Add a heading to the external extensions
         const getExternalExtensions = extensions => {
           const prefilteredExtensions = prefilterExtensions(extensions);
           let externalExtensions = [];
@@ -270,13 +283,28 @@ export const selectionExtensionPlugin = ({
           }
           return externalExtensions;
         };
+
+        // 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(cachedOverflowMenuOptions);
+          return selectionToolbar({
+            overflowOptions: cachedOverflowMenuOptions,
+            extensionList
+          });
         }
-        const groupedExtensionsArray = [...getFirstPartyExtensions(extensions.firstParty || []), ...getExternalExtensions(extensions.external || [])];
+        let allFirstParty = [...firstParty];
+        let allExternal = [...external];
+        if (fg('platform_editor_selection_extension_api_v2')) {
+          allFirstParty = [...firstParty, ...getMenuItemExtensions(extensionList, 'first-party')];
+          allExternal = [...external, ...getMenuItemExtensions(extensionList, 'external')];
+        }
+        const groupedExtensionsArray = [...getFirstPartyExtensions(allFirstParty), ...getExternalExtensions(allExternal)];
         cachedOverflowMenuOptions = groupedExtensionsArray;
         cachedSelection = state.selection;
-        return selectionToolbar(groupedExtensionsArray);
+        return selectionToolbar({
+          overflowOptions: cachedOverflowMenuOptions,
+          extensionList
+        });
       }
     },
     pmPlugins: () => [{