How does Google Docs perform advanced text editing?

Question

I just finished reading the section on advanced text editing in browsers in Professional JavaScript for web developers Nicholas Zakas. It says that there are two ways to implement rich text editing:

• iframe with designMode property set to on
• or element with contenteditable attribute

What I have done from this information is that both methods have so many contradictions between browsers that neither of them is really a reliable solution.

Checking the Google Doc sign, all I see is a bunch of nested div s.

So, I'm curious which Google method has been identified as the most suitable for implementing advanced text editing?

Answer 1

Google Docs do not use either designMode or contentEditable . It has its own rendering engine written in Javascript. From my blog post :

To work around these problems, the new Google Document Editor does not use a browser to edit editable text. We wrote a completely new editing of the surface and layout engine, entirely in JavaScript.

and

In fact, the most difficult thing the editor does is figure out where to draw the text. To do this, we built a new layout engine. Here is an example of how the new engine works: let's say you type the letter "a". We notice that you pressed the "a" key and answered by striking out one "off-screen". Then we measure the width and height "a", combine these measurements with the x and y positions of your cursor and put "a in the right place on the screen. If you are in the middle of a word, we click the characters after your cursor. If youre at the end of the line, the editor moves your word on the next line and pushes any overflow into the lines after it.