After the Deadline

Working on the web is quite exciting. Standards are evolving and the ideal ways of doing things keep coming closer to reality. Proofreading text areas with AtD isn’t as natural as I’d like. Clicking a button activates a proofreading mode. This mode places the contents of the text area into a DIV and inserts the After the Deadline markup with the text. Under this model, you click the highlighted errors to select a suggestion from a context menu. Once you’re done proofreading your text area is restored with the updated contents.

This model works OK. GMail uses it. Meetup.com uses it. I believe I’ve seen it in many other places.

Last night I decided to play with the new contentEditable attribute. This new(ish) attribute allows a developer to flag an HTML element as editable. This means the user can interact with the contents of the element in place. They can type text, move the cursor, and anything else they would do with a text area. It’s exciting stuff. Up until now web apps have achieved in-place editing by creating an iframe displaying a blank page with the design mode attribute set to true. This solution is a bit heavy.

I’m looking at using contentEditable with After the Deadline. I’m almost surprised we haven’t seen it in more places. It’s a harmless attribute to add to an application. If it works, users can interact with the div as if it’s the text area until the text area is restored. If it doesn’t work, then the user is stuck interacting with the div using the conceptual edit and proofread modes.

The only challenge is dealing with newlines correctly. When you press enter, the browser creates a line-break or a new paragraph (this is unspecified). When emulating a text area this is undesirable. So I either get to make the proofread mode swallow enter key presses or emulate text editing behavior by detecting which browser is in use and taking browser specific action to insert a newline at the cursor. I shouldn’t have to do this as my div’s set the CSS attribute white-space to pre-wrap. Under this mode a newline in a div will produce a line-break. It’d be nice if the contentEditable mode honored this.

Despite this small hang up, contentEditable is an exciting change and we look forward to bringing it to a proofreading plugin near you.