How does the inline editing and formatting used in code.google.com works?

Question

Recently code.google.com added the feature to edit a file and syntax highlight it!

From what I can understand they added a textarea along with at iframe, where the textarea is where you type in content and the iframe displays the formatting. The textarea is moved up ( like -10000 px or something ) so it is invisible.

What I don't get is how they manage to have the iframe content behaving like a textarea. For instance if you copy and paste a bunch of code they format it immediately.

This is very interesting. Can anyone explain a bit on how does this works?

Answer 1

Google Code uses CodeMirror for editing.

Here are documents about its internals written by the author:

• Implementing a Syntax-Highlighting JavaScript Editor—In JavaScript : A brutal odyssey to the dark side of the DOM tree.
• (Re-) Implementing A Syntax-Highlighting Editor in JavaScript.

Answer 2

Lot's and lot's of javascript and custom event handling. It's not so easy to answer since it's a complex piece of software.

They are probably using an <iframe> with contentEditable="true" to make the text editable, the textarea might be there to capture input on browsers that do not support it (or even for some other reason, I can't tell without more analysis).

They also need a lexer for each supported language. This can be done client or server side, to identify which style to apply to each token, plus some heavy DOM manipulation (probably using a library like jQuery for example, to simplify updates to the tree).