fix: better display

Author: sharevb

components.d.ts

@@ -131,15 +131,20 @@ declare module '@vue/runtime-core' {
     NA: typeof import('naive-ui')['NA']
     NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     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']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     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']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/tools/json-linter/json-linter.vue

@@ -8,18 +8,16 @@ const jsonContent = ref(
   }`,
 );
 
-const conversionResult = computed(() => {
+const conversionError = computed(() => {
   try {
     linter.parse(jsonContent.value);
-    return JSON.stringify(JSON.parse(jsonContent.value), null, 2);
+    return null;
   }
   catch (e: any) {
-    return e.toString().split('\n').map((err: string) => ({ line: -1, message: err, helpLink: '' }));
+    return e.toString();
   }
 });
 
-const errors = computed(() => conversionResult.value);
-
 const MONACO_EDITOR_OPTIONS = {
   automaticLayout: true,
   formatOnType: true,
@@ -41,15 +39,11 @@ const MONACO_EDITOR_OPTIONS = {
       </div>
     </c-label>
 
-    <div v-if="errors.length > 0">
+    <div v-if="conversionError">
       <n-alert title="The following errors occured" type="error" mt-5>
-        <ul>
-          <li v-for="(message, index) of errors" :key="index">
-            {{ message.message }} (<n-a v-if="message.helpLink" target="_blank" rel="noreferer noopener">
-              See JSON help
-            </n-a>)
-          </li>
-        </ul>
+        <pre>
+        {{ conversionError }}
+        </pre>
       </n-alert>
     </div>
     <div v-else>