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

package/src/editor.js

@@ -1,625 +1,814 @@
+import { extend, hasOwnProperty } from './utilities.js'
+
 /**
  * All editors should extend from this class
  */
-JSONEditor.AbstractEditor = Class.extend({
-  onChildEditorChange: function(editor) {
-    this.onChange(true);
-  },
-  notify: function() {
-    if(this.path) this.jsoneditor.notifyWatchers(this.path);
-  },
-  change: function() {
-    if(this.parent) this.parent.onChildEditorChange(this);
-    else if(this.jsoneditor) this.jsoneditor.onChange();
-  },
-  onChange: function(bubble) {
-    this.notify();
-    if(this.watch_listener) this.watch_listener();
-    if(bubble) this.change();
-  },
-  register: function() {
-    this.jsoneditor.registerEditor(this);
-    this.onChange();
-  },
-  unregister: function() {
-    if(!this.jsoneditor) return;
-    this.jsoneditor.unregisterEditor(this);
-  },
-  getNumColumns: function() {
-    return 12;
-  },
-  isActive: function() {
-    return this.active;
-  },
-  activate: function() {
-    this.active = true;
-    this.optInCheckbox.checked = true;
-    this.enable();
-    this.change();
-  },
-  deactivate: function() {
-    // only non required properties can be deactivated.
-    if (!this.isRequired()) {
-      this.active = false;
-      this.optInCheckbox.checked = false;
-      this.disable();
-      this.change();
+export class AbstractEditor {
+  constructor (options, defaults) {
+    this.defaults = defaults
+    this.jsoneditor = options.jsoneditor
+    this.theme = this.jsoneditor.theme
+    this.template_engine = this.jsoneditor.template
+    this.iconlib = this.jsoneditor.iconlib
+    this.translate = this.jsoneditor.translate || this.defaults.translate
+    this.translateProperty = this.jsoneditor.translateProperty || this.defaults.translateProperty
+    this.original_schema = options.schema
+    this.schema = this.jsoneditor.expandSchema(this.original_schema)
+    this.active = true
+    this.isUiOnly = false
+    this.options = extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options)
+    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
+    this.path = options.path || this.formname
+    this.formname = options.formname || this.path.replace(/\.([^.]+)/g, '[$1]')
+
+    this.parent = options.parent
+    this.key = this.parent !== undefined ? this.path.split('.').slice(this.parent.path.split('.').length).join('.') : this.path
+
+    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()
+  }
+
+  onChildEditorChange (editor, eventData) {
+    this.onChange(true, false, eventData)
+  }
+
+  notify () {
+    if (this.path) this.jsoneditor.notifyWatchers(this.path)
+  }
+
+  change (eventData) {
+    if (this.parent) this.parent.onChildEditorChange(this, eventData)
+    else if (this.jsoneditor) this.jsoneditor.onChange(eventData)
+  }
+
+  onChange (bubble, fromTemplate, eventData) {
+    this.notify()
+
+    if (!fromTemplate) {
+      if (this.watch_listener) this.watch_listener()
     }
-  },
-  init: function(options) {
-    this.jsoneditor = options.jsoneditor;
 
-    this.theme = this.jsoneditor.theme;
-    this.template_engine = this.jsoneditor.template;
-    this.iconlib = this.jsoneditor.iconlib;
+    if (bubble) this.change(eventData)
+  }
 
-    this.translate = this.jsoneditor.translate || JSONEditor.defaults.translate;
+  register () {
+    this.jsoneditor.registerEditor(this)
+    if (this.input && !this.label) {
+      const ariaLabel = this.getTitle() || this.formname
+      this.input.setAttribute('aria-label', ariaLabel)
+    }
+    this.onChange()
+  }
+
+  unregister () {
+    if (!this.jsoneditor) return
+    this.jsoneditor.unregisterEditor(this)
+  }
+
+  getNumColumns () {
+    return 12
+  }
+
+  isActive () {
+    return this.active
+  }
+
+  activate () {
+    this.active = true
+    this.optInCheckbox.checked = true
+    this.enable()
+    this.change()
+  }
+
+  deactivate () {
+    /* only non required properties can be deactivated. */
+    if (!this.isRequired()) {
+      this.active = false
+      this.optInCheckbox.checked = false
+      this.disable()
+      this.change()
+    }
+  }
 
-    this.original_schema = options.schema;
-    this.schema = this.jsoneditor.expandSchema(this.original_schema);
+  registerDependencies () {
+    this.dependenciesFulfilled = true
+    const deps = this.options.dependencies
+    if (!deps) {
+      return
+    }
 
-    this.active = true;
+    Object.keys(deps).forEach(dependency => {
+      let path
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path)
 
-    this.options = $extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options);
+      if (isFullPath) {
+        path = dependency
+      } else {
+        path = this.path.split('.')
+        path[path.length - 1] = dependency
+        path = path.join('.')
+      }
 
-    if(!options.path && !this.schema.id) this.schema.id = 'root';
-    this.path = options.path || 'root';
-    this.formname = options.formname || this.path.replace(/\.([^.]+)/g,'[$1]');
-    if(this.jsoneditor.options.form_name_root) this.formname = this.formname.replace(/^root\[/,this.jsoneditor.options.form_name_root+'[');
-    this.key = this.path.split('.').pop();
-    this.parent = options.parent;
+      this.jsoneditor.watch(path, () => {
+        this.evaluateDependencies()
+      })
+    })
+  }
 
-    this.link_watchers = [];
+  evaluateDependencies () {
+    const wrapper = this.container || this.control
+    if (!wrapper || this.jsoneditor === null) {
+      return
+    }
 
-    if(options.container) this.setContainer(options.container);
-    this.registerDependencies();
-  },
-  registerDependencies: function() {
-    this.dependenciesFulfilled = true;
-    var deps = this.options.dependencies;
+    const deps = this.options.dependencies
     if (!deps) {
-      return;
-    }
-
-    var self = this;
-    Object.keys(deps).forEach(function(dependency) {
-      var path = self.path.split('.');
-      path[path.length - 1] = dependency;
-      path = path.join('.');
-      var choices = deps[dependency];
-      self.jsoneditor.watch(path, function() {
-        self.checkDependency(path, choices);
-      });
-    });
-  },
-  checkDependency: function(path, choices) {
-    var wrapper = this.container || this.control;
-    if (this.path === path || !wrapper || this.jsoneditor === null) {   
-      return;
-    }
-
-    var self = this;
-    var editor = this.jsoneditor.getEditor(path);
-    var value = editor ? editor.getValue() : undefined;
-    var previousStatus = this.dependenciesFulfilled;
-    this.dependenciesFulfilled = false;
-
-    if (!editor || !editor.dependenciesFulfilled) {
-      this.dependenciesFulfilled = false;
+      return
+    }
+
+    // Assume true and set to false if any unmet dependencies are found
+    const previousStatus = this.dependenciesFulfilled
+    this.dependenciesFulfilled = true
+
+    Object.keys(deps).forEach(dependency => {
+      let path
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path)
+
+      if (isFullPath) {
+        path = dependency
+      } else {
+        path = this.path.split('.')
+        path[path.length - 1] = dependency
+        path = path.join('.')
+      }
+
+      const choices = deps[dependency]
+      this.checkDependency(path, choices)
+    })
+
+    if (this.dependenciesFulfilled !== previousStatus) {
+      this.notify()
+    }
+
+    let displayMode = this.dependenciesFulfilled ? 'block' : 'none'
+
+    if (this.options.hidden) {
+      displayMode = 'none'
+    }
+
+    if (wrapper.tagName === 'TD') {
+      Object.keys(wrapper.childNodes).forEach(child => (wrapper.childNodes[child].style.display = displayMode))
+    } else wrapper.style.display = displayMode
+  }
+
+  checkDependency (path, choices) {
+    if (this.path === path || this.jsoneditor === null) {
+      return
+    }
+
+    const editor = this.jsoneditor.getEditor(path)
+    const value = editor ? editor.getValue() : undefined
+
+    if (!editor || !editor.dependenciesFulfilled || value === undefined || value === null) {
+      this.dependenciesFulfilled = false
     } else if (Array.isArray(choices)) {
-      choices.some(function(choice) {
-        if (value === choice) {
-          self.dependenciesFulfilled = true;
-          return true;
+      this.dependenciesFulfilled = choices.some(choice => {
+        if (JSON.stringify(value) === JSON.stringify(choice)) {
+          return true
         }
-      });
+      })
     } else if (typeof choices === 'object') {
       if (typeof value !== 'object') {
-        this.dependenciesFulfilled = choices === value;
+        this.dependenciesFulfilled = choices === value
       } else {
-        Object.keys(choices).some(function(key) {
-          if (!choices.hasOwnProperty(key)) {
-            return false;
+        Object.keys(choices).some(key => {
+          if (!hasOwnProperty(choices, key)) {
+            return false
           }
-          if (!value.hasOwnProperty(key) || choices[key] !== value[key]) {
-            self.dependenciesFulfilled = false;
-            return true;
+          if (!hasOwnProperty(value, key) || choices[key] !== value[key]) {
+            this.dependenciesFulfilled = false
+            return true
           }
-          self.dependenciesFulfilled = true;
-        });
+        })
       }
     } else if (typeof choices === 'string' || typeof choices === 'number') {
-      this.dependenciesFulfilled = value === choices;
+      this.dependenciesFulfilled = this.dependenciesFulfilled && value === choices
     } else if (typeof choices === 'boolean') {
       if (choices) {
-        this.dependenciesFulfilled = value && value.length > 0;
+        this.dependenciesFulfilled = this.dependenciesFulfilled && (value || value.length > 0)
       } else {
-        this.dependenciesFulfilled = !value || value.length === 0;
+        this.dependenciesFulfilled = this.dependenciesFulfilled && (!value || value.length === 0)
       }
     }
+  }
 
-    if (this.dependenciesFulfilled !== previousStatus) {
-      this.notify();
-    }
+  setContainer (container) {
+    this.container = container
+    this.setContainerAttributes()
+    if (this.schema.id) this.container.setAttribute('data-schemaid', this.schema.id)
+    if (this.schema.type && typeof this.schema.type === 'string') this.container.setAttribute('data-schematype', this.schema.type)
+    this.container.setAttribute('data-schemapath', this.path)
+  }
+
+  setOptInCheckbox () {
+    let optIn
 
-    if (this.dependenciesFulfilled) {
-      wrapper.style.display = 'block';
+    if (this.optInWidget === 'switch') {
+      optIn = this.theme.getOptInSwitch(this.formname)
     } else {
-      wrapper.style.display = 'none';
-    }
-  },
-  setContainer: function(container) {
-    this.container = container;
-    if(this.schema.id) this.container.setAttribute('data-schemaid',this.schema.id);
-    if(this.schema.type && typeof this.schema.type === "string") this.container.setAttribute('data-schematype',this.schema.type);
-    this.container.setAttribute('data-schemapath',this.path);
-  },
-  setOptInCheckbox: function(header) {
-    // the active/deactive checbox control.
-    var self = this;
-    this.optInCheckbox = document.createElement('input');
-    this.optInCheckbox.setAttribute('type', 'checkbox');
-    this.optInCheckbox.setAttribute('style', 'margin: 0 10px 0 0;');
-    this.optInCheckbox.classList.add('json-editor-opt-in');
-
-    this.optInCheckbox.addEventListener('click', function () {
-      if (self.isActive()) {
-        self.deactivate();
+      optIn = this.theme.getOptInCheckbox(this.formname)
+    }
+
+    this.optInCheckbox = optIn.checkbox
+    this.optInContainer = optIn.container
+
+    this.optInCheckbox.addEventListener('click', () => {
+      if (this.isActive()) {
+        this.deactivate()
       } else {
-        self.activate();
+        this.activate()
       }
-    });
+    })
+
+    /* append active/deactive checkbox if show_opt_in is true */
+    const globalOptIn = this.jsoneditor.options.show_opt_in
+    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)
 
-    // append active/deactive checkbox if show_opt_in is true
-    if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {
-      // and control to type object editors if they are not required
+    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.optInCheckbox);
-        this.header.insertBefore(this.optInCheckbox, this.header.firstChild);
+        this.header.insertBefore(this.optInContainer, this.header.firstChild)
+        this.optInAppended = true
       }
     }
+  }
 
-  },
-  preBuild: function() {
-
-  },
-  build: function() {
-
-  },
-  postBuild: function() {
-    this.setupWatchListeners();
-    this.addLinks();
-    this.setValue(this.getDefault(), true);
-    this.updateHeaderText();
-    this.register();
-    this.onWatchedFieldChange();
-  },
-  setupWatchListeners: function() {
-    var self = this;
-
-    // Watched fields
-    this.watched = {};
-    if(this.schema.vars) this.schema.watch = this.schema.vars;
-    this.watched_values = {};
-    this.watch_listener = function() {
-      if(self.refreshWatchedFieldValues()) {
-        self.onWatchedFieldChange();
-      }
-    };
+  preBuild () {
 
-    if(this.schema.hasOwnProperty('watch')) {
-      var path,path_parts,first,root,adjusted_path;
+  }
 
-      for(var name in this.schema.watch) {
-        if(!this.schema.watch.hasOwnProperty(name)) continue;
-        path = this.schema.watch[name];
+  build () {
 
-        if(Array.isArray(path)) {
-          if(path.length<2) continue;
-          path_parts = [path[0]].concat(path[1].split('.'));
-        }
-        else {
-          path_parts = path.split('.');
-          if(!self.theme.closest(self.container,'[data-schemaid="'+path_parts[0]+'"]')) path_parts.unshift('#');
+  }
+
+  postBuild () {
+    this.setupWatchListeners()
+    this.addLinks()
+    this.register()
+    this.setValue(this.getDefault(), true)
+    this.updateHeaderText()
+    this.onWatchedFieldChange()
+
+    if (this.options.titleHidden) {
+      this.theme.visuallyHidden(this.label)
+      this.theme.visuallyHidden(this.header)
+    }
+
+    if (this.enforceConstEnabled && this.schema.const) {
+      this.disable()
+    }
+  }
+
+  setupWatchListeners () {
+    /* Watched fields */
+    this.watched = {}
+    if (this.schema.vars) this.schema.watch = this.schema.vars
+    this.watched_values = {}
+    this.watch_listener = () => {
+      if (this.refreshWatchedFieldValues()) {
+        this.onWatchedFieldChange()
+      }
+    }
+
+    if (hasOwnProperty(this.schema, 'watch')) {
+      let path; let pathParts; let first; let root; let adjustedPath
+      const myPath = this.container.getAttribute('data-schemapath')
+
+      Object.keys(this.schema.watch).forEach(name => {
+        path = this.schema.watch[name]
+        if (Array.isArray(path)) {
+          if (path.length < 2) return
+          pathParts = [path[0]].concat(path[1].split('.'))
+        } else {
+          pathParts = path.split('.')
+          if (!this.theme.closest(this.container, `[data-schemaid="${pathParts[0]}"]`)) pathParts.unshift('#')
         }
-        first = path_parts.shift();
+        first = pathParts.shift()
 
-        if(first === '#') first = self.jsoneditor.schema.id || 'root';
+        if (first === '#') first = this.jsoneditor.schema.id || this.jsoneditor.root.formname
 
-        // Find the root node for this template variable
-        root = self.theme.closest(self.container,'[data-schemaid="'+first+'"]');
-        if(!root) throw "Could not find ancestor node with id "+first;
+        /* Find the root node for this template variable */
+        root = this.theme.closest(this.container, `[data-schemaid="${first}"]`)
+        if (!root) throw new Error(`Could not find ancestor node with id ${first}`)
 
-        // Keep track of the root node and path for use when rendering the template
-        adjusted_path = root.getAttribute('data-schemapath') + '.' + path_parts.join('.');
+        /* Keep track of the root node and path for use when rendering the template */
+        adjustedPath = `${root.getAttribute('data-schemapath')}.${pathParts.join('.')}`
 
-        self.jsoneditor.watch(adjusted_path,self.watch_listener);
+        if (myPath.startsWith(adjustedPath)) this.watchLoop = true
+        this.jsoneditor.watch(adjustedPath, this.watch_listener)
 
-        self.watched[name] = adjusted_path;
-      }
+        this.watched[name] = adjustedPath
+      })
     }
 
-    // Dynamic header
-    if(this.schema.headerTemplate) {
-      this.header_template = this.jsoneditor.compileTemplate(this.schema.headerTemplate, this.template_engine);
+    /* Dynamic header */
+    if (this.schema.headerTemplate) {
+      this.header_template = this.jsoneditor.compileTemplate(this.schema.headerTemplate, this.template_engine)
     }
-  },
+  }
 
-  addLinks: function() {
-    // Add links
-    if(!this.no_link_holder) {
-      this.link_holder = this.theme.getLinksHolder();
-      this.container.appendChild(this.link_holder);
-      if(this.schema.links) {
-        for(var i=0; i<this.schema.links.length; i++) {
-          this.addLink(this.getLink(this.schema.links[i]));
+  addLinks () {
+    /* Add links */
+    if (!this.no_link_holder) {
+      this.link_holder = this.theme.getLinksHolder()
+      /* if description element exists, insert the link before */
+      if (typeof this.description !== 'undefined') this.description.parentNode.insertBefore(this.link_holder, this.description)
+      /* otherwise just insert link at bottom of container */
+      else this.container.appendChild(this.link_holder)
+      if (this.schema.links) {
+        for (let i = 0; i < this.schema.links.length; i++) {
+          this.addLink(this.getLink(this.schema.links[i]))
         }
       }
     }
-  },
-  onMove: function() {},
-  getButton: function(text, icon, title) {
-    var btnClass = 'json-editor-btn-'+icon;
-    if(!this.iconlib) icon = null;
-    else icon = this.iconlib.getIcon(icon);
-
-    if(!icon && title) {
-      text = title;
-      title = null;
-    }
-
-    var btn = this.theme.getButton(text, icon, title);
-    btn.classList.add(btnClass);
-    return btn;
-  },
-  setButtonText: function(button, text, icon, title) {
-    if(!this.iconlib) icon = null;
-    else icon = this.iconlib.getIcon(icon);
-
-    if(!icon && title) {
-      text = title;
-      title = null;
-    }
-
-    return this.theme.setButtonText(button, text, icon, title);
-  },
-  addLink: function(link) {
-    if(this.link_holder) this.link_holder.appendChild(link);
-  },
-  getLink: function(data) {
-    var holder, link;
-
-    // Get mime type of the link
-    var mime = data.mediaType || 'application/javascript';
-    var type = mime.split('/')[0];
-
-    // Template to generate the link href
-    var href = this.jsoneditor.compileTemplate(data.href,this.template_engine);
-    var relTemplate = this.jsoneditor.compileTemplate(data.rel ? data.rel : data.href,this.template_engine);
-
-    // Template to generate the link's download attribute
-    var download = null;
-    if(data.download) download = data.download;
-
-    if(download && download !== true) {
-      download = this.jsoneditor.compileTemplate(download, this.template_engine);
-    }
-
-    // Image links
-    if(type === 'image') {
-      holder = this.theme.getBlockLinkHolder();
-      link = document.createElement('a');
-      link.setAttribute('target','_blank');
-      var image = document.createElement('img');
-
-      this.theme.createImageLink(holder,link,image);
-
-      // When a watched field changes, update the url
-      this.link_watchers.push(function(vars) {
-        var url = href(vars);
-        var rel = relTemplate(vars);
-        link.setAttribute('href',url);
-        link.setAttribute('title',rel || url);
-        image.setAttribute('src',url);
-      });
-    }
-    // Audio/Video links
-    else if(['audio','video'].indexOf(type) >=0) {
-      holder = this.theme.getBlockLinkHolder();
-
-      link = this.theme.getBlockLink();
-      link.setAttribute('target','_blank');
-
-      var media = document.createElement(type);
-      media.setAttribute('controls','controls');
-
-      this.theme.createMediaLink(holder,link,media);
-
-      // When a watched field changes, update the url
-      this.link_watchers.push(function(vars) {
-        var url = href(vars);
-        var rel = relTemplate(vars);
-        link.setAttribute('href',url);
-        link.textContent = rel || url;
-        media.setAttribute('src',url);
-      });
-    }
-    // Text links
-    else {
-      link = holder = this.theme.getBlockLink();
-      holder.setAttribute('target','_blank');
-      holder.textContent = data.rel;
-
-      // When a watched field changes, update the url
-      this.link_watchers.push(function(vars) {
-        var url = href(vars);
-        var rel = relTemplate(vars);
-        holder.setAttribute('href',url);
-        holder.textContent = rel || url;
-      });
-    }
-
-    if(download && link) {
-      if(download === true) {
-        link.setAttribute('download','');
-      }
-      else {
-        this.link_watchers.push(function(vars) {
-          link.setAttribute('download',download(vars));
-        });
-      }
+  }
+
+  onMove () {}
+
+  getButton (text, icon, title, args = []) {
+    const btnClass = `json-editor-btn-${icon}`
+    if (!this.iconlib) icon = null
+    else icon = this.iconlib.getIcon(icon)
+
+    text = this.translate(text, args)
+    title = this.translate(title, args)
+
+    if (!icon && title) {
+      text = title
+      title = null
+    }
+
+    const btn = this.theme.getButton(text, icon, title)
+    btn.classList.add(btnClass)
+    return btn
+  }
+
+  setButtonText (button, text, icon, title, args = []) {
+    if (!this.iconlib) icon = null
+    else icon = this.iconlib.getIcon(icon)
+
+    text = this.translate(text, args)
+    title = this.translate(title, args)
+
+    if (!icon && title) {
+      text = title
+      title = null
+    }
+
+    return this.theme.setButtonText(button, text, icon, title)
+  }
+
+  addLink (link) {
+    if (this.link_holder) this.link_holder.appendChild(link)
+  }
+
+  getLink (data) {
+    let holder
+    let link
+
+    /* Get mime type of the link */
+    const mime = data.mediaType || 'application/javascript'
+    const type = mime.split('/')[0]
+
+    /* Template to generate the link href */
+    const href = this.jsoneditor.compileTemplate(data.href, this.template_engine)
+    const relTemplate = this.jsoneditor.compileTemplate(data.rel ? data.rel : data.href, this.template_engine)
+
+    /* Template to generate the link's download attribute */
+    let download = null
+    if (data.download) download = data.download
+
+    if (download && download !== true) {
+      download = this.jsoneditor.compileTemplate(download, this.template_engine)
     }
 
-    if(data.class) link.classList.add(data.class);
-
-    return holder;
-  },
-  refreshWatchedFieldValues: function() {
-    if(!this.watched_values) return;
-    var watched = {};
-    var changed = false;
-    var self = this;
-
-    if(this.watched) {
-      var val,editor;
-      for(var name in this.watched) {
-        if(!this.watched.hasOwnProperty(name)) continue;
-        editor = self.jsoneditor.getEditor(this.watched[name]);
-        val = editor? editor.getValue() : null;
-        if(self.watched_values[name] !== val) changed = true;
-        watched[name] = val;
+    /* Image links */
+    if (type === 'image') {
+      holder = this.theme.getBlockLinkHolder()
+      link = document.createElement('a')
+      link.setAttribute('target', '_blank')
+      const image = document.createElement('img')
+
+      this.theme.createImageLink(holder, link, image)
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars)
+        const rel = relTemplate(vars)
+        link.setAttribute('href', url)
+        link.setAttribute('title', rel || url)
+        image.setAttribute('src', url)
+      })
+    /* Audio/Video links */
+    } else if (['audio', 'video'].includes(type)) {
+      holder = this.theme.getBlockLinkHolder()
+
+      link = this.theme.getBlockLink()
+      link.setAttribute('target', '_blank')
+
+      const media = document.createElement(type)
+      media.setAttribute('controls', 'controls')
+
+      this.theme.createMediaLink(holder, link, media)
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars)
+        const rel = relTemplate(vars)
+        link.setAttribute('href', url)
+        link.textContent = rel || url
+        media.setAttribute('src', url)
+      })
+    /* Text links or blank link */
+    } else {
+      link = holder = this.theme.getBlockLink()
+      holder.setAttribute('target', '_blank')
+      holder.textContent = data.rel
+      holder.style.display = 'none' /* Prevent blank links from showing up when using custom view */
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars)
+        const rel = relTemplate(vars)
+        if (url) holder.style.display = ''
+        holder.setAttribute('href', url)
+        holder.textContent = rel || url
+      })
+    }
+
+    if (download && link) {
+      if (download === true) {
+        link.setAttribute('download', '')
+      } else {
+        this.link_watchers.push(vars => {
+          link.setAttribute('download', download(vars))
+        })
       }
     }
 
-    watched.self = this.getValue();
-    if(this.watched_values.self !== watched.self) changed = true;
-
-    this.watched_values = watched;
-
-    return changed;
-  },
-  getWatchedFieldValues: function() {
-    return this.watched_values;
-  },
-  updateHeaderText: function() {
-    if(this.header) {
-      var header_text = this.getHeaderText();
-      // If the header has children, only update the text node's value
-      if(this.header.children.length) {
-        for(var i=0; i<this.header.childNodes.length; i++) {
-          if(this.header.childNodes[i].nodeType===3) {
-            this.header.childNodes[i].nodeValue = this.cleanText(header_text);
-            break;
+    if (data.class) {
+      const classNames = data.class.split(' ')
+
+      classNames.forEach((className) => {
+        link.classList.add(className)
+      })
+    }
+
+    return holder
+  }
+
+  refreshWatchedFieldValues () {
+    if (!this.watched_values) return
+    const watched = {}
+    let changed = false
+
+    if (this.watched) {
+      Object.keys(this.watched).forEach(name => {
+        const editor = this.jsoneditor.getEditor(this.watched[name])
+        const val = editor ? editor.getValue() : null
+        if (this.watched_values[name] !== val) changed = true
+        watched[name] = val
+      })
+    }
+
+    watched.self = this.getValue()
+    if (this.watched_values.self !== watched.self) changed = true
+
+    this.watched_values = watched
+
+    return changed
+  }
+
+  getWatchedFieldValues () {
+    return this.watched_values
+  }
+
+  updateHeaderText () {
+    if (this.header) {
+      const headerText = this.getHeaderText()
+      /* If the header has children, only update the text node's value */
+      if (this.header.children.length) {
+        for (let i = 0; i < this.header.childNodes.length; i++) {
+          if (this.header.childNodes[i].nodeType === 3) {
+            this.header.childNodes[i].nodeValue = this.cleanText(headerText)
+            break
           }
         }
+      /* Otherwise, just update the entire node */
+      } else {
+        if (window.DOMPurify) this.header.innerHTML = window.DOMPurify.sanitize(headerText)
+        else this.header.textContent = this.cleanText(headerText)
       }
-      // Otherwise, just update the entire node
-      else {
-        if (window.DOMPurify) this.header.innerHTML = window.DOMPurify.sanitize(header_text);
-        else this.header.textContent = this.cleanText(header_text);
-      }
     }
-  },
-  getHeaderText: function(title_only) {
-    if(this.header_text) return this.header_text;
-    else if(title_only) return this.schema.title;
-    else return this.getTitle();
-  },
-  cleanText: function(txt) {
-    // Clean out HTML tags from txt
-    var tmp = document.createElement('div');
-    tmp.innerHTML = txt;
-    return (tmp.textContent || tmp.innerText);
-  },
-  onWatchedFieldChange: function() {
-    var vars;
-    if(this.header_template) {
-      vars = $extend(this.getWatchedFieldValues(),{
+  }
+
+  purify (val) {
+    if (typeof val !== 'string') {
+      return val
+    }
+
+    if (window.DOMPurify) {
+      val = window.DOMPurify.sanitize(val)
+    } else {
+      val = this.cleanText(val)
+    }
+
+    return val
+  }
+
+  getHeaderText (titleOnly) {
+    if (this.header_text) return this.header_text
+    else if (titleOnly) return this.translateProperty(this.schema.title)
+    else return this.getTitle()
+  }
+
+  getPathDepth () {
+    return this.path.split('.').length
+  }
+
+  cleanText (txt) {
+    /* Clean out HTML tags from txt */
+    const tmp = document.createElement('div')
+    tmp.innerHTML = txt
+    return (tmp.textContent || tmp.innerText)
+  }
+
+  onWatchedFieldChange () {
+    let vars
+
+    if (this.header_template) {
+      vars = extend(this.getWatchedFieldValues(), {
         key: this.key,
         i: this.key,
-        i0: (this.key*1),
-        i1: (this.key*1+1),
+        i0: (this.key * 1),
+        i1: (this.key * 1 + 1),
         title: this.getTitle()
-      });
-      var header_text = this.header_template(vars);
-
-      if(header_text !== this.header_text) {
-        this.header_text = header_text;
-        this.updateHeaderText();
-        this.notify();
-        //this.fireChangeHeaderEvent();
+      })
+
+      // object properties
+      if (this.editors && Object.keys(this.editors).length) {
+        vars.properties = {}
+
+        Object.keys(this.editors).forEach((key) => {
+          const editor = this.editors[key]
+
+          if (editor.schema && editor.schema.enum && editor.schema.options && editor.schema.options.enum_titles) {
+            const enumIndex = editor.schema.enum.indexOf(editor.value)
+            const enumTitle = editor.options.enum_titles[enumIndex]
+            vars.properties[key] = {
+              enumTitle
+            }
+          }
+        })
+      }
+
+      const headerText = this.header_template(vars)
+
+      if (headerText !== this.header_text) {
+        this.header_text = headerText
+        this.updateHeaderText()
+        this.notify()
+        /* this.fireChangeHeaderEvent(); */
       }
     }
-    if(this.link_watchers.length) {
-      vars = this.getWatchedFieldValues();
-      for(var i=0; i<this.link_watchers.length; i++) {
-        this.link_watchers[i](vars);
+    if (this.link_watchers.length) {
+      vars = this.getWatchedFieldValues()
+      for (let i = 0; i < this.link_watchers.length; i++) {
+        this.link_watchers[i](vars)
       }
     }
-  },
-  setValue: function(value) {
-    this.value = value;
-  },
-  getValue: function() {
+  }
+
+  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;
-    }
-    return this.value;
-  },
-  refreshValue: function() {
-
-  },
-  getChildEditors: function() {
-    return false;
-  },
-  destroy: function() {
-    var self = this;
-    this.unregister(this);
-    $each(this.watched,function(name,adjusted_path) {
-      self.jsoneditor.unwatch(adjusted_path,self.watch_listener);
-    });
-    this.watched = null;
-    this.watched_values = null;
-    this.watch_listener = null;
-    this.header_text = null;
-    this.header_template = null;
-    this.value = null;
-    if(this.container && this.container.parentNode) this.container.parentNode.removeChild(this.container);
-    this.container = null;
-    this.jsoneditor = null;
-    this.schema = null;
-    this.path = null;
-    this.key = null;
-    this.parent = null;
-  },
-  getDefault: function() {
-    if (typeof this.schema["default"] !== 'undefined') {
-      return this.schema["default"];
-    }
-
-    if (typeof this.schema["enum"] !== 'undefined') {
-      return this.schema["enum"][0];
-    }
-
-    var type = this.schema.type || this.schema.oneOf;
-    if(type && Array.isArray(type)) type = type[0];
-    if(type && typeof type === "object") type = type.type;
-    if(type && Array.isArray(type)) type = type[0];
-
-    if(typeof type === "string") {
-      if(type === "number") return 0.0;
-      if(type === "boolean") return false;
-      if(type === "integer") return 0;
-      if(type === "string") return "";
-      if(type === "object") return {};
-      if(type === "array") return [];
-    }
-
-    return null;
-  },
-  getTitle: function() {
-    return this.schema.title || this.key;
-  },
-  enable: function() {
-    this.disabled = false;
-  },
-  disable: function() {
-    this.disabled = true;
-  },
-  isEnabled: function() {
-    return !this.disabled;
-  },
-  isRequired: function() {
-    if(typeof this.schema.required === "boolean") return this.schema.required;
-    else if(this.parent && this.parent.schema && Array.isArray(this.parent.schema.required)) return this.parent.schema.required.indexOf(this.key) > -1;
-    else if(this.jsoneditor.options.required_by_default) return true;
-    else return false;
-  },
-  getDisplayText: function(arr) {
-    var disp = [];
-    var used = {};
-
-    // Determine how many times each attribute name is used.
-    // This helps us pick the most distinct display text for the schemas.
-    $each(arr,function(i,el) {
-      if(el.title) {
-        used[el.title] = used[el.title] || 0;
-        used[el.title]++;
+      return undefined
+    }
+    return this.value
+  }
+
+  refreshValue () {
+
+  }
+
+  getChildEditors () {
+    return false
+  }
+
+  destroy () {
+    this.unregister(this)
+    if (this.watched) {
+      Object.values(this.watched).forEach(adjustedPath => this.jsoneditor.unwatch(adjustedPath, this.watch_listener))
+    }
+
+    this.watched = null
+    this.watched_values = null
+    this.watch_listener = null
+    this.header_text = null
+    this.header_template = null
+    this.value = null
+    if (this.container && this.container.parentNode) this.container.parentNode.removeChild(this.container)
+    this.container = null
+    this.jsoneditor = null
+    this.schema = null
+    this.path = null
+    this.key = null
+    this.parent = null
+  }
+
+  isDefaultRequired () {
+    return this.isRequired() || !!this.jsoneditor.options.use_default_values
+  }
+
+  getDefault () {
+    if (this.enforceConstEnabled && this.schema.const) {
+      return this.schema.const
+    }
+
+    if (typeof this.schema.default !== 'undefined') {
+      return this.schema.default
+    }
+
+    if (typeof this.schema.enum !== 'undefined') {
+      return this.schema.enum[0]
+    }
+
+    let type = this.schema.type || this.schema.oneOf
+    if (type && Array.isArray(type)) type = type[0]
+    if (type && typeof type === 'object') type = type.type
+    if (type && Array.isArray(type)) type = type[0]
+
+    if (typeof type === 'string') {
+      if (type === 'number') return this.isDefaultRequired() ? 0.0 : undefined
+      if (type === 'boolean') return this.isDefaultRequired() ? false : undefined
+      if (type === 'integer') return this.isDefaultRequired() ? 0 : undefined
+      if (type === 'string') return this.isDefaultRequired() ? '' : undefined
+      if (type === 'null') return null
+      if (type === 'object') return {}
+      if (type === 'array') return []
+    }
+
+    return undefined
+  }
+
+  getTitle () {
+    return this.translateProperty(this.schema.title || this.key || this.formname)
+  }
+
+  enable () {
+    this.disabled = false
+  }
+
+  disable () {
+    this.disabled = true
+  }
+
+  isEnabled () {
+    return !this.disabled
+  }
+
+  isRequired () {
+    if (typeof this.schema.required === 'boolean') return this.schema.required
+    else if (this.parent && this.parent.schema && Array.isArray(this.parent.schema.required)) return this.parent.schema.required.includes(this.key)
+    else if (this.jsoneditor.options.required_by_default) return true
+    else return false
+  }
+
+  getDisplayText (arr) {
+    const disp = []
+    const used = {}
+
+    /* Determine how many times each attribute name is used. */
+    /* This helps us pick the most distinct display text for the schemas. */
+    arr.forEach(el => {
+      if (el.title) {
+        used[el.title] = used[el.title] || 0
+        used[el.title]++
       }
-      if(el.description) {
-        used[el.description] = used[el.description] || 0;
-        used[el.description]++;
+      if (el.description) {
+        used[el.description] = used[el.description] || 0
+        used[el.description]++
       }
-      if(el.format) {
-        used[el.format] = used[el.format] || 0;
-        used[el.format]++;
+      if (el.format) {
+        used[el.format] = used[el.format] || 0
+        used[el.format]++
       }
-      if(el.type) {
-        used[el.type] = used[el.type] || 0;
-        used[el.type]++;
+      if (el.type) {
+        used[el.type] = used[el.type] || 0
+        used[el.type]++
       }
-    });
-
-    // Determine display text for each element of the array
-    $each(arr,function(i,el)  {
-      var name;
-
-      // If it's a simple string
-      if(typeof el === "string") name = el;
-      // Object
-      else if(el.title && used[el.title]<=1) name = el.title;
-      else if(el.format && used[el.format]<=1) name = el.format;
-      else if(el.type && used[el.type]<=1) name = el.type;
-      else if(el.description && used[el.description]<=1) name = el.descripton;
-      else if(el.title) name = el.title;
-      else if(el.format) name = el.format;
-      else if(el.type) name = el.type;
-      else if(el.description) name = el.description;
-      else if(JSON.stringify(el).length < 500) name = JSON.stringify(el);
-      else name = "type";
-
-      disp.push(name);
-    });
-
-    // Replace identical display text with "text 1", "text 2", etc.
-    var inc = {};
-    $each(disp,function(i,name) {
-      inc[name] = inc[name] || 0;
-      inc[name]++;
-
-      if(used[name] > 1) disp[i] = name + " " + inc[name];
-    });
-
-    return disp;
-  },
-
-  // Replace space(s) with "-" to create valid id value
-  getValidId: function(id) {
-    id = id === undefined ? "" : id.toString();
-    return id.replace(/\s+/g, "-");
-  },
-  setInputAttributes: function(inputAttribute) {
+    })
+
+    /* Determine display text for each element of the array */
+    arr.forEach(el => {
+      let name
+
+      /* If it's a simple string */
+      if (typeof el === 'string') name = el
+      /* Object */
+      else if (el.title && used[el.title] <= 1) name = el.title
+      else if (el.format && used[el.format] <= 1) name = el.format
+      else if (el.type && used[el.type] <= 1) name = el.type
+      else if (el.description && used[el.description] <= 1) name = el.description
+      else if (el.title) name = el.title
+      else if (el.format) name = el.format
+      else if (el.type) name = el.type
+      else if (el.description) name = el.description
+      else if (JSON.stringify(el).length < 500) name = JSON.stringify(el)
+      else name = 'type'
+
+      disp.push(name)
+    })
+
+    /* Replace identical display text with "text 1", "text 2", etc. */
+    const inc = {}
+    disp.forEach((name, i) => {
+      inc[name] = inc[name] || 0
+      inc[name]++
+
+      if (used[name] > 1) disp[i] = `${name} ${inc[name]}`
+    })
+
+    return disp
+  }
+
+  /* Replace space(s) with "-" to create valid id value */
+  getValidId (id) {
+    id = id === undefined ? '' : id.toString()
+    return id.replace(/\s+/g, '-')
+  }
+
+  setInputAttributes (inputAttribute, input) {
     if (this.schema.options && this.schema.options.inputAttributes) {
-      var inputAttributes = this.schema.options.inputAttributes;
-      var protectedAttributes = ['name', 'type'].concat(inputAttribute);
-      for (var key in inputAttributes) {
-        if (inputAttributes.hasOwnProperty(key) && protectedAttributes.indexOf(key.toLowerCase()) == -1) {
-          this.input.setAttribute(key, inputAttributes[key]);
+      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())) {
+          workingInput.setAttribute(key, inputAttributes[key])
         }
-      }
-    }
-  },
-  getOption: function(key) {
-    try {
-      throw "getOption is deprecated";
+      })
     }
-    catch(e) {
-      window.console.error(e);
+  }
+
+  setContainerAttributes () {
+    if (this.schema.options && this.schema.options.containerAttributes) {
+      const containerAttributes = this.schema.options.containerAttributes
+      const protectedAttributes = ['data-schemapath', 'data-schematype', 'data-schemaid']
+      Object.keys(containerAttributes).forEach(key => {
+        if (!protectedAttributes.includes(key.toLowerCase())) {
+          this.container.setAttribute(key, containerAttributes[key])
+        }
+      })
     }
+  }
+
+  expandCallbacks (scope, options) {
+    const callback = this.defaults.callbacks[scope]
+    Object.entries(options).forEach(([key, value]) => {
+      if (value === Object(value)) {
+        options[key] = this.expandCallbacks(scope, value)
+      } else if (typeof value === 'string' &&
+                 typeof callback === 'object' &&
+                 typeof callback[value] === 'function') {
+        options[key] = callback[value].bind(null, this)
+      }
+    })
+    return options
+  }
 
-    return this.options[key];
-  },
-  showValidationErrors: function(errors) {
+  showValidationErrors (errors) {
 
   }
-});
+}