`customTextRenderer` occasionally inserts HTML content into the <br> tags generated by PDF.js

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

PDF.js inserts a DOM node containing the associated text content if present:

https://github.com/mozilla/pdf.js/blob/c7d6ab2f7123c5a65155c55aa19d9d9abd8c2ff2/src/display/text_layer.js#L368

It then inserts a <br> element if hasEOL is also true for the same associated text content:

https://github.com/mozilla/pdf.js/blob/c7d6ab2f7123c5a65155c55aa19d9d9abd8c2ff2/src/display/text_layer.js#L371

Because the behavior of react-pdf is to iterate through each element of text content and then assume that the DOM node found by index is the only associated DOM node, the count drifts every time an element of text content with length and hasEOL is hit.

I implemented a disgusting hack that looks like

const textContentItems = [...textContent.items].flatMap((textContentItem) =>
  textContentItem.hasEOL && textContentItem.str
    ? [textContentItem, null]
    : [textContentItem]
);

textContentItems.forEach(function (item, itemIndex) {
  if (!item) {
    return;
  }
  ...

Lmk what you think! Love the ease-of-use of this component.

Steps to reproduce

All the PDF examples I have are confidential but I can try to create one if requested.

1. Load PDF containing multi-line statements such that PDF.js parses one line with str present and hasEOL: true.
2. customTextRenderer={({ str }) => str}
3. Select all text on page, doesn’t match.

Expected behavior

Text selection should match.

Actual behavior

Text selection doesn’t match.

Additional information

No response

Environment

• Browser (if applicable): Chrome
• React-PDF version: 6.1.0
• React version: 16.8
• Webpack version (if applicable):

[wojtekmaj]

Thanks guys for all the info - this really helped me out! v6.1.1 released.

[etripier]

@wojtekmaj The issue is specifically that some tokens containing text and a line break will render both a <span> and a <br>, meaning that the number of rendered elements no longer matches 1-1 with the input. You can see the conditions that lead to this result here.