diff --git a/README.md b/README.md index 3dcd1d55b..9c14892f1 100644 --- a/README.md +++ b/README.md @@ -405,7 +405,7 @@ Displays a page. Should be placed inside ``. 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 `` rendered by `` component. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a |
  • Function:
    `(ref) => { this.myPage = ref; }`
  • Ref created using `React.createRef`:
    `this.ref = React.createRef();`

    `inputRef={this.ref}`
  • Ref created using `React.useRef`:
    `const ref = React.useRef();`

    `inputRef={ref}`
| | className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n/a |
  • String:
    `"custom-class-name-1 custom-class-name-2"`
  • Array of strings:
    `["custom-class-name-1", "custom-class-name-2"]`
| -| customTextRenderer | Function that customizes how a text layer is rendered. | n/a | `` ({ str, itemIndex }) => str && str.replace(/ipsum/g, `ipsum`) `` | +| customTextRenderer | Function that customizes how a text layer is rendered. | n/a | `` ({ str, itemIndex }) => str.replace(/ipsum/g, `ipsum`) `` | | error | What the component should display in case of an error. | `"Failed to load the page."` |
  • String:
    `"An error occurred!"`
  • React element:
    `
    An error occurred!
    `
  • Function:
    `this.renderError`
| | 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 index 92a20f40c..07d064fde 100644 --- a/src/Page/TextLayer.jsx +++ b/src/Page/TextLayer.jsx @@ -141,14 +141,18 @@ export class TextLayerInternal extends PureComponent { 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) => { diff --git a/test/Test.jsx b/test/Test.jsx index f2f938af1..ef860091a 100644 --- a/test/Test.jsx +++ b/test/Test.jsx @@ -183,7 +183,7 @@ export default function Test() { renderTextLayer, scale: pageScale, width: pageWidth, - customTextRenderer: ({ str }) => str && str.replace(/ipsum/g, `ipsum`), + customTextRenderer: ({ str }) => str.replace(/ipsum/g, `ipsum`), }; }