Macromates‘ great text editing application, TextMate, contains powerful Ruby-based scripts to allow for simple language scope editing. The HTML bundle, in particular, contains many ready-made HTML snippets which can be inserted into your web development workflow with a simple TAB-trigger or key combination. For example, if I type img then hit the ⇥ (tab) key then TextMate will expand that into an actual XHTML image tag with selectable attributes. In fact, if you have text copied into the clipboard, then TextMate will automatically use that as the image’s src path. I’ve modified a few of these snippets myself, in order to have certain items fully comply with the XHTML 1.0 Transitional DOCTYPE. This is one of the greatest strengths of TextMate, because any snippet or command can be customized from within the application’s Bundle Editor. For now I’ll explain how to extend the functionality of the HTML version of Hyperlink Helper (Wrap Word / Selection as Link) command.
The Hyperlink Helper command has been recently changed in TextMate in order to allow for various link styles based on the language scope. For example, if you are editing an HTML document, select a block of text, and Wrap Word / Selection as Link then you may get this as a result:
this is a block of selected text
This is the normal behavior of TextMate which is fine, but I’d like some extra attributes in the anchor tag to give me options. When you ? (tab) out the cursor will be placed outside the end of the anchor bracket. What I’d like to do is give myself the freedom to edit the generated anchor URL, and edit or delete additional attributes. You could, of course just backspace into the anchor code and add these manually, but why? You have the power to customize your workflow with TextMate! To do this, let’s look at the Bundle Editor.Under the Hyperlink Helper context you will find many commands, one of which is Wrap Word / Selection as Link. Beneath the various commands in the list are Preference types, which will vary between Markdown, Textile, DokuWiki, and HTML. We’re going to customize the HTML preference. The default structure of the Ruby code which handles the HTML snippet looks like this:
{ shellVariables = (
{ name = 'TM_LINK_FORMAT';
value = '< %= " title="${1:#{e_sn title}}"" if defined? title %>>< %= e_sn input %>';
},
);
}
What basically happens here is that TextMate will evaluate any text snippet in the clipboard and fill out the URL area if possible. However, if nothing plausible is available then the default behavior is to insert some generic URL with a generic title. I’m going to change this behavior to add some niceties like an optional CSS class, title atrribute, and a nasty target attribute (yep, that’s probably taboo for some XHTML fascists but external jumpoff links are a fact of life. Maybe I’ll revisit a solution later). In addition, I’ll customize the snippet to give me tab triggers for each attribute and allow for editing or deletion of each. Inside the Bundle Editor, replace the value of TM_LINK_FORMAT with the following (note the difference):
{ shellVariables = (
{ name = 'TM_LINK_FORMAT';
value = '"${2: title="${3:< %= e_sn input %>}"}${4: target="${5:_blank/_parent/_self/_top/windowname}"}>< %= e_sn input %>';
},
);
}
Please note that the second line of the value should actually be appended immediately to the end of the first line with no space but because
“pre” tag doesn’t render very well here (my failures in CSS) I had to break it up.Okay what the heck does this do? Alright, I’ll get to the point. If you manage to customize the bundle correctly without errors, you will get something like this when you use Wrap Word / Selection as Link:
target="_blank/_parent/_self/_top/windowname">this is a block of selected text
The URL will be selected, which gives you the chance to edit the link (most internal links need editing anyway). If you hit (tab) then it will select the entire title attribute. You then can decide if you wish to delete it or keep it. Hitting (tab) will select the contents of the title attribute for editing, which defaults to the text contained in your initial selection. Using the (tab) key further will let you delete or edit the target attribute. Note that it gives you a list of valid options, which you will have to type yourself.I’m sure by studying the modification I made, you may also learn how to customize other snippets found within TextMate. If you think you royally screwed up, don’t panic. Search the Finder for your ~/Library/Application Support/TextMate folder. Inside you will find Bundles, which will contain a file that corresponds to the Bundle you modified. If you trash the respective bundle file and relaunch TextMate, it will revert the Bundle back to its built-in defaults. Have fun!
Leave a Reply