PNG Export character encoding

Wanted to follow up on what I have been looking into. This is a follow up of the discussion in #1069

I started out out trying to write some tests for the export in cypress but ran into a couple of issues:

1. Without modifying the app code, I could not figure out how pause execution of the code where the bug is present. After modifying the encoding and generating an image, the encoding changes are reverted immediatly
2. Cypress does not handle file downloads particularly well for this use case right now

This lead me to try out using the open feature in carbon. The idea was load a specific snippet, open it, and compare the resulting image using something like cypress-image-snapshot. Unfortunatly cypress does not seem to be able to load blob: urls. If anyone knows a way around this please let me know!

Now I am looking into potentially fixing the encoding issues at the source - which would mean carbon could avoid having to deal with encoding at all. I have verified that this does in fact appear to be an issue in dom-to-image (see this sandbox). Unfortunatly dom-to-image was last updated in 2017 and does not appear to be actively maintained.

I found a fork that is active but unfortunatly in my testing it does not appear to be a drop in replacement. See the differences in the images below

dom-to-image

dom-to-image-more

It appears to be either a font or sizing issue. My concern would be that switching would also potentially uncover other variances that may be a pain to track down.

For now I am going to look into how difficult patching the original character encoding issues in dom-to-image would be. Suggestions appreciated!

[qw-in]

@mfix22 Yeah I don’t expect it to get merged but figured I would open it for reference. Although the dom-to-image-more pr did get merged (https://github.com/1904labs/dom-to-image-more/pull/23) 🎉

I think at least short term a local version makes perfect sense! I was wondering about forking and releasing a scoped npm package (@carbon/dom-to-image has a nice ring 😄) but lib and patch-package are both great options!

I think you should make the call since you are the one who will likely have to maintain it - but happy to open a PR for whichever route!

[mfix22]

@qw-in Very cool. Closing this issue with #1083, but please open a new one if you have other ideas to discuss.

Might be cool for Carbon to publish our dom-to-image w/ the fix you made, and maybe we can even incorporate the improvements made in https://www.npmjs.com/package/retina-dom-to-image. Not sure we want to maintain this library, but now we have to in some way 😅