@json-editor/json-editor 2.15.0 → 2.15.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.15.0",
+  "version": "2.15.2",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",

package/src/core.js

@@ -411,6 +411,17 @@ export class JSONEditor {
     styleSheet.replaceSync(cssText)
     shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleSheet]
   }
+
+  showValidationErrors (errorList) {
+    const errors = errorList ?? this.validate()
+
+    Object.values(this.editors).forEach(editor => {
+      if (editor) {
+        editor.is_dirty = true
+        editor.showValidationErrors(errors)
+      }
+    })
+  }
 }
 
 JSONEditor.defaults = defaults

package/src/defaults.js

@@ -420,7 +420,8 @@ const options = {
   show_errors: 'interaction',
   prompt_paste_max_length_reached: false,
   remove_false_properties: false,
-  enforce_const: false
+  enforce_const: false,
+  opt_in_widget: 'checkbox'
 }
 
 /* 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.enforceConstEnabled = 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
@@ -29,6 +29,7 @@ export class AbstractEditor {
 
     this.link_watchers = []
     this.watchLoop = false
+    this.optInWidget = this.options.opt_in_widget ?? this.jsoneditor.options.opt_in_widget
 
     if (options.container) this.setContainer(options.container)
     this.registerDependencies()
@@ -216,16 +217,17 @@ export class AbstractEditor {
     this.container.setAttribute('data-schemapath', this.path)
   }
 
-  setOptInCheckbox (header) {
-    /* the active/deactive checbox control. */
+  setOptInCheckbox () {
+    let optIn
 
-    this.optInLabel = this.theme.getHiddenLabel(this.formname + ' opt-in')
-    this.optInLabel.setAttribute('for', this.formname + '-opt-in')
-    this.optInCheckbox = document.createElement('input')
-    this.optInCheckbox.setAttribute('type', 'checkbox')
-    this.optInCheckbox.setAttribute('style', 'margin: 0 10px 0 0;')
-    this.optInCheckbox.setAttribute('id', this.formname + '-opt-in')
-    this.optInCheckbox.classList.add('json-editor-opt-in')
+    if (this.optInWidget === 'switch') {
+      optIn = this.theme.getOptInSwitch(this.formname)
+    } else {
+      optIn = this.theme.getOptInCheckbox(this.formname)
+    }
+
+    this.optInCheckbox = optIn.checkbox
+    this.optInContainer = optIn.container
 
     this.optInCheckbox.addEventListener('click', () => {
       if (this.isActive()) {
@@ -240,12 +242,12 @@ export class AbstractEditor {
     const parentOptInDefined = (typeof this.parent.options.show_opt_in !== 'undefined')
     const parentOptInEnabled = (parentOptInDefined && this.parent.options.show_opt_in === true)
     const parentOptInDisabled = (parentOptInDefined && this.parent.options.show_opt_in === false)
+
     if (parentOptInEnabled || (!parentOptInDisabled && globalOptIn) || (!parentOptInDefined && globalOptIn)) {
       /* and control to type object editors if they are not required */
       if (this.parent && this.parent.schema.type === 'object' && !this.isRequired() && this.header) {
-        this.header.appendChild(this.optInLabel)
-        this.header.appendChild(this.optInCheckbox)
-        this.header.insertBefore(this.optInCheckbox, this.header.firstChild)
+        this.header.insertBefore(this.optInContainer, this.header.firstChild)
+        this.optInAppended = true
       }
     }
   }
@@ -271,7 +273,7 @@ export class AbstractEditor {
       this.theme.visuallyHidden(this.header)
     }
 
-    if (this.enforceConst && this.schema.const) {
+    if (this.enforceConstEnabled && this.schema.const) {
       this.disable()
     }
   }
@@ -583,9 +585,18 @@ export class AbstractEditor {
   }
 
   setValue (value) {
+    value = this.applyConstFilter(value)
     this.value = value
   }
 
+  applyConstFilter (value) {
+    if (this.enforceConstEnabled && typeof this.schema.const !== 'undefined') {
+      value = this.schema.const
+    }
+
+    return value
+  }
+
   getValue () {
     if (!this.dependenciesFulfilled) {
       return undefined
@@ -627,7 +638,7 @@ export class AbstractEditor {
   }
 
   getDefault () {
-    if (this.enforceConst && this.schema.const) {
+    if (this.enforceConstEnabled && this.schema.const) {
       return this.schema.const
     }
 

package/src/editors/ace.js

@@ -3,6 +3,7 @@ import { extend } from '../utilities.js'
 
 export class AceEditor extends StringEditor {
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
     const res = super.setValue(value, initial, fromTemplate)
     if (res !== undefined && res.changed && this.ace_editor_instance) {
       this.ace_editor_instance.setValue(res.value)

package/src/editors/array/choices.js

@@ -4,6 +4,7 @@ import { extend } from '../../utilities.js'
 export class ArrayChoicesEditor extends MultiSelectEditor {
   setValue (value, initial) {
     if (this.choices_instance) {
+      value = this.applyConstFilter(value)
       /* Make sure we are dealing with an array of strings so we can check for strict equality */
       value = [].concat(value).map(e => `${e}`)
 

package/src/editors/array/select2.js

@@ -3,6 +3,8 @@ import { extend, hasOwnProperty } from '../../utilities.js'
 
 export class ArraySelect2Editor extends MultiSelectEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     if (this.select2_instance) {
       /* Make sure we are dealing with an array of strings so we can check for strict equality */
       value = [].concat(value).map(e => `${e}`)

package/src/editors/array/selectize.js

@@ -3,6 +3,8 @@ import { extend } from '../../utilities.js'
 
 export class ArraySelectizeEditor extends MultiSelectEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     if (this.selectize_instance) {
       /* Make sure we are dealing with an array of strings so we can check for strict equality */
       value = [].concat(value).map(e => `${e}`)

package/src/editors/array.js

@@ -163,6 +163,7 @@ export class ArrayEditor extends AbstractEditor {
   onChildEditorChange (editor, eventData) {
     this.refreshValue()
     this.refreshTabs(true)
+    this.is_dirty = true
     super.onChildEditorChange(editor, eventData)
   }
 
@@ -348,6 +349,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   setValue (value = [], initial) {
+    value = this.applyConstFilter(value)
     /* Make sure value has between minItems and maxItems items in it */
     value = this.ensureArraySize(value)
 
@@ -500,6 +502,9 @@ export class ArrayEditor extends AbstractEditor {
         e.preventDefault()
         e.stopPropagation()
       })
+      this._supportDragDrop(this.rows[i].tab)
+    } else {
+      this._supportDragDrop(this.rows[i].container, true)
     }
 
     const controlsHolder = this.rows[i].title_controls || this.rows[i].array_controls
@@ -666,6 +671,23 @@ export class ArrayEditor extends AbstractEditor {
     return button
   }
 
+  _supportDragDrop (tab, useTrigger) {
+    supportDragDrop(tab, (i, j) => {
+      const rows = this.getValue()
+      const tmp = rows[i]
+      rows.splice(i, 1)
+      rows.splice(j, 0, tmp)
+
+      this.setValue(rows)
+      this.active_tab = this.rows[j].tab
+      this.refreshTabs()
+
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[j])
+    }, { useTrigger })
+  }
+
   addControls () {
     this.collapsed = false
     this.toggle_button = this._createToggleButton()
@@ -732,6 +754,10 @@ export class ArrayEditor extends AbstractEditor {
       if (this.row_cache[i]) {
         editor = this.rows[i] = this.row_cache[i]
         this.rows[i].setValue(this.rows[i].getDefault(), true)
+        // override cached value, so optional properties are not checked.
+        if (typeof this.rows[i].deactivateNonRequiredProperties === 'function') {
+          this.rows[i].deactivateNonRequiredProperties(true)
+        }
         this.rows[i].container.style.display = ''
         if (this.rows[i].tab) this.rows[i].tab.style.display = ''
         this.rows[i].register()
@@ -837,3 +863,58 @@ export class ArrayEditor extends AbstractEditor {
   }
 }
 ArrayEditor.rules = rules
+
+// drag/drop array item to adjust order
+// handler(fromIdx, toIdx, fromDom, toDom), opt={useTrigger}
+// useTrigger=true: pressing ctrl to enable drag
+export function supportDragDrop (tab, handler, opt = {}) {
+  if (opt.useTrigger) {
+    tab.addEventListener('mousedown', e => {
+      if (e.ctrlKey) {
+        // window.console.log('enable drag')
+        tab.draggable = true
+        const fn = e => {
+          tab.draggable = false
+          // window.console.log('disable drag')
+          document.removeEventListener('dragend', fn)
+          document.removeEventListener('mouseup', fn)
+        }
+        document.addEventListener('dragend', fn)
+        document.addEventListener('mouseup', fn)
+      }
+    })
+  } else {
+    tab.draggable = true
+  }
+  tab.addEventListener('dragstart', e => {
+    window.curDrag = tab
+  })
+  tab.addEventListener('dragover', e => {
+    if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+      e.dataTransfer.dropEffect = 'none'
+    } else {
+      e.dataTransfer.dropEffect = 'move'
+    }
+    e.preventDefault()
+  })
+  tab.addEventListener('drop', e => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+      return
+    }
+    const getPos = item => {
+      let i = 0
+      let a = item.parentElement.firstElementChild
+      while (a !== item && a !== null) {
+        a = a.nextSibling
+        ++i
+      }
+      return i
+    }
+    const i = getPos(window.curDrag)
+    const j = getPos(tab)
+    handler(i, j, window.curDrag, tab)
+    window.curDrag = null
+  })
+}

package/src/editors/base64.js

@@ -149,6 +149,8 @@ export class Base64Editor extends AbstractEditor {
   }
 
   setValue (val) {
+    val = this.applyConstFilter(val)
+
     if (this.value !== val) {
       if (this.schema.readOnly && this.schema.enum && !this.schema.enum.includes(val)) this.value = this.schema.enum[0]
       else this.value = val

package/src/editors/checkbox.js

@@ -2,6 +2,7 @@ import { AbstractEditor } from '../editor.js'
 
 export class CheckboxEditor extends AbstractEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
     value = !!value
     const changed = this.getValue() !== value
     this.value = value
@@ -32,6 +33,16 @@ export class CheckboxEditor extends AbstractEditor {
     return Math.min(12, Math.max(this.getTitle().length / 7, 2))
   }
 
+  setOptInCheckbox () {
+    super.setOptInCheckbox()
+
+    if (this.optInAppended) {
+      this.container.insertBefore(this.optInContainer, this.container.firstChild)
+      this.optInContainer.style.verticalAlign = 'top'
+      this.control.style.marginTop = '0'
+    }
+  }
+
   build () {
     if (!this.parent.options.table_row) {
       this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
@@ -45,6 +56,7 @@ export class CheckboxEditor extends AbstractEditor {
     this.input = this.theme.getCheckbox()
     this.input.id = this.formname
     this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+    this.control.style.display = 'inline-block'
 
     if (this.schema.readOnly || this.schema.readonly) {
       this.disable(true)
@@ -87,7 +99,7 @@ export class CheckboxEditor extends AbstractEditor {
     const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
     const never = showErrors === 'never'
 
-    if (never) {
+    if (never && !this.is_dirty) {
       return
     }
 

package/src/editors/choices.js

@@ -4,6 +4,8 @@ import rules from './choices.css.js'
 
 export class ChoicesEditor extends SelectEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     if (this.choices_instance) {
       /* Sanitize value before setting it */
       let sanitized = this.typecast(value || '')

package/src/editors/colorpicker.js

@@ -17,6 +17,8 @@ export class ColorEditor extends StringEditor {
   }
 
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     const res = super.setValue(value, initial, fromTemplate)
     if (this.picker_instance && this.picker_instance.domElement && res && res.changed) {
       this.picker_instance.setColor(res.value, true)

package/src/editors/datetime.js

@@ -104,6 +104,8 @@ export class DatetimeEditor extends StringEditor {
   }
 
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     if (this.schema.type === 'string') {
       super.setValue(value, initial, fromTemplate)
       if (this.flatpickr) this.flatpickr.setDate(value)

package/src/editors/describedby.js

@@ -160,6 +160,8 @@ export class DescribedByEditor extends AbstractEditor {
   }
 
   setValue (val, initial) {
+    val = this.applyConstFilter(val)
+
     if (this.editors[this.currentEditor]) {
       this.editors[this.currentEditor].setValue(val, initial)
       this.refreshValue()

package/src/editors/enum.js

@@ -12,7 +12,7 @@ export class EnumEditor extends AbstractEditor {
 
     this.options.enum_titles = this.options.enum_titles || []
 
-    if (this.enforceConst && this.schema.const) {
+    if (this.enforceConstEnabled && this.schema.const) {
       this.enum = [this.schema.const]
     } else {
       this.enum = this.schema.enum
@@ -127,6 +127,8 @@ export class EnumEditor extends AbstractEditor {
   }
 
   setValue (val) {
+    val = this.applyConstFilter(val)
+
     if (this.value !== val) {
       this.value = val
       this.refreshValue()

package/src/editors/hidden.js

@@ -19,6 +19,8 @@ export class HiddenEditor extends AbstractEditor {
   }
 
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     if (this.template && !fromTemplate) {
       return
     }

package/src/editors/jodit.js

@@ -3,6 +3,8 @@ import { extend } from '../utilities.js'
 
 export class JoditEditor extends StringEditor {
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     const res = super.setValue(value, initial, fromTemplate)
     if (res !== undefined && res.changed && this.jodit_instance) this.jodit_instance.setEditorValue(res.value)
   }

package/src/editors/multiple.js

@@ -319,6 +319,8 @@ export class MultipleEditor extends AbstractEditor {
   }
 
   setValue (val, initial) {
+    val = this.applyConstFilter(val)
+
     /* Determine type by getting the first one that validates */
 
     const prevType = this.type

package/src/editors/multiselect.js

@@ -132,6 +132,8 @@ export class MultiSelectEditor extends AbstractEditor {
   }
 
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     value = value || []
     if (!(Array.isArray(value))) value = [value]
 

package/src/editors/object.js

@@ -41,7 +41,9 @@ export class ObjectEditor extends AbstractEditor {
           if (e.isActive() || e.isUiOnly) {
             e.enable()
           }
-          e.optInCheckbox.disabled = false
+          if (e.optInCheckbox) {
+            e.optInCheckbox.disabled = false
+          }
         })
       }
     }
@@ -802,7 +804,7 @@ export class ObjectEditor extends AbstractEditor {
       this.refreshAddProperties()
 
       /* non required properties start deactivated */
-      this.deactivateNonRequiredProperties()
+      this.deactivateNonRequiredProperties(false)
     }
 
     /* Fix table cell ordering */
@@ -824,7 +826,7 @@ export class ObjectEditor extends AbstractEditor {
     }
   }
 
-  deactivateNonRequiredProperties () {
+  deactivateNonRequiredProperties (recursive) {
     /* the show_opt_in editor option is for backward compatibility */
     const globalOptIn = this.jsoneditor.options.show_opt_in
     const editorOptInDefined = (typeof this.options.show_opt_in !== 'undefined')
@@ -835,6 +837,9 @@ export class ObjectEditor extends AbstractEditor {
         if (!this.isRequiredObject(editor)) {
           this.editors[key].deactivate()
         }
+        if (recursive && typeof this.editors[key].deactivateNonRequiredProperties === 'function') {
+          this.editors[key].deactivateNonRequiredProperties(recursive)
+        }
       })
     }
   }
@@ -1291,6 +1296,8 @@ export class ObjectEditor extends AbstractEditor {
   }
 
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     value = value || {}
 
     if (typeof value !== 'object' || Array.isArray(value)) value = {}

package/src/editors/radio.js

@@ -107,6 +107,8 @@ export class RadioEditor extends SelectEditor {
   }
 
   setValue (val) {
+    val = this.applyConstFilter(val)
+
     if (typeof val !== 'string') {
       val = String(val)
     }

package/src/editors/sceditor.js

@@ -3,6 +3,8 @@ import { extend } from '../utilities.js'
 
 export class ScEditor extends StringEditor {
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     const res = super.setValue(value, initial, fromTemplate)
     if (res !== undefined && res.changed && this.sceditor_instance) this.sceditor_instance.val(res.value)
   }

package/src/editors/select.js

@@ -3,6 +3,7 @@ import { extend } from '../utilities.js'
 
 export class SelectEditor extends AbstractEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
     /* Sanitize value before setting it */
     let sanitized = this.typecast(value)
     const inEnum = (this.enum_options.length > 0 && this.enum_values.includes(sanitized))
@@ -15,10 +16,14 @@ export class SelectEditor extends AbstractEditor {
 
     if (this.value === sanitized) return
 
-    if (inEnum && this.hasPlaceholderOption) {
-      this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
-    } else {
+    const selectedIndex = this.enum_values.indexOf(sanitized)
+
+    if (inEnum && selectedIndex !== -1) {
+      this.input.value = this.enum_options[selectedIndex]
+    } else if (this.hasPlaceholderOption) {
       this.input.value = '_placeholder_'
+    } else {
+      this.input.value = sanitized
     }
 
     this.value = sanitized
@@ -362,7 +367,7 @@ export class SelectEditor extends AbstractEditor {
     const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
     const never = showErrors === 'never'
 
-    if (never) {
+    if (never && !this.is_dirty) {
       return
     }
 

package/src/editors/select2.js

@@ -3,6 +3,8 @@ import { extend, hasOwnProperty } from '../utilities.js'
 
 export class Select2Editor extends SelectEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     if (this.select2_instance) {
       if (initial) this.is_dirty = false
       else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true

package/src/editors/selectize.js

@@ -3,6 +3,8 @@ import { extend } from '../utilities.js'
 
 export class SelectizeEditor extends SelectEditor {
   setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
     if (this.selectize_instance) {
       if (initial) this.is_dirty = false
       else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true

package/src/editors/signature.js

@@ -90,6 +90,8 @@ export class SignatureEditor extends StringEditor {
   }
 
   setValue (val) {
+    val = this.applyConstFilter(val)
+
     if (typeof SignaturePad === 'function') {
       const sanitized = this.sanitize(val)
       if (this.value === sanitized) {

package/src/editors/simplemde.js

@@ -3,6 +3,8 @@ import { extend } from '../utilities.js'
 
 export class SimplemdeEditor extends StringEditor {
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     const res = super.setValue(value, initial, fromTemplate)
     if (res !== undefined && res.changed && this.simplemde_instance) this.simplemde_instance.value(res.value)
   }
@@ -74,7 +76,7 @@ export class SimplemdeEditor extends StringEditor {
 
   /* Ported from https://codemirror.net/addon/display/autorefresh.js */
   startListening (cm, state) {
-    function check () {
+    const check = () => {
       if (cm.display.wrapper.offsetHeight) {
         this.stopListening(cm, state)
         if (cm.display.lastWrapHeight !== cm.display.wrapper.clientHeight) {

package/src/editors/starrating.js

@@ -122,6 +122,8 @@ export class StarratingEditor extends StringEditor {
   }
 
   setValue (value) {
+    value = this.applyConstFilter(value)
+
     this.value = value
 
     for (let i = 0; i < this.radioGroup.length; i++) {

package/src/editors/string.js

@@ -18,6 +18,8 @@ export class StringEditor extends AbstractEditor {
   }
 
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     if (this.template && !fromTemplate) return
 
     if (!this.shouldBeUnset() && (value === null || typeof value === 'undefined')) value = ''

package/src/editors/table.js

@@ -1,4 +1,4 @@
-import { ArrayEditor } from './array.js'
+import { ArrayEditor, supportDragDrop } from './array.js'
 import { extend, generateUUID, trigger } from '../utilities.js'
 
 export class TableEditor extends ArrayEditor {
@@ -187,6 +187,8 @@ export class TableEditor extends ArrayEditor {
   }
 
   setValue (value = [], initial) {
+    value = this.applyConstFilter(value)
+
     /* Make sure value has between minItems and maxItems items in it */
     value = this.ensureArraySize(value)
 
@@ -221,7 +223,6 @@ export class TableEditor extends ArrayEditor {
     if (numrowsChanged || initial) this.refreshRowButtons()
 
     this.onChange()
-
     /* TODO: sortable */
   }
 
@@ -321,6 +322,8 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
     }
 
+    this._supportDragDrop(this.rows[i].row)
+
     if (typeof value !== 'undefined') this.rows[i].setValue(value)
 
     return this.rows[i]
@@ -434,6 +437,20 @@ export class TableEditor extends ArrayEditor {
     return button
   }
 
+  _supportDragDrop (tab) {
+    supportDragDrop(tab, (i, j) => {
+      const rows = this.getValue()
+      const tmp = rows[i]
+      rows.splice(i, 1)
+      rows.splice(j, 0, tmp)
+
+      this.setValue(rows)
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[j])
+    }, { useTrigger: true })
+  }
+
   addControls () {
     this.collapsed = false
     this.toggle_button = this._createToggleButton()