In my project, I am working on incorporating react-pdf to display Hebrew PDF files. I am looking to make specific words clickable with links to other pages, like Wikipedia. To achieve this, I am experimenting with a customTextRenderer function, focusing on the word "על" as an example:
customTextRenderer={({ str, itemIndex }) => (
str
.split('על')
.reduce((strArray, currentValue, currentIndex) => (
currentIndex === 0
? ([...strArray, currentValue])
: ([...strArray, (
// eslint-disable-next-line react/no-array-index-key
<a href="/whatever" key={currentIndex}>
על
</a>
), currentValue])
), []))}
The resulting snippet looks like this:
https://i.stack.imgur.com/teGf7.png
Upon inspection, you may notice that while the first occurrence of the word "על" is aligned correctly, subsequent instances are positioned inconsistently to the left. This irregularity disrupts the flow of the text. Any ideas for how to address this issue would be greatly appreciated.