How to add custom components to the toolbar

xiaofan · 17 May 2023 07:35

Can you tell me what content should be written in this class?

And I don’t know how ToolbarDefaults should be overwritten.

vince-fugnitto · 17 May 2023 12:01

@xiaofan you can follow the sample we have, and how it is binded:

eclipse-theia/theia/blob/9ff579513124757f92b83378579d527cb8a6c9d6/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx#L37

      
        
            import { ToolbarDefaultsFactory } from '@theia/toolbar/lib/browser/toolbar-defaults';
            import { SampleToolbarDefaultsOverride } from './sample-toolbar-defaults-override';
            import '../../../src/browser/toolbar/sample-toolbar-contribution.css';
            
            
export const bindSampleToolbarContribution = (bind: interfaces.Bind, rebind: interfaces.Rebind) => {
                bind(SampleToolbarContribution).toSelf().inSingletonScope();
                bind(ToolbarContribution).to(SampleToolbarContribution);
                bind(CommandContribution).to(SampleToolbarContribution);
                bind(MenuContribution).to(SampleToolbarContribution);
                bind(SearchInWorkspaceQuickInputService).toSelf().inSingletonScope();
                rebind(ToolbarDefaultsFactory).toConstantValue(SampleToolbarDefaultsOverride);
            };
            
            
export const FIND_IN_WORKSPACE_ROOT = {
                id: 'easy.search.find.in.workspace.root',
                category: 'Search',
                label: 'Search Workspace Root for Text',
            };
            
            
@injectable()
            export class SearchInWorkspaceQuickInputService {

github.com

eclipse-theia/theia/blob/9ff579513124757f92b83378579d527cb8a6c9d6/examples/api-samples/src/browser/toolbar/sample-toolbar-defaults-override.ts#L19-L59

      
        
            export const SampleToolbarDefaultsOverride: () => DeflatedToolbarTree = () => ({
                items: {
                    [ToolbarAlignment.LEFT]: [
                        [
                            {
                                id: 'textEditor.commands.go.back',
                                command: 'textEditor.commands.go.back',
                                icon: 'codicon codicon-arrow-left',
                            },
                            {
                                id: 'textEditor.commands.go.forward',
                                command: 'textEditor.commands.go.forward',
                                icon: 'codicon codicon-arrow-right',
                            },
                        ],
                        [
                            {
                                id: 'workbench.action.splitEditorRight',
                                command: 'workbench.action.splitEditor',
                                icon: 'codicon codicon-split-horizontal',

This file has been truncated. show original

The interfaces define what is expected:

theia/toolbar-interfaces.ts at master · eclipse-theia/theia · GitHub

xiaofan · 19 May 2023 06:40

Thank you for your reply.