[breaking] Drop support for React content in customTextRenderer (#1124)

wojtekmaj · Nov 5, 2022 · eedc070 · eedc070
1 parent c2648a7
commit eedc070
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -62,7 +62,7 @@ If you use an older version of React, please refer to the table below to a find
 
 #### Preact
 
-React-PDF may be used with Preact. However, if you want to use text layer in PDFs rendered by React-PDF, you'll also need to install `preact-render-to-string` package.
+React-PDF may be used with Preact.
 
 ### Installation
 
@@ -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 }) => { return `<mark>${str}</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/"`                                                                                                                                                                                                                                                                              |

diff --git a/src/Page/TextLayer.jsx b/src/Page/TextLayer.jsx
@@ -1,5 +1,4 @@
 import React, { createRef, PureComponent } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
@@ -143,11 +142,11 @@ export class TextLayerInternal extends PureComponent {
       .then(() => {
         if (customTextRenderer) {
           Array.from(this.layerElement.current.children).forEach((element, elementIndex) => {
-            const reactContent = customTextRenderer({
+            const content = customTextRenderer({
               itemIndex: elementIndex,
               ...textContent.items[elementIndex],
             });
-            element.innerHTML = renderToStaticMarkup(reactContent);
+            element.innerHTML = content;
           });
         }
         this.onRenderSuccess();

diff --git a/test/Test.jsx b/test/Test.jsx
@@ -184,18 +184,16 @@ export default function Test() {
       scale: pageScale,
       width: pageWidth,
       customTextRenderer: (textItem) =>
-        textItem.str.split('ipsum').reduce(
-          (strArray, currentValue, currentIndex) =>
-            currentIndex === 0
-              ? [...strArray, currentValue]
-              : [
-                  ...strArray,
-                  // eslint-disable-next-line react/no-array-index-key
-                  <mark key={currentIndex}>ipsum</mark>,
-                  currentValue,
-                ],
-          [],
-        ),
+        textItem.str
+          .split('ipsum')
+          .reduce(
+            (strArray, currentValue, currentIndex) =>
+              currentIndex === 0
+                ? [...strArray, currentValue]
+                : [...strArray, '<mark>ipsum</mark>', currentValue],
+            [],
+          )
+          .join(''),
     };
   }