How does Google Docs implement rich text editing?

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:

iframe with designMode property set to on
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?

Since Google Docs is a proprietary product, and an extremely complex one at that, I'm not sure there's ever going to be a nice bitesized answer to this question. — IMSoP, Oct 27 '13 at 14:33
this article will be helpful http://googledocs.blogspot.in/2010/05/whats-different-about-new-google-docs.html — Amitd, Oct 27 '13 at 14:37
Also a similar question http://stackoverflow.com/questions/4358901/how-to-implement-google-doc-like-text-editor?rq=1 — Amitd, Oct 27 '13 at 14:38
The smart alec answer is by buying it ;) When Google wanted to develop Google Docs they bought Writely and rebranded it. — slebetman, Oct 27 '13 at 16:11

score 13 · Accepted Answer · edited Mar 19 '17 at 04:35

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.

How does Google Docs implement rich text editing?

1 Answers1