Is there a way to highlight a text selection?

[ming535]

Hi, is there a way to highlight a specific text selection?

I am building an app to allow user to highlight a selected text inside the pdf.

I played with the example using useHighlightContext, but it seems that the keyword is matched by reg or text search.

For example:

keyword: "Roadmap",
highlightColor: "rgba(255, 0, 255, 0.5)",
options: { matchCase: true, wholeWords: true },

Gives all the "Roadmap" a highlight.

I want a way to only highlight a specific text selection. Is that possible with this library?

[david-reactpdf]

@ming535

Thanks for reaching out!

Just to clarify your use case a bit further:

• Are you looking to highlight text programmatically via code, or are you aiming to let users manually select text and apply a highlight directly on the PDF?
• In your example, where the word "Roadmap" appears on multiple pages—are you hoping to highlight just a specific instance, such as the one on page 2 only, instead of all matches?

[ming535]

Hi David.

1. I want to let users manually select text and apply highlight on PDF.
2. I am hoping to add highlight to a specific instance (only the one user selected).

I was looking into https://react-pdf-viewer.dev/plugins/highlight/ and I think this plugin is what I want.

Specifically, my expected UX looks like this:

1. User select a text.
2. A set of buttons shown to the user near the selected text to allow user to "Add highlight", "Add Note" etc. (These button will be designed by me)
3. When the user click the "Add highlight" or "Add Note" button, the highlight is added. User can see the background of the text color changed. When the user click the "Add Note", the highlight is also added, and a textarea(form) will appear to let user enter the note.
4. The highlighted area should be able to be stored in my database (I think it is the HighlightArea in the plugin's doc), so that when the page first loads, I can restore all highlights.

I think the plugin in react-pdf-viewer is what I need. Since that project is not maintained anymore, I would really like to have this feature in this project.

[david-reactpdf]

@ming535 Thanks for the detailed write-up.

At the moment, React PDF don’t yet support selective text highlighting or highlighting of a particular word in an exact location of the PDF. The existing highlight functionality works by programmatically matching all instances of a keyword across the document.

That said, what you described is quite close to the annotation feature we’re planning to build. It will support interactive highlights, notes, and saving annotations, both for display and for print. This is already on our roadmap, though it will take some time to ship.

I’ll follow up again once the feature is ready. In the meantime, feel free to explore the rest of React PDF and let me know if you have any other questions.