@json-editor/json-editor 2.12.0 → 2.13.0

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/docs/index.html CHANGED
@@ -7,18 +7,19 @@
7
7
  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.14.0/src-noconflict/ace.js"></script>
8
8
  <script src="./polyfills/assign.js"></script>
9
9
  <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
10
+ <script src="./scripts/ajv-validator.js"></script>
10
11
  <link rel='stylesheet' id='theme-link'>
11
12
  <link rel='stylesheet' id='iconlib-link'>
12
13
  </head>
13
14
  <body>
14
- <div class='container grid-xl' style="padding: 15px 0;">
15
+ <div class="container grid-xl" style="padding-top: 15px; padding-bottom: 30px;">
15
16
  <div class="row columns md:flex">
16
- <div class='col-8 col-md-8 w-8/12'>
17
+ <div class='col-7 col-md-7 w-7/12'>
17
18
  <h1>Editor</h1>
18
19
  <p>Below is the editor generated from the JSON Schema.</p>
19
20
  <div id="json-editor-form"></div>
20
21
  </div>
21
- <div class='col-4 col-md-4 w-4/12'>
22
+ <div class='col-5 col-md-5 w-5/12'>
22
23
  <div>
23
24
  <a class="btn btn-primary" id="direct-link" title="preserves schema, value, and options">Direct Link</a>
24
25
  <a class="btn btn-secondary" href="?" title="reload editor with default example settings">Reset</a>
@@ -38,6 +39,10 @@
38
39
  <div>
39
40
  <label for="boolean-options-select">Boolean options</label><br>
40
41
  <select multiple size="15" id="boolean-options-select" class="form-control browser-default">
42
+ <option value='use_default_values'>Default values based on the "type"</option>
43
+ <option value='use_name_attributes'>Use name attributes</option>
44
+ <option value='prompt_before_delete'>Prompt before delete</option>
45
+ <option value='case_sensitive_property_search'>Case sensitive property search</option>
41
46
  <option value='required_by_default'>Object properties required by default</option>
42
47
  <option value='display_required_only'>Only show required properties by default</option>
43
48
  <option value='show_opt_in'>Show optional properties (with checkbox)</option>
@@ -116,18 +121,34 @@
116
121
  </div>
117
122
  </div>
118
123
  </div>
124
+
125
+ <h2>Schema</h2>
126
+
119
127
  <div class="row columns md:flex">
120
- <div class='col-12 col-md-12 w-12/12'>
121
- <h2>Schema</h2>
122
- <label for="schema-textarea">You can change the schema and see how the generated form looks. After you make
123
- changes, click "Update Schema"</label>
128
+ <div class='col-7 col-md-7 w-7/12'>
129
+ <label for="schema-textarea">You can change the schema and see how the generated form looks. After you make changes, click "Update Schema"</label>
124
130
  <button class='btn btn-primary btn-block' id='setschema'>Update Schema</button>
125
131
  <textarea id='schema-textarea' style="height: 100vh;"></textarea>
126
132
  </div>
133
+
134
+ <div class='col-5 col-md-5 w-5/12'>
135
+ <label for="je-errors-textarea">
136
+ <span>AJV (JE meta-schema): </span>
137
+ <code id="je-errors-count"></code>
138
+ </label>
139
+ <textarea id='je-errors-textarea'></textarea>
140
+
141
+ <br>
142
+
143
+ <label for="ajv-errors-textarea">
144
+ <span>AJV (meta-schema-2020-12): </span>
145
+ <code id="ajv-errors-count"></code>
146
+ </label>
147
+ <textarea id='ajv-errors-textarea'></textarea>
148
+ </div>
127
149
  </div>
128
150
  </div>
129
151
  <script>
130
-
131
152
  var defaultSchema = {
132
153
  'title': 'Person',
133
154
  'type': 'object',
@@ -238,13 +259,13 @@
238
259
 
239
260
  var data = {}
240
261
 
241
- var defaultOptions = {
262
+ var defaultOptions = Object.assign({}, JSONEditor.defaults.options, {
242
263
  iconlib: 'fontawesome5',
243
264
  object_layout: 'normal',
244
265
  schema: defaultSchema,
245
266
  show_errors: 'interaction',
246
- theme: 'bootstrap4'
247
- }
267
+ theme: 'bootstrap4',
268
+ })
248
269
 
249
270
  var jsoneditor = null
250
271
  var directLink = document.querySelector('#direct-link')
@@ -267,11 +288,38 @@
267
288
  mode: 'ace/mode/json',
268
289
  maxLines: Infinity,
269
290
  minLines: 5,
270
- showFoldWidgets: false
291
+ showFoldWidgets: false,
292
+ showPrintMargin: false
271
293
  }
272
294
 
273
295
  var outputTextarea = ace.edit('output-textarea', aceConfig)
274
296
  var schemaTextarea = ace.edit('schema-textarea', aceConfig)
297
+ var ajvErrorsTextarea = ace.edit('ajv-errors-textarea', aceConfig)
298
+ var jeErrorsTextarea = ace.edit('je-errors-textarea', aceConfig)
299
+ var ajvErrorsCount = document.querySelector('#ajv-errors-count')
300
+ var jeErrorsCount = document.querySelector('#je-errors-count')
301
+ var ajv = new AjvValidator()
302
+
303
+ const validateSchema = () => {
304
+ const dataToValidate = JSON.parse(schemaTextarea.getValue())
305
+ let errors
306
+
307
+ // AJV validation
308
+ ajvErrorsCount.textContent = '0'
309
+ errors = ajv.validate202012(dataToValidate)
310
+ ajvErrorsTextarea.setValue(JSON.stringify(errors, null, 2))
311
+ ajvErrorsCount.textContent = JSON.stringify(errors.length)
312
+ schemaTextarea.clearSelection(1)
313
+ ajvErrorsTextarea.clearSelection(1)
314
+
315
+ // JE validation with AJV
316
+ jeErrorsCount.textContent = '0'
317
+ errors = ajv.validateJeMetaSchema(dataToValidate)
318
+ jeErrorsTextarea.setValue(JSON.stringify(errors, null, 2))
319
+ jeErrorsCount.textContent = JSON.stringify(errors.length)
320
+ schemaTextarea.clearSelection(1)
321
+ jeErrorsTextarea.clearSelection(1)
322
+ }
275
323
 
276
324
  /* -------------------------------------------------------------- parse url */
277
325
 
@@ -313,6 +361,7 @@
313
361
  // schema
314
362
  schemaTextarea.setValue(JSON.stringify(data.options.schema, null, 2))
315
363
  schemaTextarea.clearSelection(1)
364
+ validateSchema()
316
365
 
317
366
  // theme
318
367
  var themeMap = {
@@ -538,6 +587,7 @@
538
587
  setSchema.addEventListener('click', function () {
539
588
  try {
540
589
  data.options.schema = JSON.parse(schemaTextarea.getValue())
590
+ validateSchema()
541
591
  } catch (e) {
542
592
  alert('Invalid Schema: ' + e.message)
543
593
  return
@@ -480,6 +480,17 @@
480
480
  "propertyOrder": 50,
481
481
  "format": "table"
482
482
  },
483
+ "const": {
484
+ "type": [
485
+ "object",
486
+ "array",
487
+ "string",
488
+ "number",
489
+ "integer",
490
+ "boolean",
491
+ "null"
492
+ ]
493
+ },
483
494
  "enumSource": {
484
495
  "oneOf": [
485
496
  {