Unwanted page break

[ggirardi1]

Hi @motla

I don't want this page break to happen for my sections.

I am unable to prevent this behavior via CSS alone, as it seems that vue-document-editor does not seem to take into consideration page-break-before, page-break-after or page-break-inside. What do I need to do?

Ps.: My sections are in <section> elements.

[motla]

Hi @guilhermeagirardi,
It is not implemented yet and not trivial to implement. For example we have to handle the case when the section height is higher than the page height. I can't look at it right now, but the starting point would be to detect the <section> element in this line to avoid splitting it:

vue-document-editor/src/DocumentEditor/imports/page-transition-mgmt.js

Lines 52 to 53 in 8eaa28b

	// if it is a node with no content (e.g. <img>), or a header title (e.g. <h1>) we simply move it
	else if(!sub_child.childNodes.length || sub_child.tagName.match(/h\d/i)) {

[ggirardi1]

Hi @motla !

Thank you for the feedback and the suggestion.

What I did was add a callback at the end of the conditional test of that function.

else if (!sub_child.childNodes.length || sub_child.tagName.match(/h\d/i) || do_not_break(sub_child)) {

<vue-document-editor
    ref="editor"
    v-model:content="content"
    :do_not_break="(sub_child) => sub_child.tagName.match(/section/i)"
/>

This was enough for me at the time to define different breakage prevention situations.

[motla]

Well done! Great implementation 👍
I may add it to the next release but I'm afraid of edge cases, it needs some testing.

[motla]

Hi @guilhermeagirardi
For your information I just released v2.3.0 (Vue3) and v1.5.0 (Vue2) which contains your implementation. I have set you as co-author.

[ggirardi1]

Hi @motla!

It was no big deal. I'm honored to know that. Thankss! 😁