How does Google Docs implement rich text editing? [closed]

Question

I just finished reading the section about rich text editing in browsers in Professional JavaScript for Web Developers by Nicholas Zakas. It says there are two ways to go about implementing rich text editing:

1. iframe with designMode property set to on
2. or an element with contenteditable attribute

What I concluded from that information is that both techniques have so much cross-browser inconsistencies that neither one is really a reliable solution.

Inspecting Google Doc's mark up, all I see is a bunch of nested divs.

So, I'm curious, what technique has Google determined to be the most suitable for implementing rich text editing?

Answer 1

Google Docs don't use neither designMode nor contentEditable. It has its own rendering engine written in Javascript. From their blog post on it:

To get around these problems, the new Google document editor doesn’t use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript.

and

By far the most difficult thing the editor does is figure out where to draw text. For this, we built a new layout engine. Here’s an example of how the new engine works: say you type the letter ‘a’. We notice you pressed the ‘a’ key and respond by drawing a single ‘a’ off-screen. We then measure the width and height of that ‘a’, combine those measurements with the x and y position of your cursor, and place the ‘a’ at the correct spot on the screen. If you’re in the middle of a word, we push the characters after your cursor over. If you’re at the end of a line, the editor moves your word to the next line and pushes any overflow to the lines after it.