How does Google Docs achieve content editing?

Question

Inspecting the DOM of a google docs page, I can't find any elements with the contentEditable attribute set. I even tried traversing the DOM, looking at isContentEditable... all set to false.

What gives? How is google docs achieving editability?

Answer 1

Google Docs uses its own editing surface instead of contenteditable. It draws its own selection and caret and handles most key and mouse events manually. I think it may have a hidden contenteditable iframe that it uses to collect user input but I've never been able to get to the bottom of it.

Here's a Google blog post about it:

https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html