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

package/dist/es2019/ui/LegacyToolbarComponent.js

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { ArrowKeyNavigationType, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+export const LegacyPrimaryToolbarComponent = ({
+  primaryToolbarItemExtensions
+}) => {
+  // NEXT PR: need to render a separator after – if there are extensions added
+  return /*#__PURE__*/React.createElement(React.Fragment, null, primaryToolbarItemExtensions.map((toolbarItemExtension, i) => {
+    const toolbarItem = toolbarItemExtension.getToolbarItem();
+    return /*#__PURE__*/React.createElement(LegacyExtensionToolbarItem, {
+      key: toolbarItem.tooltip,
+      toolbarItem: toolbarItem
+    });
+  }));
+};
+export const LegacyExtensionToolbarItem = ({
+  toolbarItem,
+  getMenuItems
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    icon: Icon,
+    tooltip,
+    isDisabled,
+    onClick,
+    label: _label
+  } = toolbarItem;
+  if (!getMenuItems) {
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      spacing: "default",
+      disabled: isDisabled,
+      selected: isOpen,
+      title: tooltip,
+      "aria-label": tooltip,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
+      onClick: onClick,
+      iconBefore: /*#__PURE__*/React.createElement(Icon, {
+        label: tooltip
+      })
+    });
+  }
+  const toggleOpen = () => {
+    setIsOpen(prev => !prev);
+  };
+  const toggleOpenByKeyboard = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      toggleOpen();
+    }
+  };
+  const handleItemActivated = ({
+    item,
+    shouldCloseMenu = true
+  }) => {
+    var _item$onClick;
+    (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
+    if (shouldCloseMenu) {
+      setIsOpen(false);
+    }
+  };
+  const handleOnOpenChange = attrs => {
+    setIsOpen(!!(attrs !== null && attrs !== void 0 && attrs.isOpen));
+  };
+  const items = isOpen ? getMenuItems().map((menuItem, i) => {
+    return {
+      key: `menu-item-${i}`,
+      content: menuItem.label,
+      elemBefore: /*#__PURE__*/React.createElement(menuItem.icon, {
+        label: menuItem.label
+      }),
+      onClick: () => {
+        var _menuItem$onClick;
+        (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 ? 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.createElement(DropdownMenu, {
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    items: [{
+      items
+    }],
+    isOpen: isOpen,
+    onItemActivated: handleItemActivated,
+    onOpenChange: handleOnOpenChange,
+    fitWidth: 200
+  }, /*#__PURE__*/React.createElement(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.createElement(Icon, {
+      label: tooltip
+    })
+  }));
+};

package/dist/es2019/ui/extensions.js

@@ -0,0 +1,54 @@
+/**
+ * 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
+ */
+export const getToolbarItemExtensions = (extensionList, toolbarType) => {
+  return extensionList.reduce((acc, extension) => {
+    const 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
+ */
+export const getMenuItemExtensions = (extensionList, targetSource) => {
+  return extensionList.reduce((acc, extension) => {
+    const {
+      source,
+      inlineToolbar
+    } = extension;
+    if (source === targetSource && inlineToolbar !== null && inlineToolbar !== void 0 && inlineToolbar.getMenuItems && !inlineToolbar.getToolbarItem) {
+      const menuItems = inlineToolbar.getMenuItems();
+      menuItems.forEach(menuItem => {
+        acc.push({
+          name: menuItem.label,
+          icon: menuItem.icon,
+          onClick: menuItem.onClick,
+          isDisabled: () => !!menuItem.isDisabled,
+          component: menuItem.contentComponent
+        });
+      });
+    }
+    return acc;
+  }, []);
+};

package/dist/es2019/ui/getBoundingBoxFromSelection.js

@@ -4,9 +4,13 @@
  * @param view - The editor view instance.
  * @param from - The starting position of the selection.
  * @param to - The ending position of the selection.
+ * @param offset - Optional offset to adjust the top and bottom coordinates of the bounding box.`
  * @returns An object containing the top, left, bottom, and right coordinates of the bounding box.
  */
-export const getBoundingBoxFromSelection = (view, from, to) => {
+export const getBoundingBoxFromSelection = (view, from, to, offset = {
+  top: 0,
+  bottom: 0
+}) => {
   let top = Infinity,
     left = Infinity,
     bottom = -Infinity,
@@ -20,6 +24,8 @@ export const getBoundingBoxFromSelection = (view, from, to) => {
     bottom = Math.max(bottom, coords.bottom);
     right = Math.max(right, coords.right);
   }
+  top = top - offset.top;
+  bottom = bottom - offset.bottom;
   return {
     top,
     left,

package/dist/es2019/ui/selectionToolbar.js

@@ -1,14 +1,38 @@
-export const selectionToolbar = options => ({
-  isToolbarAbove: true,
-  items: [{
-    type: 'separator',
-    fullHeight: true,
-    supportsViewMode: true
-  }, {
-    type: 'overflow-dropdown',
-    dropdownWidth: 240,
-    supportsViewMode: true,
-    options
-  }],
-  rank: -6
-});
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getToolbarItemExtensions } from './extensions';
+import { LegacyExtensionToolbarItem } from './LegacyToolbarComponent';
+export const selectionToolbar = ({
+  overflowOptions,
+  extensionList = []
+}) => {
+  const inlineToolbarItemExtensions = fg('platform_editor_selection_extension_api_v2') ? getToolbarItemExtensions(extensionList, 'inlineToolbar') : [];
+  return {
+    items: [...(inlineToolbarItemExtensions.length ? [{
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, ...inlineToolbarItemExtensions.map(({
+      getToolbarItem,
+      getMenuItems
+    }) => ({
+      type: 'custom',
+      render: () => /*#__PURE__*/React.createElement(LegacyExtensionToolbarItem, {
+        toolbarItem: getToolbarItem(),
+        getMenuItems: getMenuItems
+      }),
+      fallback: [],
+      supportsViewMode: true
+    }))] : []), {
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, {
+      type: 'overflow-dropdown',
+      dropdownWidth: 240,
+      supportsViewMode: true,
+      options: overflowOptions
+    }],
+    rank: -6
+  };
+};

package/dist/esm/selectionExtensionPlugin.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorFullPageToolbarHeight } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { insertSmartLinks as _insertSmartLinks } from './pm-plugins/actions';
 import { insertAdfAtEndOfDoc as _insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
@@ -10,7 +11,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 as _selectionToolbar } from './ui/selectionToolbar';
 export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
@@ -20,6 +23,30 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   };
   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 (fg('platform_editor_selection_extension_api_v2')) {
+    var primaryToolbarItemExtensions = 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.createElement(LegacyPrimaryToolbarComponent, {
+            primaryToolbarItemExtensions: primaryToolbarItemExtensions
+          });
+        }
+      });
+    }
+  }
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -30,8 +57,8 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
     },
     commands: {
       setActiveExtension: function setActiveExtension(extension) {
-        return function (_ref2) {
-          var tr = _ref2.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(selectionExtensionPluginKey, {
             type: 'set-active-extension',
             extension: extension
@@ -39,8 +66,8 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         };
       },
       clearActiveExtension: function clearActiveExtension() {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           return tr.setMeta(selectionExtensionPluginKey, {
             type: 'clear-active-extension'
           });
@@ -82,10 +109,14 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           dispatch = _editorViewRef$curren3.dispatch;
         return _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.createElement(SelectionExtensionComponentWrapper, {
         editorView: editorView,
         api: api,
@@ -98,25 +129,17 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         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
@@ -133,22 +156,26 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           }
         }
 
-        /**
-         * 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 = selectionExtensionPluginKey.getState(state);
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
         }
         var getSelection = function getSelection(view) {
+          var _api$userPreferences, _api$selectionToolbar, _api$editorViewMode2;
           // ensure the same document state is applied to editor view to avoid mismatches
           var currentSelection = view.state.selection;
+          var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
+          var isEditMode = Boolean((api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) === 'edit');
+          var shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode && fg('platform_editor_selection_extension_api_v2');
           var from = currentSelection.from,
             to = currentSelection.to;
           var text = view.state.doc.textBetween(from, to, '\n');
-          var coords = getBoundingBoxFromSelection(view, from, to);
+          var coords = getBoundingBoxFromSelection(view, from, to, {
+            top: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0,
+            bottom: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0
+          });
           return {
             text: text,
             from: from,
@@ -180,8 +207,8 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
                 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(selectionExtensionPluginKey, {
                   type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
                   selectedNode: selectedNode,
@@ -244,9 +271,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           });
         };
 
-        /**
-         * 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 = [];
@@ -263,13 +288,28 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           }
           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: extensionList
+          });
+        }
+        var allFirstParty = _toConsumableArray(firstParty);
+        var allExternal = _toConsumableArray(external);
+        if (fg('platform_editor_selection_extension_api_v2')) {
+          allFirstParty = [].concat(_toConsumableArray(firstParty), _toConsumableArray(getMenuItemExtensions(extensionList, 'first-party')));
+          allExternal = [].concat(_toConsumableArray(external), _toConsumableArray(getMenuItemExtensions(extensionList, 'external')));
         }
-        var groupedExtensionsArray = [].concat(_toConsumableArray(getFirstPartyExtensions(extensions.firstParty || [])), _toConsumableArray(getExternalExtensions(extensions.external || [])));
+        var groupedExtensionsArray = [].concat(_toConsumableArray(getFirstPartyExtensions(allFirstParty)), _toConsumableArray(getExternalExtensions(allExternal)));
         cachedOverflowMenuOptions = groupedExtensionsArray;
         cachedSelection = state.selection;
-        return _selectionToolbar(groupedExtensionsArray);
+        return _selectionToolbar({
+          overflowOptions: cachedOverflowMenuOptions,
+          extensionList: extensionList
+        });
       }
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/ui/LegacyToolbarComponent.js

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { ArrowKeyNavigationType, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+export var LegacyPrimaryToolbarComponent = function LegacyPrimaryToolbarComponent(_ref) {
+  var primaryToolbarItemExtensions = _ref.primaryToolbarItemExtensions;
+  // NEXT PR: need to render a separator after – if there are extensions added
+  return /*#__PURE__*/React.createElement(React.Fragment, null, primaryToolbarItemExtensions.map(function (toolbarItemExtension, i) {
+    var toolbarItem = toolbarItemExtension.getToolbarItem();
+    return /*#__PURE__*/React.createElement(LegacyExtensionToolbarItem, {
+      key: toolbarItem.tooltip,
+      toolbarItem: toolbarItem
+    });
+  }));
+};
+export var LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref2) {
+  var toolbarItem = _ref2.toolbarItem,
+    getMenuItems = _ref2.getMenuItems;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_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.createElement(ToolbarButton, {
+      spacing: "default",
+      disabled: isDisabled,
+      selected: isOpen,
+      title: tooltip,
+      "aria-label": tooltip,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
+      onClick: onClick,
+      iconBefore: /*#__PURE__*/React.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.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.createElement(DropdownMenu, {
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    items: [{
+      items: items
+    }],
+    isOpen: isOpen,
+    onItemActivated: handleItemActivated,
+    onOpenChange: handleOnOpenChange,
+    fitWidth: 200
+  }, /*#__PURE__*/React.createElement(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.createElement(Icon, {
+      label: tooltip
+    })
+  }));
+};

package/dist/esm/ui/extensions.js

@@ -0,0 +1,54 @@
+/**
+ * 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
+ */
+export var 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
+ */
+export var 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/esm/ui/getBoundingBoxFromSelection.js

@@ -4,9 +4,14 @@
  * @param view - The editor view instance.
  * @param from - The starting position of the selection.
  * @param to - The ending position of the selection.
+ * @param offset - Optional offset to adjust the top and bottom coordinates of the bounding box.`
  * @returns An object containing the top, left, bottom, and right coordinates of the bounding box.
  */
 export var getBoundingBoxFromSelection = function getBoundingBoxFromSelection(view, from, to) {
+  var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+    top: 0,
+    bottom: 0
+  };
   var top = Infinity,
     left = Infinity,
     bottom = -Infinity,
@@ -20,6 +25,8 @@ export var getBoundingBoxFromSelection = function getBoundingBoxFromSelection(vi
     bottom = Math.max(bottom, coords.bottom);
     right = Math.max(right, coords.right);
   }
+  top = top - offset.top;
+  bottom = bottom - offset.bottom;
   return {
     top: top,
     left: left,