kaioa.com

I ♥ Komodo :3

Komodo Edit – the open source spin-off of Komodo IDE – is hands down my personal open source application of the year. It had a massive impact on my productivity and it made web development so much less of a pain.

I used so many different text editors in my life, but none of them comes anywhere near the sheer awesomeness of Komodo. There is proper Unicode support, smart indent (which actually behaves smart), remote file editing (FTP, FTPS, SFTP, and SCP), Code Intelligence (~IntelliSense™), and lots of polish on top. It supports many languages and runs on the three most popular platforms (i.e. Windows, Mac OS, and Linux). It's also extremely stable, which is very important for this kind of tools.

The ActiveState guys are also very helpful and surprisingly responsive. For example there were some issues with active mode FTP, but after a bit of nagging and poking around in the code (mostly nagging though) the problem was solved. Just like that. I also asked for some shortcut which basically does the same as a double click; selecting the word below the caret. A few minutes later the JavaScript macro was there (thanks Todd!) and it even made it's way upstream; the next version of Komodo will include it as a regular command.

In case you're wondering, I wanted this functionality so badly, because it was missing from a symmetry point of view. There is Ctrl+Shift+Right, which selects everything from the current position to the end of the word. There is Ctrl+Shift+Left, which does the same thing into the other direction. And there is the double click, which selects the word you double clicked on. Now, if you navigate through the file with the cursor keys, you'll usually end up somewhere in the middle of the word you want to select. Which means you have to jump over to one side first (e.g. by pressing Ctrl+Left) and then select-jump to the other side.

Since this macro is so lovely, I'll post it here. Together with two of my own sorta related macros.

How to Add a Macro in Komodo

Just go to Toolbox->Add->New Macro...:

Figure 1: Toolbox->Add->New Macro...

The following dialog pops up:

Figure 2: The 'New Macro' Dialog

In a nutshell:

• The text field at the top ("New Macro") contains the name of the macro. Use a descriptive name there, otherwise things will get messy sooner or later.
• Language: Python or JavaScript – the macros below are written in JavaScript.
• Key Binding (tab): You can define your own shortcut there.

The Macros

Select Current Word (by Todd Whiteman)

Selects the word under the caret (being touched by the caret is actually sufficient).

// Highlight the word under the cursor.
var scimoz = ko.views.manager.currentView.scimoz;
var start = scimoz.wordStartPosition(scimoz.currentPos, true);
var end = scimoz.wordEndPosition(scimoz.currentPos, true);
scimoz.anchor = start;
scimoz.currentPos = end;

Select Current CSS-Word

Selects the word under the caret (being touched by the caret is actually sufficient). '#', '.', and '-' aren't treated as word boundaries, which means things like "foo.bar", "#foobar", "-moz-box-sizing", "sans-serif", etc. can be selected in one go.

// Highlight the "word" under the cursor - CSS edition
var scimoz, start, end, word_re, edge_re;
scimoz = ko.views.manager.currentView.scimoz;
start = scimoz.wordStartPosition(scimoz.currentPos, true);
end = scimoz.wordEndPosition(scimoz.currentPos, true);
word_re = /[\w\d]/;
edge_re = /[^\.#\-]/;
while (start > 0) {
    if (edge_re.test(String.fromCharCode(scimoz.getCharAt(start - 1)))) {
        break;
    }
    if (word_re.test(String.fromCharCode(scimoz.getCharAt(start - 2)))) {
        start = scimoz.wordStartPosition(start - 2, true);
    } else {
        start -= 1;
        break;
    }
}
while (end < scimoz.length) {
    if (edge_re.test(String.fromCharCode(scimoz.getCharAt(end)))) {
        break;
    }
    if (word_re.test(String.fromCharCode(scimoz.getCharAt(end + 1)))) {
        end = scimoz.wordEndPosition(end + 1, true);
    } else {
        end += 1;
        break;
    }
}
scimoz.anchor = start;
scimoz.currentPos = end;

CSS Reference

Looks up CSS properties over at MDC. The word selection works the same way as the scheme over in "Select Current CSS-Word".

// MDC CSS Reference
var scimoz, start, end, word_re, edge_re, selection;
if (ko.views.manager.currentView.languageObj.name === 'CSS') {
    scimoz = ko.views.manager.currentView.scimoz;
    start = scimoz.wordStartPosition(scimoz.currentPos, true);
    end = scimoz.wordEndPosition(scimoz.currentPos, true);
    word_re = /[\w\d]/;
    edge_re = /[^\.#\-]/;
    while (start > 0) {
        if (edge_re.test(String.fromCharCode(scimoz.getCharAt(start - 1)))) {
            break;
        }
        if (word_re.test(String.fromCharCode(scimoz.getCharAt(start - 2)))) {
            start = scimoz.wordStartPosition(start - 2, true);
        } else {
            start -= 1;
            break;
        }
    }
    while (end < scimoz.length) {
        if (edge_re.test(String.fromCharCode(scimoz.getCharAt(end)))) {
            break;
        }
        if (word_re.test(String.fromCharCode(scimoz.getCharAt(end + 1)))) {
            end = scimoz.wordEndPosition(end + 1, true);
        } else {
            end += 1;
            break;
        }
    }
    scimoz.anchor = start;
    scimoz.currentPos = end;
    selection = scimoz.selText;
    if (selection && selection.length > 0) {
        ko.browse.openUrlInDefaultBrowser('https://developer.mozilla.org/en/CSS/' + selection);
    }
}

If you're wondering about the Ctrl+Alt+C shortcut, I used this one because I'm using Ctrl+Alt+J for kjslint (a JSLint plugin for Komodo).