Fix `sandbox` mode with UTF-16 characters

[iansan5653]

:bookmark_tabs: Summary

btoa is the native browser API for encoding strings to Base64, but it does not support UTF-16 code points:

calling btoa on a string will cause a "Character Out Of Range" exception if a character's code point exceeds 0xff - MDN

This in turn results in Mermaid crashing when attempting to render diagrams with, for example, emojis. Which causes Mermaid to render the diagram directly to the page, circumventing the sandbox mode and breaking the page.

This PR fixes the problem by down-encoding the string to UTF-8 before encoding it to Base64, as described on MDN. In addition, now that the encoded string is UTF-8 we need to specify an encoding in the data URL so that the browser knows how to render that text.

• Resolves https://github.com/mermaid-js/mermaid/issues/4050

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [x] :computer: have added necessary unit/e2e tests.
• [ ] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	51c07163aab3c5469d7baff3b69e7fc5c5075485
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/667464815e61a00008912ac5
😎 Deploy Preview	https://deploy-preview-5520--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 0% with 9 lines in your changes missing coverage. Please review.

Project coverage is 5.73%. Comparing base (3af4020) to head (51c0716).

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5520 +/- ## ========================================== - Coverage 5.73% 5.73% -0.01% ========================================== Files 278 279 +1 Lines 41999 42005 +6 Branches 490 491 +1 ========================================== Hits 2409 2409 - Misses 39590 39596 +6 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.73% <0.00%> (-0.01%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/mermaidAPI.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2FmermaidAPI.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvbWVybWFpZEFQSS50cw==) | `0.00% <0.00%> (ø)` | | | [packages/mermaid/src/utils/base64.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5520?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Futils%2Fbase64.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvdXRpbHMvYmFzZTY0LnRz) | `0.00% <0.00%> (ø)` | |

[iansan5653]

😕 Not sure why the lint CI is failing now. Something to do with docs?

[sidharthv96]

There were some issues in develop, let's see if it passes now.

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jun 20, 2024, 5:30 PM

[mermaid-bot[bot]]

@iansan5653, Thank you for the contribution! You are now eligible for a year of Premium account on MermaidChart. Sign up with your GitHub account to activate.