npm - @json-editor/json-editor - Versions diffs - 2.6.1 → 2.7.0 - Mend

@json-editor/json-editor 2.6.1 → 2.7.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.

Files changed (68) hide show

package/.github/workflows/build.yml +12 -3
package/CHANGELOG.md +24 -0
package/README.md +131 -18
package/dist/jsoneditor.js +2 -2
package/dist/nonmin/jsoneditor.js +2607 -582
package/dist/nonmin/jsoneditor.js.map +1 -1
package/docs/form-submission.html +76 -0
package/package.json +4 -3
package/release-notes.md +2 -0
package/src/core.js +36 -37
package/src/defaults.js +9 -2
package/src/editors/array.js +12 -1
package/src/editors/autocomplete.js +4 -3
package/src/editors/button.js +1 -1
package/src/editors/multiselect.js +14 -5
package/src/editors/string.js +4 -0
package/src/editors/table.js +20 -2
package/src/editors/upload.js +1 -1
package/src/editors/uuid.js +2 -12
package/src/iconlib.js +1 -1
package/src/schemaloader.js +231 -108
package/src/style.css +3 -0
package/src/style.css.js +1 -1
package/src/theme.js +0 -2
package/src/themes/bootstrap3.js +1 -0
package/src/themes/spectre.js +2 -1
package/src/utilities.js +18 -0
package/src/validator.js +36 -34
package/tests/codeceptjs/codecept.json +1 -1
package/tests/codeceptjs/core_test.js +98 -0
package/tests/codeceptjs/editors/advanced_test.js +1 -1
package/tests/codeceptjs/editors/array_test.js +74 -0
package/tests/codeceptjs/editors/autocomplete_test.js +16 -0
package/tests/codeceptjs/editors/button_test.js +10 -3
package/tests/codeceptjs/editors/integer_test.js +7 -2
package/tests/codeceptjs/editors/jodit_test.js +3 -3
package/tests/codeceptjs/editors/range_test.js +12 -0
package/tests/codeceptjs/editors/uuid_test.js +31 -4
package/tests/docker-compose.yml +1 -1
package/tests/fixtures/definitions.json +22 -0
package/tests/fixtures/properties.json +20 -0
package/tests/pages/array-checkboxes-infotext.html +52 -0
package/tests/pages/array-move-events.html +4 -2
package/tests/pages/array-unique-items-sort.html +78 -0
package/tests/pages/autocomplete.html +69 -0
package/tests/pages/button-icons.html +38 -0
package/tests/pages/core.html +4 -2
package/tests/pages/error-messages.html +47 -0
package/tests/pages/grid-strict.html +6 -10
package/tests/pages/grid.html +0 -4
package/tests/pages/issues/issue-gh-812.html +4 -2
package/tests/pages/meta_schema.json +14 -0
package/tests/pages/object-required-properties.html +7 -7
package/tests/pages/range.html +60 -0
package/tests/pages/ready.html +43 -0
package/tests/pages/references.html +162 -0
package/tests/pages/string-simplemde-editor.html +81 -0
package/tests/pages/table-move-events.html +4 -1
package/tests/pages/urn.html +11 -8
package/tests/pages/uuid.html +89 -50
package/tests/pages/validation-messages.json +705 -0
package/tests/unit/core.spec.js +79 -66
package/tests/unit/editor.spec.js +20 -8
package/tests/unit/editors/array.spec.js +3 -2
package/tests/unit/editors/object.spec.js +3 -1
package/tests/unit/editors/table.spec.js +4 -2
package/tests/unit/schemaloader.spec.js +77 -105
package/tests/unit/validator.spec.js +2 -2

package/docs/form-submission.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>JSONEditor with forms</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+<div class="container">
+    <p>
+        The form is set to send a POST request to the same page (<code>action="" method="post"</code>).
+        A change event listener has been added to the editor so that whenever the form changes, the editor value
+        is stored in a hidden input using <code>JSON.stringify()</code>.
+    </p>
+    <p>
+        When the form is submitted only the hidden input is sent in the request.
+        By doing so, it is possible to send different types of data structures like arrays and object.
+        Also the same schema that is used to build the form can be used as parameter to backend json validators tools.
+        Try yourself, submit the form and look in the network tab of the developer tool.
+    </p>
+    <div class="form-group"></div>
+    <form action="" method="post">
+        <input id="input" type="hidden" name="json">
+        <div id='editor-container'></div>
+        <input id="submit" class="btn btn-primary" width="100" type="submit">
+    </form>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+<script>
+  var config = {
+    theme: 'bootstrap4',
+    disable_edit_json: true,
+    disable_properties: true,
+    disable_collapse: true,
+    startval: {
+      name: 'Peter Griffin',
+      pets: [
+        { name: 'Kitty' },
+        { name: 'Brian' }
+      ]
+    },
+    schema: {
+      type: 'object',
+      title: 'Person',
+      properties: {
+        name: {
+          type: 'string',
+          title: 'Name'
+        },
+        pets: {
+          type: 'array',
+          title: 'Pets',
+          format: 'tabs',
+          items: {
+            type: 'object',
+            title: 'pet',
+            properties: {
+              name: {
+                type: 'string',
+                title: 'Name'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  var editor = new JSONEditor(document.querySelector('#editor-container'), config)
+  editor.on('change', function () {
+    document.querySelector('#input').value = JSON.stringify(editor.getValue())
+  })
+</script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",
@@ -71,9 +71,9 @@
     "http-server": "^0.12.3",
     "jasmine": "^3.7.0",
     "jasmine-core": "^3.7.1",
-    "jodit": "~3.3.24",
+    "jodit": "^3.12.4",
     "jquery": "^3.6.0",
-    "karma": "^5.2.3",
+    "karma": "^6.3.14",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.6.0",
@@ -87,6 +87,7 @@
     "puppeteer": "^1.20.0",
     "remove-strict-webpack-plugin": "^0.1.2",
     "sceditor": "^2.1.3",
+    "simplemde": "^1.11.2",
     "sinon": "^8.1.1",
     "standard": "^14.3.4",
     "style-loader": "^1.3.0",

package/release-notes.md CHANGED Viewed

@@ -79,6 +79,8 @@ For now I have passed in `JSONEditor.defaults` as `defaults`.
 ### NPM Release
+Set/export `CHROME_BIN=/path/to/chrome_or_chromium`, start stack with `docker-compose up`
 1. Update `CHANGELOG.md`
 2. Switch to `release` branch and `merge master into release`
 3. NPM login: `npm login`

package/src/core.js CHANGED Viewed

@@ -31,6 +31,8 @@ export class JSONEditor {
     /* Load editors and selected theme style rules */
     if (!themeClass) throw new Error(`Unknown theme ${themeName}`)
     this.element.setAttribute('data-theme', themeName)
+    this.element.classList.add('je-not-loaded')
+    this.element.classList.remove('je-ready')
     // eslint-disable-next-line new-cap
     this.theme = new themeClass(this)
     const rules = extend(styleRules, this.getEditorsRules())
@@ -56,67 +58,64 @@ export class JSONEditor {
     this.root_container = this.theme.getContainer()
     this.element.appendChild(this.root_container)
+    this.promise = this.load()
+  }
-    /* Fetch all external refs via ajax */
+  async load () {
     const fetchUrl = document.location.origin + document.location.pathname.toString()
     const loader = new SchemaLoader(this.options)
-    const location = document.location.toString()
-    this.expandSchema = (schema, fileBase) => loader.expandSchema(schema, fileBase)
+    this.expandSchema = (schema) => loader.expandSchema(schema)
     this.expandRefs = (schema, fileBase) => loader.expandRefs(schema, fileBase)
-    this.refs = loader.refs
-    loader.load(this.schema, schema => {
-      const validatorOptions = this.options.custom_validators ? { custom_validators: this.options.custom_validators } : {}
-      this.validator = new Validator(this, null, validatorOptions, JSONEditor.defaults)
-      const editorClass = this.getEditorClass(schema)
+    const location = document.location.toString()
+    const schema = await loader.load(this.schema, fetchUrl, location)
+    const validatorOptions = this.options.custom_validators ? { custom_validators: this.options.custom_validators } : {}
+    this.validator = new Validator(this, null, validatorOptions, JSONEditor.defaults)
+    const editorClass = this.getEditorClass(schema)
+    this.root = this.createEditor(editorClass, {
+      jsoneditor: this,
+      schema,
+      required: true,
+      container: this.root_container
+    })
-      this.root = this.createEditor(editorClass, {
-        jsoneditor: this,
-        schema,
-        required: true,
-        container: this.root_container
-      })
+    this.root.preBuild()
+    this.root.build()
+    this.root.postBuild()
-      this.root.preBuild()
-      this.root.build()
-      this.root.postBuild()
+    /* Starting data */
+    if (hasOwnProperty(this.options, 'startval')) this.root.setValue(this.options.startval)
-      /* Starting data */
-      if (hasOwnProperty(this.options, 'startval')) this.root.setValue(this.options.startval)
+    this.validation_results = this.validator.validate(this.root.getValue())
+    this.root.showValidationErrors(this.validation_results)
+    this.ready = true
+    this.element.classList.remove('je-not-loaded')
+    this.element.classList.add('je-ready')
+    /* Fire ready event asynchronously */
+    window.requestAnimationFrame(() => {
+      if (!this.ready) return
       this.validation_results = this.validator.validate(this.root.getValue())
       this.root.showValidationErrors(this.validation_results)
-      this.ready = true
-      /* Fire ready event asynchronously */
-      window.requestAnimationFrame(() => {
-        if (!this.ready) return
-        this.validation_results = this.validator.validate(this.root.getValue())
-        this.root.showValidationErrors(this.validation_results)
-        this.trigger('ready')
-        this.trigger('change')
-      })
-    }, fetchUrl, location)
+      this.trigger('ready')
+      this.trigger('change')
+    })
   }
   getValue () {
-    if (!this.ready) throw new Error("JSON Editor not ready yet.  Listen for 'ready' event before getting the value")
+    if (!this.ready) throw new Error('JSON Editor not ready yet. Make sure the load method is complete')
     return this.root.getValue()
   }
   setValue (value) {
-    if (!this.ready) throw new Error("JSON Editor not ready yet.  Listen for 'ready' event before setting the value")
+    if (!this.ready) throw new Error('JSON Editor not ready yet. Make sure the load method is complete')
     this.root.setValue(value)
     return this
   }
   validate (value) {
-    if (!this.ready) throw new Error("JSON Editor not ready yet.  Listen for 'ready' event before validating")
+    if (!this.ready) throw new Error('JSON Editor not ready yet. Make sure the load method is complete')
     /* Custom value */
     if (arguments.length === 1) {

package/src/defaults.js CHANGED Viewed

@@ -350,11 +350,18 @@ function upload (type, file, cbs) {
 }
 /* String translate function */
-function translate (key, variables) {
+function translate (key, variables, schema) {
+  let schemaMessages = {}
+  if (schema && schema.options && schema.options.error_messages && schema.options.error_messages[defaults.language]) {
+    schemaMessages = schema.options.error_messages[defaults.language]
+  }
   const lang = defaults.languages[defaults.language]
   if (!lang) throw new Error(`Unknown language ${defaults.language}`)
-  let string = lang[key] || defaults.languages[default_language][key] || key
+  let string = schemaMessages[key] || lang[key] || defaults.languages[default_language][key] || key
   if (variables) {
     for (let i = 0; i < variables.length; i++) {

package/src/editors/array.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { AbstractEditor } from '../editor.js'
-import { extend, trigger } from '../utilities.js'
+import { extend, generateUUID, trigger } from '../utilities.js'
 import rules from './array.css.js'
 export class ArrayEditor extends AbstractEditor {
@@ -545,6 +545,7 @@ export class ArrayEditor extends AbstractEditor {
   _createCopyButton (i, holder) {
     const button = this.getButton(this.getItemTitle(), 'copy', 'button_copy_row_title', [this.getItemTitle()])
+    const schema = this.schema
     button.classList.add('copy', 'json-editor-btntype-copy')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -555,6 +556,16 @@ export class ArrayEditor extends AbstractEditor {
       value.forEach((row, j) => {
         if (j === i) {
+          /* Force generation of new UUID if the item has been cloned. */
+          if (schema.items.type === 'string' && schema.items.format === 'uuid') {
+            row = generateUUID()
+          } else if (schema.items.type === 'object' && schema.items.properties) {
+            for (const key of Object.keys(row)) {
+              if (schema.items.properties && schema.items.properties[key] && schema.items.properties[key].format === 'uuid') {
+                row[key] = generateUUID()
+              }
+            }
+          }
           value.push(row)
         }
       })

package/src/editors/autocomplete.js CHANGED Viewed

@@ -29,18 +29,19 @@ export class AutocompleteEditor extends StringEditor {
       /* Get options, either global options from "this.defaults.options.autocomplete" or */
       /* single property options from schema "options.autocomplete" */
       options = this.expandCallbacks('autocomplete', extend({}, {
-        search: (jseditor, input) => {
+        search: (jseditor) => {
           // eslint-disable-next-line no-console
           console.log(`No "search" callback defined for autocomplete in property "${jseditor.key}"`)
           return []
         },
+        onSubmit: () => {
+          this.input.blur()
+        },
         baseClass: 'autocomplete'
       }, this.defaults.options.autocomplete || {}, this.options.autocomplete || {}))
       this.autocomplete_wrapper.classList.add(options.baseClass)
       this.autocomplete_dropdown.classList.add(`${options.baseClass}-result-list`)
-      /* this.input.classList.add(options.baseClass + '-input'); */
       this.autocomplete_instance = new window.Autocomplete(this.autocomplete_wrapper, options)
     }
     super.afterInputReady()

package/src/editors/button.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class ButtonEditor extends AbstractEditor {
       }
     }, this.defaults.options.button || {}, this.options.button || {}))
-    this.input = this.theme.getFormButton(title, options.icon, title)
+    this.input = this.getButton(title, options.icon, title)
     this.input.addEventListener('click', options.action, false)
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {

package/src/editors/multiselect.js CHANGED Viewed

@@ -31,19 +31,24 @@ export class MultiSelectEditor extends AbstractEditor {
     this.select_options = {}
     this.select_values = {}
     this.option_keys = []
-    this.option_titles = []
+    this.option_enum = []
     let i
     const itemsSchema = this.jsoneditor.expandRefs(this.schema.items || {})
     const e = itemsSchema.enum || []
+    const oe = itemsSchema.options ? itemsSchema.options.enum || [] : []
+    /* fallback to enum_titles, when options.enum is not present */
     const t = itemsSchema.options ? itemsSchema.options.enum_titles || [] : []
     for (i = 0; i < e.length; i++) {
       /* If the sanitized value is different from the enum value, don't include it */
       if (this.sanitize(e[i]) !== e[i]) continue
+      const d = oe[i] || {}
+      if (!('title' in d)) d.title = `${t[i] || e[i]}`
       this.option_keys.push(`${e[i]}`)
-      this.option_titles.push(`${t[i] || e[i]}`)
+      this.option_enum.push(d)
       this.select_values[`${e[i]}`] = e[i]
     }
   }
@@ -65,9 +70,13 @@ export class MultiSelectEditor extends AbstractEditor {
         this.inputs[this.option_keys[i]] = this.theme.getCheckbox()
         this.inputs[this.option_keys[i]].id = id
         this.select_options[this.option_keys[i]] = this.inputs[this.option_keys[i]]
-        const label = this.theme.getCheckboxLabel(this.option_titles[i])
+        const label = this.theme.getCheckboxLabel(this.option_enum[i].title)
         label.htmlFor = id
-        this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]])
+        if (this.option_enum[i].infoText) {
+          const infoButton = this.theme.getInfoButton(this.translateProperty(this.option_enum[i].infoText))
+          label.appendChild(infoButton)
+        }
+        this.controls['_' + this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]])
       }
       this.control = this.theme.getMultiCheckboxHolder(this.controls, this.label, this.description, this.infoButton)
@@ -75,7 +84,7 @@ export class MultiSelectEditor extends AbstractEditor {
     } else {
       this.input_type = 'select'
       this.input = this.theme.getSelectInput(this.option_keys, true)
-      this.theme.setSelectOptions(this.input, this.option_keys, this.option_titles)
+      this.theme.setSelectOptions(this.input, this.option_keys, this.option_enum.map(e => e.title))
       /* this.input.multiple = true; */
       this.input.setAttribute('multiple', 'multiple')
       this.input.size = Math.min(10, this.option_keys.length)

package/src/editors/string.js CHANGED Viewed

@@ -213,6 +213,10 @@ export class StringEditor extends AbstractEditor {
       /* it will generate an error trying to append it to the missing parentNode */
       if (this.input.parentNode) this.afterInputReady()
       if (this.adjust_height) this.adjust_height(this.input)
+      if (this.format === 'range') {
+        const output = this.control.querySelector('output')
+        output.value = this.input.value
+      }
     })
     /* Compile and store the template */

package/src/editors/table.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ArrayEditor } from './array.js'
-import { extend, trigger } from '../utilities.js'
+import { extend, generateUUID, trigger } from '../utilities.js'
 export class TableEditor extends ArrayEditor {
   register () {
@@ -347,6 +347,7 @@ export class TableEditor extends ArrayEditor {
   _createCopyButton (i, holder) {
     const button = this.getButton('', 'copy', 'button_copy_row_title_short')
+    const schema = this.schema
     button.classList.add('copy', 'json-editor-btntype-copy')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -355,8 +356,25 @@ export class TableEditor extends ArrayEditor {
       const j = e.currentTarget.getAttribute('data-i') * 1
       const value = this.getValue()
-      value.splice(j + 1, 0, value[j])
+      let newValue = value[j]
+      /* On copy, recreate uuid if needed. */
+      if (schema.items.type === 'string' && schema.items.format === 'uuid') {
+        newValue = generateUUID()
+      } else if (schema.items.type === 'object' && schema.items.properties) {
+        value.forEach((row, i) => {
+          if (j === i) {
+            for (const key of Object.keys(row)) {
+              if (schema.items.properties && schema.items.properties[key] && schema.items.properties[key].format === 'uuid') {
+                newValue = Object.assign({}, value[j])
+                newValue[key] = generateUUID()
+              }
+            }
+          }
+        })
+      }
+      value.splice(j + 1, 0, newValue)
       this.setValue(value)
       this.onChange(true)
       this.jsoneditor.trigger('copyRow', this.rows[j + 1])

package/src/editors/upload.js CHANGED Viewed

@@ -257,7 +257,7 @@ export class UploadEditor extends AbstractEditor {
     if (this.options.auto_upload) {
       uploadButton.dispatchEvent(new window.MouseEvent('click'))
-      this.preview.removeChild(uploadButton)
+      uploadButton.parentNode.removeChild(uploadButton)
     }
   }

package/src/editors/uuid.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { generateUUID } from '../utilities.js'
 import { StringEditor } from './string.js'
 export class UuidEditor extends StringEditor {
@@ -36,18 +37,7 @@ export class UuidEditor extends StringEditor {
   }
   getUuid () {
-    /* https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript */
-    let d = new Date().getTime()
-    if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
-      d += performance.now() /* use high-precision timer if available */
-    }
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-      const r = (d + Math.random() * 16) % 16 | 0
-      d = Math.floor(d / 16)
-      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-    })
+    return generateUUID()
   }
   testUuid (value) {

package/src/iconlib.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class AbstractIconLib {
   }
   getIconClass (key) {
-    return this.mapping[key] ? this.icon_prefix + this.mapping[key] : null
+    return this.mapping[key] ? this.icon_prefix + this.mapping[key] : this.icon_prefix + key
   }
   getIcon (key) {