David Deraedt

Zen Coding is a fairly popular way to boost web developers productivity, so it seemed natural for me to see if could be implemented as a Brackets extension. Unfortunately, in the current state of its development, this proved to be a really difficult, probably impossible task. But this doesn't mean you can't do it by other means, even if that involves ugly hacks. Since Brackets is open source and written in JavaScript, it's incredibly easy to hack.

Needless to say, what I describe here is highly experimental and will probably break in future versions of Brackets (ie post sprint10). Hopefully, there will be better ways to do it by then.

So here's how I did it. Note there are actually two methods for doing that, according to the version of zencoding for CodeMirror you choose to use.

1. First, grab a copy of zencoding for CodeMirror2, either v0.7 or v0.8 (alpha, at the time of writing)

2. Copy the js file in the Brackets source, for example in the /thirdparty/CodeMirror2/lib/ folder

3. Edit Brackets' index.html file and add a reference to the script right after the inclusion of CodeMirror (that would be line 49 in sprint 10):

<script src="thirdparty/CodeMirror2/lib/zencoding.js"></script>

Then, you're going to have to actually edit Brackets' Editor.js code to implement it.

If you took v0.7, which is more stable, you have no choice but to catch CodeMirror's onKeyEvent and redirected it to zen_editor. The relevant code is at about line 600. You have to change the returned value like this:

        this._codeMirror.setOption("onKeyEvent", function (instance, event) {
            $(self).triggerHandler("keyEvent", [self, event]);
            return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
            //return false;   // false tells CodeMirror we didn't eat the event
        });

If you chose the latest version (v0.8 alpha), zen_coding doesn't need to do this anymore, as it can find its way to CodeMirror by itself. The problem is that due to (what seems to me like) an issue in the current implementation of CodeMirror in Brackets, you need to re-map the defaults extraKeys of CodeMirror put by zen_coding, otherwise Brackets will overwrite them. Here's how I did it (line 349):

var key;

for(key in CodeMirror.defaults.extraKeys) {

    codeMirrorKeyMap[key]=CodeMirror.defaults.extraKeys[key]

};