Extending UI

// src/plugin/controllers/custom-menu.controller.ts
import { Disposable, ICommandService, Inject, Injector } from '@univerjs/core';
import { IMenuManagerService, ComponentManager } 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 { }
}

// src/plugin/plugin.ts
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],
    ])
  }
}

// src/plugin/commands/operations/single-button.operation.ts
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) => {
    alert('Single button operation');
    return true;
  },
};

// src/plugin/controllers/custom-menu.controller.ts
import { SingleButtonOperation } from '../commands/operations/single-button.operation';
 
private _initCommands(): void {
  [
    SingleButtonOperation
  ].forEach((c) => {
    this.disposeWithMe(this._commandService.registerCommand(c));
  });
}

// src/plugin/components/button-icon/ButtonIcon.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>
  );
};

// src/plugin/controllers/custom-menu.controller.ts
import { ButtonIcon } from '../components/button-icon/ButtonIcon';
 
private _registerComponents(): void {
  this.disposeWithMe(this._componentManager.register("ButtonIcon", ButtonIcon));
}

// src/plugin/locale/en-US.ts
export default {
  customMenu: {
    button: '按钮',
    singleButton: '单个按钮',
  },
};

// src/plugin/locale/en-US.ts
export default {
  customMenu: {
    button: 'Button',
    singleButton: 'Single button',
  },
};

// src/plugin/plugin.ts
+ 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,
    });
  }
}

// src/plugin/controllers/menu.ts
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',
  };
}

// src/plugin/controllers/custom-menu.controller.ts
+ import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
import { CustomMenuItemSingleButtonFactory } from './menu';
import { SingleButtonOperation } from '../commands/operations/single-button.operation';
 
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,
        },
      },
    },
  })
}

// src/plugin/controllers/menu/dropdown-list.menu.ts
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',
  }
}

// src/plugin/controllers/custom-menu.controller.ts
import { DropdownListFirstItemOperation, DropdownListSecondItemOperation } from '../commands/operations/dropdown-list.operation';
import { CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID, CustomMenuItemDropdownListFirstItemFactory, CustomMenuItemDropdownListMainButtonFactory, CustomMenuItemDropdownListSecondItemFactory } from './menu/dropdown-list.menu';
 
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,
          },
        },
      },
    },
  })
}

// src/plugin/index.ts
export { UniverSheetsCustomMenuPlugin } from './plugin'

// src/index.ts
import { UniverSheetsCustomMenuPlugin } from './plugin';
 
univer.registerPlugin(UniverSheetsCustomMenuPlugin);

export class CustomMenuController extends Disposable {
  constructor(
+   @Inject(ComponentManager) private readonly _componentManager: ComponentManager,
  ) {
    super();
 
    // Replace the default BoldSingle icon
+   this._componentManager.register('BoldSingle', YourBoldIconComponent);
  }
}

// Presets config mode
UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
    },
  },
});

// Plugin config mode
univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
    },
  },
});