Merge pull request #13107 from carolhmj/encodeUnicodeGuiSnippet

Encode and decode GUI Editor snippet as JSON when needed.
BabylonJS · Oct 13, 2022 · 55991d7 · 55991d7
2 parents 4f8778b + 7593058
commit 55991d7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/packages/dev/gui/src/2D/advancedDynamicTexture.ts b/packages/dev/gui/src/2D/advancedDynamicTexture.ts
@@ -29,6 +29,7 @@ import { WebRequest } from "core/Misc/webRequest";
 import type { IPointerEvent, IWheelEvent } from "core/Events/deviceInputEvents";
 import { RandomGUID } from "core/Misc/guid";
 import { GetClass } from "core/Misc/typeStore";
+import { DecodeBase64ToBinary } from "core/Misc/stringTools";
 
 declare type StandardMaterial = import("core/Materials/standardMaterial").StandardMaterial;
 
@@ -1306,7 +1307,9 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             request.addEventListener("readystatechange", () => {
                 if (request.readyState == 4) {
                     if (request.status == 200) {
-                        const gui = snippet ? JSON.parse(JSON.parse(request.responseText).jsonPayload).gui : request.responseText;
+                        const payload = JSON.parse(JSON.parse(request.responseText).jsonPayload);
+                        const payloadGui = payload.encodedGui ? new TextDecoder("utf-8").decode(DecodeBase64ToBinary(payload.encodedGui)) : payload.gui;
+                        const gui = snippet ? payloadGui : request.responseText;
                         const serializationObject = JSON.parse(gui);
                         resolve(serializationObject);
                     } else {

diff --git a/packages/tools/guiEditor/public/index.js b/packages/tools/guiEditor/public/index.js
@@ -137,10 +137,25 @@ checkBabylonVersionAsync().then(() => {
                             };
                             xmlHttp.open("POST", snippetUrl + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
                             xmlHttp.setRequestHeader("Content-Type", "application/json");
+                            // Check if we need to encode it to store the unicode characters (same approach as PR #12391)
+                            const encoder = new TextEncoder();
+                            const buffer = encoder.encode(data);
+
+                            let testData = "";
+
+                            for (let i = 0; i < buffer.length; i++) {
+                                testData += String.fromCharCode(buffer[i]);
+                            }
+
+                            const isUnicode = testData !== data;
+
+                            const objToSend = {
+                                gui: data,
+                                encodedGui: isUnicode ? BABYLON.StringTools.EncodeArrayBufferToBase64(buffer) : undefined,
+                            };
+
                             const dataToSend = {
-                                payload: JSON.stringify({
-                                    gui: data,
-                                }),
+                                payload: JSON.stringify(objToSend),
                                 name: "",
                                 description: "",
                                 tags: "",
@@ -154,7 +169,7 @@ checkBabylonVersionAsync().then(() => {
                     action: (data) => {
                         return new Promise((resolve, reject) => {
                             let baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
-                            let dataHash = data.startsWith('#') ? data : '#' + data;
+                            let dataHash = data.startsWith("#") ? data : "#" + data;
                             let newUrl = baseUrl + dataHash;
                             currentSnippetToken = data;
                             location.href = newUrl;

diff --git a/packages/tools/guiEditor/src/components/propertyTab/propertyTabComponent.tsx b/packages/tools/guiEditor/src/components/propertyTab/propertyTabComponent.tsx
@@ -49,6 +49,7 @@ import { makeTargetsProxy } from "shared-ui-components/lines/targetsProxy";
 import "./propertyTab.scss";
 import adtIcon from "../../imgs/adtIcon.svg";
 import { ControlTypes } from "../../controlTypes";
+import { EncodeArrayBufferToBase64 } from "core/Misc/stringTools";
 
 interface IPropertyTabComponentProps {
     globalState: GlobalState;
@@ -164,12 +165,27 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 }
             };
 
+            // Check if we need to encode it to store the unicode characters (same approach as PR #12391)
+            const encoder = new TextEncoder();
+            const buffer = encoder.encode(content);
+
+            let testData = "";
+
+            for (let i = 0; i < buffer.length; i++) {
+                testData += String.fromCharCode(buffer[i]);
+            }
+
+            const isUnicode = testData !== content;
+
+            const objToSend = {
+                gui: content,
+                encodedGui: isUnicode ? EncodeArrayBufferToBase64(buffer) : undefined,
+            };
+
             xmlHttp.open("POST", AdvancedDynamicTexture.SnippetUrl + (adt.snippetId ? "/" + adt.snippetId : ""), true);
             xmlHttp.setRequestHeader("Content-Type", "application/json");
             const dataToSend = {
-                payload: JSON.stringify({
-                    gui: content,
-                }),
+                payload: JSON.stringify(objToSend),
                 name: "",
                 description: "",
                 tags: "",