Skip to content

Commit 3f5c4a8

Browse files
cloydlaucloydlau
committed
feat: support keeping the JSON parsed under text mode, add prop debounce and stringified 
1 parent c71b567 commit 3f5c4a8

File tree

9 files changed

+253
-171
lines changed

9 files changed

+253
-171
lines changed

‎README.md

+31-45
Original file line numberDiff line numberDiff line change
@@ -937,15 +937,22 @@ module.exports = {
937937

938938
## Props
939939

940-
| Name | Description | Type |
941-
| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------- |
942-
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | binding value | any |
943-
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode | [Mode](#Mode) |
944-
| ... | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) | |
940+
| Name | Description | Type | Default |
941+
| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------- | -------- |
942+
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | binding value | any | |
943+
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode | [Mode](#Mode) | `'tree'` |
944+
| debounce | debounce delay when typing, in milliseconds | number | `100` |
945+
| stringified | whether to keep the value as stringified JSON in text mode | boolean | `true` |
946+
| ... | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) | | |
947+
948+
### parsed JSON vs. stringified JSON
949+
950+
- parsed JSON: what we commonly refer to as JSON, which can be of any data type.
951+
- stringified JSON: serialized JSON, which is always a string type.
945952

946953
### Binding value difference between svelte-jsoneditor and json-editor-vue
947954

948-
- svelte-jsoneditor: An object contains a stringified JSON or a parsed JSON, will do `JSON.parse` when passing as a stringified JSON.
955+
- svelte-jsoneditor: An object contains a parsed JSON or a stringified JSON, will do `JSON.parse` when passing as a stringified JSON.
949956
- json-editor-vue: JSON itself. What you see is what you get.
950957

951958
If you prefer the behavior of svelte-jsoneditor:
@@ -963,54 +970,33 @@ If you prefer the behavior of svelte-jsoneditor:
963970

964971
> [!Important]
965972
>
966-
> You can pass a stringified JSON or a parsed JSON to the editor independent of in what mode it is.
973+
> The input value is independent of modes, **except**:
974+
>
975+
> Input value of string type will be treated as a normal string under tree mode, as a stringified JSON under text mode by default.
967976
>
968-
> The **output value** of text mode is a stringified JSON, the **output value** of tree mode is a parsed JSON.
977+
> The output value of tree mode is a parsed JSON, the output value of text mode is a stringified JSON.
969978
>
970-
> **But this correspondence can be disrupted by programmatic changes or mode switching.**
979+
> But this correspondence can be disrupted by programmatic changes or mode switching.
971980
>
972981
> See https://github.com/josdejong/svelte-jsoneditor/pull/166 for more details.
973982
974-
FAQ: How to get parsed JSON in text mode:
983+
FAQ: How to keep the value as parsed JSON in text mode:
975984

976985
> [!Caution]
977986
>
978-
> Not performant for large JSON documents.
979-
980-
```ts
981-
createApp(App)
982-
.use(JsonEditorVue, {
983-
mode: 'text',
984-
mainMenuBar: false,
985-
onChange(updatedContent) {
986-
if (updatedContent.text) {
987-
try {
988-
updatedContent.json = JSON.parse(updatedContent.text)
989-
}
990-
catch {}
991-
updatedContent.text = undefined
992-
}
993-
},
994-
})
995-
.mount('#app')
996-
```
987+
> - Not performant for large JSON documents.
988+
> - Adjust the `debounce` value based on the size of your JSON.
989+
> - Will output empty value when the input value is invalid.
997990
998-
or without `try...catch`:
999-
1000-
```html
1001-
<JsonEditorVue
1002-
ref="jsonEditorVueRef"
1003-
mode="text"
1004-
:main-menu-bar="false"
1005-
:on-change="(updatedContent) => {
1006-
if (updatedContent.text) {
1007-
if (!jsonEditorVueRef.jsonEditor.validate()) {
1008-
updatedContent.json = JSON.parse(updatedContent.text)
1009-
}
1010-
updatedContent.text = undefined
1011-
}
1012-
}"
1013-
/>
991+
```vue
992+
<template>
993+
<JsonEditorVue
994+
mode="text"
995+
:main-menu-bar="false"
996+
:stringified="false"
997+
:debounce="1000"
998+
/>
999+
</template>
10141000
```
10151001

10161002
### Naming convention

‎demo/vue2.6/index.vue

+8
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
},
2929
mode: undefined,
3030
readOnly: false,
31+
stringified: true,
3132
}
3233
},
3334
mounted() {
@@ -58,6 +59,12 @@ export default {
5859
<button @click="readOnly = !readOnly">
5960
切换只读状态
6061
</button>
62+
<input
63+
id="enable-stringified"
64+
v-model="stringified"
65+
type="checkbox"
66+
>
67+
<label for="enable-stringified">enable stringified</label>
6168
</p>
6269

6370
<br>
@@ -66,6 +73,7 @@ export default {
6673
v-model="data.value"
6774
:mode.sync="mode"
6875
:read-only="readOnly"
76+
:stringified="stringified"
6977
/>
7078

7179
<br>

‎demo/vue2.7/index.vue

+8
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const jsonEditorVueRef = ref()
2626
onMounted(() => {
2727
console.log('expand: ', jsonEditorVueRef.value.jsonEditor.expand)
2828
})
29+
const stringified = ref(true)
2930
</script>
3031

3132
<template>
@@ -50,6 +51,12 @@ onMounted(() => {
5051
<button @click="data.readOnly = !data.readOnly">
5152
切换只读状态
5253
</button>
54+
<input
55+
id="enable-stringified"
56+
v-model="stringified"
57+
type="checkbox"
58+
>
59+
<label for="enable-stringified">enable stringified</label>
5360
</p>
5461

5562
<br>
@@ -58,6 +65,7 @@ onMounted(() => {
5865
v-model="data.value"
5966
:mode.sync="data.mode"
6067
:read-only="data.readOnly"
68+
:stringified="stringified"
6169
/>
6270

6371
<br>

‎demo/vue3/index.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const data = reactive<{
3434
c: 'd',
3535
},
3636
},
37-
mode: 'text',
37+
mode: undefined,
3838
readOnly: false,
3939
parser: LosslessJSONParser,
4040
})
@@ -43,6 +43,7 @@ const jsonEditorVueRef = ref()
4343
onMounted(() => {
4444
jsonEditorVueRef.value.jsonEditor.focus()
4545
})
46+
const stringified = ref(true)
4647
</script>
4748

4849
<template>
@@ -67,6 +68,12 @@ onMounted(() => {
6768
<button @click="data.readOnly = !data.readOnly">
6869
切换只读状态
6970
</button>
71+
<input
72+
id="enable-stringified"
73+
v-model="stringified"
74+
type="checkbox"
75+
>
76+
<label for="enable-stringified">enable stringified</label>
7077
</p>
7178

7279
<br>
@@ -76,6 +83,7 @@ onMounted(() => {
7683
v-model:mode="data.mode"
7784
:read-only="data.readOnly"
7885
:parser="data.parser"
86+
:stringified="stringified"
7987
/>
8088

8189
<br>

‎docs/README.zh-CN.md

+31-45
Original file line numberDiff line numberDiff line change
@@ -935,15 +935,22 @@ module.exports = {
935935

936936
## 属性
937937

938-
| 名称 | 说明 | 类型 |
939-
| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------- |
940-
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | 绑定值 | any |
941-
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式 | [Mode](#Mode) |
942-
| ... | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 | |
938+
| 名称 | 说明 | 类型 | 默认值 |
939+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------- | -------- |
940+
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | 绑定值 | any | |
941+
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式 | [Mode](#Mode) | `'tree'` |
942+
| debounce | 输入时的去抖延迟 (毫秒) | number | `100` |
943+
| stringified | 在 text 模式下保持绑定值是 stringified JSON | boolean | `true` |
944+
| ... | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 | | |
945+
946+
### parsed JSON vs. stringified JSON
947+
948+
- parsed JSON: 就是我们平常所说的 JSON，可以是任何数据类型
949+
- stringified JSON: 序列化后的 JSON，一定是 string 类型
943950

944951
### svelte-jsoneditor 与 json-editor-vue 中绑定值的差异
945952

946-
- svelte-jsoneditor：一个包含 “stringified JSON” 或 “parsed JSON” 的对象，当作为 “stringified JSON” 传入时，会经过 `JSON.parse` 解析
953+
- svelte-jsoneditor：一个包含 parsed JSON 或 stringified JSON 的对象，当作为 stringified JSON 传入时，会经过 `JSON.parse` 解析
947954
- json-editor-vue：JSON 本身，所见即所得
948955

949956
如果你更倾向于 svelte-jsoneditor 的行为：
@@ -961,54 +968,33 @@ module.exports = {
961968

962969
> [!Important]
963970
>
964-
> 绑定值可以传 stringified JSON 或 parsed JSON，跟模式无关
971+
> 输入值与模式无关，**除了**：
972+
>
973+
> string 类型的输入值在 tree 模式下会被视作普通字符串，在 text 模式下默认会被视作 stringified JSON
965974
>
966-
> text 模式下的**输出值**是 stringified JSON，tree 模式下的**输出值**是 parsed JSON
975+
> tree 模式下的输出值是 parsed JSON，text 模式下的输出值是 stringified JSON
967976
>
968-
> **但这个对应关系会被编程式输入或模式切换打破**
977+
> 但这个对应关系会被编程式输入或模式切换打破
969978
>
970979
> 详情见 https://github.com/josdejong/svelte-jsoneditor/pull/166
971980
972-
FAQ: 如何在 text 模式中获取 parsed JSON：
981+
FAQ: 如何在 text 模式下保持绑定值是 parsed JSON：
973982

974983
> [!Caution]
975984
>
976-
> 对于大型 JSON 文档性能不佳
977-
978-
```ts
979-
createApp(App)
980-
.use(JsonEditorVue, {
981-
mode: 'text',
982-
mainMenuBar: false,
983-
onChange(updatedContent) {
984-
if (updatedContent.text) {
985-
try {
986-
updatedContent.json = JSON.parse(updatedContent.text)
987-
}
988-
catch {}
989-
updatedContent.text = undefined
990-
}
991-
},
992-
})
993-
.mount('#app')
994-
```
985+
> - 对于大型 JSON 文档性能不佳
986+
> - 请根据你的 JSON 大小来调整 `debounce` 的值
987+
> - 输入值无效时会输出空
995988
996-
或不使用 `try...catch`:
997-
998-
```html
999-
<JsonEditorVue
1000-
ref="jsonEditorVueRef"
1001-
mode="text"
1002-
:main-menu-bar="false"
1003-
:on-change="(updatedContent) => {
1004-
if (updatedContent.text) {
1005-
if (!jsonEditorVueRef.jsonEditor.validate()) {
1006-
updatedContent.json = JSON.parse(updatedContent.text)
1007-
}
1008-
updatedContent.text = undefined
1009-
}
1010-
}"
1011-
/>
989+
```vue
990+
<template>
991+
<JsonEditorVue
992+
mode="text"
993+
:main-menu-bar="false"
994+
:stringified="false"
995+
:debounce="1000"
996+
/>
997+
</template>
1012998
```
1013999

10141000
### 命名惯例

‎pnpm-lock.yaml

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)