mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 21:37:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
Fix #672 (https://github.com/CorentinTh/it-tools/issues/672#issuecomment-1826885538) for current node jsonpath
This commit is contained in:
ShareVB 2024-09-22 19:15:09 +02:00
parent a28ba6e146
commit cf0d31f743
6 changed files with 407 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/tools/json-editor/json-editor-vue3.d.ts vendored
View file

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

42
src/tools/json-editor/json-editor.vue
View file

@ -1,18 +1,50 @@
<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue3';
import { withDefaultOnError } from '@/utils/defaults';
import JsonEditorVue from 'json-editor-vue';
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 jsonText = computed(() => withDefaultOnError(() => JSON.stringify(jsonData.value, null, 2), ''));
const styleStore = useStyleStore();
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:">