@json-editor/json-editor 2.14.0 → 2.15.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",
@@ -38,7 +38,7 @@
     "test-headless": "karma start config/karma.conf.js --singleRun true --browsers ChromeHeadless",
     "serve-test": "http-server --p 9001",
     "docker-prepare-codeceptjs": "docker-compose run --rm node npm install && docker-compose run --rm node npm run build && docker-compose up -d && docker-compose ps",
-    "docker-codeceptjs": "docker-compose exec node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:chrome --invert --grep '@optional'",
+    "docker-codeceptjs": "docker-compose exec node codeceptjs run-multiple --config /repo/tests/codeceptjs/codecept.json basic:chrome --invert --grep '@optional'",
     "docker-test": "npm run docker-prepare-codeceptjs && npm run docker-codeceptjs",
     "preversion": "npm run test-headless && npm run docker-test",
     "postversion": "git push && git push --tags && npm publish ./ --access public",
@@ -61,15 +61,15 @@
     "@babel/runtime": "^7.20.13",
     "@webpack-cli/serve": "^2.0.1",
     "ace-builds": "^1.15.0",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^3.0.0",
     "cleave.js": "^1.6.0",
-    "codeceptjs": "^3.3.7",
-    "css-loader": "^3.6.0",
+    "codeceptjs": "^3.6.1",
+    "css-loader": "^7.1.1",
     "css2json": "^1.1.1",
-    "cssnano": "^4.1.11",
-    "eslint": "^6.8.0",
-    "eslint-loader": "^2.2.1",
+    "cssnano": "^6.1.2",
+    "eslint": "^8.0.0",
+    "eslint-webpack-plugin": "^4.1.0",
     "fast-deep-equal": "^3.1.3",
     "http-server": "^14.1.1",
     "jasmine": "^3.99.0",
@@ -83,19 +83,19 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
     "mathjs": "^7.5.1",
-    "mini-css-extract-plugin": "^0.8.2",
+    "mini-css-extract-plugin": "^2.8.1",
     "mocha": "^10.2.0",
-    "mochawesome": "^4.1.0",
+    "mochawesome": "^7.1.3",
     "postcss-loader": "^5.3.0",
     "puppeteer": "^1.20.0",
     "remove-strict-webpack-plugin": "^0.1.2",
-    "sceditor": "^2.1.3",
+    "sceditor": "^3.2.0",
     "simplemde": "^1.11.2",
     "sinon": "^8.1.1",
-    "standard": "^14.3.4",
+    "standard": "^17.1.0",
     "style-loader": "^1.3.0",
     "webdriverio": "^6.12.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^4.2.2"

package/src/core.js

@@ -234,9 +234,13 @@ export class JSONEditor {
     return new editorClass(options, JSONEditor.defaults, depthCounter)
   }
 
-  onChange () {
+  onChange (eventData) {
     if (!this.ready) return
 
+    if (eventData) {
+      this.trigger(eventData.event, eventData.data)
+    }
+
     if (this.firing_change) return
     this.firing_change = true
 

package/src/defaults.js

@@ -363,7 +363,11 @@ languages.en = {
   /**
    * Warning when deleting a node
    */
-  table_controls: 'Controls'
+  table_controls: 'Controls',
+  /**
+   * Warning when paste and  length exceeded maxLength
+   */
+  paste_max_length_reached: 'Pasted text exceeded maximum length of {{0}} and will be clipped.'
 }
 
 /* Default per-editor options */
@@ -413,7 +417,10 @@ const options = {
   max_depth: 0,
   button_state_mode: 1,
   case_sensitive_property_search: true,
-  show_errors: 'interaction'
+  show_errors: 'interaction',
+  prompt_paste_max_length_reached: false,
+  remove_false_properties: false,
+  enforce_const: false
 }
 
 /* This assignment was previously in index.js but makes more sense here */

package/src/editor.js

@@ -17,7 +17,7 @@ export class AbstractEditor {
     this.active = true
     this.isUiOnly = false
     this.options = extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options)
-
+    this.enforceConst = this.options.enforce_const ?? this.jsoneditor.options.enforce_const
     this.formname = this.jsoneditor.options.form_name_root || 'root'
 
     if (!options.path && !this.schema.id) this.schema.id = this.formname
@@ -34,23 +34,27 @@ export class AbstractEditor {
     this.registerDependencies()
   }
 
-  onChildEditorChange (editor) {
-    this.onChange(true)
+  onChildEditorChange (editor, eventData) {
+    this.onChange(true, false, eventData)
   }
 
   notify () {
     if (this.path) this.jsoneditor.notifyWatchers(this.path)
   }
 
-  change () {
-    if (this.parent) this.parent.onChildEditorChange(this)
-    else if (this.jsoneditor) this.jsoneditor.onChange()
+  change (eventData) {
+    if (this.parent) this.parent.onChildEditorChange(this, eventData)
+    else if (this.jsoneditor) this.jsoneditor.onChange(eventData)
   }
 
-  onChange (bubble) {
+  onChange (bubble, fromTemplate, eventData) {
     this.notify()
-    if (this.watch_listener) this.watch_listener()
-    if (bubble) this.change()
+
+    if (!fromTemplate) {
+      if (this.watch_listener) this.watch_listener()
+    }
+
+    if (bubble) this.change(eventData)
   }
 
   register () {
@@ -171,7 +175,7 @@ export class AbstractEditor {
     const editor = this.jsoneditor.getEditor(path)
     const value = editor ? editor.getValue() : undefined
 
-    if (!editor || !editor.dependenciesFulfilled) {
+    if (!editor || !editor.dependenciesFulfilled || !value) {
       this.dependenciesFulfilled = false
     } else if (Array.isArray(choices)) {
       this.dependenciesFulfilled = choices.some(choice => {
@@ -266,6 +270,10 @@ export class AbstractEditor {
       this.theme.visuallyHidden(this.label)
       this.theme.visuallyHidden(this.header)
     }
+
+    if (this.enforceConst && this.schema.const) {
+      this.disable()
+    }
   }
 
   setupWatchListeners () {
@@ -455,7 +463,13 @@ export class AbstractEditor {
       }
     }
 
-    if (data.class) link.classList.add(data.class)
+    if (data.class) {
+      const classNames = data.class.split(' ')
+
+      classNames.forEach((className) => {
+        link.classList.add(className)
+      })
+    }
 
     return holder
   }
@@ -535,7 +549,7 @@ export class AbstractEditor {
       })
 
       // object properties
-      if (Object.keys(this.editors).length) {
+      if (this.editors && Object.keys(this.editors).length) {
         vars.properties = {}
 
         Object.keys(this.editors).forEach((key) => {
@@ -545,7 +559,7 @@ export class AbstractEditor {
             const enumIndex = editor.schema.enum.indexOf(editor.value)
             const enumTitle = editor.options.enum_titles[enumIndex]
             vars.properties[key] = {
-              enumTitle: enumTitle
+              enumTitle
             }
           }
         })
@@ -613,6 +627,10 @@ export class AbstractEditor {
   }
 
   getDefault () {
+    if (this.enforceConst && this.schema.const) {
+      return this.schema.const
+    }
+
     if (typeof this.schema.default !== 'undefined') {
       return this.schema.default
     }
@@ -726,13 +744,14 @@ export class AbstractEditor {
     return id.replace(/\s+/g, '-')
   }
 
-  setInputAttributes (inputAttribute) {
+  setInputAttributes (inputAttribute, input) {
     if (this.schema.options && this.schema.options.inputAttributes) {
       const inputAttributes = this.schema.options.inputAttributes
       const protectedAttributes = ['name', 'type'].concat(inputAttribute)
+      const workingInput = input || this.input
       Object.keys(inputAttributes).forEach(key => {
         if (!protectedAttributes.includes(key.toLowerCase())) {
-          this.input.setAttribute(key, inputAttributes[key])
+          workingInput.setAttribute(key, inputAttributes[key])
         }
       })
     }

package/src/editors/array.js

@@ -12,10 +12,6 @@ export class ArrayEditor extends AbstractEditor {
     return true
   }
 
-  getDefault () {
-    return this.schema.default || []
-  }
-
   register () {
     super.register()
     if (this.rows) {
@@ -164,10 +160,10 @@ export class ArrayEditor extends AbstractEditor {
     }
   }
 
-  onChildEditorChange (editor) {
+  onChildEditorChange (editor, eventData) {
     this.refreshValue()
     this.refreshTabs(true)
-    super.onChildEditorChange(editor)
+    super.onChildEditorChange(editor, eventData)
   }
 
   getItemTitle () {
@@ -283,7 +279,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   empty (hard) {
-    if (!this.rows) return
+    if (this.rows === null) return
 
     this.rows.forEach((row, i) => {
       if (hard) {
@@ -293,6 +289,12 @@ export class ArrayEditor extends AbstractEditor {
       }
       this.rows[i] = null
     })
+    if (hard) {
+      for (let j = this.rows.length; j < this.row_cache.length; j++) {
+        this.destroyRow(this.row_cache[j], true)
+        this.row_cache[j] = null
+      }
+    }
     this.rows = []
     if (hard) this.row_cache = []
   }
@@ -598,6 +600,7 @@ export class ArrayEditor extends AbstractEditor {
       this.setValue(value)
       this.refreshValue(true)
       this.onChange(true)
+      this.jsoneditor.trigger('copyRow', this.rows[i - 1])
     })
 
     holder.appendChild(button)

package/src/editors/base64.js

@@ -104,6 +104,9 @@ export class Base64Editor extends AbstractEditor {
     })
 
     this.control.appendChild(uploadButton)
+
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes(['multiple'], uploadButton)
   }
 
   refreshPreview () {

package/src/editors/describedby.js

@@ -145,12 +145,12 @@ export class DescribedByEditor extends AbstractEditor {
     this.switchEditor()
   }
 
-  onChildEditorChange (editor) {
+  onChildEditorChange (editor, eventData) {
     if (this.editors[this.currentEditor]) {
       this.refreshValue()
     }
 
-    super.onChildEditorChange(editor)
+    super.onChildEditorChange(editor, eventData)
   }
 
   refreshValue () {

package/src/editors/enum.js

@@ -12,7 +12,12 @@ export class EnumEditor extends AbstractEditor {
 
     this.options.enum_titles = this.options.enum_titles || []
 
-    this.enum = this.schema.enum
+    if (this.enforceConst && this.schema.const) {
+      this.enum = [this.schema.const]
+    } else {
+      this.enum = this.schema.enum
+    }
+
     this.selected = 0
     this.select_options = []
     this.html_values = []
@@ -45,6 +50,9 @@ export class EnumEditor extends AbstractEditor {
   }
 
   refreshValue () {
+    if (!this.enum) {
+      return
+    }
     this.selected = -1
     const stringified = JSON.stringify(this.value)
     this.enum.forEach((el, i) => {

package/src/editors/info.js

@@ -17,4 +17,12 @@ export class InfoEditor extends ButtonEditor {
   getNumColumns () {
     return 12
   }
+
+  disable () {
+    return false
+  }
+
+  enable () {
+    return false
+  }
 }

package/src/editors/multiple.js

@@ -83,6 +83,13 @@ export class MultipleEditor extends AbstractEditor {
       }
     })
 
+    this.onChange(true, false, {
+      event: 'switch',
+      data: {
+        type: this.lastType,
+        path: this.editors[i].path
+      }
+    })
     this.refreshValue()
     this.refreshHeaderText()
   }
@@ -107,6 +114,10 @@ export class MultipleEditor extends AbstractEditor {
       }
     }
 
+    if (schema?.options?.dependencies) {
+      delete schema.options.dependencies
+    }
+
     const editor = this.jsoneditor.getEditorClass(schema)
 
     this.editors[i] = this.jsoneditor.createEditor(editor, {
@@ -121,7 +132,9 @@ export class MultipleEditor extends AbstractEditor {
     this.editors[i].build()
     this.editors[i].postBuild()
 
-    if (this.editors[i].header) this.editors[i].header.style.display = 'none'
+    if (this.editors[i].header) {
+      this.theme.visuallyHidden(this.editors[i].header)
+    }
 
     this.editors[i].option = this.switcher_options[i]
 
@@ -264,13 +277,13 @@ export class MultipleEditor extends AbstractEditor {
     this.switchEditor(0)
   }
 
-  onChildEditorChange (editor) {
+  onChildEditorChange (editor, eventData) {
     if (this.editors[this.type]) {
       this.refreshValue()
       this.refreshHeaderText()
     }
 
-    super.onChildEditorChange()
+    super.onChildEditorChange(editor, eventData)
   }
 
   refreshHeaderText () {

package/src/editors/object.js

@@ -8,10 +8,6 @@ export class ObjectEditor extends AbstractEditor {
     this.currentDepth = depth
   }
 
-  getDefault () {
-    return extend({}, this.schema.default || {})
-  }
-
   getChildEditors () {
     return this.editors
   }
@@ -631,7 +627,14 @@ export class ObjectEditor extends AbstractEditor {
           if (this.editors[this.addproperty_input.value]) {
             this.editors[this.addproperty_input.value].disable()
           }
-          this.onChange(true)
+          const key = this.editors[this.addproperty_input.value].key
+          const type = this.editors[this.addproperty_input.value].type
+          const path = this.editors[this.addproperty_input.value].path
+
+          this.onChange(true, false, {
+            event: 'add',
+            data: { key, type, path }
+          })
         }
       })
       this.addproperty_input.addEventListener('input', (e) => {
@@ -974,6 +977,11 @@ export class ObjectEditor extends AbstractEditor {
 
   removeObjectProperty (property) {
     if (this.editors[property]) {
+      // do not destroy dependent editors
+      if (this.editors[property].schema?.options?.dependencies) {
+        return
+      }
+
       this.editors[property].unregister()
       delete this.editors[property]
 
@@ -1072,9 +1080,9 @@ export class ObjectEditor extends AbstractEditor {
     }
   }
 
-  onChildEditorChange (editor) {
+  onChildEditorChange (editor, eventData) {
     this.refreshValue()
-    super.onChildEditorChange(editor)
+    super.onChildEditorChange(editor, eventData)
   }
 
   canHaveAdditionalProperties () {
@@ -1138,6 +1146,14 @@ export class ObjectEditor extends AbstractEditor {
         }
       })
     }
+
+    if (result && (this.jsoneditor.options.remove_false_properties || this.options.remove_false_properties)) {
+      Object.keys(result).forEach(key => {
+        if (result[key] === false) {
+          delete result[key]
+        }
+      })
+    }
     return result
   }
 
@@ -1286,6 +1302,9 @@ export class ObjectEditor extends AbstractEditor {
         this.addObjectProperty(i)
         editor.setValue(value[i], initial)
         editor.activate()
+        if (this.disabled) {
+          editor.disable()
+        }
         /* Otherwise, remove value unless this is the initial set or it's required */
       } else if (!initial && !this.isRequiredObject(editor)) {
         if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {

package/src/editors/radio.js

@@ -19,6 +19,10 @@ export class RadioEditor extends SelectEditor {
     const radioInputEventhandler = e => {
       this.setValue(e.currentTarget.value)
       this.onChange(true)
+
+      this.radioGroup.forEach((radio) => {
+        radio.checked = (radio.value === this.getValue())
+      })
     }
 
     for (let i = 0; i < this.enum_values.length; i++) {
@@ -110,10 +114,13 @@ export class RadioEditor extends SelectEditor {
     for (let i = 0; i < this.radioGroup.length; i++) {
       if (this.radioGroup[i].value === val) {
         this.radioGroup[i].checked = true
-        this.value = val
-        this.onChange()
         break
+      } else {
+        this.radioGroup[i].checked = false
       }
     }
+
+    this.value = val
+    this.onChange()
   }
 }

package/src/editors/select.js

@@ -5,19 +5,21 @@ export class SelectEditor extends AbstractEditor {
   setValue (value, initial) {
     /* Sanitize value before setting it */
     let sanitized = this.typecast(value)
+    const inEnum = (this.enum_options.length > 0 && this.enum_values.includes(sanitized))
 
     const haveToUseDefaultValue = !!this.jsoneditor.options.use_default_values || typeof this.schema.default !== 'undefined'
 
-    if (
-      (this.enum_options.length > 0 && !this.enum_values.includes(sanitized)) ||
-      (initial && !this.isRequired() && !haveToUseDefaultValue)
-    ) {
+    if (!this.hasPlaceholderOption && (!inEnum || (initial && !this.isRequired() && !haveToUseDefaultValue))) {
       sanitized = this.enum_values[0]
     }
 
     if (this.value === sanitized) return
 
-    this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
+    if (inEnum && this.hasPlaceholderOption) {
+      this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
+    } else {
+      this.input.value = '_placeholder_'
+    }
 
     this.value = sanitized
 
@@ -75,8 +77,17 @@ export class SelectEditor extends AbstractEditor {
     let i
     let callback
 
-    /* Enum options enumerated */
-    if (this.schema.enum) {
+    this.hasPlaceholderOption = this.schema?.options?.has_placeholder_option || false
+    this.placeholderOptionText = this.schema?.options?.placeholder_option_text || ' '
+
+    /* Const value */
+    if (this.enforceConst && this.schema.const) {
+      const value = this.schema.const
+      this.enum_options = [`${value}`]
+      this.enum_display = [`${this.translateProperty(value) || value}`]
+      this.enum_values = [this.typecast(value)]
+      /* Enum options enumerated */
+    } else if (this.schema.enum) {
       const display = (this.schema.options && this.schema.options.enum_titles) || []
 
       this.schema.enum.forEach((option, i) => {
@@ -165,7 +176,7 @@ export class SelectEditor extends AbstractEditor {
     if (this.options.compact) this.container.classList.add('compact')
 
     this.input = this.theme.getSelectInput(this.enum_options, false)
-    this.theme.setSelectOptions(this.input, this.enum_options, this.enum_display)
+    this.theme.setSelectOptions(this.input, this.enum_options, this.enum_display, this.hasPlaceholderOption, this.placeholderOptionText)
 
     if (this.schema.readOnly || this.schema.readonly) {
       this.disable(true)

package/src/editors/select2.js

@@ -74,7 +74,7 @@ export class Select2Editor extends SelectEditor {
         /* Remove data attribute to make option tag permanent. */
         optionTag.removeAttribute('data-select2-tag')
       } else {
-        this.input.appendChild(new Option(sanitized, sanitized, false, false)).trigger('change')
+        this.select2_instance.append(new Option(sanitized, sanitized, false, false)).trigger('change')
       }
 
       res = true

package/src/editors/starrating.js

@@ -116,23 +116,24 @@ export class StarratingEditor extends StringEditor {
       return undefined
     }
     if (this.schema.type === 'integer') {
-      return this.value === '' ? undefined : this.value * 1
+      return this.value === '' ? 0 : parseInt(this.value)
     }
     return this.value
   }
 
   setValue (value) {
+    this.value = value
+
     for (let i = 0; i < this.radioGroup.length; i++) {
       if (this.radioGroup[i].value === `${value}`) {
         this.radioGroup[i].checked = true
         this.value = value
-
         if (this.options.displayValue) this.displayRating.innerHTML = this.value
-
-        this.onChange(true)
         break
       }
     }
+
+    super.setValue(this.value)
   }
 }
 

package/src/editors/string.js

@@ -50,7 +50,9 @@ export class StringEditor extends AbstractEditor {
     if (this.adjust_height) this.adjust_height(this.input)
 
     /* Bubble this setValue to parents if the value changed */
-    this.onChange(changed)
+    if (changed) {
+      this.onChange(true, fromTemplate)
+    }
 
     /* Return object with changed state and sanitized value for use in editors that extend this */
     return { changed, value: sanitized }
@@ -198,6 +200,20 @@ export class StringEditor extends AbstractEditor {
       this.adjust_height()
     }
 
+    const promptPasteMaxLengthReached = this.options.prompt_paste_max_length_reached ?? this.jsoneditor.options.prompt_paste_max_length_reached
+    const hasMaxLength = typeof this.schema.maxLength !== 'undefined'
+
+    if (promptPasteMaxLengthReached && hasMaxLength) {
+      this.input.addEventListener('paste', (event) => {
+        const paste = (event.clipboardData || window.clipboardData).getData('text')
+        const length = (paste.length + this.input.value.length)
+
+        if (length > this.schema.maxLength) {
+          alert(this.translate('paste_max_length_reached', [this.schema.maxLength]))
+        }
+      })
+    }
+
     if (this.format) this.input.setAttribute('data-schemaformat', this.format)
 
     let { input } = this

package/src/editors/table.js

@@ -110,9 +110,9 @@ export class TableEditor extends ArrayEditor {
     this.addControls()
   }
 
-  onChildEditorChange (editor) {
+  onChildEditorChange (editor, eventData) {
     this.refreshValue()
-    super.onChildEditorChange()
+    super.onChildEditorChange(editor, eventData)
   }
 
   getItemDefault () {

package/src/iconlib.js

@@ -1,4 +1,3 @@
-
 const defaultMapping = { collapse: '', expand: '', delete: '', edit: '', add: '', cancel: '', save: '', moveup: '', movedown: '' }
 
 export class AbstractIconLib {

package/src/schemaloader.js

@@ -261,7 +261,7 @@ export class SchemaLoader {
    */
   _manageRecursivePointer (schema, path) {
     Object.keys(schema).forEach(i => {
-      if (schema[i].$ref && schema[i].$ref.indexOf('#') === 0) {
+      if (schema[i] !== null && schema[i].$ref && schema[i].$ref.indexOf('#') === 0) {
         schema[i].$ref = path + schema[i].$ref
       }
     })
@@ -334,7 +334,7 @@ export class SchemaLoader {
   }
 
   _joinUrl (url, fileBase) {
-    var fetchUrl = url
+    let fetchUrl = url
 
     if (url.substr(0, 7) !== 'http://' &&
       url.substr(0, 8) !== 'https://' &&

package/src/style.css

@@ -1,3 +1,7 @@
+.table-responsive .autocomplete-result-list {
+  position: relative !important;
+}
+
 .je-float-right-linkholder {
   float: right;
   margin-left: 10px;