README.md

@@ -405,7 +405,7 @@ Displays a page. Should be placed inside `<Document />`. Alternatively, it can h
 | canvasBackground         | Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored.                                                                                                                                                                 | n/a                                           | `"transparent"`                                                                                                                                                                                                                                                                                  |
 | canvasRef                | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `<canvas>` rendered by `<PageCanvas>` component. If you set `renderMode` to `"svg"` this prop will be ignored.                                                                                | n/a                                           | <ul><li>Function:<br />`(ref) => { this.myPage = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
 | className                | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`.                                                                                                                                                                                                   | n/a                                           | <ul><li>String:<br />`"custom-class-name-1 custom-class-name-2"`</li><li>Array of strings:<br />`["custom-class-name-1", "custom-class-name-2"]`</li></ul>                                                                                                                                       |
-| customTextRenderer       | Function that customizes how a text layer is rendered.                                                                                                                                                                                                                                           | n/a                                           | `` ({ str, itemIndex }) => { return `<mark>${str}</mark>` }  ``                                                                                                                                                                                                                                  |
+| customTextRenderer       | Function that customizes how a text layer is rendered.                                                                                                                                                                                                                                           | n/a                                           | `` ({ str, itemIndex }) => str.replace(/ipsum/g, `<mark>ipsum</mark>`) ``                                                                                                                                                                                                                        |
 | error                    | What the component should display in case of an error.                                                                                                                                                                                                                                           | `"Failed to load the page."`                  | <ul><li>String:<br />`"An error occurred!"`</li><li>React element:<br />`<div>An error occurred!</div>`</li><li>Function:<br />`this.renderError`</li></ul>                                                                                                                                      |
 | height                   | Page height. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `height` and `scale` at the same time, the height will be multiplied by a given factor. | Page's default height                         | `300`                                                                                                                                                                                                                                                                                            |
 | imageResourcesPath       | The path used to prefix the src attributes of annotation SVGs.                                                                                                                                                                                                                                   | n/a (pdf.js will fallback to an empty string) | `"/public/images/"`                                                                                                                                                                                                                                                                              |

__mocks__/_failing_page.js

@@ -12,5 +12,6 @@ export default {
   }),
   render: () => ({
     promise: new Promise((resolve, reject) => reject(new Error())),
+    cancel: () => {},
   }),
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Display PDFs in your React app as easily as if they were images.",
   "main": "dist/cjs/entry.js",
   "module": "dist/esm/entry.js",

sample/vite/yarn.lock

@@ -3380,8 +3380,8 @@ __metadata:
   linkType: soft
 
 "react-pdf@npm:latest":
-  version: 6.0.1
-  resolution: "react-pdf@npm:6.0.1"
+  version: 6.0.2
+  resolution: "react-pdf@npm:6.0.2"
   dependencies:
     "@babel/runtime": ^7.0.0
     clsx: ^1.2.1
@@ -3399,7 +3399,7 @@ __metadata:
   peerDependenciesMeta:
     file-loader:
       optional: true
-  checksum: 0975d675abc71ee5ce29b2955b6af89297511ec53d837f37075526cb87367a503da15f58a947671e1ae74d2b222f52f9a5b32de36c4316818368a4cdab18970f
+  checksum: a8a64baa7500ea224fbcdd0ad3565deaabf6b22f8ac8cb68ed6b7d95c28ad7fb6cb43a92d86457b614d2713af5308610a48aa219e3b5501a582e5f112b287fdf
   languageName: node
   linkType: hard
 

src/Document.jsx

@@ -115,15 +115,14 @@ export default class Document extends PureComponent {
 
         const { options, onLoadProgress, onPassword } = this.props;
 
-        this.loadingTask = pdfjs.getDocument({ ...source, ...options });
-        this.loadingTask.onPassword = onPassword;
+        const destroyable = pdfjs.getDocument({ ...source, ...options });
+        destroyable.onPassword = onPassword;
         if (onLoadProgress) {
-          this.loadingTask.onProgress = onLoadProgress;
+          destroyable.onProgress = onLoadProgress;
         }
-        const cancellable = makeCancellable(this.loadingTask.promise);
-        this.runningTask = cancellable;
+        this.loadingTask = destroyable;
 
-        cancellable.promise
+        destroyable.promise
           .then((pdf) => {
             this.setState((prevState) => {
               if (prevState.pdf && prevState.pdf.fingerprint === pdf.fingerprint) {

src/Page/PageCanvas.jsx

@@ -1,6 +1,5 @@
 import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import makeCancellable from 'make-cancellable-promise';
 import mergeRefs from 'merge-refs';
 import warning from 'tiny-warning';
 import * as pdfjs from 'pdfjs-dist/build/pdf';
@@ -121,9 +120,10 @@ export class PageCanvasInternal extends PureComponent {
     // If another render is in progress, let's cancel it
     this.cancelRenderingTask();
 
-    this.renderer = makeCancellable(page.render(renderContext).promise);
+    const cancellable = page.render(renderContext);
+    this.renderer = cancellable;
 
-    return this.renderer.promise.then(this.onRenderSuccess).catch(this.onRenderError);
+    return cancellable.promise.then(this.onRenderSuccess).catch(this.onRenderError);
   };
 
   render() {

src/Page/PageCanvas.spec.jsx

@@ -24,6 +24,7 @@ describe('PageCanvas', () => {
     pageWithRendererMocked = Object.assign(page, {
       render: () => ({
         promise: new Promise((resolve) => resolve()),
+        cancel: () => {},
       }),
     });
   });

src/Page/TextLayer.jsx

@@ -126,29 +126,32 @@ export class TextLayerInternal extends PureComponent {
     // If another rendering is in progress, let's cancel it
     cancelRunningTask(this.runningTask);
 
+    this.layerElement.current.innerHTML = '';
+
     const parameters = {
       container: this.layerElement.current,
       textContent,
       viewport,
     };
 
-    this.layerElement.current.innerHTML = '';
-
-    this.runningTask = pdfjs.renderTextLayer(parameters);
-    const cancellable = makeCancellable(this.runningTask.promise);
+    const cancellable = pdfjs.renderTextLayer(parameters);
     this.runningTask = cancellable;
 
     cancellable.promise
       .then(() => {
         if (customTextRenderer) {
-          Array.from(this.layerElement.current.children).forEach((element, elementIndex) => {
+          textContent.items.forEach((item, itemIndex) => {
+            const child = this.layerElement.current.children[itemIndex];
+
             const content = customTextRenderer({
-              itemIndex: elementIndex,
-              ...textContent.items[elementIndex],
+              itemIndex,
+              ...item,
             });
-            element.innerHTML = content;
+
+            child.innerHTML = content;
           });
         }
+
         this.onRenderSuccess();
       })
       .catch((error) => {

src/entry.webpack5.js

@@ -8,6 +8,6 @@ import { displayWorkerWarning } from './shared/utils';
 
 displayWorkerWarning();
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker', import.meta.url);
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url);
 
 export { pdfjs, Document, Outline, Page };

test/Test.jsx

@@ -183,17 +183,7 @@ export default function Test() {
       renderTextLayer,
       scale: pageScale,
       width: pageWidth,
-      customTextRenderer: (textItem) =>
-        textItem.str
-          .split('ipsum')
-          .reduce(
-            (strArray, currentValue, currentIndex) =>
-              currentIndex === 0
-                ? [...strArray, currentValue]
-                : [...strArray, '<mark>ipsum</mark>', currentValue],
-            [],
-          )
-          .join(''),
+      customTextRenderer: ({ str }) => str.replace(/ipsum/g, `<mark>ipsum</mark>`),
     };
   }