File (or folder) context menu

[JonasHelming]

Posted by: 4EverM on 9/24/2023, 2:49:50 PM

image1688×924 55.2 KB

How to add an menu when right click file or folder?
I checked the articles about it, but none of them are specific about how to implement it.
I want a concrete example, thanks

[JonasHelming]

Posted by: Mark Sujew on 9/24/2023, 5:51:24 PM

@4EverM You can add new entries to the navigator context menu by creating a MenuContribution and using the NAVIGATOR_CONTEXT_MENU path. See here for a few examples.

[JonasHelming]

Posted by: 4EverM on 9/26/2023, 4:55:24 AM

I tried, but it doesn’t work.

// file-context-menu-contribution.ts
const CUSTOM_CONTEXT_MENU_COMMAND: Command = {
    id: 'CUSTOM_CONTEXT_MENU_COMMAND.id',
    label: 'Custom File Context Menu'
}
@injectable()

export class FileContextMenuContribution implements MenuContribution {

registerMenus(menus: MenuModelRegistry): void {

menus.registerMenuAction(NavigatorContextMenu.NAVIGATION, {

commandId: CUSTOM_CONTEXT_MENU_COMMAND.id,

label: CUSTOM_CONTEXT_MENU_COMMAND.label

})

}
}
// file-context-menu-frontend-module.ts

export default new ContainerModule((bind, unbind) => {

bind(MenuContribution).to(FileContextMenuContribution);

});

I’m not sure if there’s a problem with the above code, but I don’t see a related error in the console.

[JonasHelming]

Posted by: Mark Sujew on 9/26/2023, 11:27:50 AM

Have you registered the command in the CommandRegistry?

[JonasHelming]

Posted by: Hanksha on 9/26/2023, 11:30:31 AM

Hi, here’s an example that works for me:

// file-context-menu-frontend-module.ts
import { CommandContribution, MenuContribution, bindContribution } from "@theia/core";

import { ContainerModule } from "@theia/core/shared/inversify";

import { FileContribution } from "./file-context-menu-contribution";
export default new ContainerModule(bind => {

bind(FileContribution).toSelf().inSingletonScope();

bindContribution(bind, FileContribution, [MenuContribution, CommandContribution]);

});

// file-context-menu-contribution.ts

import { Command, CommandContribution, CommandRegistry, MenuContribution, MenuModelRegistry } from "@theia/core";
import { injectable } from "@theia/core/shared/inversify";
import { NavigatorContextMenu } from "@theia/navigator/lib/browser/navigator-contribution";

const CUSTOM_COMMAND: Command = {
    id: "CUSTOM_COMMAND.id",
    label: "Custom File Context Menu"
};

@injectable()
export class FileContribution implements MenuContribution, CommandContribution {
    registerCommands(commands: CommandRegistry): void {
        commands.registerCommand(CUSTOM_COMMAND, {
            execute: () => {
                window.alert("CUSTOM COMMAND");
            }
        });
    }

    registerMenus(menus: MenuModelRegistry): void {
        menus.registerMenuAction(NavigatorContextMenu.NAVIGATION, {
            commandId: CUSTOM_COMMAND.id
        });
    }
}

// package.json
{
   ...
    "theiaExtensions": [
        {
            "frontend": "lib/browser/file-context-menu-frontend-module"
        }
    ]
}

[JonasHelming]

Posted by: 4EverM on 9/27/2023, 7:44:42 AM

@msujew Hi,
now, my code runs successfully.
But there are a few small problems.

Please Take a look at the screenshot below

image1357×835 53 KB

Speak Here is the Editor context menu that i registered. I can call-up it in default editor.
I’ve asked a question about opening file in another widget before. I noticed that the Editor context menu is not being called out in the customized widgets.

[JonasHelming]

Posted by: 4EverM on 9/27/2023, 7:45:58 AM

@msujew Thanks friend.
After modifying the code according to yours, mine also runs successfully.