React-pdf: سلوك خط غريب عند محاولة تمييز النص في طبقة التعليقات التوضيحية بعلامة العلامة.

وصف

سلوك خط غريب عند محاولة تمييز النص في طبقة التعليقات التوضيحية بعلامة العلامة.

أعرض ملف 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 و canvas لكني أرى نفس السلوك.

تمت مصادفة نفس السلوك في # 189 ، لكن لم يحالفني أي حظ مع أي حلول بديلة. لقد نظرت أيضًا في # 212.

بيئة

• المتصفح (إن أمكن) [مثل Chrome 57 و Firefox 59]: لقد اختبرت في أحدث إصدار من الكروم في Firefox. السلوك خلل في كليهما.
• نسخة React-PDF [مثل 3.0.4]:
• نسخة React [مثل 16.3.0]:
• إصدار Webpack (إن أمكن) [على سبيل المثال 4.16.2]: