Merge pull request #33 from arnav-kr/raw-unicode-escapes

fix+feat: unicode escape sequences in formatted output, setting config
arnav-kr · Dec 25, 2024 · f09535c · f09535c
2 parents 7dc895c + ec893e4
commit f09535c
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,2 +1,3 @@
-# CHANGELOG V2.1.8
-* 🐞 Fix [[#29](https://github.com/arnav-kr/json-formatter/issues/29)]
+# CHANGELOG V2.1.9
+* 🐞 Fix [[#32](https://github.com/arnav-kr/json-formatter/issues/32)]
+* New option to Enable/Disable Raw Unicode Escapes
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 [![GitHub](https://img.shields.io/github/license/arnav-kr/json-formatter?style=flat-square&logo=github&logoColor=white&label=GitHub&labelColor=%233d3d3d&color=%234285F4)](https://github.com/arnav-kr/json-formatter)
 
 
-**[V2.1.8.0 CHANGELOG](CHANGELOG.md)**
+**[V2.1.9.0 CHANGELOG](CHANGELOG.md)**
 
 ## Features:
 * 60+ Themes for both Light and Dark Mode

diff --git a/extension/css/UI.css b/extension/css/UI.css
@@ -1,5 +1,5 @@
 :root {
-  min-width: 400px;
+  min-width: 428px;
   min-height: 400px;
 }
 

diff --git a/extension/css/content.css b/extension/css/content.css
@@ -376,6 +376,7 @@ body.JF_dark .JF_context_menu {
 
 .JF_context_menu .JF_context_menu_item {
   display: flex;
+  align-items: center;
   gap: 8px;
   padding: 8px 24px;
   cursor: pointer;

diff --git a/extension/js/content.js b/extension/js/content.js
@@ -40,9 +40,8 @@ SOFTWARE.
     isToolbarOpen = false,
     options = Object.assign({}, globalThis.sharedData.defaultOptions),
     bucket = "JSON_FORMATTER_OPTIONS",
-    wordWrap = false;
-
-  let IS_PREPARE_SCRIPT_RUN = false;
+    wordWrap = false,
+    IS_PREPARE_SCRIPT_RUN = false;
 
   if (document.readyState === "complete" && !IS_PREPARE_SCRIPT_RUN) {
     _();
@@ -72,7 +71,7 @@ SOFTWARE.
     }
     else {
       // legacy support
-      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder")) {
+      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder") || !data[bucket].hasOwnProperty("rawUnicodeEscapes")) {
         // still has old data format, update it to new format
         let newDataFormat = Object.assign({}, globalThis.sharedData.defaultOptions);
         if (data[bucket].themeMode == "auto") {
@@ -86,7 +85,14 @@ SOFTWARE.
             newDataFormat.colorScheme = "light";
           }
         }
-        newDataFormat.tab = data[bucket].defaultTab;
+        if (data[bucket].defaultTab) {
+          newDataFormat.tab = data[bucket].defaultTab;
+        }
+        delete data[bucket].themeMode;
+        delete data[bucket].currentTheme;
+        delete data[bucket].defaultTab;
+
+        newDataFormat = { ...newDataFormat, ...data[bucket] };
 
         Object.assign(options, newDataFormat);
         await chrome.storage.local.set({ [bucket]: newDataFormat });
@@ -167,7 +173,10 @@ SOFTWARE.
       sortingFuncton = normalize();
     }
     formattedRawCode.innerHTML =
-      JSON.stringify(JSON.parse(code.replace(/\\u/g, "&bsol;u")), sortingFuncton, 2);
+      JSON.stringify(JSON.parse(
+        options.rawUnicodeEscapes === true ?
+          code.replace(/\\u/g, "&bsol;u") : code
+      ), sortingFuncton, 2);
 
     globalThis.code = code;
 
@@ -177,18 +186,26 @@ SOFTWARE.
     leadingLine.style = 'margin-left: 0px; height: 18px;';
     formattedRawCode.appendChild(leadingLine);
 
-    rawCode.innerHTML = JSON.stringify(JSON.parse(code.replace(/\\u/g, "&bsol;u")), sortingFuncton);
+    rawCode.innerHTML = JSON.stringify(JSON.parse(
+      options.rawUnicodeEscapes === true ?
+        code.replace(/\\u/g, "&bsol;u") : code
+    ), sortingFuncton);
 
     let leadingLine1 = document.createElement('div');
     leadingLine1.className = 'line emptyLine';
     leadingLine1.textContent = '';
     leadingLine1.style = 'margin-left: 0px; height: 18px;';
     rawCode.appendChild(leadingLine1);
-
-    tree = createTree(JSON.parse(code
-      .replace(/\\/g, "\\\\")
-      .replace(/\\\\\"/g, "\\\\\\\""),
-      sortingFuncton));
+    tree = createTree(
+      JSON.parse(
+        code
+          .replace(/\\/g, "\\\\")
+          .replace(/\\\\\"/g, "\\\\\\\"")
+          .replace(/\\\\u/g, 
+            options.rawUnicodeEscapes === true ? "\\\\u" : "\\u"
+          ),
+        sortingFuncton)
+    );
     var thme = isDark ? "dark" : "light";
     var renderedCode = render(tree, parsedCode, { theme: thme, string: true });
     expandChildren(tree);

diff --git a/extension/js/globals.js b/extension/js/globals.js
@@ -10,6 +10,7 @@ const defaultOptions = {
   "tab": "parsed",
   "colorScheme": "auto",
   "wordWrap": false,
+  "rawUnicodeEscapes": false,
   "sortingOrder": "unchanged",
   "hotkeys": {
     "parsed": "p",

diff --git a/extension/js/options.js b/extension/js/options.js
@@ -4,6 +4,7 @@ var tabEl,
   darkThemeEl,
   wordWrapEl,
   sortingOrderEl,
+  rawUnicodeEscapesEl,
   options = {},
   bucket = "JSON_FORMATTER_OPTIONS";
 
@@ -15,6 +16,7 @@ window.addEventListener("load", async () => {
   darkThemeEl = document.getElementById("dark_theme");
   wordWrapEl = document.getElementById("word_wrap");
   sortingOrderEl = document.getElementById("sorting_order");
+  rawUnicodeEscapesEl = document.getElementById("raw_unicode_escapes");
 
   await fetchExtensionSettings();
   console.log(options);
@@ -43,6 +45,7 @@ window.addEventListener("load", async () => {
     darkThemeEl.value = options.themes.current.dark.id;
     wordWrapEl.value = options.wordWrap;
     sortingOrderEl.value = options.sortingOrder;
+    rawUnicodeEscapesEl.value = options.rawUnicodeEscapes;
   }
   async function fetchExtensionSettings() {
     // Get Options
@@ -137,4 +140,10 @@ window.addEventListener("load", async () => {
     options.sortingOrder = e.target.value;
     await chrome.storage.local.set({ [bucket]: options });
   });
+
+  rawUnicodeEscapesEl.addEventListener("input", async (e) => {
+    if (options.rawUnicodeEscapes == e.target.value) return;
+    options.rawUnicodeEscapes = e.target.value == "true" ? true : false;
+    await chrome.storage.local.set({ [bucket]: options });
+  });
 });
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,8 +1,8 @@
 {
   "name": "JSON Formatter",
   "short_name": "JSON Formatter",
-  "version": "2.1.8",
-  "version_name": "Version 2.1.8 Beta",
+  "version": "2.1.9",
+  "version_name": "Version 2.1.9 Beta",
   "manifest_version": 3,
   "description": "Formats JSON automatically! Open Source, Available with 60+ Themes, Syntax Highlighting, automatically linkifies links and more.",
   "author": "Arnav",

diff --git a/extension/options.html b/extension/options.html
@@ -140,6 +140,21 @@ <h2 id="header" class="title">Settings</h2>
           </select>
         </div>
       </div>
+
+      <!-- Raw Unicode Escapes -->
+      <div class="item" title="Enable/Disable Raw Unicode Escapes">
+        <div class="item-inner">
+          <div class="label">
+            <span>Raw Unicode Escapes</span>
+          </div>
+          <select class="md-select" id="raw_unicode_escapes" aria-label="Enable/Disable Raw Unicode Escapes"
+            title="Enable/Disable Raw Unicode Escapes">
+            <option value="true">Enabled</option>
+            <option value="false" selected>Disabled</option>
+          </select>
+        </div>
+      </div>
+      <div class="hr"></div>
     </div>
   </div>
 </body>