Implementing a Rich Text Editor with contentEditable

Now that the Gecko Engine (Firefox) has support for the HTML5 contentEditable attribute, it's become a heck of a lot easier to roll your own rich text editor.

I'm doing that very thing, and will comment on each gotcha I discover, beginning with this one.

contentEditable Gotcha #1:

In Firefox 3.5, Justification commands (justifyLeft, justifyRight, justifyFull, and justifyCenter) are broken for the first chunk of text in a dynamically created DIV tag with contentEditable="true".

I creating the following HTML using a combination of document.createElement() and Element#innerHTML:

<div contenteditable="true">
Test content
</div>

When firing the "justifyRight" command via document.execCommand(), this nasty error is thrown:

[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: https://localhost/editor.js :: anonymous :: line 8" data: no]

Egads! This is such a simple test case that I had to have been doing something wrong. All justification commands on the original content failed. However, if I pressed enter and typed a new paragraph, the justification commands worked perfectly.

The Workaround

Because only the first DOM node in the editable DIV could not be justified, I simple inserted a dummy element:

<div contenteditable="true">
<!-- begin gecko fix -->
 <div></div>
<!-- end gecko fix -->
Test content
</div>

Yes, it's entirely gross; but it works. Hopefully the Firefox team will fix this in the future.