Adding new functions to the Atom text editor

Flexible Down to the Core

Another point in favor of the Atom text editor is its suitability for extensive modification. A package generator makes it possible to generate a framework for a package. In testing, this was the classic hello-world , or a small window, which displays this greeting (Figure 2).

Figure 2: The hello-world package for the editor offers a singularly simple window, which just displays the greeting.

You should start the search for commands via Ctrl+Shift+P and invoke Package Generator: Generate Package . The boilerplate code that is then generated lands in the github/<Project> directory. In the Project example, this is called hello-world . The directory tree that gets generated appears simultaneously in the left side view.

Figure 3 displays the basic framework of the hello-world package. You can see that the next to last file from the bottom is named package.json . This file contains various pieces of metadata for the package (Figure 4) including the version number as well as the path to the executable files in the subdirectory lib .

Figure 3: The left side view shows the structure of the automatically generated package. On the right, you will find the code that takes care of the program logic.

Figure 4: The file package.json is found in the root directory of a package and contains metadata like the path to the executable file and the version number.

The above is also illustrated in Figure 3. The subdirectory contains two files, hello-world.coffee and hello-world-view.coffee . The latter arranges the elements for the graphical interface (Listing 3). Figure 3 also shows the code for the package logic. The activate , deactivate , serialize and toggle methods have been abbreviated by folding in order to illustrate the structure. Listing 4 shows the invisible code.

01 module.exports =
02 class HelloWorldView
03   constructor: (serializedState) ->
04     # generate root element
05     @element = document.createElement('div')
06     @element.classList.add('hello-world')
07     # generate message element
08     message = document.createElement('div')
09     message.textContent = "Hello World!"
10     message.classList.add('message')
11     @element.appendChild(message)
12   # Returns an object when the user activates the package
13   serialize: ->
14   # Remove element
15   destroy: ->
16     @element.remove()
17   getElement: ->
18     @element

01 [...]
02   activate: (state) ->
03     @helloWorldView = new HelloWorldView(state.helloWorldViewState)
04     @modalPanel = atom.workspace.addModalPanel(item: @helloWorldView.getElement(), visible: false)
05     # It is easy to remove Atom-Events via CompositeDisposable
06     @subscriptions = new CompositeDisposable
07     # @toggle()-Connect method with'hello-world:toggle'
08     @subscriptions.add atom.commands.add 'atom-workspace', 'hello-world:toggle': => @toggle()
09   deactivate: ->
10     @modalPanel.destroy()
11     @subscriptions.dispose()
12     @helloWorldView.destroy()
13   serialize: ->
14     helloWorldViewState: @helloWorldView.serialize()
15   toggle: ->
16     console.log 'HelloWorld was toggled!'
17     if @modalPanel.isVisible()
18       @modalPanel.hide()
19     else
20       @modalPanel.show()

The code in Listing 3 first generates the root element, @element , and then assigns the message element message as a child in line 12. The code farther down determines how the element reacts to the calls getElement() and destroy() . The first three of the four methods in Listing 4 typically belong to every package. The activate() method generates a modal element (ModalPanel ) and assigns it to the Atom desktop (line 4).

The subscriptions() method, on the other hand, assigns the menu entry defined in Listing 5 to the @toggle() method (line 11). The optional @toggle() method (Line 22) is there to make sure than an entry for hello-world appears under the Packages menu entry. If you click in its submenu on Toggle or press the Alt+Ctrl+O keys, you will see the window shown in Figure 2 appear or disappear.

01 'context-menu':
02   'atom-text-editor': [
03     {
04       'label': 'Toggle hello-world'
05       'command': 'hello-world:toggle'
06     }
07   ]
08 'menu': [
09   {
10     'label': 'Packages'
11     'submenu': [
12       'label': 'hello-world'
13       'submenu': [
14         {
15           'label': 'Toggle'
16           'command': 'hello-world:toggle'
17         }
18       ]
19     ]
20   }
21 ]

The details in the menu can also be adapted. Listing 5 shows a model that can easily be replicated. It is in the menus folder in the hello-world.cson file and generates an entry for the context menu and for the Atom menu.

Additionally, the possibility exists for changing the style via a "less" file under styles , to set up a keyboard shortcut via keymaps and to create specifications for tests via spec . You can use the specs for performing regression testing [8]. The creators of Atom rely on the JavaScript framework Jasmine [9] for that purpose.

Conclusion

The Atom editor makes a good impression even though it includes a simple way to modify a lot of the software. Many of the elements should be familiar to users of the Sublime text editor. Apparently, the developers have taken a close look at the concepts behind the proprietary Python software.

The community for the project is constantly growing. The number of extensions has grown from 1861 packages to around 3300 since version 1.0. It appears that the editor does indeed fill an existing gap.