@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/src/core.js

@@ -1,635 +1,435 @@
-var JSONEditor = function(element,options) {
-  if (!(element instanceof Element)) {
-    throw new Error('element should be an instance of Element');
-  }
-  options = $extend({},JSONEditor.defaults.options,options||{});
-  this.element = element;
-  this.options = options;
-  this.init();
-};
-JSONEditor.prototype = {
-  // necessary since we remove the ctor property by doing a literal assignment. Without this
-  // the $isplainobject function will think that this is a plain object.
-  constructor: JSONEditor,
-  init: function() {
-    var self = this;
-    
-    this.ready = false;
-    this.copyClipboard = null;
-    // full references info
-    this.refs_with_info = {};
-    this.refs_prefix = "#/counter/";
-    this.refs_counter = 1;
-
-    var theme_class = JSONEditor.defaults.themes[this.options.theme || JSONEditor.defaults.theme];
-    if(!theme_class) throw "Unknown theme " + (this.options.theme || JSONEditor.defaults.theme);
-    
-    this.schema = this.options.schema;
-    this.theme = new theme_class();
-    this.template = this.options.template;
-    this.refs = this.options.refs || {};
-    this.uuid = 0;
-    this.__data = {};
-    
-    var icon_class = JSONEditor.defaults.iconlibs[this.options.iconlib || JSONEditor.defaults.iconlib];
-    if(icon_class) this.iconlib = new icon_class();
-
-    this.root_container = this.theme.getContainer();
-    this.element.appendChild(this.root_container);
-    
-    this.translate = this.options.translate || JSONEditor.defaults.translate;
-
-    // Fetch all external refs via ajax
-    var fetchUrl = document.location.toString();
-    var fileBase = this._getFileBase();
-    this._loadExternalRefs(this.schema, function() {
-      self._getDefinitions(self.schema, fetchUrl + '#/definitions/');
-      
-      // Validator options
-      var validator_options = {};
-      if(self.options.custom_validators) {
-        validator_options.custom_validators = self.options.custom_validators;
-      }
-      self.validator = new JSONEditor.Validator(self,null,validator_options);
-      
-      // Create the root editor
-      var schema = self.expandRefs(self.schema);
-      var editor_class = self.getEditorClass(schema);
-      self.root = self.createEditor(editor_class, {
-        jsoneditor: self,
-        schema: schema,
-        required: true,
-        container: self.root_container
-      });
-      
-      self.root.preBuild();
-      self.root.build();
-      self.root.postBuild();
-
-      // Starting data
-      if(self.options.hasOwnProperty('startval')) self.root.setValue(self.options.startval);
-
-      self.validation_results = self.validator.validate(self.root.getValue());
-      self.root.showValidationErrors(self.validation_results);
-      self.ready = true;
-
-      // Fire ready event asynchronously
-      window.requestAnimationFrame(function() {
-        if(!self.ready) return;
-        self.validation_results = self.validator.validate(self.root.getValue());
-        self.root.showValidationErrors(self.validation_results);
-        self.trigger('ready');
-        self.trigger('change');
-      });
-    }, fetchUrl, fileBase);
-  },
-  getValue: function() {
-    if(!this.ready) throw "JSON Editor not ready yet.  Listen for 'ready' event before getting the value";
-
-    return this.root.getValue();
-  },
-  setValue: function(value) {
-    if(!this.ready) throw "JSON Editor not ready yet.  Listen for 'ready' event before setting the value";
-
-    this.root.setValue(value);
-    return this;
-  },
-  validate: function(value) {
-    if(!this.ready) throw "JSON Editor not ready yet.  Listen for 'ready' event before validating";
-    
-    // Custom value
-    if(arguments.length === 1) {
-      return this.validator.validate(value);
-    }
-    // Current value (use cached result)
-    else {
-      return this.validation_results;
-    }
-  },
-  destroy: function() {
-    if(this.destroyed) return;
-    if(!this.ready) return;
-    
-    this.schema = null;
-    this.options = null;
-    this.root.destroy();
-    this.root = null;
-    this.root_container = null;
-    this.validator = null;
-    this.validation_results = null;
-    this.theme = null;
-    this.iconlib = null;
-    this.template = null;
-    this.__data = null;
-    this.ready = false;
-    this.element.innerHTML = '';
-    
-    this.destroyed = true;
-  },
-  on: function(event, callback) {
-    this.callbacks = this.callbacks || {};
-    this.callbacks[event] = this.callbacks[event] || [];
-    this.callbacks[event].push(callback);
-    
-    return this;
-  },
-  off: function(event, callback) {
-    // Specific callback
-    if(event && callback) {
-      this.callbacks = this.callbacks || {};
-      this.callbacks[event] = this.callbacks[event] || [];
-      var newcallbacks = [];
-      for(var i=0; i<this.callbacks[event].length; i++) {
-        if(this.callbacks[event][i]===callback) continue;
-        newcallbacks.push(this.callbacks[event][i]);
-      }
-      this.callbacks[event] = newcallbacks;
-    }
-    // All callbacks for a specific event
-    else if(event) {
-      this.callbacks = this.callbacks || {};
-      this.callbacks[event] = [];
-    }
-    // All callbacks for all events
-    else {
-      this.callbacks = {};
-    }
-    
-    return this;
-  },
-  trigger: function(event) {
-    if(this.callbacks && this.callbacks[event] && this.callbacks[event].length) {
-      for(var i=0; i<this.callbacks[event].length; i++) {
-        this.callbacks[event][i].apply(this, []);
-      }
-    }
-    
-    return this;
-  },
-  setOption: function(option, value) {
-    if(option === "show_errors") {
-      this.options.show_errors = value;
-      this.onChange();
-    }
-    // Only the `show_errors` option is supported for now
-    else {
-      throw "Option "+option+" must be set during instantiation and cannot be changed later";
-    }
-    
-    return this;
-  },
-  getEditorClass: function(schema) {
-    var classname;
-
-    schema = this.expandSchema(schema);
-
-    $each(JSONEditor.defaults.resolvers,function(i,resolver) {
-      var tmp = resolver(schema);
-      if(tmp) {
-        if(JSONEditor.defaults.editors[tmp]) {
-          classname = tmp;
-          return false;
-        }
-      }
-    });
-
-    if(!classname) throw "Unknown editor for schema "+JSON.stringify(schema);
-    if(!JSONEditor.defaults.editors[classname]) throw "Unknown editor "+classname;
-
-    return JSONEditor.defaults.editors[classname];
-  },
-  createEditor: function(editor_class, options) {
-    options = $extend({},editor_class.options||{},options);
-    return new editor_class(options);
-  },
-  onChange: function() {
-    if(!this.ready) return;
-    
-    if(this.firing_change) return;
-    this.firing_change = true;
-    
-    var self = this;
-    
-    window.requestAnimationFrame(function() {
-      self.firing_change = false;
-      if(!self.ready) return;
-
-      // Validate and cache results
-      self.validation_results = self.validator.validate(self.root.getValue());
-      
-      if(self.options.show_errors !== "never") {
-        self.root.showValidationErrors(self.validation_results);
-      }
-      else {
-        self.root.showValidationErrors([]);
+import { defaults } from './defaults.js'
+import { Validator } from './validator.js'
+import { SchemaLoader } from './schemaloader.js'
+import { editors } from './editors/index.js'
+import { templates } from './templates/index.js'
+import { iconlibs } from './iconlibs/index.js'
+import { themes } from './themes/index.js'
+import { extend, getShadowParent, hasOwnProperty } from './utilities.js'
+import { AbstractEditor } from './editor'
+import { AbstractTheme } from './theme'
+import { AbstractIconLib } from './iconlib'
+import styleRules from './style.css.js'
+
+export class JSONEditor {
+  constructor (element, options = {}) {
+    if (!(element instanceof Element)) throw new Error('element should be an instance of Element')
+
+    this.element = element
+    this.options = extend({}, JSONEditor.defaults.options, options)
+    this.ready = false
+    this.copyClipboard = null
+    this.schema = this.options.schema
+    this.template = this.options.template
+    this.translate = this.options.translate || JSONEditor.defaults.translate
+    this.translateProperty = this.options.translateProperty || JSONEditor.defaults.translateProperty
+    this.uuid = 0
+    this.__data = {}
+    const themeName = this.options.theme || JSONEditor.defaults.theme
+    const themeClass = JSONEditor.defaults.themes[themeName]
+
+    /* 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())
+
+    /* Call addNewStyleRulesToShadowRoot if shadowRoot is found, otherwise call addNewStyleRules */
+    const addRules = (themeName, rules, shadowRoot) => shadowRoot
+      ? this.addNewStyleRulesToShadowRoot(themeName, rules, shadowRoot)
+      : this.addNewStyleRules(themeName, rules)
+
+    if (!this.theme.options.disable_theme_rules) {
+      /* Attempt to locate a shadowRoot parent (i.e. in Web Components) */
+      const shadowRoot = getShadowParent(this.element)
+      addRules('default', rules, shadowRoot)
+      if (typeof themeClass.rules !== 'undefined') {
+        addRules(themeName, themeClass.rules, shadowRoot)
       }
-      
-      // Fire change event
-      self.trigger('change');
-    });
-    
-    return this;
-  },
-  compileTemplate: function(template, name) {
-    name = name || JSONEditor.defaults.template;
-
-    var engine;
-
-    // Specifying a preset engine
-    if(typeof name === 'string') {
-      if(!JSONEditor.defaults.templates[name]) throw "Unknown template engine "+name;
-      engine = JSONEditor.defaults.templates[name]();
-
-      if(!engine) throw "Template engine "+name+" missing required library.";
-    }
-    // Specifying a custom engine
-    else {
-      engine = name;
     }
 
-    if(!engine) throw "No template engine set";
-    if(!engine.compile) throw "Invalid template engine set";
-
-    return engine.compile(template);
-  },
-  _data: function(el,key,value) {
-    // Setting data
-    if(arguments.length === 3) {
-      var uuid;
-      if(el.hasAttribute('data-jsoneditor-'+key)) {
-        uuid = el.getAttribute('data-jsoneditor-'+key);
-      }
-      else {
-        uuid = this.uuid++;
-        el.setAttribute('data-jsoneditor-'+key,uuid);
-      }
+    /* Init icon class */
+    const iconClass = JSONEditor.defaults.iconlibs[this.options.iconlib || JSONEditor.defaults.iconlib]
+    // eslint-disable-next-line new-cap
+    if (iconClass) this.iconlib = new iconClass()
 
-      this.__data[uuid] = value;
-    }
-    // Getting data
-    else {
-      // No data stored
-      if(!el.hasAttribute('data-jsoneditor-'+key)) return null;
-      
-      return this.__data[el.getAttribute('data-jsoneditor-'+key)];
-    }
-  },
-  registerEditor: function(editor) {
-    this.editors = this.editors || {};
-    this.editors[editor.path] = editor;
-    return this;
-  },
-  unregisterEditor: function(editor) {
-    this.editors = this.editors || {};
-    this.editors[editor.path] = null;
-    return this;
-  },
-  getEditor: function(path) {
-    if(!this.editors) return;
-    return this.editors[path];
-  },
-  watch: function(path,callback) {
-    this.watchlist = this.watchlist || {};
-    this.watchlist[path] = this.watchlist[path] || [];
-    this.watchlist[path].push(callback);
-    
-    return this;
-  },
-  unwatch: function(path,callback) {
-    if(!this.watchlist || !this.watchlist[path]) return this;
-    // If removing all callbacks for a path
-    if(!callback) {
-      this.watchlist[path] = null;
-      return this;
-    }
-    
-    var newlist = [];
-    for(var i=0; i<this.watchlist[path].length; i++) {
-      if(this.watchlist[path][i] === callback) continue;
-      else newlist.push(this.watchlist[path][i]);
+    this.root_container = this.theme.getContainer()
+    this.element.appendChild(this.root_container)
+    this.promise = this.load()
+  }
+
+  async load () {
+    const fetchUrl = document.location.origin + document.location.pathname.toString()
+    const loader = new SchemaLoader(this.options)
+
+    loader.onSchemaLoaded = (payload) => {
+      this.trigger('schemaLoaded', payload)
     }
-    this.watchlist[path] = newlist.length? newlist : null;
-    return this;
-  },
-  notifyWatchers: function(path) {
-    if(!this.watchlist || !this.watchlist[path]) return this;
-    for(var i=0; i<this.watchlist[path].length; i++) {
-      this.watchlist[path][i]();
+
+    loader.onAllSchemasLoaded = () => {
+      this.trigger('allSchemasLoaded')
     }
-  },
-  isEnabled: function() {
-    return !this.root || this.root.isEnabled();
-  },
-  enable: function() {
-    this.root.enable();
-  },
-  disable: function() {
-    this.root.disable();
-  },
-  _getDefinitions: function(schema,path) {
-    if(schema.definitions) {
-      for(var i in schema.definitions) {
-        if(!schema.definitions.hasOwnProperty(i)) continue;
-        this.refs[path+i] = schema.definitions[i];
-        if(schema.definitions[i].definitions) {
-          this._getDefinitions(schema.definitions[i],path+i+'/definitions/');
-        }
-      }
+
+    this.expandSchema = (schema) => loader.expandSchema(schema)
+    this.expandRefs = (schema, fileBase) => loader.expandRefs(schema, fileBase)
+    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.preBuild()
+    this.root.build()
+    this.root.postBuild()
+
+    /* 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.trigger('ready')
+      this.trigger('change')
+    })
+  }
+
+  getValue () {
+    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. 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. Make sure the load method is complete')
+
+    /* Custom value */
+    if (arguments.length === 1) {
+      return this.validator.validate(value)
+      /* Current value (use cached result) */
+    } else {
+      return this.validation_results
     }
-  },
-  _getExternalRefs: function(schema, fetchUrl) {
-    var refs = {};
-    var merge_refs = function(newrefs) {
-      for(var i in newrefs) {
-        if(newrefs.hasOwnProperty(i)) {
-          refs[i] = true;
-        }
-      }
-    };
-    
-    if(schema.$ref && typeof schema.$ref !== "object") {
-      var ref_counter = this.refs_prefix + this.refs_counter++;
-      if(schema.$ref.substr(0,1) !== "#" && !this.refs[schema.$ref]) {
-        refs[schema.$ref] = true;
+  }
+
+  destroy () {
+    if (this.destroyed) return
+    if (!this.ready) return
+
+    this.schema = null
+    this.options = null
+    this.root.destroy()
+    this.root = null
+    this.root_container = null
+    this.validator = null
+    this.validation_results = null
+    this.theme = null
+    this.iconlib = null
+    this.template = null
+    this.__data = null
+    this.ready = false
+    this.element.innerHTML = ''
+    this.element.removeAttribute('data-theme')
+    this.destroyed = true
+  }
+
+  on (event, callback) {
+    this.callbacks = this.callbacks || {}
+    this.callbacks[event] = this.callbacks[event] || []
+    this.callbacks[event].push(callback)
+
+    return this
+  }
+
+  off (event, callback) {
+    /* Specific callback */
+    if (event && callback) {
+      this.callbacks = this.callbacks || {}
+      this.callbacks[event] = this.callbacks[event] || []
+      const newcallbacks = []
+      for (let i = 0; i < this.callbacks[event].length; i++) {
+        if (this.callbacks[event][i] === callback) continue
+        newcallbacks.push(this.callbacks[event][i])
       }
-      this.refs_with_info[ref_counter] = { fetchUrl: fetchUrl, "$ref": schema.$ref };
-      schema.$ref = ref_counter;
+      this.callbacks[event] = newcallbacks
+    } else if (event) {
+      /* All callbacks for a specific event */
+      this.callbacks = this.callbacks || {}
+      this.callbacks[event] = []
+    } else {
+      /* All callbacks for all events */
+      this.callbacks = {}
     }
-    
-    for(var i in schema) {
-      if(!schema.hasOwnProperty(i)) continue;
-      if (!schema[i] || typeof schema[i] !== "object") continue;
-      if(Array.isArray(schema[i])) {
-        for(var j=0; j<schema[i].length; j++) {
-          if(schema[i][j] && typeof schema[i][j]==="object") {
-            merge_refs(this._getExternalRefs(schema[i][j], fetchUrl));
-          }
-        }
-      }
-      else {
-        merge_refs(this._getExternalRefs(schema[i], fetchUrl));
+
+    return this
+  }
+
+  trigger (event, editor) {
+    if (this.callbacks && this.callbacks[event] && this.callbacks[event].length) {
+      for (let i = 0; i < this.callbacks[event].length; i++) {
+        this.callbacks[event][i].apply(this, [editor])
       }
     }
-    return refs;
-  },
-  _getFileBase: function() {
-    var fileBase = this.options.ajaxBase;
-    if (typeof fileBase === 'undefined') {
-      fileBase = this._getFileBaseFromFileLocation(document.location.toString());
-    }
-    return fileBase;
-  },
-  _getFileBaseFromFileLocation: function(fileLocationString) {
-    var pathItems = fileLocationString.split("/");
-    pathItems.pop();
-    return pathItems.join("/")+"/";
-  },
-  _loadExternalRefs: function(schema, callback, fetchUrl, fileBase) {
-    var self = this;
-    var refs = this._getExternalRefs(schema, fetchUrl);
-    var done = 0, waiting = 0, callback_fired = false;
-
-    $each(refs,function(url) {
-      if(self.refs[url]) return;
-      if(!self.options.ajax) throw "Must set ajax option to true to load external ref "+url;
-      self.refs[url] = 'loading';
-      waiting++;
-
-      var fetchUrl=url;
-      if( fileBase!=url.substr(0,fileBase.length) && "http"!=url.substr(0,4) && "/"!=url.substr(0,1)) fetchUrl=fileBase+url;
-
-      var r = new XMLHttpRequest();
-      r.overrideMimeType('application/json');
-      r.open("GET", fetchUrl, true);
-      if(self.options.ajaxCredentials) r.withCredentials=self.options.ajaxCredentials;
-      r.onreadystatechange = function () {
-        if (r.readyState != 4) return;
-        // Request succeeded
-        if(r.status === 200) {
-          var response;
-          try {
-            response = JSON.parse(r.responseText);
-          }
-          catch(e) {
-            window.console.log(e);
-            throw "Failed to parse external ref "+fetchUrl;
-          }
-          if (!(typeof response === "boolean" || typeof response === "object") || response === null || Array.isArray(response)) throw "External ref does not contain a valid schema - "+fetchUrl;  
-
-          self.refs[url] = response;
-          var fileBase = self._getFileBaseFromFileLocation(fetchUrl);
-          self._getDefinitions(response, fetchUrl + "#/definitions/");
-          self._loadExternalRefs(response,function() {
-            done++;
-            if(done >= waiting && !callback_fired) {
-              callback_fired = true;
-              callback();
-            }
-          }, fetchUrl, fileBase);
-        }
-        // Request failed
-        else {
-          window.console.log(r);
-          throw "Failed to fetch ref via ajax- "+url;
-        }
-      };
-      r.send();
-    });
-    
-    if(!waiting) {
-      callback();
+
+    return this
+  }
+
+  setOption (option, value) {
+    if (option === 'show_errors') {
+      this.options.show_errors = value
+      this.onChange()
+    } else {
+      /* Only the `show_errors` option is supported for now */
+      throw new Error(`Option ${option} must be set during instantiation and cannot be changed later`)
     }
-  },
-  expandRefs: function(schema) {
-    schema = $extend({},schema);
-    
-    while (schema.$ref) {
-      var refObj = this.refs_with_info[schema.$ref];
-      delete schema.$ref;
-      var fetchUrl = "";
-      if (refObj.$ref.startsWith("#")) {
-        fetchUrl = refObj.fetchUrl;
-      }
-      var ref = fetchUrl + refObj.$ref;
-      if(!this.refs[ref]) ref = fetchUrl + decodeURIComponent(refObj.$ref);
-      schema = this.extendSchemas(schema, $extend({},this.refs[ref]));
+
+    return this
+  }
+
+  getEditorsRules () {
+    const extendRule = (rules, editorClass) => editorClass.rules ? extend(rules, editorClass.rules) : rules
+    return Object.values(JSONEditor.defaults.editors).reduce(extendRule, {})
+  }
+
+  getEditorClass (schema) {
+    let classname
+
+    schema = this.expandSchema(schema)
+
+    JSONEditor.defaults.resolvers.find(resolver => {
+      classname = resolver(schema, this)
+      return classname && JSONEditor.defaults.editors[classname]
+    })
+    if (!classname) throw new Error(`Unknown editor for schema ${JSON.stringify(schema)}`)
+    if (!JSONEditor.defaults.editors[classname]) throw new Error(`Unknown editor ${classname}`)
+    return JSONEditor.defaults.editors[classname]
+  }
+
+  createEditor (editorClass, options, depthCounter = 1) {
+    options = extend({}, editorClass.options || {}, options)
+    // eslint-disable-next-line new-cap
+    return new editorClass(options, JSONEditor.defaults, depthCounter)
+  }
+
+  onChange (eventData) {
+    if (!this.ready) return
+
+    if (eventData) {
+      this.trigger(eventData.event, eventData.data)
     }
-    return schema;
-  },
-  expandSchema: function(schema, fileBase) {
-    var self = this;
-    var extended = $extend({},schema);
-    var i;
-
-    // Version 3 `type`
-    if(typeof schema.type === 'object') {
-      // Array of types
-      if(Array.isArray(schema.type)) {
-        $each(schema.type, function(key,value) {
-          // Schema
-          if(typeof value === 'object') {
-            schema.type[key] = self.expandSchema(value);
-          }
-        });
-      }
-      // Schema
-      else {
-        schema.type = self.expandSchema(schema.type);
+
+    if (this.firing_change) return
+    this.firing_change = true
+
+    window.requestAnimationFrame(() => {
+      this.firing_change = false
+      if (!this.ready) return
+
+      /* Validate and cache results */
+      this.validation_results = this.validator.validate(this.root.getValue())
+
+      if (this.options.show_errors !== 'never') {
+        this.root.showValidationErrors(this.validation_results)
+      } else {
+        this.root.showValidationErrors([])
       }
+
+      /* Fire change event */
+      this.trigger('change')
+    })
+
+    return this
+  }
+
+  compileTemplate (template, name = JSONEditor.defaults.template) {
+    let engine
+
+    /* Specifying a preset engine */
+    if (typeof name === 'string') {
+      if (!JSONEditor.defaults.templates[name]) throw new Error(`Unknown template engine ${name}`)
+      engine = JSONEditor.defaults.templates[name]()
+
+      if (!engine) throw new Error(`Template engine ${name} missing required library.`)
+    } else {
+      /* Specifying a custom engine */
+      engine = name
     }
-    // Version 3 `disallow`
-    if(typeof schema.disallow === 'object') {
-      // Array of types
-      if(Array.isArray(schema.disallow)) {
-        $each(schema.disallow, function(key,value) {
-          // Schema
-          if(typeof value === 'object') {
-            schema.disallow[key] = self.expandSchema(value);
-          }
-        });
-      }
-      // Schema
-      else {
-        schema.disallow = self.expandSchema(schema.disallow);
+
+    if (!engine) throw new Error('No template engine set')
+    if (!engine.compile) throw new Error('Invalid template engine set')
+
+    return engine.compile(template)
+  }
+
+  _data (el, key, value) {
+    /* Setting data */
+    if (arguments.length === 3) {
+      let uuid
+      if (el.hasAttribute(`data-jsoneditor-${key}`)) {
+        uuid = el.getAttribute(`data-jsoneditor-${key}`)
+      } else {
+        uuid = this.uuid++
+        el.setAttribute(`data-jsoneditor-${key}`, uuid)
       }
+
+      this.__data[uuid] = value
+    } else {
+      /* Getting data */
+      /* No data stored */
+      if (!el.hasAttribute(`data-jsoneditor-${key}`)) return null
+
+      return this.__data[el.getAttribute(`data-jsoneditor-${key}`)]
     }
-    // Version 4 `anyOf`
-    if(schema.anyOf) {
-      $each(schema.anyOf, function(key,value) {
-        schema.anyOf[key] = self.expandSchema(value);
-      });
-    }
-    // Version 4 `dependencies` (schema dependencies)
-    if(schema.dependencies) {
-      $each(schema.dependencies,function(key,value) {
-        if(typeof value === "object" && !(Array.isArray(value))) {
-          schema.dependencies[key] = self.expandSchema(value);
-        }
-      });
+  }
+
+  registerEditor (editor) {
+    this.editors = this.editors || {}
+    this.editors[editor.path] = editor
+    return this
+  }
+
+  unregisterEditor (editor) {
+    this.editors = this.editors || {}
+    this.editors[editor.path] = null
+    return this
+  }
+
+  getEditor (path) {
+    if (!this.editors) return
+    return this.editors[path]
+  }
+
+  watch (path, callback) {
+    this.watchlist = this.watchlist || {}
+    this.watchlist[path] = this.watchlist[path] || []
+    this.watchlist[path].push(callback)
+
+    return this
+  }
+
+  unwatch (path, callback) {
+    if (!this.watchlist || !this.watchlist[path]) return this
+    /* If removing all callbacks for a path */
+    if (!callback) {
+      this.watchlist[path] = null
+      return this
     }
-    // Version 4 `not`
-    if(schema.not) {
-      schema.not = this.expandSchema(schema.not);
+
+    const newlist = []
+    for (let i = 0; i < this.watchlist[path].length; i++) {
+      if (this.watchlist[path][i] === callback) continue
+      else newlist.push(this.watchlist[path][i])
     }
-    
-    // allOf schemas should be merged into the parent
-    if(schema.allOf) {
-      for(i=0; i<schema.allOf.length; i++) {
-        extended = this.extendSchemas(extended,this.expandSchema(schema.allOf[i]));
-      }
-      delete extended.allOf;
+    this.watchlist[path] = newlist.length ? newlist : null
+    return this
+  }
+
+  notifyWatchers (path) {
+    if (!this.watchlist || !this.watchlist[path]) return this
+    for (let i = 0; i < this.watchlist[path].length; i++) {
+      this.watchlist[path][i]()
     }
-    // extends schemas should be merged into parent
-    if(schema["extends"]) {
-      // If extends is a schema
-      if(!(Array.isArray(schema["extends"]))) {
-        extended = this.extendSchemas(extended,this.expandSchema(schema["extends"]));
-      }
-      // If extends is an array of schemas
-      else {
-        for(i=0; i<schema["extends"].length; i++) {
-          extended = this.extendSchemas(extended,this.expandSchema(schema["extends"][i]));
-        }
-      }
-      delete extended["extends"];
+  }
+
+  isEnabled () {
+    return !this.root || this.root.isEnabled()
+  }
+
+  enable () {
+    this.root.enable()
+  }
+
+  disable () {
+    this.root.disable()
+  }
+
+  setCopyClipboardContents (value) {
+    this.copyClipboard = value
+  }
+
+  getCopyClipboardContents () {
+    return this.copyClipboard
+  }
+
+  addNewStyleRules (themeName, rules) {
+    let styleTag = document.querySelector(`#theme-${themeName}`)
+
+    if (!styleTag) {
+      styleTag = document.createElement('style')
+      styleTag.setAttribute('id', `theme-${themeName}`)
+      styleTag.appendChild(document.createTextNode(''))
+      document.head.appendChild(styleTag)
     }
-    // parent should be merged into oneOf schemas
-    if(schema.oneOf) {
-      var tmp = $extend({},extended);
-      delete tmp.oneOf;
-      for(i=0; i<schema.oneOf.length; i++) {
-        extended.oneOf[i] = this.extendSchemas(this.expandSchema(schema.oneOf[i]),tmp);
-      }
+
+    const sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet
+    const qualifier = this.element.nodeName.toLowerCase()
+    while (sheet.cssRules.length > 0) {
+      sheet.deleteRule(0)
     }
-    
-    return this.expandRefs(extended);
-  },
-  extendSchemas: function(obj1, obj2) {
-    obj1 = $extend({},obj1);
-    obj2 = $extend({},obj2);
-
-    var self = this;
-    var extended = {};
-    $each(obj1, function(prop,val) {
-      // If this key is also defined in obj2, merge them
-      if(typeof obj2[prop] !== "undefined") {
-        // Required and defaultProperties arrays should be unioned together
-        if((prop === 'required'||prop === 'defaultProperties') && typeof val === "object" && Array.isArray(val)) {
-          // Union arrays and unique
-          extended[prop] = val.concat(obj2[prop]).reduce(function(p, c) {
-            if (p.indexOf(c) < 0) p.push(c);
-            return p;
-          }, []);
-        }
-        // Type should be intersected and is either an array or string
-        else if(prop === 'type' && (typeof val === "string" || Array.isArray(val))) {
-          // Make sure we're dealing with arrays
-          if(typeof val === "string") val = [val];
-          if(typeof obj2.type === "string") obj2.type = [obj2.type];
-
-          // If type is only defined in the first schema, keep it
-          if(!obj2.type || !obj2.type.length) {
-            extended.type = val;
-          }
-          // If type is defined in both schemas, do an intersect
-          else {
-            extended.type = val.filter(function(n) {
-              return obj2.type.indexOf(n) !== -1;
-            });
-          }
-
-          // If there's only 1 type and it's a primitive, use a string instead of array
-          if(extended.type.length === 1 && typeof extended.type[0] === "string") {
-            extended.type = extended.type[0];
-          }
-          // Remove the type property if it's empty
-          else if(extended.type.length === 0) {
-            delete extended.type;
-          }
-        }
-        // All other arrays should be intersected (enum, etc.)
-        else if(typeof val === "object" && Array.isArray(val)){
-          extended[prop] = val.filter(function(n) {
-            return obj2[prop].indexOf(n) !== -1;
-          });
-        }
-        // Objects should be recursively merged
-        else if(typeof val === "object" && val !== null) {
-          extended[prop] = self.extendSchemas(val,obj2[prop]);
-        }
-        // Otherwise, use the first value
-        else {
-          extended[prop] = val;
-        }
-      }
-      // Otherwise, just use the one in obj1
-      else {
-        extended[prop] = val;
-      }
-    });
-    // Properties in obj2 that aren't in obj1
-    $each(obj2, function(prop,val) {
-      if(typeof obj1[prop] === "undefined") {
-        extended[prop] = val;
+    Object.keys(rules).forEach(selector => {
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
+
+      // all browsers, except IE before version 9
+      if (sheet.insertRule) sheet.insertRule(sel + ' {' + decodeURIComponent(rules[selector]) + '}', 0)
+      // Internet Explorer before version 9
+      else if (sheet.addRule) sheet.addRule(sel, decodeURIComponent(rules[selector]), 0)
+    })
+  }
+
+  addNewStyleRulesToShadowRoot (themeName, rules, shadowRoot) {
+    const qualifier = this.element.nodeName.toLowerCase()
+    let cssText = ''
+
+    Object.keys(rules).forEach(selector => {
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
+      cssText += sel + ' {' + decodeURIComponent(rules[selector]) + '}' + '\n'
+    })
+    const styleSheet = new CSSStyleSheet()
+    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)
       }
-    });
-
-    return extended;
-  },
-  setCopyClipboardContents: function(value) {
-    this.copyClipboard = value;
-  },
-  getCopyClipboardContents: function() {
-    return this.copyClipboard;
+    })
   }
-};
-
-JSONEditor.defaults = {
-  themes: {},
-  templates: {},
-  iconlibs: {},
-  editors: {},
-  languages: {},
-  resolvers: [],
-  custom_validators: []
-};
+}
+
+JSONEditor.defaults = defaults
+JSONEditor.AbstractEditor = AbstractEditor
+JSONEditor.AbstractTheme = AbstractTheme
+JSONEditor.AbstractIconLib = AbstractIconLib
+
+Object.assign(JSONEditor.defaults.themes, themes)
+Object.assign(JSONEditor.defaults.editors, editors)
+Object.assign(JSONEditor.defaults.templates, templates)
+Object.assign(JSONEditor.defaults.iconlibs, iconlibs)