add unescape unicode in JSON Prettify

components.d.ts

@@ -131,17 +131,22 @@ declare module '@vue/runtime-core' {
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

src/tools/json-viewer/json-viewer.vue

@@ -11,7 +11,8 @@ const inputElement = ref<HTMLElement>();
 const rawJson = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
 const indentSize = useStorage('json-prettify:indent-size', 3);
 const sortKeys = useStorage('json-prettify:sort-keys', true);
-const cleanJson = computed(() => withDefaultOnError(() => formatJson({ rawJson, indentSize, sortKeys }), ''));
+const unescapeUnicode = useStorage('json-prettify:unescape-unicode', false);
+const cleanJson = computed(() => withDefaultOnError(() => formatJson({ rawJson, indentSize, sortKeys, unescapeUnicode }), ''));
 
 const rawJsonValidation = useValidation({
   source: rawJson,
@@ -30,6 +31,9 @@ const rawJsonValidation = useValidation({
       <n-form-item label="Sort keys :" label-placement="left" label-width="100">
         <n-switch v-model:value="sortKeys" />
       </n-form-item>
+      <n-form-item label="Unescape Unicode :" label-placement="left" label-width="150">
+        <n-switch v-model:value="unescapeUnicode" />
+      </n-form-item>
       <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
         <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
       </n-form-item>

src/tools/json-viewer/json.models.ts

@@ -20,16 +20,25 @@ function sortObjectKeys<T>(obj: T): T {
     }, {} as Record<string, unknown>) as T;
 }
 
+function unescapeUnicodeJSON(str: string) {
+  return str.replace(/\\u([\dA-Fa-f]{4})/g, (match, grp) =>
+    String.fromCharCode(Number.parseInt(grp, 16)),
+  );
+}
+
 function formatJson({
   rawJson,
   sortKeys = true,
   indentSize = 3,
+  unescapeUnicode = false,
 }: {
   rawJson: MaybeRef<string>
   sortKeys?: MaybeRef<boolean>
   indentSize?: MaybeRef<number>
+  unescapeUnicode?: MaybeRef<boolean>
 }) {
-  const parsedObject = JSON5.parse(get(rawJson));
+  const raw = get(rawJson);
+  const parsedObject = JSON5.parse(get(unescapeUnicode) ? unescapeUnicodeJSON(raw) : raw);
 
   return JSON.stringify(get(sortKeys) ? sortObjectKeys(parsedObject) : parsedObject, null, get(indentSize));
 }