Bump React to version 18.

[joebutler2]

No description provided.

[joebutler2]

This currently works as-is in my team's app, though there are warnings that do appear.

For example:

bundle.js:49024 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
    at PdfHighlighter (http://localhost:3001/static/js/bundle.js:3389:5)
    at PdfLoader (http://localhost:3001/static/js/bundle.js:3877:5)

This is related to rendering the highlights in PdfHighlighter.tsx:325. Since each page has its own highlight layer we need to find a "root" that can be used to render them.

[sumit-oddr]

I don't know if asking for an update via a comment on this PR is appropriate, but I would like to know if there is an ETA for this fix since it has impacted our usage of this excellent library. Thank you!

[keunbit]

This currently works as-is in my team's app, though there are warnings that do appear.

For example:

bundle.js:49024 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
    at PdfHighlighter (http://localhost:3001/static/js/bundle.js:3389:5)
    at PdfLoader (http://localhost:3001/static/js/bundle.js:3877:5)

This is related to rendering the highlights in PdfHighlighter.tsx:325. Since each page has its own highlight layer we need to find a "root" that can be used to render them.

Thank you for your code.
but, how to avoid that warning? any update?

[joebutler2]

@keunbit the only way to fix the warning is to re-implement how the highlights are attached to the DOM. I haven't had the time to look into this. Thankfully it's just a warning and doesn't impact the library's functionality.

[joebutler2]

@keunbit that issue has been resolved with the latest version of this branch. Feel free to try it out!

[agentcooper]

@joebutler2 cool work, thanks! would you say that this is ready for merging now?

[agentcooper]

This prop seems unnecessary.

[agentcooper]

Could you please fix any types here?

[sumit-oddr]

@joebutler2 - thanks for your work. We are very interested in getting this PR merged into the release branch. Thank you!

[ayush1852017]

@keunbit that issue has been resolved with the latest version of this branch. Feel free to try it out!

All highlights disappearing as soon as I resize PDF.
Working fine when I remove if condition but getting same warning as @keunbit facing.

[pham740]

@ayush1852017 What if condition did you remove? I've also been running across the issue where highlights disappear upon resizing the browser window.

[ayush1852017]

@ayush1852017 What if condition did you remove? I've also been running across the issue where highlights disappear upon resizing the browser window.

Line no 635 to 637 or just remove 641
meaning don't assign root value to this.highlightReactRoots[pageNumber] .

But right now I have decided to go with React 17 only. The reason is, I am facing so many problems with AreaHighlights.

[pham740]

For my project, not losing the highlights when resizing the browser window is a must-have. However, when using ayush1852017's fix (thank you!), the onClick prop of Highlight.tsx stops working on top of getting the same warning in the console as keunbit and ayush1852017. I'm not sure whether this ties into the issue quoted below, but these would be nice features to have in this PR of an already great library.

This is related to rendering the highlights in PdfHighlighter.tsx:325. Since each page has its own highlight layer we need to find a "root" that can be used to render them.

[mochirfan]

I'm going to use this plugin for my new project, but in npm it's still doesn't work with react 18? because I'm getting warning about ReactDOM.render and makes text highlighting and scrolling doesn't work. Is there any chance the updated version is available in npm?

Thank you

[pham740]

@mochirfan Here is a link to the package containing this PR's code: https://github.com/orgs/credolabs/packages/npm/package/react-pdf-highlighter

You'll have to download it through the Github package registry instead of NPM, but it might be a good solution in the mean time.

[J0]

Thanks everyone for the hard work and constructive comments on the PR! Wrote a short snippet about how to get up and running with the package using the GH package registry as described above - hope it helps in some way till the PR is merged

[siawyoung]

Thank you! Been struggling with this too. You guys are great ❤️

[k3ntar0]

Thanks @joebutler2
I encountered a problem with the installation of the npm package from forked repository, and these are the steps to resolve it.

1. Create your Personal Access Token of GitHub
2. If not exist, create .npmrc and then add //npm.pkg.github.com/:_authToken=*************
3. If using yarn and not exist, create .yarnrc and then add "@credolabs:registry" "https://npm.pkg.github.com"
4. After above settings, run yarn add @credolabs/react-pdf-highlighter@5.6.7

[pham740]

@k3ntar0 Hopefully this will give you a few leads - I'm not using yarn at all for my project so the .npmrc file I was using looked like this:

# Install packages from the npm registry
registry=https://registry.npmjs.org/

# Except for packages from @credolabs, which I want to install from the Github package registry
@credolabs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=*********************

From there, installing the package via the command line or package.json should work.

[agentcooper]

Thanks everyone, this is now published in version 6.0.0.

[agentcooper]

I think there is a bug though :-) If I scroll far enough so that PDF.js removes some pages and come back to the first page, I don't see highlights.

Update: hopefully fixed with c78c07a (released in 6.1.0).