HTML5 editor (contentEditable) with pages like Google Docs

Question

I am trying to create a text editor web application similar to Google Docs. I started using the Mercury Editor (which relies on the contentEditable attribute), and I created an editable div element that looks like a paper page (like Google Docs do).

Currently, the big problem is how to deal with multiple pages, that is , how to detect when text (or other content) overflows the page height, and then creates a new page with split content. There are several scenarios when this can happen:

• The user enters an interrupt line at the end of the page. You must create a new page.
• The user enters a word and he reaches the end of the page. You must create a new page and translate this word on a new page.
• The user inserts a large text, and it does not fully fit on the current page. A new page should be created, and only text that does not fit should be transferred to a new one.
• The user inserts any other element (for example, an image) that does not match the current page. A new page must be created with this element.

I tried to dive into the Google Docs JS code, but this is pretty impossible because it is compressed. There is an autonomous version of Google Docs and the code is decorated, but it is old and does not process multiple pages.

Any hint on how to accomplish this would be appreciated.

Answer 1

If your container has a fixed size, you can use the overflow event to detect it.

window.addEventListener ("overflow", yourFunction, false); 

Answer 2

Basically, you need two divs, for example

 <div id='pageWrapper'> <div id='page' style='max-height: 600px; overflow: hidden;'> </div> </div> 

All #pageWrapper really sits there and looks like a page, all the content that someone adds is added to the # page. Every time someone adds content, whether by pasting or typing #page scrollHeight and offsetHeight. If scrollHeight is larger, you have overflowed the page, and you can start moving content (word by word or element by element) to the next page until scrollHeight equals offsetHeight.

If the user inserts a page break, just set the page height, wherever the page break is, so everything that comes after that will fill the page. It will be difficult with large documents, because if someone overflows page 1, the content will need to be adjusted until the page is empty, but I think that Google Docs has no pages.