Playground: Incorrect Handling of Non-Latin1 Characters Causes Encoding Error in Share Functionality

[orange-guo]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

No response

Expected Behavior

No error occurred.

Steps To Reproduce

In the playground, paste the following JSON into the JSONSchema editor:

{
  "title": "你好",
  "type": "string"
}

After clicking the Share button, the Chrome console displays the following error:

index-83d04ae3.js:1221 DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    at https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:1221:73205
    at Object.k4e (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:9903)
    at I4e (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:10060)
    at R4e (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:10120)
    at dre (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:31714)
    at p0e (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:32134)
    at https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:37097
    at Wq (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:40:37096)
    at Age (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:9034)
    at H3 (https://rjsf-team.github.io/react-jsonschema-form/assets/index-83d04ae3.js:37:33430)
(anonymous) @ index-83d04ae3.js:1221

This error occurs in the Chrome console due to the attempted base64 encoding using 'btoa', which fails when encountering characters outside the Latin1 range, such as those in the Chinese language.

This issue arises because 'btoa' is limited to encoding Latin1 characters and cannot handle characters from non-Latin1 languages, resulting in the displayed error message.

Environment

- OS: Ubuntu 23.10
- Node: v20.0.0
- npm:

Anything else?

To enhance the sharing functionality in the playground, it's recommended to switch the text encoding from Latin1 to UTF-8. This change will expand character support, enabling encoding for a broader range of characters, including Asian languages like Chinese and Japanese, by utilizing the UTF-8 encoding standard.

To facilitate this modification, adjustments are required in two sections: the load method within Playground.tsx and the implementation of the share button in onShare within Header.tsx.

Replace references to atob and btoa with the following functions:

function encode64(text: string): string {
  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
}

function decode64(text: string): string {
  return new TextDecoder().decode(Uint8Array.from(atob(text), (c) => c.charCodeAt(0)))
}

If needed, I can submit a PR later to enhance this functionality.

[nickgros]

@orange-guo Same issue as #3698. We'd appreciate a PR as long as it doesn't break existing playground links!