In Univer, both the top toolbar menu (Ribbon) and the context menu can be extended by writing plugins. This section will introduce how to register menu items using the IMenuManagerService in the dependency injection system.
Preview
1. Plugin Environment
Make sure you have a basic understanding of the plugin mechanism.
First, construct a controller class to register menu item commands, menu item icons, and menu item configurations.
TypeScript
import { Disposable, ICommandService, Inject, Injector } from '@univerjs/core'import { ComponentManager, IMenuManagerService } from '@univerjs/ui'export class CustomMenuController extends Disposable { constructor( @Inject(Injector) private readonly _injector: Injector, @ICommandService private readonly _commandService: ICommandService, @IMenuManagerService private readonly _menuManagerService: IMenuManagerService, @Inject(ComponentManager) private readonly _componentManager: ComponentManager, ) { super() this._initCommands() this._registerComponents() this._initMenus() } /** * register commands */ private _initCommands(): void {} /** * register icon components */ private _registerComponents(): void {} /** * register menu items */ private _initMenus(): void {}}Register this controller in the plugin.
TypeScript
import type { Dependency } from '@univerjs/core'import { Inject, Injector, Plugin, touchDependencies, UniverInstanceType } from '@univerjs/core'import { CustomMenuController } from './controllers/custom-menu.controller'const SHEET_CUSTOM_MENU_PLUGIN = 'SHEET_CUSTOM_MENU_PLUGIN'export class UniverSheetsCustomMenuPlugin extends Plugin { static override type = UniverInstanceType.UNIVER_SHEET static override pluginName = SHEET_CUSTOM_MENU_PLUGIN constructor(@Inject(Injector) protected readonly _injector: Injector) { super() } override onStarting(): void { ;([[CustomMenuController]] as Dependency[]).forEach((d) => this._injector.add(d)) } override onRendered(): void { touchDependencies(this._injector, [[CustomMenuController]]) }}2. Menu Item Commands
Before registering the menu, you need to construct a Command, which will be executed when the menu is clicked.
TypeScript
import type { IAccessor, ICommand } from '@univerjs/core'import { CommandType } from '@univerjs/core'export const SingleButtonOperation: ICommand = { id: 'custom-menu.operation.single-button', type: CommandType.OPERATION, handler: async (accessor: IAccessor) => { console.log('Single button operation') return true },}Register this Command with ICommandService.
TypeScript
import { SingleButtonOperation } from '../commands/operations/single-button.operation'export class CustomMenuController extends Plugin { private _initCommands(): void { ;[SingleButtonOperation].forEach((c) => { this.disposeWithMe(this._commandService.registerCommand(c)) }) }}3. Menu Item Icons
If your menu item needs an icon, you also need to register the icon in advance.
First, construct an icon tsx component.
TSX
export function ButtonIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m.16 14a6.981 6.981 0 0 0-5.147 2.256A7.966 7.966 0 0 0 12 20a7.97 7.97 0 0 0 5.167-1.892A6.979 6.979 0 0 0 12.16 16M12 4a8 8 0 0 0-6.384 12.821A8.975 8.975 0 0 1 12.16 14a8.972 8.972 0 0 1 6.362 2.634A8 8 0 0 0 12 4m0 1a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" /> </svg> )}Register this icon with ComponentManager.
TypeScript
import { ButtonIcon } from '../components/button-icon/ButtonIcon'export class CustomMenuController extends Plugin { private _registerComponents(): void { this.disposeWithMe(this._componentManager.register('ButtonIcon', ButtonIcon)) }}4. Menu Item Internationalization
If your menu item needs internationalization, you need to add internationalization resources in advance.
TypeScript
export default { customMenu: { button: '按钮', singleButton: '单个按钮', },}TypeScript
export default { customMenu: { button: 'Button', singleButton: 'Single button', },}Register this internationalized resource to ILocaleService
TypeScript
import { LocaleService } from '@univerjs/core'import enUS from './locale/en-US'import zhCN from './locale/zh-CN'export class UniverSheetsCustomMenuPlugin extends Plugin { static override type = UniverInstanceType.UNIVER_SHEET static override pluginName = SHEET_CUSTOM_MENU_PLUGIN constructor( @Inject(Injector) protected readonly _injector: Injector, @Inject(LocaleService) private readonly _localeService: LocaleService, ) { super() this._localeService.load({ enUS, zhCN, }) }}5. Menu Item Configuration
Define a menu item configuration factory function that returns a menu item configuration object.
TypeScript
import type { IMenuButtonItem } from '@univerjs/ui'import { MenuItemType } from '@univerjs/ui'import { SingleButtonOperation } from '../commands/operations/single-button.operation'export function CustomMenuItemSingleButtonFactory(): IMenuButtonItem<string> { return { // Bind the command id, clicking the button will trigger this command id: SingleButtonOperation.id, // The type of the menu item, in this case, it is a button type: MenuItemType.BUTTON, // The icon of the button, which needs to be registered in ComponentManager icon: 'ButtonIcon', // The tooltip of the button. Prioritize matching internationalization. If no match is found, the original string will be displayed tooltip: 'customMenu.singleButton', // The title of the button. Prioritize matching internationalization. If no match is found, the original string will be displayed title: 'customMenu.button', }}Construct these menu items into a Schema and merge them into the menu through IMenuManagerService.
TypeScript
import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'import { SingleButtonOperation } from '../commands/operations/single-button.operation'import { CustomMenuItemSingleButtonFactory } from './menu'export class CustomMenuController extends Disposable { private _initMenus(): void { this._menuManagerService.mergeMenu({ [RibbonStartGroup.OTHERS]: { [SingleButtonOperation.id]: { order: 10, menuItemFactory: CustomMenuItemSingleButtonFactory, }, }, [ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.OTHERS]: { [SingleButtonOperation.id]: { order: 12, menuItemFactory: CustomMenuItemSingleButtonFactory, }, }, }, }) }}6. Dropdown List
In addition to adding a single button menu item, you can also add a dropdown menu item. The specific implementation is similar, except for the difference in constructing the menu item configuration:
- Replace menu item configuration return type
IMenuButtonItem<string>withIMenuSelectorItem<string> - Replace menu item type
MenuItemType.BUTTONwithMenuItemType.SUBITEMS - The main button of the dropdown list needs to customize an id, which is used as the unique identifier of the dropdown list and is used to associate the sub-menu items of the dropdown list.
TypeScript
import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui'import { MenuItemType } from '@univerjs/ui'import { DropdownListFirstItemOperation, DropdownListSecondItemOperation,} from '../../commands/operations/dropdown-list.operation'const CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID = 'custom-menu.operation.dropdown-list'export function CustomMenuItemDropdownListMainButtonFactory(): IMenuSelectorItem<string> { return { // When type is MenuItemType.SUBITEMS, this factory serves as a container for the drop-down list, and you can set any unique id id: CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID, // The type of the menu item, in this case, it is a subitems type: MenuItemType.SUBITEMS, icon: 'MainButtonIcon', tooltip: 'customMenu.dropdownList', title: 'customMenu.dropdown', }}export function CustomMenuItemDropdownListFirstItemFactory(): IMenuButtonItem<string> { return { id: DropdownListFirstItemOperation.id, type: MenuItemType.BUTTON, title: 'customMenu.itemOne', icon: 'ItemIcon', }}export function CustomMenuItemDropdownListSecondItemFactory(): IMenuButtonItem<string> { return { id: DropdownListSecondItemOperation.id, type: MenuItemType.BUTTON, title: 'customMenu.itemTwo', icon: 'ItemIcon', }}Then construct these menu items into a Schema and merge them into the menu through IMenuManagerService.
TypeScript
import { DropdownListFirstItemOperation, DropdownListSecondItemOperation,} from '../commands/operations/dropdown-list.operation'import { CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID, CustomMenuItemDropdownListFirstItemFactory, CustomMenuItemDropdownListMainButtonFactory, CustomMenuItemDropdownListSecondItemFactory,} from './menu/dropdown-list.menu'export class CustomMenuController extends Disposable { private _initMenus(): void { this._menuManagerService.mergeMenu({ [RibbonStartGroup.OTHERS]: { [CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID]: { order: 11, menuItemFactory: CustomMenuItemDropdownListMainButtonFactory, [DropdownListFirstItemOperation.id]: { order: 0, menuItemFactory: CustomMenuItemDropdownListFirstItemFactory, }, [DropdownListSecondItemOperation.id]: { order: 1, menuItemFactory: CustomMenuItemDropdownListSecondItemFactory, }, }, }, [ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.OTHERS]: { [CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID]: { order: 9, menuItemFactory: CustomMenuItemDropdownListMainButtonFactory, [DropdownListFirstItemOperation.id]: { order: 0, menuItemFactory: CustomMenuItemDropdownListFirstItemFactory, }, [DropdownListSecondItemOperation.id]: { order: 1, menuItemFactory: CustomMenuItemDropdownListSecondItemFactory, }, }, }, }, }) }}Export the plugin and register it with Univer instance.
TypeScript
export { UniverSheetsCustomMenuPlugin } from './plugin'TypeScript
import { UniverSheetsCustomMenuPlugin } from './plugin'univer.registerPlugin(UniverSheetsCustomMenuPlugin)Now you have successfully added a custom menu item to Univer. You can see the menu item in the top toolbar and context menu.