Code with unicode chars can't be tried in playg

Open
#22 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
frontend, web-dev

Research direction

Start at assets/scripts/v-docs.js lines 340-341 and trace the Try it flow to https://play.vlang.io/. Reproduce the failure with a non-ASCII example, then verify that encoding in the documentation flow and decoding on the vplay end preserve Unicode correctly. Done means Unicode code can be opened and tried without the btoa error.

Written by the indexing model from the issue text.

Description

If you click on "Try it..." you encounter an issue if the code has a non ASCII char:
Image

From https://github.com/vlang/docs/blob/main/assets/scripts/v-docs.js#L340-L341

let code = editor.getValue();
let url = "https://play.vlang.io/?base64=" + btoa(code);

btoa can not encode Unicode chars.

The solution would need to be implemented on the vplay end as well to be able to decode the text ( https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa#unicode_strings ):

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

function bytesToBase64(bytes) {
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte),
  ).join("");
  return btoa(binString);
}

// Usage
bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"
Dominant language
HTML
Stars
33
Forks
8
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vlang/docs

All issues in vlang/docs

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.