Automatic PageBreak

@lebonsavane As far as I know there isn't a feature to do that currently.

I would create a custom component called 'Page', set 'removable' to false and this component would be added after the editor is loaded. So there would always be at least one page. You could specify the height of this custom component as a style parameter.

Then, you will need custom logic to determine when to add a new page. I think there are only two ways a content could go over the 'height limit'. 1. Current content is increased For example when a text component's content length is increased. 2. New content added Obviously when you drop a new component into a given page, if the current height + the new component's height is more than the height of a page you would need an additional page where the new component would be added.

For the first case you could listen to the 'component:styleUpdate:height' on every page component, and when the height exceeds the allowed height, you would have to split the text into two components and the push one part onto a new page.

The second case is fairly easily covered by listening to the 'component:drag:end' event(https://grapesjs.com/docs/api/editor.html#available-events) and then making the necessary adjustments(adding the component onto a new page if it is the last page, otherwise shift everything, multiple pages).

If you don't need such a 'hard page-break' you could get away with CSS styling and just visual breaks after a certain height.

I'm assuming that you would want to use grapesjs as a PDF/document editor and use pages? Unless you are prepared to make a lot of development, I would suggest to add new pages manually, however I do see a value in a 'document' mode for grapesjs, but it would be most likely a plugin rather then a core feature.

I hope this helps.

Probably this thing might help with the logic http://marcj.github.io/css-element-queries/ (by attaching the ResizeSensor on the wrapper)