Merge pull request #423 from meirotstein/master

add support for json schema references ($ref)

docs/api.md

@@ -102,6 +102,11 @@ Constructs a new JSONEditor.
 
   See [http://json-schema.org/](http://json-schema.org/) for more information.
 
+- `{Object} schemaRefs`
+
+  Schemas that are referenced using the `$ref` property from the JSON schema that are set in the `schema` option,
+  the object structure in the form of `{reference_key: schemaObject}`
+
 - `{boolean} search`
 
   Enables a search box in the upper right corner of the JSONEditor. True by default. Only applicable when `mode` is 'tree', 'view', or 'form'.
@@ -224,7 +229,7 @@ Set a field name for the root node.
 
   Field name of the root node. If undefined, the current name will be removed.
 
-#### `JSONEditor.setSchema(schema)`
+#### `JSONEditor.setSchema(schema [,schemaRefs])`
 
 Set a JSON schema for validation of the JSON object. See also option `schema`.
 See [http://json-schema.org/](http://json-schema.org/) for more information on the JSON schema definition.
@@ -235,6 +240,10 @@ See [http://json-schema.org/](http://json-schema.org/) for more information on t
 
   A JSON schema.
 
+- `{Object} schemaRefs`
+
+  Optional, Schemas that are referenced using the `$ref` property from the JSON schema, the object structure in the form of `{reference_key: schemaObject}`
+
 #### `JSONEditor.setText(jsonString)`
 
 Set text data in the editor.

examples/07_json_schema_validation.html

@@ -47,20 +47,41 @@
         "description": "Age in years",
         "type": "integer",
         "minimum": 0
+      },
+      "job": {
+        "$ref": "job"
       }
     },
     "required": ["firstName", "lastName"]
   };
 
+  var job = {
+    "title": "Job description",
+    "type": "object",
+    "properties": {
+      "company": {
+        "type": "string"
+      },
+      "role": {
+        "type": "string"
+      }
+    }
+  };
+
   var json = {
     firstName: 'John',
     lastName: 'Doe',
     gender: null,
-    age: 28
+    age: 28,
+    job: {
+      company: 'freelance',
+      role: 'developer'
+    }
   };
 
   var options = {
-    schema: schema
+    schema: schema,
+    schemaRefs: {"job": job}
   };
 
   // create the editor

src/js/JSONEditor.js

@@ -79,7 +79,7 @@ function JSONEditor (container, options, json) {
     // validate options
     if (options) {
       var VALID_OPTIONS = [
-        'ajv', 'schema','templates',
+        'ajv', 'schema', 'schemaRefs','templates',
         'ace', 'theme','autocomplete',
         'onChange', 'onEditable', 'onError', 'onModeChange',
         'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys'
@@ -273,8 +273,10 @@ JSONEditor.prototype._onError = function(err) {
  * Set a JSON schema for validation of the JSON object.
  * To remove the schema, call JSONEditor.setSchema(null)
  * @param {Object | null} schema
+ * @param {Object.<string, Object>=} schemaRefs Schemas that are referenced using the `$ref` property from the JSON schema that are set in the `schema` option,
+ +  the object structure in the form of `{reference_key: schemaObject}`
  */
-JSONEditor.prototype.setSchema = function (schema) {
+JSONEditor.prototype.setSchema = function (schema, schemaRefs) {
   // compile a JSON schema validator if a JSON schema is provided
   if (schema) {
     var ajv;
@@ -288,11 +290,20 @@ JSONEditor.prototype.setSchema = function (schema) {
     }
 
     if (ajv) {
-        this.validateSchema = ajv.compile(schema);
+      if(schemaRefs) {
+        for (var ref in schemaRefs) {
+          ajv.removeSchema(ref);  // When updating a schema - old refs has to be removed first
+          if(schemaRefs[ref]) {
+            ajv.addSchema(schemaRefs[ref], ref);
+          }
+        }
+        this.options.schemaRefs = schemaRefs;
+      }
+      this.validateSchema = ajv.compile(schema);
 
-        // add schema to the options, so that when switching to an other mode,
-        // the set schema is not lost
-        this.options.schema = schema;
+      // add schema to the options, so that when switching to an other mode,
+      // the set schema is not lost
+      this.options.schema = schema;
 
       // validate now
       this.validate();
@@ -304,6 +315,7 @@ JSONEditor.prototype.setSchema = function (schema) {
     // remove current schema
     this.validateSchema = null;
     this.options.schema = null;
+    this.options.schemaRefs = null;
     this.validate(); // to clear current error messages
     this.refresh();  // update DOM
   }

src/js/textmode.js

@@ -220,7 +220,7 @@ textmode.create = function (container, options) {
     }
   }
 
-  this.setSchema(this.options.schema);
+  this.setSchema(this.options.schema, this.options.schemaRefs);
 };
 
 /**

src/js/treemode.js

@@ -112,6 +112,7 @@ treemode._setOptions = function (options) {
     mode: 'tree',
     name: undefined,   // field name of root node
     schema: null,
+    schemaRefs: null,
     autocomplete: null
   };
 
@@ -125,7 +126,7 @@ treemode._setOptions = function (options) {
   }
 
   // compile a JSON schema validator if a JSON schema is provided
-  this.setSchema(this.options.schema);
+  this.setSchema(this.options.schema, this.options.schemaRefs);
 
   // create a debounced validate function
   this._debouncedValidate = util.debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL);

test/test_schema.html

@@ -57,22 +57,27 @@
         "minimum": 0
       },
       "hobbies": {
-        "type": "array",
-        "items": {
-          "type": "string"
-        }
+        "$ref": "hobbies.json"
       }
     },
     "required": ["firstName", "lastName"]
   };
 
+  var hobbiesSchema = {
+    "type": "array",
+    "items": {
+      "type": "string"
+    }
+  };
+
   var options = {
     mode: 'tree',
     modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
     onError: function (err) {
       console.error(err);
     },
-    schema: schema
+    schema: schema,
+    schemaRefs: {"hobbies.json": hobbiesSchema}
   };
 
   var json = {