Detect end of Draft.js Editor with specific height

Question

I'm trying to make a simple test editor with Draft.js and React.

I want my editor to looks like Word or LibreOffice : A page with a given height and a new page is created when you reached the bottom of the page.

I have an Editor with the good size but I haven't found a way to detect that the page is filled and a new page needs to be created.

Does anyone have a clue about this ? Is there any thing I have missed in the API or I will have to implement this by hand ?

Answer 1

You won't find a simple answer to this because HTML doesn't have a concept of "pages"

I'm working on a React component that detects the height of the content and attempts to scale to the number of pages required to fit the content.

https://github.com/moodysalem/react-page-div/

You can use the editor inside the react page div, but don't include any controls that will be visible when printed.

Answer 2

As for my project, i was able to apply the same approach as Moody. Manually checking the height of the editor container on ComponentDidUpdate and adding a div inline with the editor container that has border and which is positioned absolute top equals to the height of paper (eg 11in).