Brackets: How to add a new option to the menu

My first (and only one so far argh) commit to Brackets was about adding support for deleting the current line or current selection by using a shortcut. Once the Brackets team was OK with my code they suggested me that I expose this in the “Edit” menu as well to help with the discoverability of this feature.

To my surprise it took me a little bit more time than what I anticipated to achieve this. So, I decided to write this post. I hope that this will save you some time when you want to add something to the menu.

The first step is to create a variable that will hold the string that will be displayed in the user interface. Brackets has support for internationalization and because of this there are a number of files that are used to store this information. However the first place where you should add your string (and create the variable) is the default language file which is stored in scr/nls/root/strings.js. Open this file and add a new variable (make sure the name is unique) and set its value to the string you want to have in the UI. In my case this is what I’ve added:

...
"CMD_DELETE_LINES"   : "Delete Line(s)",
...

If you want to provide translation for some or all other supported languages, all you have to do is to open the other files (eg. src/nls/fr/strings.js) and add the same variable name but with the translated string.

The second step is to create a unique ID for your command. I will tell you in a second why you need this. To do this, you’ll have to open the src/command/Commands.js file and create a new variable that has to have a unique value. For the sake of keeping things neat and clean, try to group your variable with others that have the same context. For example my command is displayed in the Edit menu, so I created the unique ID under the EDIT group of commands:

...
exports.EDIT_DELETE_LINES  = "edit.deletelines";
...

The third step is to register your new command with the menu and assign a shortcut. This is where you’re going to use the unique ID you’ve created earlier. Open this file src/command/Menu.js and add a new entry to the menu section you want to update. I want my command to be available under the Edit menu, so this is where I added:

...
menu = addMenu(Strings.EDIT_MENU,
    AppMenuBar.EDIT_MENU);
...
menu.addMenuItem(
    Commands.EDIT_DELETE_LINES,
    "Ctrl-Shift-D");
...

Notice that the second parameter is used to set the command keyboard shortcut. You have to pay attention when choosing the shortcut so that it does not collide with an existing one. Also note that although the shortcut says Ctrl-Shift-D in reality on Mac it will be Cmd-Shift-D.

The final step is to register your command with the editor. This will bind the menu entry, shortcut, and the function to be executed when the command is executed together. Open this file src/editor/EditorCommandHandlers.js. At the end of the file you will see a block of CommandManager.register() calls. Just add a new CommandManager.register() call with the first argument being the variable that holds the label to be used in the menu. The second argument is the unique ID of your command, and the third argument is the function to be executed when the command is executed via the Menu’s option or shortcut:

...
CommandManager.register(
    Strings.CMD_DELETE_LINES,
    Commands.EDIT_DELETE_LINES,
    deleteCurrentLines);
...

If you’re wondering where the deleteCurrentLines function is defined, the answer is src/editor/EditorCommandHandlers.js.

This is it. Not that complicated isn’t it?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>