.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Enable Corepack
         run: corepack enable
@@ -65,7 +65,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Enable Corepack
         run: corepack enable
@@ -99,7 +99,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Enable Corepack
         run: corepack enable

.github/workflows/dependabot-dedupe.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Enable Corepack
         run: corepack enable

README.md

@@ -41,12 +41,16 @@ React-PDF supports all modern browsers. It is tested with the latest versions of
 
 The following browsers are supported in React-PDF v6:
 
-- Chrome ≥73
+- Chrome ≥76
 - Edge (Chromium-based)
-- Safari ≥12.1
-- Firefox ≥45(?)
+- Safari ≥14.1
+- Firefox ≥90(?)
 
-If you need to support older browsers, you will need to use React-PDF v5. If you need to support Internet Explorer 11, you will need to use React-PDF v4.
+You may extend the list of supported browsers by providing additional polyfills (e.g. for `Promise.allSettled`) and configuring your bundler to transpile `pdfjs-dist`.
+
+If you need to support older browsers, you will need to use React-PDF v5.
+
+If you need to support Internet Explorer 11, you will need to use React-PDF v4.
 
 #### React
 
@@ -405,7 +409,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 }) => str.replace(/ipsum/g, `<mark>ipsum</mark>`) ``                                                                                                                                                                                                                        |
+| customTextRenderer       | Function that customizes how a text layer is rendered.                                                                                                                                                                                                                                           | n/a                                           | `` ({ str, itemIndex }) => str.replace(/ipsum/g, value => `<mark>${value}</mark>`) ``                                                                                                                                                                                                            |
 | devicePixelRatio         | The ratio between physical pixels and device-independent pixels (DIPs) on the current device.                                                                                                                                                                                                    | `window.devicePixelRatio`                     | `1`                                                                                                                                                                                                                                                                                              |
 | 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`                                                                                                                                                                                                                                                                                            |

jest.config.json

@@ -9,6 +9,7 @@
     "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
     "pdfjs-dist/(.*)": "pdfjs-dist/legacy/$1"
   },
+  "reporters": ["default", "github-actions"],
   "setupFilesAfterEnv": ["jest-canvas-mock", "<rootDir>/jest.setup.js"],
   "testEnvironment": "<rootDir>/jest.env.js"
 }

package.json

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

src/OutlineItem.jsx

@@ -13,17 +13,18 @@ import { isPdf } from './shared/propTypes';
 export class OutlineItemInternal extends PureComponent {
   getDestination = () =>
     new Promise((resolve, reject) => {
+      if (isDefined(this.destination)) {
+        resolve(this.destination);
+        return;
+      }
+
       const { item, pdf } = this.props;
 
-      if (!isDefined(this.destination)) {
-        if (typeof item.dest === 'string') {
-          pdf.getDestination(item.dest).then(resolve).catch(reject);
-        } else {
-          resolve(item.dest);
-        }
+      if (typeof item.dest === 'string') {
+        pdf.getDestination(item.dest).then(resolve).catch(reject);
+      } else {
+        resolve(item.dest);
       }
-
-      return this.destination;
     }).then((destination) => {
       this.destination = destination;
       return destination;
@@ -34,6 +35,7 @@ export class OutlineItemInternal extends PureComponent {
       const { pdf } = this.props;
       if (isDefined(this.pageIndex)) {
         resolve(this.pageIndex);
+        return;
       }
 
       this.getDestination().then((destination) => {
@@ -53,6 +55,7 @@ export class OutlineItemInternal extends PureComponent {
     new Promise((resolve, reject) => {
       if (isDefined(this.pageNumber)) {
         resolve(this.pageNumber);
+        return;
       }
 
       this.getPageIndex()

src/OutlineItem.spec.jsx

@@ -53,5 +53,29 @@ describe('OutlineItem', () => {
 
       expect(onClick).toHaveBeenCalled();
     });
+
+    it('calls onClick with proper arguments multiple times when clicked a link multiple times', async () => {
+      const { func: onClick, promise: onClickPromise } = makeAsyncCallback();
+
+      const { rerender } = render(<OutlineItem item={outlineItem} onClick={onClick} pdf={pdf} />);
+
+      const item = screen.getAllByRole('listitem')[0];
+      const link = getAllByRole(item, 'link')[0];
+      fireEvent.click(link);
+
+      await onClickPromise;
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+
+      const { func: onClick2, promise: onClickPromise2 } = makeAsyncCallback();
+
+      rerender(<OutlineItem item={outlineItem} onClick={onClick2} pdf={pdf} />);
+
+      fireEvent.click(link);
+
+      await onClickPromise2;
+
+      expect(onClick2).toHaveBeenCalledTimes(1);
+    });
   });
 });

src/Page.jsx

@@ -70,6 +70,7 @@ export class PageInternal extends PureComponent {
   }
 
   get childContext() {
+    const { pageIndex, pageNumber } = this;
     const { page } = this.state;
 
     if (!page) {
@@ -109,6 +110,8 @@ export class PageInternal extends PureComponent {
       onRenderTextLayerError,
       onRenderTextLayerSuccess,
       page,
+      pageIndex,
+      pageNumber,
       renderForms: renderForms ?? renderInteractiveForms, // For backward compatibility
       rotate: this.rotate,
       scale: this.scale,

src/Page/TextLayer.css

@@ -37,7 +37,6 @@
   white-space: pre;
   cursor: text;
   transform-origin: 0% 0%;
-  z-index: 1;
 }
 
 /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
@@ -86,7 +85,7 @@
   top: 100%;
   right: 0;
   bottom: 0;
-  z-index: 0;
+  z-index: -1;
   cursor: default;
   user-select: none;
 }

src/Page/TextLayer.jsx

@@ -145,7 +145,7 @@ export class TextLayerInternal extends PureComponent {
     const container = this.layerElement.current;
 
     const { viewport } = this;
-    const { customTextRenderer } = this.props;
+    const { customTextRenderer, pageIndex, pageNumber } = this.props;
 
     // If another rendering is in progress, let's cancel it
     cancelRunningTask(this.runningTask);
@@ -174,6 +174,8 @@ export class TextLayerInternal extends PureComponent {
             const child = this.layerElement.current.children[index];
 
             const content = customTextRenderer({
+              pageIndex,
+              pageNumber,
               itemIndex,
               ...item,
             });
@@ -212,6 +214,8 @@ TextLayerInternal.propTypes = {
   onRenderTextLayerError: PropTypes.func,
   onRenderTextLayerSuccess: PropTypes.func,
   page: isPage.isRequired,
+  pageIndex: PropTypes.number.isRequired,
+  pageNumber: PropTypes.number.isRequired,
   rotate: isRotate,
   scale: PropTypes.number,
 };

src/shared/utils.js

@@ -4,7 +4,7 @@ import warning from 'tiny-warning';
 /**
  * Checks if we're running in a browser environment.
  */
-export const isBrowser = typeof window !== 'undefined';
+export const isBrowser = typeof document !== 'undefined';
 
 /**
  * Checks whether we're running from a local file system.
@@ -30,7 +30,7 @@ export function isProvided(variable) {
 }
 
 /**
- * Checkes whether a variable provided is a string.
+ * Checks whether a variable provided is a string.
  *
  * @param {*} variable Variable to check
  */
@@ -48,7 +48,7 @@ export function isArrayBuffer(variable) {
 }
 
 /**
- * Checkes whether a variable provided is a Blob.
+ * Checks whether a variable provided is a Blob.
  *
  * @param {*} variable Variable to check
  */
@@ -59,7 +59,7 @@ export function isBlob(variable) {
 }
 
 /**
- * Checkes whether a variable provided is a File.
+ * Checks whether a variable provided is a File.
  *
  * @param {*} variable Variable to check
  */

test/Test.jsx

@@ -187,7 +187,7 @@ export default function Test() {
       scale: pageScale,
       width: pageWidth,
       customTextRenderer: useCustomTextRenderer
-        ? ({ str }) => str.replace(/ipsum/g, `<mark>ipsum</mark>`)
+        ? ({ str }) => str.replace(/ipsum/g, (value) => `<mark>${value}</mark>`)
         : null,
     };
   }