React-pdf: Comportement de police étrange lorsque vous essayez de mettre en évidence du texte dans le calque d'annotation avec la balise de marque.

La description

Comportement de police étrange lorsque vous essayez de mettre en évidence du texte dans le calque d'annotation avec la balise de marque.

J'affiche un pdf dans une boîte de dialogue modale react-bootstrap. J'essaie d'obtenir des termes de recherche en surbrillance sur la page à l'aide de l'accessoire customTextRenderer du composant Page. Le texte en surbrillance est rendu dans une police différente et pas tout à fait au bon endroit.

Étapes à suivre pour reproduire

Étapes pour reproduire le comportement:
Le code ressemble à ceci:

<Modal show={this.state.showPDF}

    onHide={this.handleClose} dialogClassName="modal-100w">
    <Modal.Header closeButton>
    </Modal.Header>
    <Modal.Body style={{margin: "auto"}}>
    <Document file={this.state.pdfURL} onLoadSuccess={(page) => this.onDocumentLoadSuccess(page)}>
        <Page  renderMode="svg" scale={1.0} pageNumber={1} customTextRenderer={(textItem) => this.customTextRenderer(textItem)} onLoadSuccess={(page) => this.onPageLoadSuccess(page)} />
        </Document>
    </Modal.Body>
</Modal>

et customTextRenderer ressemble à ceci:

return textItem.str
              .split(this.terms[0])
              .reduce((strArray, currentValue, currentIndex) => (
                currentIndex === 0
                  ? ([...strArray, currentValue])
                  : ([...strArray, (
                    // eslint-disable-next-line react/no-array-index-key
                    <mark key={currentIndex}>
                      {this.terms[0]}
                    </mark>
                  ), currentValue])
    ), []);

    }

(tiré principalement de l'un de vos échantillons, je pense)

Comportement prévisible

Le texte en surbrillance doit être affiché au même endroit et dans la même police et au même endroit.

Information additionnelle
J'ai essayé avec svg et canvas mais j'ai le même comportement.

Le même comportement a été rencontré dans # 189, mais je n'ai eu aucune chance avec des solutions de contournement. J'ai également regardé # 212.

Environnement

• Navigateur (le cas échéant) [par exemple Chrome 57, Firefox 59]: J'ai testé dans le dernier des deux chrome sur Firefox. Le comportement est glitch dans les deux cas.
• Version React-PDF [par exemple 3.0.4]:
• Version React [par exemple 16.3.0]:
• Version Webpack (le cas échéant) [par exemple 4.16.2]: