some special texts can't be matched when I use Page.customTextRenderer try to match and highlight that user inputed keyword

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

This is displayed in Chrome

This is displayed by react-pdf

This is part of codes:

{selFile && !!selFile.isPdf && (
              <Document
                file={selFile.attachment_path}
                options={options}
                onLoadSuccess={onDocumentLoadSuccess}
                onPassword={onDocumentPassword}
                loading={<Spin size="large" />}
              >
                <div
                  className={cs('content', 'pdf', {
                    'zoom-in': canZoomByGesture && scale < maxScale,
                    'zoom-out': canZoomByGesture && scale >= maxScale
                  })}
                  onWheelCapture={canZoomByGesture ? onWheelCapture : undefined}
                  style={childStyle}
                >
                  <div className='insideImgWr'>
                    <Page
                      pageNumber={page}
                      scale={scale + 0.4}
                      loading={<Spin size="large" />}
                      canvasRef={canvasRef}
                      customTextRenderer={customTextRenderer}
                    />
                    <WaterMarkConsumer>
                      <div className='insideWatermark' />
                    </WaterMarkConsumer>
                  </div>
                </div>
              </Document>
            )}


  const customTextRenderer = useCallback((textItem) => {
    if (!textItem) return null;
    return highlightPattern(textItem.str, resultsList && resultsList.length ? searchString || '' : '');
  }, [resultsList, searchString]);



function highlightPattern(text: string, pattern: string) {
  const splitText = text.split(pattern);

  console.log('xxx highlightPattern: ', text);
  

  if (splitText.length <= 1) {
    return text;
  }

  const matches = text.match(pattern);

  return splitText.reduce(
    (arr, element, index) =>
      // @ts-ignore
      matches[index]
        ? [...arr, element, <mark key={index} className='gallery-hightlight'>{matches[index]}</mark>]
        : [...arr, element],
    []
  );
}

Steps to reproduce

compare between Chrome PDF viewer and react-pdf of displaying a Chinese PDF. One row content has part missing disaplayed, but it is displayed correctly at Chrome PDF viewer.

Expected behavior

displayed correctly

Actual behavior

missing displayed

Additional information

No response

Environment

• Browser (if applicable):Chrome
• React-PDF version:5.6.0
• React version:17.0.2
• Webpack version (if applicable):5.65.0

[XingToYang]

import { pdfjs, Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

const options = {
  cMapUrl: 'cmaps/',
  cMapPacked: true,
  standardFontDataUrl: 'standard_fonts/'
};

// unset pdfjs.GlobalWorkerOptions.workerSrc, then the special texts now is displayed
// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

<Document
                file={selFile.attachment_path}
                options={options}
                onLoadSuccess={onDocumentLoadSuccess}
                onPassword={onDocumentPassword}
                loading={<Spin size="large" />}
              >

I’ve configured cMaps and when I unset pdfjs.GlobalWorkerOptions.workerSrc, the not-displayed texts now is displayed

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.