Merge remote-tracking branch 'origin/develop' into develop

Author: josdejong

src/js/textmode.js

@@ -97,7 +97,7 @@ textmode.create = function (container, options = {}) {
   this.lastSchemaErrors = undefined
 
   // create a debounced validate function
-  this._debouncedValidate = debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL)
+  this._debouncedValidate = debounce(this._validateAndCatch.bind(this), this.DEBOUNCE_INTERVAL)
 
   this.width = container.clientWidth
   this.height = container.clientHeight
@@ -324,7 +324,7 @@ textmode.create = function (container, options = {}) {
   this.errorTable = new ErrorTable({
     errorTableVisible: this.mode === 'text',
     onToggleVisibility: function () {
-      me.validate()
+      me._validateAndCatch()
     },
     onFocusLine: function (line) {
       me.isFocused = true
@@ -863,22 +863,22 @@ textmode.validate = function () {
     this.validationSequence = (this.validationSequence || 0) + 1
     const me = this
     const seq = this.validationSequence
-    validateCustom(json, this.options.onValidate)
+    return validateCustom(json, this.options.onValidate)
       .then(customValidationErrors => {
         // only apply when there was no other validation started whilst resolving async results
         if (seq === me.validationSequence) {
           const errors = schemaErrors.concat(parseErrors).concat(customValidationErrors)
           me._renderErrors(errors)
-          if (typeof this.options.onValidationError === 'function') {
-            if (isValidationErrorChanged(errors, this.lastSchemaErrors)) {
-              this.options.onValidationError.call(this, errors)
-            }
-            this.lastSchemaErrors = errors
+          if (
+            typeof this.options.onValidationError === 'function' &&
+            isValidationErrorChanged(errors, this.lastSchemaErrors)
+          ) {
+            this.options.onValidationError.call(this, errors)
           }
+          this.lastSchemaErrors = errors
         }
-      })
-      .catch(err => {
-        console.error('Custom validation function did throw an error', err)
+
+        return this.lastSchemaErrors
       })
   } catch (err) {
     if (this.getText()) {
@@ -897,15 +897,24 @@ textmode.validate = function () {
 
     this._renderErrors(parseErrors)
 
-    if (typeof this.options.onValidationError === 'function') {
-      if (isValidationErrorChanged(parseErrors, this.lastSchemaErrors)) {
-        this.options.onValidationError.call(this, parseErrors)
-      }
-      this.lastSchemaErrors = parseErrors
+    if (
+      typeof this.options.onValidationError === 'function' &&
+      isValidationErrorChanged(parseErrors, this.lastSchemaErrors)
+    ) {
+      this.options.onValidationError.call(this, parseErrors)
     }
+    this.lastSchemaErrors = parseErrors
+
+    return Promise.resolve(this.lastSchemaErrors)
   }
 }
 
+textmode._validateAndCatch = function () {
+  this.validate().catch(err => {
+    console.error('Error running validation:', err)
+  })
+}
+
 textmode._renderErrors = function (errors) {
   const jsonText = this.getText()
   const errorPaths = []

src/js/treemode.js

@@ -182,7 +182,7 @@ treemode._setOptions = function (options) {
   this.setSchema(this.options.schema, this.options.schemaRefs)
 
   // create a debounced validate function
-  this._debouncedValidate = debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL)
+  this._debouncedValidate = debounce(this._validateAndCatch.bind(this), this.DEBOUNCE_INTERVAL)
 
   if (options.onSelectionChange) {
     this.onSelectionChange(options.onSelectionChange)
@@ -214,7 +214,7 @@ treemode.set = function (json) {
     this._setRoot(node)
 
     // validate JSON schema (if configured)
-    this.validate()
+    this._validateAndCatch()
 
     // expand
     const recurse = false
@@ -254,7 +254,7 @@ treemode.update = function (json) {
   this.onChangeDisabled = false
 
   // validate JSON schema
-  this.validate()
+  this._validateAndCatch()
 
   // update search result if any
   if (this.searchBox && !this.searchBox.isEmpty()) {
@@ -588,28 +588,35 @@ treemode.validate = function () {
     this.validationSequence++
     const me = this
     const seq = this.validationSequence
-    this._validateCustom(json)
+    return this._validateCustom(json)
       .then(customValidationErrors => {
         // only apply when there was no other validation started whilst resolving async results
         if (seq === me.validationSequence) {
           const errorNodes = [].concat(schemaErrors, customValidationErrors || [])
           me._renderValidationErrors(errorNodes)
-          if (typeof this.options.onValidationError === 'function') {
-            if (isValidationErrorChanged(errorNodes, this.lastSchemaErrors)) {
-              this.options.onValidationError.call(this, errorNodes)
-            }
-            this.lastSchemaErrors = errorNodes
+          if (
+            typeof this.options.onValidationError === 'function' &&
+            isValidationErrorChanged(errorNodes, this.lastSchemaErrors)
+          ) {
+            this.options.onValidationError.call(this, errorNodes)
           }
+
+          this.lastSchemaErrors = errorNodes
         }
-      })
-      .catch(err => {
-        console.error(err)
+
+        return this.lastSchemaErrors
       })
   } catch (err) {
-    console.error(err)
+    return Promise.reject(err)
   }
 }
 
+treemode._validateAndCatch = function () {
+  this.validate().catch(err => {
+    console.error('Error running validation:', err)
+  })
+}
+
 treemode._renderValidationErrors = function (errorNodes) {
   // clear all current errors
   if (this.errorNodes) {

src/scss/jsoneditor/_editor.scss

@@ -208,6 +208,7 @@ div {
         margin: 0 4px 0 0;
         background-image: $jse-icons-url;
         background-position: -168px -48px;
+        background-color: transparent;
       }
     }
   }
@@ -536,11 +537,13 @@ pre.jsoneditor-preview,
     .jsoneditor-schema-error {
       background-image: $jse-icons-url;
       background-position: -168px -48px;
+      background-color: transparent;
     }
     &.parse-error {
       .jsoneditor-schema-error {
         background-image: $jse-icons-url;
         background-position: -25px 0px;
+        background-color: transparent;
       }
     }
   }

test/test_schema.html

@@ -79,19 +79,29 @@
   };
 
   var options = {
-    mode: 'tree',
+    mode: 'code',
     modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
+    schema: schema,
+    schemaRefs: {"hobbies.json": hobbiesSchema},
     onError: function (err) {
-      console.error(err);
+      console.error('ERROR', err);
     },
-    schema: schema,
-    schemaRefs: {"hobbies.json": hobbiesSchema}
+    onChange: async () => {
+      const errors = await editor.validate()
+      if (errors.length === 0) {
+        console.log('validation errors: NONE')
+        // do something, like persisting the JSON
+      } else {
+        // show error to the user or something
+        console.log('validation errors', errors)
+      }
+    }
   };
 
   var json = {
     "firstName": "Jos",
     "lastName": "de Jong",
-    gender: null,
+    "gender": null,
     "age": 34.2,
     "hobbies": [
         "programming",