docs: explain the the association between binding value and modes

Author: cloydlau

README.md

@@ -943,10 +943,6 @@ module.exports = {
 | mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode                                                                                     | [Mode](#Mode) |
 | ...                                                    | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) |               |
 
-> [!Tip]
->
-> kebab-case is required for tag & prop name when using from CDN.
-
 ### Binding value difference between svelte-jsoneditor and json-editor-vue
 
 - svelte-jsoneditor: An object contains a stringified JSON or a parsed JSON, will do `JSON.parse` when passing as a stringified JSON.
@@ -963,7 +959,19 @@ If you prefer the behavior of svelte-jsoneditor:
 />
 ```
 
-If you want to ensure you always get parsed JSON in text mode:
+### The association between binding value and modes
+
+> [!Important]
+>
+> You can pass a stringified JSON or a parsed JSON to the editor independent of in what mode it is.
+>
+> The **output value** of text mode is a stringified JSON, the **output value** of tree mode is a parsed JSON.
+>
+> **But this correspondence can be disrupted by programmatic changes or mode switching.**
+>
+> See https://github.com/josdejong/svelte-jsoneditor/pull/166 for more details.
+
+FAQ: How to get parsed JSON in text mode:
 
 > [!Caution]
 >
@@ -1005,7 +1013,13 @@ or without `try...catch`:
 />
 ```
 
-> See https://github.com/josdejong/svelte-jsoneditor/pull/166 for more details.
+### Naming convention
+
+Support camelCase and kebab-case for tag & property name.
+
+> [!Tip]
+>
+> When using json-editor-vue or any Vue component via CDN (HTML), kebab-case must be used exclusively due to HTML's case insensitivity.
 
 ### Boolean properties
 

docs/README.zh-CN.md

@@ -941,10 +941,6 @@ module.exports = {
 | mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式                                                                               | [Mode](#Mode) |
 | ...                                                    | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 |               |
 
-> [!Tip]
->
-> 通过 CDN 使用时，标签、属性名称都必须使用短横线命名
-
 ### svelte-jsoneditor 与 json-editor-vue 中绑定值的差异
 
 - svelte-jsoneditor：一个包含 “stringified JSON” 或 “parsed JSON” 的对象，当作为 “stringified JSON” 传入时，会经过 `JSON.parse` 解析
@@ -961,7 +957,19 @@ module.exports = {
 />
 ```
 
-如果你想确保在 text 模式中总是得到 “parsed JSON”：
+### 绑定值与模式的关系
+
+> [!Important]
+>
+> 绑定值可以传 stringified JSON 或 parsed JSON，跟模式无关
+>
+> text 模式下的**输出值**是 stringified JSON，tree 模式下的**输出值**是 parsed JSON
+>
+> **但这个对应关系会被编程式输入或模式切换打破**
+>
+> 详情见 https://github.com/josdejong/svelte-jsoneditor/pull/166
+
+FAQ: 如何在 text 模式中获取 parsed JSON：
 
 > [!Caution]
 >
@@ -1003,7 +1011,13 @@ createApp(App)
 />
 ```
 
-> 详情见 https://github.com/josdejong/svelte-jsoneditor/pull/166
+### 命名惯例
+
+标签、属性名称支持驼峰命名和短横线命名
+
+> [!Tip]
+>
+> 通过 CDN (HTML) 使用 json-editor-vue 或任何 Vue 组件时，由于 HTML 大小写不敏感，仅能使用短横线命名
 
 ### 布尔类型属性
 

package.json

@@ -85,7 +85,7 @@
     "@types/prompts": "^2.4.9",
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/ui": "^1.4.0",
+    "@vitest/ui": "^1.5.0",
     "@vue/compiler-sfc": "^3.4.21",
     "@vue/test-utils": "^2.4.5",
     "case-police": "^0.6.1",
@@ -101,7 +101,7 @@
     "lint-staged": "^15.2.2",
     "lodash-es": "^4.17.21",
     "lossless-json": "^4.0.1",
-    "magicast": "^0.3.3",
+    "magicast": "^0.3.4",
     "only-allow": "^1.2.1",
     "open": "^10.1.0",
     "prompts": "^2.4.2",
@@ -112,9 +112,9 @@
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.8.1",
+    "vite-plugin-dts": "^3.8.2",
     "vitepress": "^1.1.0",
-    "vitest": "^1.4.0",
+    "vitest": "^1.5.0",
     "vue": "^3.4.21",
     "vue-global-config": "^0.6.0",
     "zhlint": "^0.8.1"