vanilla-jsoneditor-cn 3.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2163 -0
- package/LICENSE.md +7 -0
- package/README.md +271 -0
- package/SECURITY.md +5 -0
- package/index.d.ts +1261 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +66 -0
- package/standalone.d.ts +1261 -0
- package/standalone.js +45 -0
- package/standalone.js.map +1 -0
- package/themes/defaults.scss +202 -0
- package/themes/jse-theme-dark.css +115 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The ISC License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020-2026 by Jos de Jong
|
|
4
|
+
|
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
|
|
6
|
+
|
|
7
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
# vanilla-jsoneditor
|
|
2
|
+
|
|
3
|
+
A web-based tool to view, edit, format, transform, and validate JSON.
|
|
4
|
+
|
|
5
|
+
Try it out: <https://jsoneditoronline.org>
|
|
6
|
+
|
|
7
|
+
This is the vanilla variant of `svelte-jsoneditor`, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- View and edit JSON
|
|
16
|
+
- Has a low level text editor and high level tree view and table view
|
|
17
|
+
- Format (beautify) and compact JSON
|
|
18
|
+
- Sort, query, filter, and transform JSON
|
|
19
|
+
- Repair JSON
|
|
20
|
+
- JSON schema validation and pluggable custom validation
|
|
21
|
+
- Color highlighting, undo/redo, search and replace
|
|
22
|
+
- Utilities like a color picker and timestamp tag
|
|
23
|
+
- Handles large JSON documents up to 512 MB
|
|
24
|
+
|
|
25
|
+
## Install
|
|
26
|
+
|
|
27
|
+
Install using npm:
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
npm install vanilla-jsoneditor
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Remark: for usage in a Svelte project, install and use `svelte-jsoneditor` instead of `vanilla-jsoneditor`.
|
|
34
|
+
|
|
35
|
+
## Use
|
|
36
|
+
|
|
37
|
+
If you have a setup for your project with a bundler (like Vite, Rollup, or Webpack), it is best to use the default ES import:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
// for use in a React, Vue, or Angular project
|
|
41
|
+
import { createJSONEditor } from 'vanilla-jsoneditor'
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
If you want to use the library straight in the browser, use the provided standalone ES bundle:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
// for use directly in the browser
|
|
48
|
+
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for example `lodash-es` and `Ajv`. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size. In general, it is preferable to use the default `import { createJSONEditor } from 'vanilla-jsoneditor'` so dependencies can be reused.
|
|
52
|
+
|
|
53
|
+
## Use (Browser example loading the ES module)
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<!doctype html>
|
|
57
|
+
<html lang="en">
|
|
58
|
+
<head>
|
|
59
|
+
<title>JSONEditor</title>
|
|
60
|
+
</head>
|
|
61
|
+
<body>
|
|
62
|
+
<div id="jsoneditor"></div>
|
|
63
|
+
|
|
64
|
+
<script type="module">
|
|
65
|
+
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
|
|
66
|
+
|
|
67
|
+
// Or use it through a CDN (not recommended for use in production):
|
|
68
|
+
// import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js'
|
|
69
|
+
// import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'
|
|
70
|
+
|
|
71
|
+
let content = {
|
|
72
|
+
text: undefined,
|
|
73
|
+
json: {
|
|
74
|
+
greeting: 'Hello World'
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const editor = createJSONEditor({
|
|
79
|
+
target: document.getElementById('jsoneditor'),
|
|
80
|
+
props: {
|
|
81
|
+
content,
|
|
82
|
+
onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
|
|
83
|
+
// content is an object { json: JSONData } | { text: string }
|
|
84
|
+
console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult })
|
|
85
|
+
content = updatedContent
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
// use methods get, set, update, and onChange to get data in or out of the editor.
|
|
91
|
+
// Use updateProps to update properties.
|
|
92
|
+
</script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Use (React example, including NextJS)
|
|
98
|
+
|
|
99
|
+
### First, create a React component to wrap the vanilla-jsoneditor
|
|
100
|
+
|
|
101
|
+
Depending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file:
|
|
102
|
+
|
|
103
|
+
### TypeScript
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
//
|
|
107
|
+
// JSONEditorReact.tsx
|
|
108
|
+
//
|
|
109
|
+
import { useEffect, useRef } from 'react'
|
|
110
|
+
import { createJSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
|
|
111
|
+
|
|
112
|
+
const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => {
|
|
113
|
+
const refContainer = useRef<HTMLDivElement>(null)
|
|
114
|
+
const refEditor = useRef<JSONEditor | null>(null)
|
|
115
|
+
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
// create editor
|
|
118
|
+
refEditor.current = createJSONEditor({
|
|
119
|
+
target: refContainer.current!,
|
|
120
|
+
props: {}
|
|
121
|
+
})
|
|
122
|
+
|
|
123
|
+
return () => {
|
|
124
|
+
// destroy editor
|
|
125
|
+
if (refEditor.current) {
|
|
126
|
+
refEditor.current.destroy()
|
|
127
|
+
refEditor.current = null
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}, [])
|
|
131
|
+
|
|
132
|
+
useEffect(() => {
|
|
133
|
+
// update props
|
|
134
|
+
if (refEditor.current) {
|
|
135
|
+
refEditor.current.updateProps(props)
|
|
136
|
+
}
|
|
137
|
+
}, [props])
|
|
138
|
+
|
|
139
|
+
return <div ref={refContainer}></div>
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export default JSONEditorReact
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### JavaScript
|
|
146
|
+
|
|
147
|
+
```jsx
|
|
148
|
+
//
|
|
149
|
+
// JSONEditorReact.jsx
|
|
150
|
+
//
|
|
151
|
+
import { useEffect, useRef } from 'react'
|
|
152
|
+
import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
|
|
153
|
+
|
|
154
|
+
const JSONEditorReact = (props) => {
|
|
155
|
+
const refContainer = useRef(null)
|
|
156
|
+
const refEditor = useRef(null)
|
|
157
|
+
|
|
158
|
+
useEffect(() => {
|
|
159
|
+
// create editor
|
|
160
|
+
refEditor.current = createJSONEditor({
|
|
161
|
+
target: refContainer.current,
|
|
162
|
+
props: {}
|
|
163
|
+
})
|
|
164
|
+
|
|
165
|
+
return () => {
|
|
166
|
+
// destroy editor
|
|
167
|
+
if (refEditor.current) {
|
|
168
|
+
refEditor.current.destroy()
|
|
169
|
+
refEditor.current = null
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}, [])
|
|
173
|
+
|
|
174
|
+
// update props
|
|
175
|
+
useEffect(() => {
|
|
176
|
+
if (refEditor.current) {
|
|
177
|
+
refEditor.current.updateProps(props)
|
|
178
|
+
}
|
|
179
|
+
}, [props])
|
|
180
|
+
|
|
181
|
+
return <div ref={refContainer}></div>
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
export default JSONEditorReact
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Import and use the React component
|
|
188
|
+
|
|
189
|
+
If you are using NextJS, you will need to use a dynamic import to only render the component in the browser (disabling server-side rendering of the wrapper), as shown below in a NextJS TypeScript example.
|
|
190
|
+
|
|
191
|
+
If you are using React in an conventional non-NextJS browser app, you can import the component using a standard import statement like `import JSONEditorReact from '../JSONEditorReact'`
|
|
192
|
+
|
|
193
|
+
```tsx
|
|
194
|
+
//
|
|
195
|
+
// demo.tsx for use with NextJS
|
|
196
|
+
//
|
|
197
|
+
import dynamic from 'next/dynamic'
|
|
198
|
+
import { useCallback, useState } from 'react'
|
|
199
|
+
|
|
200
|
+
//
|
|
201
|
+
// In NextJS, when using TypeScript, type definitions
|
|
202
|
+
// can be imported from 'vanilla-jsoneditor' using a
|
|
203
|
+
// conventional import statement (prefixed with 'type',
|
|
204
|
+
// as shown below), but only types can be imported this
|
|
205
|
+
// way. When using NextJS, React components and helper
|
|
206
|
+
// functions must be imported dynamically using { ssr: false }
|
|
207
|
+
// as shown elsewhere in this example.
|
|
208
|
+
//
|
|
209
|
+
import type { Content, OnChangeStatus } from 'vanilla-jsoneditor'
|
|
210
|
+
|
|
211
|
+
//
|
|
212
|
+
// In NextJS, the JSONEditor component must be wrapped in
|
|
213
|
+
// a component that is dynamically in order to turn off
|
|
214
|
+
// server-side rendering of the component. This is neccessary
|
|
215
|
+
// because the vanilla-jsoneditor code attempts to use
|
|
216
|
+
// browser-only JavaScript capabilities not available
|
|
217
|
+
// during server-side rendering. Any helper functions
|
|
218
|
+
// provided by vanilla-jsoneditor, such as toTextContent,
|
|
219
|
+
// must also only be used in dynamically imported,
|
|
220
|
+
// ssr: false components when using NextJS.
|
|
221
|
+
//
|
|
222
|
+
const JSONEditorReact = dynamic(() => import('../JSONEditorReact'), { ssr: false })
|
|
223
|
+
const TextContent = dynamic(() => import('../TextContent'), { ssr: false })
|
|
224
|
+
|
|
225
|
+
const initialContent = {
|
|
226
|
+
hello: 'world',
|
|
227
|
+
count: 1,
|
|
228
|
+
foo: ['bar', 'car']
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
export default function Demo() {
|
|
232
|
+
const [jsonContent, setJsonContent] = useState<Content>({ json: initialContent })
|
|
233
|
+
const handler = useCallback(
|
|
234
|
+
(content: Content, previousContent: Content, status: OnChangeStatus) => {
|
|
235
|
+
setJsonContent(content)
|
|
236
|
+
},
|
|
237
|
+
[jsonContent]
|
|
238
|
+
)
|
|
239
|
+
|
|
240
|
+
return (
|
|
241
|
+
<div>
|
|
242
|
+
<JSONEditorReact content={jsonContent} onChange={handler} />
|
|
243
|
+
<TextContent content={jsonContent} />
|
|
244
|
+
</div>
|
|
245
|
+
)
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
```tsx
|
|
250
|
+
//
|
|
251
|
+
// TextContent.tsx
|
|
252
|
+
//
|
|
253
|
+
// (wrapper around toTextContent for use with NextJS)
|
|
254
|
+
//
|
|
255
|
+
import { Content, toTextContent } from 'vanilla-jsoneditor'
|
|
256
|
+
|
|
257
|
+
interface IOwnProps {
|
|
258
|
+
content: Content
|
|
259
|
+
}
|
|
260
|
+
const TextContent = (props: IOwnProps) => {
|
|
261
|
+
const { content } = props
|
|
262
|
+
|
|
263
|
+
return (
|
|
264
|
+
<p>
|
|
265
|
+
The contents of the editor, converted to a text string, are: {toTextContent(content).text}
|
|
266
|
+
</p>
|
|
267
|
+
)
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
export default TextContent
|
|
271
|
+
```
|