Bringing Touch Bar Support to the Atom Text Editor

Six weeks ago, I took the plunge into the wacky world of USB-C and Touch Bars and ordered a shiny new MacBook Pro. I have been a Mac user since about 1997, following the company through the dark days, CPU changes, and OS changes. But this recent wave of machines seemed to spark more outcry than anything before, I think mostly because a lot of users felt that Apple showed strong signs of abandoning its “pro” user base. I will get around to a full MacBook Pro review eventually, but in this article, I wanted to focus on a particular hardware feature used with a particular application.

Critics and customers have generally labeled the touch bar adorning the top of some new MacbBook Pro models as a dumb and failed idea, but like so many new features, when done right, it has its uses. As the number of applications that support it grows, its use also grows, and there are a handful of applications I use on a daily basis that I am still waiting on to support it.

There’s one application I use on a regular basis for a lot of my work, Atom, the text editor from GitHub, built on the Electron framework. Recent versions of the framework introduced support for the touch bar, and version 1.19 of Atom brought that support to Atom. A couple of intrepid developers have released packages that add functionality to the touch bar, so I decided to take a look.

Touchbar Registry

I’ll start with this package as it’s a dependency of one other package, abstracting the Electron APIs into Atom. You include it in your package package.json file, and add buttons like the below:

consumeTouchBar(touchbarRegistry){ touchbarRegistry.addItem( newTouchBarButton({ label:'Hello Dzone', backgroundColor:'#0288d1', click:()=>console.log('Hey there!') }) ); }

Which would (unhelpfully) add a button with the label ‘Hello Dzone’ that when clicked logs a message to Atom’s console. There are of course far more useful use cases for the package and I think the author hopes other developers will use it for their packages, but so far, few do.

https://atom.io/packages/touchbar-registry

Linter UI

I love the Atom linter package, and all the linters it supports. In one pane, I can see a wide variety of problems with my code & text and can work my way through fixing them. This package adds a summary of the warning types to the touch bar, but pressing the buttons does nothing at the moment.

Dig into the touchbarUI.js file to see how this works.

https://atom.io/packages/linter-ui-touchbar

Touch Bar Utility

This package allows you to add a series of buttons, labels, and Atom actions in an array, so for example, by default this is:

[{ "type":"label", "label":"touch-bar-utility rocks! ����" },{ "type":"button", "label":"��", "clickDispatchAction":"atom-beautify:beautify-editor", "backgroundColor":"#b355d6" },{ "type":"button", "label":"//", "clickDispatchAction":"editor:toggle-line-comments", "backgroundColor":"#4899a8" }]

The first does nothing apart from display a label with an icon, the second assigns an emoji icon with a colored background that when clicked runs the ‘beautify’ action, and the third toggles comments in code. It also lets you assign files for icons, popups, sliders, spacers and more. I changed mine to create more useful shortcuts for me:

[{ "type":"button", "label":"🔗", "clickDispatchAction":"markdown-writer:insert-link" },{ "type":"button", "label":"💅", "clickDispatchAction":"atom-beautify:beautify-editor" },{ "type":"button", "label":"//", "clickDispatchAction":"editor:toggle-line-comments" }]

So far, this is the most useful package to me, but I’d like to be able to add utility buttons, like the word count for example.

https://atom.io/packages/touch-bar-utility

Touchbar

This works in a similar way to the last package, adds a toggle keyboard shortcut (ctrl-alt-o) and lacks a settings pane at the moment, moving configuration to a lib/config.json file, which means you need to find it directly in the ~/.atom/packages/touchbar folder, and I’m not sure how package updates will work. Once inside the options are similar, but slightly clearer and the default file gives more examples of what’s possible. To create something similar to what I created above I used the following JSON which also adds a emoji slider and a color picker.

{ "elements":[ { "name":"comment-button", "type":"button", "label":"//", "command":"editor:toggle-line-comments" }, { "name":"beautify-button", "type":"button", "label":"💅", "command":"atom-beautify:beautify-editor" }, { "name":"color-picker", "type":"color-picker" }, { "type":"popover", "label":"😁", "elements":[{ "name":"emoji-scrubber", "type":"scrubber", "label":"😊", "items":"emojis"}] }, { "name":"markdown-links", "type":"button", "label":"🔗", "command":"markdown-writer:insert-link" } ] }

https://atom.io/packages/touchbar

Atoms touchbar

Another package that follows similar ideas tot the previous two, but less documented, defines actions in ~/.atom/packages/atoms-touchbar/lib/touchbars/action.js and requires code and JSON configuration. This gives more flexibility (and better functionality), but requires far more initial knowledge of what you’re doing. I get the impression from the documentation that the setup allows you to add different “bars” and call them dynamically based on context, this is the only package that allows this and is more in fitting with the ethos of the touch bar, but will need a way for other packages to implement this to make it truly useful.

https://atom.io/packages/atoms-touchbar

Atom touchbar

This package makes no claim to be configurable and you should treat it more as an example of how to create your own custom package (though as you can see, there are enough Atom touch bar packages already). It provides buttons for toggling the command palette, fuzzy finder, the linter panel, the Git panel, and commenting/uncommenting selections. If you don’t have any of those features enabled, then the button won’t work.

https://atom.io/packages/atom-touchbar

Touchbar Git

Adds git information to the touch bar, but it wouldn’t work for me, if this is something you want, watch the repository.

https://atom.io/packages/touchbar-git

Raising the Bar

The main point of the touch bar is to be context sensitive, and so far all the packages, aside from atoms-touchbar (as far as I can tell) fix the buttons based on a particular use case, and not on dynamic uses cases. The logical next steps would be for package developers to all leverage one dependency package and add functionality to their packages, then allowing users to toggle the buttons they want to use from settings panes. As text editor users are typically heavy keyboard users, in theory, the touch bar could be useful, but their highly customizable nature means it remains to be seen how true this will be.

Originally published at dzone.com.