feat: use a better jsoneditor version + current selected node jsonpath

Fix #672 (https://github.com/CorentinTh/it-tools/issues/672#issuecomment-1826885538) for current node jsonpath

components.d.ts

@@ -133,6 +133,7 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
@@ -145,7 +146,9 @@ declare module '@vue/runtime-core' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpin: typeof import('naive-ui')['NSpin']
+    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']

package.json

@@ -37,7 +37,6 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
-    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@sindresorhus/slugify": "^2.2.1",
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
@@ -58,6 +57,7 @@
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.6",
+    "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
@@ -65,7 +65,8 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
-    "json-editor-vue3": "^1.1.1",
+    "js-base64": "^3.7.6",
+    "json-editor-vue": "^0.16.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
@@ -88,11 +89,13 @@
     "unicode-emoji-json": "^0.4.0",
     "unplugin-auto-import": "^0.16.4",
     "uuid": "^9.0.0",
+    "vanilla-jsoneditor": "^0.23.8",
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
+    "xml-js": "^1.6.11",
     "yaml": "^2.2.1"
   },
   "devDependencies": {
@@ -139,5 +142,6 @@
     "vitest": "^0.34.0",
     "workbox-window": "^7.0.0",
     "zx": "^7.2.1"
-  }
+  },
+  "packageManager": "pnpm@8.15.3"
 }

src/tools/json-editor/json-editor-vue3.d.ts

@@ -1,3 +0,0 @@
-declare module 'json-editor-vue3'{
-    
-}

src/tools/json-editor/json-editor.vue

@@ -1,18 +1,50 @@
 <script setup lang="ts">
-import JsonEditorVue from 'json-editor-vue3';
+import JsonEditorVue from 'json-editor-vue';
-import { withDefaultOnError } from '@/utils/defaults';
+import { type AfterSelection, type InsideSelection, type JSONEditorSelection, type KeySelection, type MultiSelection, type ValueSelection, isAfterSelection, isInsideSelection, isKeySelection, isMultiSelection, isValueSelection, stringifyJSONPath } from 'vanilla-jsoneditor';
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css';
+import { useStyleStore } from '@/stores/style.store';
 
-const jsonData = ref({ array: [1, 2, 3] });
+const styleStore = useStyleStore();
-const jsonText = computed(() => withDefaultOnError(() => JSON.stringify(jsonData.value, null, 2), ''));
+
+const jsonText = ref('{ "a": { "array": [1, 2, 3] } }');
+const jsonPath = ref('');
+
+function updateJsonPath(selection: JSONEditorSelection) {
+  if (isAfterSelection (selection)) {
+    jsonPath.value = `$.${stringifyJSONPath((selection as AfterSelection).path)}`;
+  }
+  else if (isInsideSelection (selection)) {
+    jsonPath.value = `$.${stringifyJSONPath((selection as InsideSelection).path)}`;
+  }
+  else if (isKeySelection (selection)) {
+    jsonPath.value = `$.${stringifyJSONPath((selection as KeySelection).path)}`;
+  }
+  else if (isValueSelection (selection)) {
+    jsonPath.value = `$.${stringifyJSONPath((selection as ValueSelection).path)}`;
+  }
+  else if (isMultiSelection (selection)) {
+    jsonPath.value = `$.${stringifyJSONPath((selection as MultiSelection).focusPath)}`;
+  }
+  else {
+    jsonPath.value = 'No available in this mode';
+  }
+}
 </script>
 
 <template>
   <div>
     <JsonEditorVue
-      v-model="jsonData"
+      v-model="jsonText"
       mode="text"
+      :class="styleStore.isDarkTheme ? 'jse-theme-dark' : ''"
+      :on-select="updateJsonPath"
+      mb-2
     />
 
+    <n-form-item label="Current Selected Node JSONPath:">
+      <textarea-copyable :value="jsonPath" />
+    </n-form-item>
+
     <n-divider />
 
     <n-form-item label="Your edited JSON:">

vite.config.ts

@@ -15,7 +15,6 @@ import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { configDefaults } from 'vitest/config';
-import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -98,9 +97,6 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
-    viteCommonjs({
-      include: ['jsoneditor'],
-    }),
   ],
   base: baseUrl,
   resolve: {