HTML Toolkit

Posted by stan on 2009-04-12 14:50 |
1.3.1.3
Stan Angeloff
Fri, 2011-06-24 11:23
  • : 0.0 - 0.*
  • : 0.0 - 0.*

No longer supported. Source code is available on GitHub.


A growing collection of tools to help you edit & author HTML/XML documents.

Release Notes for 1.3

  • Compatibility with Komodo 6 beta
  • Integration with ZenCoding, if installed and enabled
  • Added support for HTML5 documents
  • Added ‘Options’ dialogue to control auto-complete behaviour
  • Added Selection Tools: capitalise, hyphenise, underscorise; URI, HTML and Base64 encode/decode
  • Added HTML entities auto-complete: trigger by typing ‘&’
  • Added CSS Fill-up Stopper: prevents auto-complete of property values when ‘Space’ is pressed
  • Added ‘Quick Macro’ dialogue Ctrl + Alt + R: record macros on the fly using CoffeeScript/JavaScript (Komodo 5 only)
  • Added status bar encoding and indentation support: change settings on-the-fly with just a few mouse clicks
  • Added support for snippets within sub-folders, e.g., Abbreviations » PHP » Drupal
  • Improved Undo support after tag auto-complete
  • Improved status bar feedback when inserting a snippet
  • Improved logic for picking up shortcut letters in auto-complete pop-up
  • Updated to work in XBL documents

What Else:

  • ‘>’ — auto-complete tag; knows all about HTML 4/5 and won't auto-complete invalid tags; recognises empty elements (<hr />, <embed />, etc.) and completes accordingly
  • ‘Ctrl + >’ — convert word under cursor to a tag
  • ‘TAB’ — expand abbreviation or convert word under cursor to a tag if no matching snippet is found
  • ‘Shift + Space’ — insert &nbsp; entity
  • ‘Ctrl + Enter’ — insert <br /> tag and move caret to a new line
  • ‘Shift + Enter’ at line-end — create new list item, table row, table column, etc.
  • ‘Ctrl+Alt+W’ — wrap selection/current line in a tag
  • ‘TAB/Shift+TAB’ — jump before/after closing tag
  • ‘Ctrl & mouse over’ — preview url(…) images in CSS files
  • ‘Ctrl + Shift + Alt + L’ — turn word under cursor/selection into a hyperlink using Google
  • ‘Ctrl + Alt + D’ — duplicate line as template
  • Lorem Ipsum generator:type: lipsum followed by either .chars, .words or .paras and *times e.g.lipsum.words*100[press TAB] will produce a paragraph with 100 Lorem Ipsum words
  • Markdown & Wiki preview panels

How to Install?

  • Download the XPI file
  • Fire up Komodo
  • Select Tools -> Add-ons -> Extensions
  • Drag and drop the XPI file onto the Add-ons window
  • Wait and confirm the installation

You must restart Komodo for changes to take effect.

adam | Fri, 2009-05-08 03:02

Hi,
It's really great extension, thanks.
One small suggestion: it would be great to allow users to configure what tools to use e.g. if I want to write divs without auto completion, I'm going somewhere and I just tick it off.

Thanks

stan | Fri, 2009-05-08 03:10

Adam,

Glad you like the extension, thanks. You can log your suggestion in Google Code and we will consider it in future releases. Once the extension is mature enough, we will provide preferences to control how it should behave.

Regards,
Stan

stuarth | Tue, 2009-12-01 03:39

Agree - very useful extension.
I have an issue with the tag wrapping feature on OSX where using it prevents me moving on to wrap other content.The initial

tags can be changed while they are still red and the text content becomes gray. The tags remain red and I have to save the file and close it to add further tags.

I'm sure this is a user issue so would like guidance please. I have just upgraded to the latest version 1.0.1 which I am running in Komodo Edit 5.2.3, build 4312.

nathan | Mon, 2009-05-11 08:33

Hey Stan,

Found a pretty annoying bug in your addon;

When editing an XML, I have (for example) the following line:

&lt;event id="test"| /&gt;

"|" is where the cursor is.

When I press TAB, the cursor ends up at the end of the line, rather than placing a TAB character

&lt;event id="test" /&gt;|

The only workaround is to ctrl+v the TAB character.

Oh, and about this new feature:

Turn any word/selection into a hyperlink using Google (Ctrl+Shift+Alt+L)

You should seriously consider using a shorter shortcut :p

Edit:

Suggestion for the google hyperlinking feature: In languages other than the ones supported now, have the resulting URL copied to the clipboard instead..

stan | Mon, 2009-05-11 08:43

The bug you are describing is the jumpClosingTag command being triggered. It works both when you are inside empty tags, as in your case, as well as when the cursor is placed before a </closing tag> We will consider making this optional in future versions.

RE: Google, it's a good idea, but I am not sure it adds value outside of HTML documents, but it won't hurt having it around I guess. Komodo already has a lot of keys reserved, thus the key binding being so long.

Cheers.

nathan | Mon, 2009-05-11 08:56

Please either use a different shortcut for jumpClosingTag or as you said, make it optional.. it's a pretty big annoyance on my side since I used tab characters quite frequent in XML files.

As for the google links, wouldn't it be possible to simply make the shortcut customizable? (under the Editor -> Key Bindings section).

Either way I'm sure you can come up with something shorter than ctrl+shift+alt+L :p (ctrl+alt+L is available).

Edit:

Damn I always forget to press "reply" -.-

stan | Mon, 2009-05-11 09:01

Quick RE: you can customise the key binding under Edit -> Preferences -> Editor -> Key Bindings -> Editor: Create Hyperlink for Word/Selection

Plans for 1.0 are to allow the user to enable/disable each command as well as the option to assign a custom key (instead of using the `Key Bindings` interface).

id
goran | Wed, 2009-06-10 05:57

Can the auto insertion of the id attribute for block level elements be turned off? Right now, every time I complete a < div > it not only closed it, but also adds an id= " ".

stan | Wed, 2009-06-10 06:17

Yes, you can edit the DIV abbreviation in your Toolbox under Sample Abbreviations -> HTML -> div or just delete it and a default one will be used instead.

goran | Wed, 2009-06-10 06:34

Hey thanks for the quick reply, but I'm not sure what you mean. Under Toolbox > Samples (5.1.3) I have a bunch of import/export options I don't really know what do.

goran | Wed, 2009-06-10 06:41

Oh I got it. View > Toolbox tab.

kklickman | Wed, 2009-06-10 10:37

Is there a getting started guide somewhere? I'm feeling like a complete idiot--I'm trying to figure out how to link to another HTML page in the same directory (and browsing for the file name, not typing it), and I'm stumped. I'm sure it's completely obvious, but I could really use some HTML Toolkit 101 type documentation.

Thanks!

Karen

stan | Wed, 2009-06-10 11:50

Karen,

I am a bit unsure what you are after here, but the current version does not support browsing for files in the current directory. You'd have to manually type (or copy -> paste) the file name.

Cheers,
Stan

outsidethebox | Sun, 2009-06-14 11:11

First of all: totally awesome add-on!

The above feature splits everything over multiple lines. Is there any way to modify it so that it simply wraps my selection in the tag without inserting line breaks.

Thanks!
Michael

stan | Mon, 2009-06-15 10:21

Thanks for the feedback Michael, I will consider tweaking the command to work on single line selections for the next release (no date planned as of yet).

Cheers,
Stan

outsidethebox | Mon, 2009-06-15 11:10

Thanks, Stan!

ggerri | Thu, 2009-08-06 00:22

Hi, very nice extension :-)

One thing: writing the script tag, it completes to "application/x-javascript". Is it possible to change this behavior, so it completes to "text/javascript" as this mostly used and well supported?

I've learned that RFC4329 standardized the the "text/javascript" type because it is in common use but also marked it as obsolote as JS code doesnt represent a text document. So it recomends "application/javascript" (without the 'x') instead. But this is said not to be well supported yet.

W3 does not list "application/x-javascript" but "application/javascript" as an option:

http://www.w3schools.com/tags/html5_script.asp

So maybe "text/javascript" is still the savest option at the moment...

Regards
Gerald

stan | Thu, 2009-08-06 01:15

Hi Gerald,

Thanks for getting in touch. The built-in &lt;script> snippet uses text/javascript. If you are getting application/x-javascript, you have another snippet in your Toolbox under the 'script' name. Look under Samples -> Abbreviations -> HTML or just Abbreviations -> HTML. You can remove the script snippet from there and the built-in one will be used instead, or you can edit it to your desire.

On a side note, the new release which is coming, well soon I hope, will report which snippet has been triggered so you can easily trace it to its origins and edit accordingly.

Cheers,
Stan

andrewabogado | Tue, 2009-10-13 20:31

Blew me away with its amazing features and made me more productive.

Kudos to the developers.

andersonmedia | Sun, 2009-11-01 13:26

Just wanted to leave another note of appreciation, very, very helpful addon. Thanks!

tpk | Sun, 2009-11-15 14:05

Great relief, this tool!!!

I'd find it great, if it would also work within <?php echo ""; ?>

Thomas

stuarth | Tue, 2009-12-01 03:42

Apologies - I posted this above as a reply by mistake.

I have an issue with the tag wrapping feature on OSX where using it prevents me moving on to wrap other content.The initial

tags can be changed while they are still red and the text content becomes gray. The tags remain red and I have to save the file and close it to add further tags.

I'm sure this is a user issue so would like guidance please. I have just upgraded to the latest version 1.0.1 which I am running in Komodo Edit 5.2.3, build 4312.

stan | Tue, 2009-12-01 04:40

Have you tried tabbing out of the wrapped area (to do so, just press TAB)? I am not sure if this is helpful, but let's start with the basics.

pepebedesign | Thu, 2009-12-24 02:32

Hi stan, thanks for your hard work!

Today I have stumbled over an article about Zen Coding. That might be interesting for you . Read it here: http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write...

I'm well aware that we already have some of the functionality of this thing with HTML Toolkit but this goes one or more steps further.

Have a look at the video: http://vimeo.com/7405114.

There is js Zen coding Package for Aptana available here: http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Apt...

Is there any chance that we can see a ZEN HTML Toolkit in 2010?

Regards,

pepebe

stan | Thu, 2009-12-24 08:37

Hi pepebe,

Another community member has already released an extension for Komodo to support Zen Coding: http://code.google.com/p/zen-coding/issues/detail?id=24

I don't plan on adding built-in ZC support in HTML Toolkit at this point. If anyone is interested in contributing to the project following the existing code guidelines, I'd be more than happy to review and include the add-on.

Cheers,
Stan

outsidethebox | Sat, 2010-03-06 00:10

Hey Stan,

Been loving this puppy for a time now. But ran against a bummer of a bug. I recently put my abbreviations inside a custom menu folder which is a subfolder of a standard folder, which is under an Abbreviations folder. This way I'm able to get at my abbreviations thru menus as well as typing the abbreviation and clicking Ctrl-T or Tab. By doing it this way, I avoid having to maintain duplicate lists of items.

But when HTML Toolkit is installed, the Tab key cannot find the abbreviation. And worse, Ctrl-T can't find it either.

Help!

Outside The Box

stan | Sat, 2010-03-06 04:38

You can grab the latest source from GitHub -- http://github.com/StanAngeloff/komodo-html-toolkit
I recall fixing this issue. Follow the instructions under Running the latest copy. Let me know if this works for you.

outsidethebox | Sun, 2010-03-07 19:38

Stan,

I've read the instructions, but I'm somewhat confused as to how to do this.

What's the easiest way to download your source? There are quite a few files within a few directories. And right-clicking on folders doesn't seem to work.

I've looked in install.rdf for the extension id, but it's hard to tell where it is.

Do I just download all of your source files, replacing what's there? That would seem to obviate the need for steps outlined in the Firefox extension proxy file instructions.

stan | Mon, 2010-03-08 00:03

Go to the GitHub page and click on the Download button (top-right). Select your preferred download format, either ZIP or a tarball. Once you have the full source, unpack it and copy the full path to src. In my case /home/stan/installs/komodo-html-toolkit/src/. Locate your XRE/extensions directory and create a new file called htmltoolkit@psp-webtech.co.uk and paste the path above inside it. Remember to remove any directories with the same name.

If you have git installed, you can also clone the repository using git clone git://github.com/StanAngeloff/komodo-html-toolkit.git komodo-html-toolkit. You can update at any time by going to cloned repository and running git pull.

I hope the above helps.

outsidethebox | Mon, 2010-03-08 21:18

I'm a happy man! Many thanks, Stan!

tone | Mon, 2010-05-10 11:45

When you first type in a button tag, you end up with

&lt;button type="button"&gt;&lt;/button&gt;

with the cursor on the type, and tab stop between the tags. If you just hit tab, intending to keep type="button", instead of the cursor jumping to the tab stop, you end up getting the following:

&lt;button type="&lt;button type="button"&gt;&lt;/button&gt;"&gt;&lt;/button&gt;

stan | Mon, 2010-06-21 08:16

This is now fixed on master. You can run it from source (as guided on the README) or wait for 1.2.1 to come out later this month.

dofy | Tue, 2010-07-27 08:12

&lt;input type="&lt;button type="button"&gt;&lt;/button&gt;" name="" /&gt;

Dofy.Net
PHPz.Org

stan | Wed, 2010-07-28 01:52

Yes, unfortunately if you type button yourself and TAB away, it will expand as an abbreviation. If you have a solution (disabling auto-complete in attributes is not really a neat one), please drop by GitHub and log it in as an issue.

tone | Mon, 2010-06-14 11:46

I have discovered that a change in Komodo 6 beta 1 has stopped the tab key from expanding abbreviations. This works great in 6 alpha 2. At first I thought it was the beta release that had broken this, but in discussing it with Eric, I have discovered that it is HTML Toolkit. Maybe this comment by Eric will help you to figure out the problem

"If the tab is bound to ko.abbrev.expandAbbrev(), there shouldn't
be any difference in behavior moving to Beta 1. But if the
binding is trying to implement more of the abbrev'n internals,
it could fail with this change."

thanks for a great extension!

stan | Mon, 2010-06-14 12:06

Thanks for the report. I am aware of the issues in the beta, however I am waiting for things around the new toolbox to calm down before I re-implement the abbreviations. I'll release a new version once this makes it to GitHub.

stan | Mon, 2010-06-21 08:16

This is now fixed on master. You can run it from source (as guided on the README) or wait for 1.2.1 to come out later this month.

dofy | Tue, 2010-07-27 08:04

It is a very cool plugin and I love it.

but I met some trouble:

when I type 'sc' and press key, komodo pop up an alert window "Whoops! HTML Toolkit encountered an exception ...."

and the Script tag's type is "application/x-javaxcript", how can I change it to "text/javascript" in template.

Thanks.

Dofy.Net
PHPz.Org

dofy | Tue, 2010-07-27 08:29

Very cool :D

Dofy.Net
PHPz.Org

stan | Wed, 2010-07-28 01:53

Please drop by GitHub and log it in as an issue with the full exception stack included -- that should get me going.

dofy | Tue, 2010-07-27 19:36

in komodo 5.2.4

I type "tr<Tab>" and the words turn to "t<tr></tr>"

Dofy.Net
PHPz.Org

stan | Wed, 2010-07-28 01:55

This is indeed odd, however I cannot see this behaviour with my toolbox. I wonder if it has something to do with an abbreviation you may have which is getting in the way. Drop by GitHub and log it in as an issue with some notes if you could investigate further. Unfortunately there is little I can do without more information.

baikis | Thu, 2010-12-30 23:27

I have this problem too. This happens only with tr td and th tags. If I create tb<Tab> "<tb>|</tb>" snippet - everything is ok.. Any ideas?

stan | Fri, 2010-12-31 03:31

Unfortunately no solution comes to mind, see above reply.

If you manage to fix it, patches are welcome on Github.

manko10 | Wed, 2010-08-18 02:35

Hi,

this is a great add-on, maybe one of the best but there's one feature missing I'd really appreciate to see in the next release.
Since for me automatic tag completion is annoying in some cases I disabled it but I don't want to renounce the functionality of completing tags at all. Therefore could you please implement a keyboard shortcut for closing the last tag (e.g. Ctrl+Alt+Spacebar or Ctrl+Alt+Tab)? This should work as follows: I type in &lt;div&gt;&lt;span&gt;My example sentence and then hit the shortcut which closes the span tag at cursor position. By hitting the shortcut a second time it closes the div tag and so on.
I know I can use div[TAB] span[TAB] and sometimes I use this shourtcut but it's not exactly the same and not half as flexible. (e.g. you can't use this if you want to close a tag after you wrote the tag brackets or some content inside the tag)
It would be awesome if you could implement this feature.

stan | Wed, 2010-08-25 03:45

This sounds like a great feature. It would be difficult to implement for non-HTML documents, such as PHP and it will probably execute slowly as the entire buffer would have to be scanned until an unclosed tag is encountered. Komodo does this internally, but it is not very smart when the HTML gets too cluttered.

Feel free to send a patch or a pull on GitHub if you fancy tackling it yourself.

buckthron | Wed, 2010-08-18 05:30

To echo a previous posted, I feel like an idiot too. But now that I have the extension installed, how do I get started with this? I don't see any new menus or toolbox items, and none the keystrokes mentioned here seem to have any affect. I'm using Komodo Edit 5.2.4 on Mac OS X 10.6x. Thank you -- this looks like a great extension.

stan | Wed, 2010-08-25 03:47

If none of the keybindings work as expected, perhaps there was an error during the installation. Try uninstalling and installing the extension again. Watch for any errors on start-up in the error log. If the extension installed successfully you should see it in your add-ons list.

buckthron | Wed, 2010-09-01 07:39

Ok thanks, that worked. The description mentions "Markdown & Wiki preview panels". How do I find these? Does the Toolkit include an implementation of Showdown (the javascript port of Markdown)? I'm trying to figure out how to use Showdown in Komodo to quickly convert text to html.

stan | Wed, 2010-09-01 07:43

HTML Toolkit uses Showdown internally to do the conversion from Markdown to HTML and to display it in the right-hand side. To try it out, create a new Markdown document from Template or set the buffer language to Markdown (bottom-right of your statusbar). There is no option to copy the resulting HTML, feel free to open up an issue for that on GitHub and I'll look into it.