Bump React to version 18. by joebutler2 · Pull Request #232 · agentcooper/react-pdf-highlighter

joebutler2 · 2023-02-17T16:47:30Z

No description provided.

joebutler2 · 2023-02-22T22:54:40Z

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 · 2023-03-15T14:21:08Z

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 · 2023-03-29T05:49:22Z

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 · 2023-03-29T14:29:02Z

@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.

…id creating new React apps when the relevant states & props change.

joebutler2 · 2023-04-06T23:16:15Z

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

agentcooper · 2023-04-19T15:50:23Z

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

agentcooper · 2023-04-19T15:53:45Z

-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(<App tab="home" />);


This prop seems unnecessary.

agentcooper · 2023-04-19T15:54:06Z

+  pageNumber: string;
+  scrolledToHighlightId: string;
+  highlightTransform: (
+    highlight: any,


Could you please fix any types here?

sumit-oddr · 2023-05-20T01:26:09Z

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

ayush1852017 · 2023-05-23T06:39:42Z

@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 · 2023-06-21T00:45:21Z

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

ayush1852017 · 2023-06-21T09:50:53Z

@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 · 2023-06-26T18:28:01Z

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 · 2023-07-10T06:56:41Z

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 · 2023-07-12T22:42:40Z

@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 · 2023-07-16T17:52:50Z

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 · 2023-07-18T04:02:56Z

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

k3ntar0 · 2023-07-25T11:11:38Z

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

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

pham740 · 2023-07-25T16:57:03Z

@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 · 2023-07-31T09:50:29Z

Thanks everyone, this is now published in version 6.0.0.

agentcooper · 2023-07-31T10:14:30Z

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).

* Bump React to version 18. * Update the example index html files to use React 18. * Update to the new React Ref API. * Spike converting the Highlights into a nested React component and avoid creating new React apps when the relevant states & props change. * wip: fix current errors related to scale * Switch over to only creating React app once per PDF page. * Fix type definitions and linter issues. * Run the format script --------- Co-authored-by: Cassidy Spring <79487947+cassiecascade@users.noreply.github.com>

joebutler2 added 3 commits February 16, 2023 18:05

Bump React to version 18.

02fe38c

Update the example index html files to use React 18.

da7bcac

Update to the new React Ref API.

8e197d2

joebutler2 force-pushed the upgrade-to-react-18 branch from c919520 to 8e197d2 Compare February 22, 2023 22:49

joebutler2 mentioned this pull request Feb 22, 2023

Not working with nextjs 13 and react 18 #231

Closed

joebutler2 and others added 5 commits April 5, 2023 17:49

Spike converting the Highlights into a nested React component and avo…

09a45c4

…id creating new React apps when the relevant states & props change.

wip: fix current errors related to scale

d8080aa

Switch over to only creating React app once per PDF page.

2f00428

Fix type definitions and linter issues.

0d2ac27

Run the format script

81eba4f

agentcooper reviewed Apr 19, 2023

View reviewed changes

agentcooper merged commit 02b438d into agentcooper:main Jul 31, 2023

Conversation

joebutler2 commented Feb 17, 2023

Uh oh!

joebutler2 commented Feb 22, 2023

Uh oh!

sumit-oddr commented Mar 15, 2023

Uh oh!

keunbit commented Mar 29, 2023

Uh oh!

joebutler2 commented Mar 29, 2023

Uh oh!

joebutler2 commented Apr 6, 2023

Uh oh!

agentcooper commented Apr 19, 2023

Uh oh!

agentcooper Apr 19, 2023

Choose a reason for hiding this comment

Uh oh!

agentcooper Apr 19, 2023

Choose a reason for hiding this comment

Uh oh!

sumit-oddr commented May 20, 2023

Uh oh!

ayush1852017 commented May 23, 2023

Uh oh!

pham740 commented Jun 21, 2023

Uh oh!

ayush1852017 commented Jun 21, 2023

Uh oh!

pham740 commented Jun 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mochirfan commented Jul 10, 2023

Uh oh!

pham740 commented Jul 12, 2023

Uh oh!

J0 commented Jul 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siawyoung commented Jul 18, 2023

Uh oh!

k3ntar0 commented Jul 25, 2023

Uh oh!

pham740 commented Jul 25, 2023

Uh oh!

agentcooper commented Jul 31, 2023

Uh oh!

agentcooper commented Jul 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

pham740 commented Jun 26, 2023 •

edited

Loading

J0 commented Jul 16, 2023 •

edited

Loading

agentcooper commented Jul 31, 2023 •

edited

Loading