From d356b1488fc640a4f5b65d62e0f2f368f5941996 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 9 May 2022 17:41:42 +0200
Subject: [PATCH] feat(new-tool):  json viewer

---
 package-lock.json                     |  1 +
 package.json                          |  1 +
 src/plugins/naive.plugin.ts           |  2 +
 src/tools/index.ts                    |  3 +-
 src/tools/json-viewer/index.ts        | 11 ++++++
 src/tools/json-viewer/json-viewer.vue | 53 +++++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/json-viewer/index.ts
 create mode 100644 src/tools/json-viewer/json-viewer.vue

diff --git a/package-lock.json b/package-lock.json
index 1a35a343..158adc82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "cronstrue": "^2.2.0",
         "crypto-js": "^4.1.1",
         "date-fns": "^2.28.0",
+        "highlight.js": "^11.5.1",
         "lodash": "^4.17.21",
         "naive-ui": "^2.28.0",
         "pinia": "^2.0.11",
diff --git a/package.json b/package.json
index 5aa768bc..be15f8d7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "cronstrue": "^2.2.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.28.0",
+    "highlight.js": "^11.5.1",
     "lodash": "^4.17.21",
     "naive-ui": "^2.28.0",
     "pinia": "^2.0.11",
diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 71ca2160..d4e59f85 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -50,9 +50,11 @@ import {
   NImage,
   NScrollbar,
   NGradientText,
+  NCode,
 } from 'naive-ui';
 
 const components = [
+  NCode,
   NGradientText,
   NScrollbar,
   NImage,
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 61fedef7..745b7d6b 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as jsonViewer } from './json-viewer';
 import { tool as htmlEntities } from './html-entities';
 import { tool as urlParser } from './url-parser';
 import { tool as deviceInformation } from './device-information';
@@ -50,7 +51,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Development',
     icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
   },
   {
     name: 'Text',
diff --git a/src/tools/json-viewer/index.ts b/src/tools/json-viewer/index.ts
new file mode 100644
index 00000000..1911f61d
--- /dev/null
+++ b/src/tools/json-viewer/index.ts
@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'JSON viewer',
+  path: '/json-viewer',
+  description: 'Prettify JSON string to a human friendly readable format.',
+  keywords: ['json', 'viewer', 'prettify', 'format'],
+  component: () => import('./json-viewer.vue'),
+  icon: Braces,
+};
diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue
new file mode 100644
index 00000000..3307cba3
--- /dev/null
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -0,0 +1,53 @@
+<template>
+  <n-card>
+    <n-form-item
+      label="Your raw json:"
+      :feedback="rawJsonValidation.message"
+      :validation-status="rawJsonValidation.status"
+    >
+      <n-input v-model:value="rawJson" class="json-input" type="textarea" placeholder="Paste your raw json here..." />
+    </n-form-item>
+  </n-card>
+
+  <n-card v-if="cleanJson.length > 0">
+    <n-scrollbar :x-scrollable="true">
+      <n-config-provider :hljs="hljs">
+        <n-code :code="cleanJson" language="json" />
+      </n-config-provider>
+    </n-scrollbar>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+import { useValidation } from '@/composable/validation';
+
+hljs.registerLanguage('json', json);
+
+const rawJson = ref('');
+const cleanJson = computed(() => {
+  try {
+    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
+  } catch (_) {
+    return '';
+  }
+});
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => JSON.parse(v),
+      message: 'Invalid json string',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.json-input ::v-deep(.n-input-wrapper) {
+  resize: both !important;
+}
+</style>