File (or folder) context menu

#1

image
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

#2

@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.

#3

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.

#4

Have you registered the command in the CommandRegistry?

#5

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"
        }
    ]
}
#6

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

Please Take a look at the screenshot below

image
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.

#7

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

1 Like