PagedJS breaks inline images

Hi there !

I wrote a somewhat print-friendly React webpage, and tried to make a PDF with Puppeteer, but I struggled with the table of content, so when I found out about this lib, I was excited! This means I can create a ToC easily !

Using the page counter for my toc is great (thanks to this great example), it makes things simple and reliable.

However, the polyfill also seems to rearrange my content in a way that breaks inline images. Because I’m writing a manual, I’m using some inline images as icons, like custom symbols in the text. The polyfill seems to rearrange my text in <p> tags arbitrarily.

I’ve seen things such as the following:

Input:

Lorem ipsum dolor sit amet <MyIcon/>, consectetur adipiscing elit. 

Expected output

Lorem ipsum dolor sit amet <MyIcon/>, consectetur adipiscing elit. 

Output

<p>Lorem ipsum dolor sit amet</p>
<MyIcon/>,
<p>consectetur adipiscing elit. </p>

Is there some way I can bypass that ? Really all I need is page breaks and the page counter.

I’m not against using the npm package either, btw.

Thank you for your time

Hi there and thanks for the nice words!
this dooesn’t feel right indeed. Would you mind sharing some HTML and css for us to check what’s wrong here?

I have found the culprit.

My had some divs in <p> tags, which raises this error:

validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

When I change the content to use a <div> instead of a <p>, the issue is gone.

1 Like

HA!
Nice catch.

paged.js works best when you have a valid HTML, and <div> inside <p> are not.

Thanks again for all the nice words, and if you want to share your work,we’ll be happy to add it to pagedjs website :smiley: