fix: copy paste for registered font

[chihyux]

Hello! Thank you for creating this package. My company has chosen this package, and I encountered an issue when using a custom font where copying text results in garbled characters. I have also noticed that there are many similar issues in the repository, where the characters copied from the generated PDF are different from what is displayed on the screen.

I have found that the package uses an older version of pdfkit, and based on the code in the latest version of that package, the following function is no longer used:

 this.unicode[gid] = this.font._cmapProcessor.codePointsForGlyph(
            glyph.id
          );

The reason for this change is that the function was producing duplicate Unicode values, leading to consecutive or incorrect characters in the cmap and resulting in garbled text when copying.

Additionally, when using this package in my country, which uses Chinese characters, copying text from the generated document in Chrome and Edge browsers can also result in garbled characters when there are a large number of Unicode characters. I suspect that this is because the original implementation toUnicodeCmap used bfrange for generating Unicode mappings for glyphs, and when there are many Unicode characters(more than 244 characters), the browser cannot correctly interpret the corresponding Unicode values. To address this issue, I suggest changing the cmap implementation to use bfchar, which resolved the problem.

[changeset-bot]

⚠️ No Changeset found

Latest commit: e5c8fde

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[santialbo]

Please @diegomura have a look at this PR if you have some time. This has been a very problematic issue for us :(

[diegomura]

Thanks! Looks good to me comparing to latest pdfkit.Will try to test it today and merge it

[teq-vunguyen]

@diegomura I also got this issue, waiting for next release 🙏🏻

[teq-vunguyen]

@chihyux I have used your PR and customized it into a separate node module, and it works 100%. I really appreciate that 💯

[hazem3500]

Was anyone able to monkey patch this with patch-package by any chance? 🤔 or deployed a forked package to NPM?

Found the code on the node_modules minified so would need some dissecting to patch 😅

[sandeepdotcode]

@hazem3500 If you haven't already got it to work, I have it in patches folder in this repo. You can just raw download the file and run patch-package.

Thanks for the code @chihyux !

[cupcakearmy]

Everything works great

We added the patch to our codebase, and all tests are running fine + we can now actually copy test. can confirm the fix works.

How to use the patched version for now?

git clone [email protected]:chihyux/react-pdf.git
cd react-pdf
yarn
yarn build
tar -czvf renderer.tar.gz ./packages/renderer

Then simply create a tarball of the relevant packages. and -> "@react-pdf/renderer": "./renderer.tar.gz" in your package json.

As a bonus you probably should add git lfs for tarballs, and also into your checkout action, to not pollute your git repo

Hope this gets merged soon :)

EDIT: Actually did not solve it.

What helped: go to https://www.tophix.com/font-tools/font-editor just import/export the font and everything seems to work.

[teq-vunguyen]

I use the patch-package library to perform a find-and-replace operation, similar to the pull request mentioned above, in the file node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js. It is truly effective with a success rate of 100%. I don't know if there's anything wrong here 🤔 @hazem3500

[kaloyanBozhkov]

+1 waiting on this

[kaloyanBozhkov]

What was mentioned by @teq-vunguyen worked for me as well. I had to do this since bun was not happy with patch-package, but overall everything went good. Also thanks to @sandeepdotcode's patch.

Let's get this merged! Probably many resume websites are having issues due to this 🤯

[hyalen]

Do we have plans in merging this PR asap? I'm facing some weird copy+paste issues right now, and it'd be awesome to have it fixed 😄

[Elelan]

When will this be merged?

[kaloyanBozhkov]

Let's merge this bad boy

[diegomura]

Changes merged in #2488

Sorry guys, specially @chihyux, messed up this PR branch when rebasing and testing changes. All looked good. Thanks so much for the contribution!