React-pdf: चिह्न टैग के साथ एनोटेशन परत में पाठ को उजागर करने का प्रयास करते समय अजीब व्यवहार करें।

विवरण

चिह्न टैग के साथ एनोटेशन परत में पाठ को उजागर करने का प्रयास करते समय अजीब व्यवहार करें।

मैं एक प्रतिक्रिया-बूटस्ट्रैप मोडल संवाद में एक पीडीएफ प्रदर्शित कर रहा हूं। मैं पृष्ठ घटक के customTextRenderer प्रोप का उपयोग करके पृष्ठ पर हाइलाइट खोज शब्द प्राप्त करने की कोशिश कर रहा हूं। हाइलाइट किए गए पाठ को एक अलग फ़ॉन्ट में प्रस्तुत किया गया है और सही स्थान पर नहीं।

प्रजनन करने कि प्रक्रिया

व्यवहार को पुन: पेश करने के लिए कदम:
कोड इस तरह दिखता है:

<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>

और customTextRenderer इस तरह दिखता है:

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])
    ), []);

    }

(मुख्य रूप से आपके नमूने में से एक, मुझे लगता है)

अपेक्षित् व्यवहार

हाइलाइट किए गए टेक्स्ट शो एक ही स्थान पर और एक ही फ़ॉन्ट में और एक ही स्थान पर होने चाहिए।

अतिरिक्त जानकारी
मैं दोनों svg और कैनवास के साथ कोशिश की है, लेकिन एक ही व्यवहार देखें।

# 189 में समान व्यवहार का सामना किया गया था, लेकिन मुझे किसी भी काम के साथ कोई भाग्य नहीं था। मैंने # 212 भी देखा है।

वातावरण

• ब्राउज़र (यदि लागू हो) [उदाहरण के लिए क्रोम 57, फ़ायरफ़ॉक्स 59]: मैंने फ़ायरफ़ॉक्स में दोनों क्रोम के नवीनतम में परीक्षण किया है। व्यवहार दोनों में गड़बड़ है।
• रिएक्ट-पीडीएफ संस्करण [जैसे 3.0.4]:
• प्रतिक्रिया संस्करण [उदा। 16.3.0]:
• वेबपैक संस्करण (यदि लागू हो) [जैसे 4.16.2]: