@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/object.js

@@ -1,1181 +1,1383 @@
-JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
-  getDefault: function() {
-    return $extend({},this.schema["default"] || {});
-  },
-  getChildEditors: function() {
-    return this.editors;
-  },
-  register: function() {
-    this._super();
-    if(this.editors) {
-      for(var i in this.editors) {
-        if(!this.editors.hasOwnProperty(i)) continue;
-        this.editors[i].register();
-      }
+import { AbstractEditor } from '../editor.js'
+import { extend, hasOwnProperty, trigger } from '../utilities.js'
+import rules from './object.css.js'
+
+export class ObjectEditor extends AbstractEditor {
+  constructor (options, defaults, depth) {
+    super(options, defaults)
+    this.currentDepth = depth
+  }
+
+  getChildEditors () {
+    return this.editors
+  }
+
+  register () {
+    super.register()
+    if (this.editors) {
+      Object.values(this.editors).forEach(e => e.register())
+    }
+  }
+
+  unregister () {
+    super.unregister()
+    if (this.editors) {
+      Object.values(this.editors).forEach(e => e.unregister())
     }
-  },
-  unregister: function() {
-    this._super();
-    if(this.editors) {
-      for(var i in this.editors) {
-        if(!this.editors.hasOwnProperty(i)) continue;
-        this.editors[i].unregister();
+  }
+
+  getNumColumns () {
+    return Math.max(Math.min(12, this.maxwidth), 3)
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      if (this.editjson_control) this.editjson_control.disabled = false
+      if (this.addproperty_button) this.addproperty_button.disabled = false
+
+      super.enable()
+      if (this.editors) {
+        Object.values(this.editors).forEach(e => {
+          if (e.isActive() || e.isUiOnly) {
+            e.enable()
+          }
+          if (e.optInCheckbox) {
+            e.optInCheckbox.disabled = false
+          }
+        })
       }
     }
-  },
-  getNumColumns: function() {
-    return Math.max(Math.min(12,this.maxwidth),3);
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      if(this.editjson_button) this.editjson_button.disabled = false;
-      if(this.addproperty_button) this.addproperty_button.disabled = false;
-
-      this._super();
-      if(this.editors) {
-        for(var i in this.editors) {
-          if(!this.editors.hasOwnProperty(i)) continue;
-          this.editors[i].enable();
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    if (this.editjson_control) this.editjson_control.disabled = true
+    if (this.addproperty_button) this.addproperty_button.disabled = true
+    this.hideEditJSON()
+
+    super.disable()
+    if (this.editors) {
+      Object.values(this.editors).forEach(e => {
+        if (e.isActive() || e.isUiOnly) {
+          e.disable(alwaysDisabled)
         }
-      }
+        e.optInCheckbox.disabled = true
+      })
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    if(this.editjson_button) this.editjson_button.disabled = true;
-    if(this.addproperty_button) this.addproperty_button.disabled = true;
-    this.hideEditJSON();
-
-    this._super();
-    if(this.editors) {
-      for(var i in this.editors) {
-        if(!this.editors.hasOwnProperty(i)) continue;
-        this.editors[i].disable(always_disabled);
+  }
+
+  layoutEditors () {
+    let i; let j
+
+    if (!this.row_container) return
+
+    /* Sort editors by propertyOrder */
+    this.property_order = Object.keys(this.editors)
+    this.property_order = this.property_order.sort((a, b) => {
+      let ordera = this.editors[a].schema.propertyOrder
+      let orderb = this.editors[b].schema.propertyOrder
+      if (typeof ordera !== 'number') ordera = 1000
+      if (typeof orderb !== 'number') orderb = 1000
+
+      return ordera - orderb
+    })
+
+    let container
+    const isCategoriesFormat = (this.format === 'categories')
+    const rows = []
+    let key = null
+    let editor = null
+    let row
+
+    if (this.format === 'grid-strict') {
+      let rowIndex = 0
+      row = []
+
+      this.property_order.forEach(key => {
+        const editor = this.editors[key]
+        if (editor.property_removed) {
+          return
+        }
+        const width = editor.options.hidden ? 0 : (editor.options.grid_columns || editor.getNumColumns())
+        const offset = editor.options.hidden ? 0 : (editor.options.grid_offset || 0)
+        const gridBreak = editor.options.hidden ? false : (editor.options.grid_break || false)
+        const height = editor.options.hidden ? 0 : editor.container.offsetHeight
+
+        const column = {
+          key,
+          width,
+          offset,
+          height
+        }
+
+        row.push(column)
+
+        rows[rowIndex] = row
+
+        if (gridBreak) {
+          rowIndex++
+          row = []
+        }
+      })
+
+      /* layout hasn't changed */
+      if (this.layout === JSON.stringify(rows)) return false
+      this.layout = JSON.stringify(rows)
+
+      /* Layout the form */
+      container = document.createElement('div')
+      for (i = 0; i < rows.length; i++) {
+        row = this.theme.getGridRow()
+        container.appendChild(row)
+        for (j = 0; j < rows[i].length; j++) {
+          key = rows[i][j].key
+          editor = this.editors[key]
+          if (editor.options.hidden) {
+            editor.container.style.display = 'none'
+          } else {
+            this.theme.setGridColumnSize(editor.container, rows[i][j].width, rows[i][j].offset)
+          }
+          row.appendChild(editor.container)
+        }
       }
-    }
-  },
-  layoutEditors: function() {
-    var self = this, i, j;
-
-    if(!this.row_container) return;
-
-    // Sort editors by propertyOrder
-    this.property_order = Object.keys(this.editors);
-    this.property_order = this.property_order.sort(function(a,b) {
-      var ordera = self.editors[a].schema.propertyOrder;
-      var orderb = self.editors[b].schema.propertyOrder;
-      if(typeof ordera !== "number") ordera = 1000;
-      if(typeof orderb !== "number") orderb = 1000;
-
-      return ordera - orderb;
-    });
-
-    var container;
-    var isCategoriesFormat = (this.format === 'categories');
-
-    if(this.format === 'grid') {
-      var rows = [];
-      $each(this.property_order, function(j,key) {
-        var editor = self.editors[key];
-        if(editor.property_removed) return;
-        var found = false;
-        var width = editor.options.hidden? 0 : (editor.options.grid_columns || editor.getNumColumns());
-        var height = editor.options.hidden? 0 : editor.container.offsetHeight;
-        // See if the editor will fit in any of the existing rows first
-        for(var i=0; i<rows.length; i++) {
-          // If the editor will fit in the row horizontally
-          if(rows[i].width + width <= 12) {
-            // If the editor is close to the other elements in height
-            // i.e. Don't put a really tall editor in an otherwise short row or vice versa
-            if(!height || (rows[i].minh*0.5 < height && rows[i].maxh*2 > height)) {
-              found = i;
+    } else if (this.format === 'grid') {
+      this.property_order.forEach(key => {
+        const editor = this.editors[key]
+        if (editor.property_removed) return
+        let found = false
+        const width = editor.options.hidden ? 0 : (editor.options.grid_columns || editor.getNumColumns())
+        const height = editor.options.hidden ? 0 : editor.container.offsetHeight
+        /* See if the editor will fit in any of the existing rows first */
+        for (let i = 0; i < rows.length; i++) {
+          /* If the editor will fit in the row horizontally */
+          if (rows[i].width + width <= 12) {
+            /* If the editor is close to the other elements in height */
+            /* i.e. Don't put a really tall editor in an otherwise short row or vice versa */
+            if (!height || (rows[i].minh * 0.5 < height && rows[i].maxh * 2 > height)) {
+              found = i
             }
           }
         }
 
-        // If there isn't a spot in any of the existing rows, start a new row
-        if(found === false) {
+        /* If there isn't a spot in any of the existing rows, start a new row */
+        if (found === false) {
           rows.push({
             width: 0,
             minh: 999999,
             maxh: 0,
             editors: []
-          });
-          found = rows.length-1;
+          })
+          found = rows.length - 1
         }
 
         rows[found].editors.push({
-          key: key,
-          //editor: editor,
-          width: width,
-          height: height
-        });
-        rows[found].width += width;
-        rows[found].minh = Math.min(rows[found].minh,height);
-        rows[found].maxh = Math.max(rows[found].maxh,height);
-      });
-
-      // Make almost full rows width 12
-      // Do this by increasing all editors' sizes proprotionately
-      // Any left over space goes to the biggest editor
-      // Don't touch rows with a width of 6 or less
-      for(i=0; i<rows.length; i++) {
-        if(rows[i].width < 12) {
-          var biggest = false;
-          var new_width = 0;
-          for(j=0; j<rows[i].editors.length; j++) {
-            if(biggest === false) biggest = j;
-            else if(rows[i].editors[j].width > rows[i].editors[biggest].width) biggest = j;
-            rows[i].editors[j].width *= 12/rows[i].width;
-            rows[i].editors[j].width = Math.floor(rows[i].editors[j].width);
-            new_width += rows[i].editors[j].width;
+          key,
+          /* editor: editor, */
+          width,
+          height
+        })
+        rows[found].width += width
+        rows[found].minh = Math.min(rows[found].minh, height)
+        rows[found].maxh = Math.max(rows[found].maxh, height)
+      })
+
+      /* Make almost full rows width 12 */
+      /* Do this by increasing all editors' sizes proprotionately */
+      /* Any left over space goes to the biggest editor */
+      /* Don't touch rows with a width of 6 or less */
+      for (i = 0; i < rows.length; i++) {
+        if (rows[i].width < 12) {
+          let biggest = false
+          let newWidth = 0
+          for (j = 0; j < rows[i].editors.length; j++) {
+            if (biggest === false) biggest = j
+            else if (rows[i].editors[j].width > rows[i].editors[biggest].width) biggest = j
+            rows[i].editors[j].width *= 12 / rows[i].width
+            rows[i].editors[j].width = Math.floor(rows[i].editors[j].width)
+            newWidth += rows[i].editors[j].width
           }
-          if(new_width < 12) rows[i].editors[biggest].width += 12-new_width;
-          rows[i].width = 12;
+          if (newWidth < 12) rows[i].editors[biggest].width += 12 - newWidth
+          rows[i].width = 12
         }
       }
 
-      // layout hasn't changed
-      if(this.layout === JSON.stringify(rows)) return false;
-      this.layout = JSON.stringify(rows);
-
-      // Layout the form
-      container = document.createElement('div');
-      for(i=0; i<rows.length; i++) {
-        var row = this.theme.getGridRow();
-        container.appendChild(row);
-        for(j=0; j<rows[i].editors.length; j++) {
-          var key = rows[i].editors[j].key;
-          var editor = this.editors[key];
-
-          if(editor.options.hidden) editor.container.style.display = 'none';
-          else this.theme.setGridColumnSize(editor.container,rows[i].editors[j].width);
-          row.appendChild(editor.container);
+      /* layout hasn't changed */
+      if (this.layout === JSON.stringify(rows)) return false
+      this.layout = JSON.stringify(rows)
+
+      /* Layout the form */
+      container = document.createElement('div')
+      for (i = 0; i < rows.length; i++) {
+        row = this.theme.getGridRow()
+        container.appendChild(row)
+        for (j = 0; j < rows[i].editors.length; j++) {
+          key = rows[i].editors[j].key
+          editor = this.editors[key]
+
+          if (editor.options.hidden) editor.container.style.display = 'none'
+          else this.theme.setGridColumnSize(editor.container, rows[i].editors[j].width)
+          row.appendChild(editor.container)
         }
       }
-    }
-    // Normal layout
-    else {
-      container = document.createElement('div');
-
-      if(isCategoriesFormat) {
-        //A container for properties not object nor arrays
-        var containerSimple = document.createElement('div');
-        //This will be the place to (re)build tabs and panes
-        //tabs_holder has 2 childs, [0]: ul.nav.nav-tabs and [1]: div.tab-content
-        var newTabs_holder = this.theme.getTopTabHolder(this.schema.title);
-        //child [1] of previous, stores panes
-        var newTabPanesContainer = this.theme.getTopTabContentHolder(newTabs_holder);
-
-        $each(this.property_order, function(i,key){
-          var editor = self.editors[key];
-          if(editor.property_removed) return;
-          var aPane = self.theme.getTabContent();
-          var isObjOrArray = editor.schema && (editor.schema.type === "object" || editor.schema.type === "array");
-          //mark the pane
-          aPane.isObjOrArray = isObjOrArray;
-          var gridRow = self.theme.getGridRow();
-
-          //this happens with added properties, they don't have a tab
-          if(!editor.tab){
-            //Pass the pane which holds the editor
-            if(typeof self.basicPane === 'undefined'){
-              //There is no basicPane yet, so aPane will be it
-              self.addRow(editor,newTabs_holder, aPane);
-            }
-            else {
-              self.addRow(editor,newTabs_holder, self.basicPane);
+      /* Normal layout */
+    } else {
+      container = document.createElement('div')
+
+      if (isCategoriesFormat) {
+        /* A container for properties not object nor arrays */
+        const containerSimple = document.createElement('div')
+        /* This will be the place to (re)build tabs and panes */
+        /* tabs_holder has 2 childs, [0]: ul.nav.nav-tabs and [1]: div.tab-content */
+        const newTabsHolder = this.theme.getTopTabHolder(this.translateProperty(this.schema.title))
+        /* child [1] of previous, stores panes */
+        const newTabPanesContainer = this.theme.getTopTabContentHolder(newTabsHolder)
+
+        this.property_order.forEach(key => {
+          const editor = this.editors[key]
+          if (editor.property_removed) return
+          const aPane = this.theme.getTabContent()
+          const isObjOrArray = editor.schema && (editor.schema.type === 'object' || editor.schema.type === 'array')
+          /* mark the pane */
+          aPane.isObjOrArray = isObjOrArray
+          const gridRow = this.theme.getGridRow()
+
+          /* this happens with added properties, they don't have a tab */
+          if (!editor.tab) {
+            /* Pass the pane which holds the editor */
+            if (typeof this.basicPane === 'undefined') {
+              /* There is no basicPane yet, so aPane will be it */
+              this.addRow(editor, newTabsHolder, aPane)
+            } else {
+              this.addRow(editor, newTabsHolder, this.basicPane)
             }
           }
 
-          aPane.id = self.getValidId(editor.tab_text.textContent);
-
-          //For simple properties, add them on the same panel (Basic)
-          if(!isObjOrArray){
-            containerSimple.appendChild(gridRow);
-            //There are already some panes
-            if(newTabPanesContainer.childElementCount > 0){
-              //If first pane is object or array, insert before a simple pane
-              if(newTabPanesContainer.firstChild.isObjOrArray){
-                //Append pane for simple properties
-                aPane.appendChild(containerSimple);
-                newTabPanesContainer.insertBefore(aPane,newTabPanesContainer.firstChild);
-                //Add "Basic" tab
-                self.theme.insertBasicTopTab(editor.tab,newTabs_holder);
-                //newTabs_holder.firstChild.insertBefore(editor.tab,newTabs_holder.firstChild.firstChild);
-                //Update the basicPane
-                editor.basicPane = aPane;
+          aPane.id = this.getValidId(editor.tab_text.textContent)
+
+          /* For simple properties, add them on the same panel (Basic) */
+          if (!isObjOrArray) {
+            containerSimple.appendChild(gridRow)
+            /* There are already some panes */
+            if (newTabPanesContainer.childElementCount > 0) {
+              /* If first pane is object or array, insert before a simple pane */
+              if (newTabPanesContainer.firstChild.isObjOrArray) {
+                /* Append pane for simple properties */
+                aPane.appendChild(containerSimple)
+                newTabPanesContainer.insertBefore(aPane, newTabPanesContainer.firstChild)
+                /* Add "Basic" tab */
+                this.theme.insertBasicTopTab(editor.tab, newTabsHolder)
+                /* newTabs_holder.firstChild.insertBefore(editor.tab,newTabs_holder.firstChild.firstChild); */
+                /* Update the basicPane */
+                editor.basicPane = aPane
+              } else {
+                /* We already have a first "Basic" pane, just add the new property to it, so */
+                /* do nothing; */
               }
-              else {
-                //We already have a first "Basic" pane, just add the new property to it, so
-                //do nothing;
-              }
-            }
-            //There is no pane, so add the first (simple) pane
-            else {
-              //Append pane for simple properties
-              aPane.appendChild(containerSimple);
-              newTabPanesContainer.appendChild(aPane);
-              //Add "Basic" tab
-              //newTabs_holder.firstChild.appendChild(editor.tab);
-              self.theme.addTopTab(newTabs_holder,editor.tab);
-              //Update the basicPane
-              editor.basicPane = aPane;
+              /* There is no pane, so add the first (simple) pane */
+            } else {
+              /* Append pane for simple properties */
+              aPane.appendChild(containerSimple)
+              newTabPanesContainer.appendChild(aPane)
+              /* Add "Basic" tab */
+              /* newTabs_holder.firstChild.appendChild(editor.tab); */
+              this.theme.addTopTab(newTabsHolder, editor.tab)
+              /* Update the basicPane */
+              editor.basicPane = aPane
             }
-          }
-          //Objects and arrays earn it's own panes
-          else {
-            aPane.appendChild(gridRow);
-            newTabPanesContainer.appendChild(aPane);
-            //newTabs_holder.firstChild.appendChild(editor.tab);
-            self.theme.addTopTab(newTabs_holder,editor.tab);
+            /* Objects and arrays earn their own panes */
+          } else {
+            aPane.appendChild(gridRow)
+            newTabPanesContainer.appendChild(aPane)
+            /* newTabs_holder.firstChild.appendChild(editor.tab); */
+            this.theme.addTopTab(newTabsHolder, editor.tab)
           }
 
-          if(editor.options.hidden) editor.container.style.display = 'none';
-          else self.theme.setGridColumnSize(editor.container,12);
-          //Now, add the property editor to the row
-          gridRow.appendChild(editor.container);
-          //Update the rowPane (same as self.rows[x].rowPane)
-          editor.rowPane = aPane;
+          if (editor.options.hidden) editor.container.style.display = 'none'
+          else this.theme.setGridColumnSize(editor.container, 12)
+          /* Now, add the property editor to the row */
+          gridRow.appendChild(editor.container)
+          /* Update the rowPane (same as this.rows[x].rowPane) */
+          editor.rowPane = aPane
+        })
 
-        });
-
-        //Erase old panes
+        /* Erase old panes */
         while (this.tabPanesContainer.firstChild) {
-          this.tabPanesContainer.removeChild(this.tabPanesContainer.firstChild);
+          this.tabPanesContainer.removeChild(this.tabPanesContainer.firstChild)
         }
 
-        //Erase old tabs and set the new ones
-        var parentTabs_holder = this.tabs_holder.parentNode;
-        parentTabs_holder.removeChild(parentTabs_holder.firstChild);
-        parentTabs_holder.appendChild(newTabs_holder);
+        /* Erase old tabs and set the new ones */
+        const parentTabsHolder = this.tabs_holder.parentNode
+        parentTabsHolder.removeChild(parentTabsHolder.firstChild)
+        parentTabsHolder.appendChild(newTabsHolder)
 
-        this.tabPanesContainer = newTabPanesContainer;
-        this.tabs_holder = newTabs_holder;
+        this.tabPanesContainer = newTabPanesContainer
+        this.tabs_holder = newTabsHolder
 
-        //Activate the first tab
-        var firstTab = this.theme.getFirstTab(this.tabs_holder);
-        if(firstTab){
-          $trigger(firstTab,'click');
+        /* Activate the first tab */
+        const firstTab = this.theme.getFirstTab(this.tabs_holder)
+        if (firstTab) {
+          trigger(firstTab, 'click')
         }
-        return;
-      }
-      //Normal layout
-      else {
-        $each(this.property_order, function(i,key) {
-          var editor = self.editors[key];
-          if(editor.property_removed) return;
-          var row = self.theme.getGridRow();
-          container.appendChild(row);
-
-          if(editor.options.hidden) editor.container.style.display = 'none';
-          else self.theme.setGridColumnSize(editor.container,12);
-          row.appendChild(editor.container);
-        });
+        return
+        /* Normal layout */
       }
+      this.property_order.forEach(key => {
+        const editor = this.editors[key]
+        if (editor.property_removed) return
+        row = this.theme.getGridRow()
+        container.appendChild(row)
+
+        if (editor.options.hidden) editor.container.style.display = 'none'
+        else this.theme.setGridColumnSize(editor.container, 12)
+        row.appendChild(editor.container)
+      })
     }
-    //for grid and normal layout
+    /* for grid and normal layout */
     while (this.row_container.firstChild) {
-      this.row_container.removeChild(this.row_container.firstChild);
+      this.row_container.removeChild(this.row_container.firstChild)
     }
-    this.row_container.appendChild(container);
-  },
-  getPropertySchema: function(key) {
-    // Schema declared directly in properties
-    var schema = this.schema.properties[key] || {};
-    schema = $extend({},schema);
-    var matched = this.schema.properties[key]? true : false;
-
-    // Any matching patternProperties should be merged in
-    if(this.schema.patternProperties) {
-      for(var i in this.schema.patternProperties) {
-        if(!this.schema.patternProperties.hasOwnProperty(i)) continue;
-        var regex = new RegExp(i);
-        if(regex.test(key)) {
-          schema.allOf = schema.allOf || [];
-          schema.allOf.push(this.schema.patternProperties[i]);
-          matched = true;
+    this.row_container.appendChild(container)
+  }
+
+  getPropertySchema (key) {
+    /* Schema declared directly in properties */
+    let schema = this.schema.properties[key] || {}
+    schema = extend({}, schema)
+    let matched = !!this.schema.properties[key]
+
+    /* Any matching patternProperties should be merged in */
+    if (this.schema.patternProperties) {
+      Object.keys(this.schema.patternProperties).forEach(i => {
+        const regex = new RegExp(i)
+        if (regex.test(key)) {
+          schema.allOf = schema.allOf || []
+          schema.allOf.push(this.schema.patternProperties[i])
+          matched = true
         }
-      }
+      })
     }
 
-    // Hasn't matched other rules, use additionalProperties schema
-    if(!matched && this.schema.additionalProperties && typeof this.schema.additionalProperties === "object") {
-      schema = $extend({},this.schema.additionalProperties);
+    /* Hasn't matched other rules, use additionalProperties schema */
+    if (!matched && this.schema.additionalProperties && typeof this.schema.additionalProperties === 'object') {
+      schema = extend({}, this.schema.additionalProperties)
     }
 
-    return schema;
-  },
-  preBuild: function() {
-    this._super();
+    return schema
+  }
+
+  preBuild () {
+    super.preBuild()
 
-    this.editors = {};
-    this.cached_editors = {};
-    var self = this;
+    this.editors = {}
+    this.cached_editors = {}
 
-    this.format = this.options.layout || this.options.object_layout || this.schema.format || this.jsoneditor.options.object_layout || 'normal';
+    this.format = this.options.layout || this.options.object_layout || this.schema.format || this.jsoneditor.options.object_layout || 'normal'
 
-    this.schema.properties = this.schema.properties || {};
+    this.schema.properties = this.schema.properties || {}
 
-    this.minwidth = 0;
-    this.maxwidth = 0;
+    this.minwidth = 0
+    this.maxwidth = 0
 
-    // If the object should be rendered as a table row
-    if(this.options.table_row) {
-      $each(this.schema.properties, function(key,schema) {
-        var editor = self.jsoneditor.getEditorClass(schema);
-        self.editors[key] = self.jsoneditor.createEditor(editor,{
-          jsoneditor: self.jsoneditor,
-          schema: schema,
-          path: self.path+'.'+key,
-          parent: self,
+    /* If the object should be rendered as a table row */
+    if (this.options.table_row) {
+      Object.entries(this.schema.properties).forEach(([key, schema]) => {
+        const editor = this.jsoneditor.getEditorClass(schema)
+        this.editors[key] = this.jsoneditor.createEditor(editor, {
+          jsoneditor: this.jsoneditor,
+          schema,
+          path: `${this.path}.${key}`,
+          parent: this,
           compact: true,
           required: true
-        });
-        self.editors[key].preBuild();
-
-        var width = self.editors[key].options.hidden? 0 : (self.editors[key].options.grid_columns || self.editors[key].getNumColumns());
-
-        self.minwidth += width;
-        self.maxwidth += width;
-      });
-      this.no_link_holder = true;
-    }
-    // If the object should be rendered as a table
-    else if(this.options.table) {
-      // TODO: table display format
-      throw "Not supported yet";
-    }
-    // If the object should be rendered as a div
-    else {
-      if(!this.schema.defaultProperties) {
-        if(this.jsoneditor.options.display_required_only || this.options.display_required_only) {
-          this.schema.defaultProperties = [];
-          $each(this.schema.properties, function(k,s) {
-            if(self.isRequired({key: k, schema: s})) {
-              self.schema.defaultProperties.push(k);
-            }
-          });
-        }
-        else {
-          self.schema.defaultProperties = Object.keys(self.schema.properties);
+        }, this.currentDepth + 1)
+        this.editors[key].preBuild()
+
+        const width = this.editors[key].options.hidden ? 0 : (this.editors[key].options.grid_columns || this.editors[key].getNumColumns())
+
+        this.minwidth += width
+        this.maxwidth += width
+      })
+      this.no_link_holder = true
+      /* If the object should be rendered as a table */
+    } else if (this.options.table) {
+      /* TODO: table display format */
+      throw new Error('Not supported yet')
+      /* If the object should be rendered as a div */
+    } else {
+      if (!this.schema.defaultProperties) {
+        if (this.jsoneditor.options.display_required_only || this.options.display_required_only) {
+          this.schema.defaultProperties = Object.keys(this.schema.properties).filter(k => this.isRequiredObject({ key: k, schema: this.schema.properties[k] }))
+        } else {
+          this.schema.defaultProperties = Object.keys(this.schema.properties)
         }
       }
 
-      // Increase the grid width to account for padding
-      self.maxwidth += 1;
+      /* Increase the grid width to account for padding */
+      this.maxwidth += 1
 
-      $each(this.schema.defaultProperties, function(i,key) {
-        self.addObjectProperty(key, true);
+      /* Check for array (eg. meta-schema options is an object) */
+      if (Array.isArray(this.schema.defaultProperties)) {
+        this.schema.defaultProperties.forEach(key => {
+          this.addObjectProperty(key, true)
 
-        if(self.editors[key]) {
-          self.minwidth = Math.max(self.minwidth,(self.editors[key].options.grid_columns || self.editors[key].getNumColumns()));
-          self.maxwidth += (self.editors[key].options.grid_columns || self.editors[key].getNumColumns());
-        }
-      });
+          if (this.editors[key]) {
+            this.minwidth = Math.max(this.minwidth, (this.editors[key].options.grid_columns || this.editors[key].getNumColumns()))
+            this.maxwidth += (this.editors[key].options.grid_columns || this.editors[key].getNumColumns())
+          }
+        })
+      }
     }
 
-    // Sort editors by propertyOrder
-    this.property_order = Object.keys(this.editors);
-    this.property_order = this.property_order.sort(function(a,b) {
-      var ordera = self.editors[a].schema.propertyOrder;
-      var orderb = self.editors[b].schema.propertyOrder;
-      if(typeof ordera !== "number") ordera = 1000;
-      if(typeof orderb !== "number") orderb = 1000;
-
-      return ordera - orderb;
-    });
-  },
-  //"Borrow" from arrays code
-  addTab: function(idx){
-      var self = this;
-      var isObjOrArray = self.rows[idx].schema && (self.rows[idx].schema.type === "object" || self.rows[idx].schema.type === "array");
-      if(self.tabs_holder) {
-        self.rows[idx].tab_text = document.createElement('span');
-
-        if(!isObjOrArray){
-          self.rows[idx].tab_text.textContent = (typeof self.schema.basicCategoryTitle === 'undefined') ? "Basic" : self.schema.basicCategoryTitle;
-        } else {
-          self.rows[idx].tab_text.textContent = self.rows[idx].getHeaderText();
-        }
-        self.rows[idx].tab = self.theme.getTopTab(self.rows[idx].tab_text,this.getValidId(self.rows[idx].tab_text.textContent));
-        self.rows[idx].tab.addEventListener('click', function(e) {
-          self.active_tab = self.rows[idx].tab;
-          self.refreshTabs();
-          e.preventDefault();
-          e.stopPropagation();
-        });
+    /* Sort editors by propertyOrder */
+    this.property_order = Object.keys(this.editors)
+    this.property_order = this.property_order.sort((a, b) => {
+      let ordera = this.editors[a].schema.propertyOrder
+      let orderb = this.editors[b].schema.propertyOrder
+      if (typeof ordera !== 'number') ordera = 1000
+      if (typeof orderb !== 'number') orderb = 1000
 
-      }
+      return ordera - orderb
+    })
+  }
 
-    },
-  addRow: function(editor, tabHolder, aPane) {
-    var self = this;
-    var rowsLen = this.rows.length;
-    var isObjOrArray = editor.schema.type === "object" || editor.schema.type === "array";
-
-    //Add a row
-    self.rows[rowsLen] = editor;
-    //rowPane stores the editor corresponding pane to set the display style when refreshing Tabs
-    self.rows[rowsLen].rowPane = aPane;
-
-    if(!isObjOrArray){
-
-      //This is the first simple property to be added,
-      //add a ("Basic") tab for it and save it's row number
-      if(typeof self.basicTab === "undefined"){
-        self.addTab(rowsLen);
-        //Store the index row of the first simple property added
-        self.basicTab = rowsLen;
-        self.basicPane = aPane;
-        self.theme.addTopTab(tabHolder, self.rows[rowsLen].tab);
-      }
+  /* "Borrow" from arrays code */
+  addTab (idx) {
+    const isObjOrArray = this.rows[idx].schema && (this.rows[idx].schema.type === 'object' || this.rows[idx].schema.type === 'array')
+    if (this.tabs_holder) {
+      this.rows[idx].tab_text = document.createElement('span')
 
-      else {
-        //Any other simple property gets the same tab (and the same pane) as the first one,
-        //so, when 'click' event is fired from a row, it gets the correct ("Basic") tab
-        self.rows[rowsLen].tab = self.rows[self.basicTab].tab;
-        self.rows[rowsLen].tab_text = self.rows[self.basicTab].tab_text;
-        self.rows[rowsLen].rowPane = self.rows[self.basicTab].rowPane;
+      if (!isObjOrArray) {
+        this.rows[idx].tab_text.textContent = (typeof this.schema.basicCategoryTitle === 'undefined') ? 'Basic' : this.schema.basicCategoryTitle
+      } else {
+        this.rows[idx].tab_text.textContent = this.rows[idx].getHeaderText()
       }
+      this.rows[idx].tab = this.theme.getTopTab(this.rows[idx].tab_text, this.getValidId(this.rows[idx].tab_text.textContent))
+      this.rows[idx].tab.addEventListener('click', (e) => {
+        this.active_tab = this.rows[idx].tab
+        this.refreshTabs()
+        e.preventDefault()
+        e.stopPropagation()
+      })
     }
-    else {
-      self.addTab(rowsLen);
-      self.theme.addTopTab(tabHolder, self.rows[rowsLen].tab);
+  }
+
+  addRow (editor, tabHolder, aPane) {
+    const rowsLen = this.rows.length
+    const isObjOrArray = editor.schema.type === 'object' || editor.schema.type === 'array'
+
+    /* Add a row */
+    this.rows[rowsLen] = editor
+    /* rowPane stores the editor corresponding pane to set the display style when refreshing Tabs */
+    this.rows[rowsLen].rowPane = aPane
+
+    if (!isObjOrArray) {
+      /* This is the first simple property to be added, */
+      /* add a ("Basic") tab for it and save it's row number */
+      if (typeof this.basicTab === 'undefined') {
+        this.addTab(rowsLen)
+        /* Store the index row of the first simple property added */
+        this.basicTab = rowsLen
+        this.basicPane = aPane
+        this.theme.addTopTab(tabHolder, this.rows[rowsLen].tab)
+      } else {
+        /* Any other simple property gets the same tab (and the same pane) as the first one, */
+        /* so, when 'click' event is fired from a row, it gets the correct ("Basic") tab */
+        this.rows[rowsLen].tab = this.rows[this.basicTab].tab
+        this.rows[rowsLen].tab_text = this.rows[this.basicTab].tab_text
+        this.rows[rowsLen].rowPane = this.rows[this.basicTab].rowPane
+      }
+    } else {
+      this.addTab(rowsLen)
+      this.theme.addTopTab(tabHolder, this.rows[rowsLen].tab)
     }
-  },
-  //Mark the active tab and make visible the corresponding pane, hide others
-  refreshTabs: function(refresh_headers) {
-    var self = this;
-    var basicTabPresent = typeof self.basicTab !== 'undefined';
-    var basicTabRefreshed = false;
+  }
 
-    $each(this.rows, function(i,row) {
-      //If it's an orphan row (some property which has been deleted), return
-      if(!row.tab || !row.rowPane || !row.rowPane.parentNode) return;
+  /* Mark the active tab and make visible the corresponding pane, hide others */
+  refreshTabs (refreshHeaders) {
+    const basicTabPresent = typeof this.basicTab !== 'undefined'
+    let basicTabRefreshed = false
 
-      if(basicTabPresent && row.tab == self.rows[self.basicTab].tab && basicTabRefreshed) return;
+    this.rows.forEach(row => {
+      /* If it's an orphan row (some property which has been deleted), return */
+      if (!row.tab || !row.rowPane || !row.rowPane.parentNode) return
 
-      if(refresh_headers) {
-        row.tab_text.textContent = row.getHeaderText();
-      }
-      else {
-        //All rows of simple properties point to the same tab, so refresh just once
-        if(basicTabPresent && row.tab == self.rows[self.basicTab].tab) basicTabRefreshed = true;
+      if (basicTabPresent && row.tab === this.rows[this.basicTab].tab && basicTabRefreshed) return
 
-        if(row.tab === self.active_tab) {
-          self.theme.markTabActive(row);
-        }
-        else {
-          self.theme.markTabInactive(row);
+      if (refreshHeaders) {
+        row.tab_text.textContent = row.getHeaderText()
+      } else {
+        /* All rows of simple properties point to the same tab, so refresh just once */
+        if (basicTabPresent && row.tab === this.rows[this.basicTab].tab) basicTabRefreshed = true
+
+        if (row.tab === this.active_tab) {
+          this.theme.markTabActive(row)
+        } else {
+          this.theme.markTabInactive(row)
         }
       }
-    });
-  },
-  build: function() {
-    var self = this;
-
-    var isCategoriesFormat = (this.format === 'categories');
-    this.rows=[];
-    this.active_tab = null;
-
-    // If the object should be rendered as a table row
-    if(this.options.table_row) {
-      this.editor_holder = this.container;
-      $each(this.editors, function(key,editor) {
-        var holder = self.theme.getTableCell();
-        self.editor_holder.appendChild(holder);
-
-        editor.setContainer(holder);
-        editor.build();
-        editor.postBuild();
-
-        if(self.editors[key].options.hidden) {
-          holder.style.display = 'none';
+    })
+  }
+
+  build () {
+    const isCategoriesFormat = (this.format === 'categories')
+    this.rows = []
+    this.active_tab = null
+
+    /* If the object should be rendered as a table row */
+    if (this.options.table_row) {
+      this.editor_holder = this.container
+      Object.entries(this.editors).forEach(([key, editor]) => {
+        const holder = this.theme.getTableCell()
+        this.editor_holder.appendChild(holder)
+
+        editor.setContainer(holder)
+        editor.build()
+        editor.postBuild()
+        editor.setOptInCheckbox(editor.header)
+
+        editor.setValue(editor.getDefault(), true)
+
+        if (this.editors[key].options.hidden) {
+          holder.style.display = 'none'
         }
-        if(self.editors[key].options.input_width) {
-          holder.style.width = self.editors[key].options.input_width;
+        if (this.editors[key].options.input_width) {
+          holder.style.width = this.editors[key].options.input_width
         }
-      });
-    }
-    // If the object should be rendered as a table
-    else if(this.options.table) {
-      // TODO: table display format
-      throw "Not supported yet";
-    }
-    // If the object should be rendered as a div
-    else {
-      this.header = document.createElement('span');
-      this.header.textContent = this.getTitle();
-      this.title = this.theme.getHeader(this.header);
-      this.container.appendChild(this.title);
-      this.container.style.position = 'relative';
-
-      // Edit JSON modal
-      this.editjson_holder = this.theme.getModal();
-      this.editjson_textarea = this.theme.getTextareaInput();
-      this.editjson_textarea.style.height = '170px';
-      this.editjson_textarea.style.width = '300px';
-      this.editjson_textarea.style.display = 'block';
-      this.editjson_save = this.getButton('Save','save','Save');
-      this.editjson_save.classList.add('json-editor-btntype-save');
-      this.editjson_save.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.saveJSON();
-      });
-      this.editjson_copy = this.getButton('Copy','copy','Copy');
-      this.editjson_copy.classList.add('json-editor-btntype-copy');
-      this.editjson_copy.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.copyJSON();
-      });
-      this.editjson_cancel = this.getButton('Cancel','cancel','Cancel');
-      this.editjson_cancel.classList.add('json-editor-btntype-cancel');
-      this.editjson_cancel.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.hideEditJSON();
-      });
-      this.editjson_holder.appendChild(this.editjson_textarea);
-      this.editjson_holder.appendChild(this.editjson_save);
-      this.editjson_holder.appendChild(this.editjson_copy);
-      this.editjson_holder.appendChild(this.editjson_cancel);
-
-      // Manage Properties modal
-      this.addproperty_holder = this.theme.getModal();
-      this.addproperty_list = document.createElement('div');
-      this.addproperty_list.style.width = '295px';
-      this.addproperty_list.style.maxHeight = '160px';
-      this.addproperty_list.style.padding = '5px 0';
-      this.addproperty_list.style.overflowY = 'auto';
-      this.addproperty_list.style.overflowX = 'hidden';
-      this.addproperty_list.style.paddingLeft = '5px';
-      this.addproperty_list.setAttribute('class', 'property-selector');
-      this.addproperty_add = this.getButton('add','add','add');
-      this.addproperty_add.classList.add('json-editor-btntype-add');
-      this.addproperty_input = this.theme.getFormInputField('text');
-      this.addproperty_input.setAttribute('placeholder','Property name...');
-      this.addproperty_input.style.width = '220px';
-      this.addproperty_input.style.marginBottom = '0';
-      this.addproperty_input.style.display = 'inline-block';
-      this.addproperty_add.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if(self.addproperty_input.value) {
-          if(self.editors[self.addproperty_input.value]) {
-            window.alert('there is already a property with that name');
-            return;
+      })
+      /* If the object should be rendered as a table */
+    } else if (this.options.table) {
+      /* TODO: table display format */
+      throw new Error('Not supported yet')
+      /* If the object should be rendered as a div */
+    } else {
+      this.header = ''
+      if (!this.options.compact) {
+        this.header = document.createElement('span')
+        this.header.textContent = this.getTitle()
+      }
+      this.title = this.theme.getHeader(this.header, this.getPathDepth())
+      this.title.classList.add('je-object__title')
+      this.controls = this.theme.getButtonHolder()
+      this.controls.classList.add('je-object__controls')
+
+      this.container.appendChild(this.title)
+      this.container.appendChild(this.controls)
+      this.container.classList.add('je-object__container')
+
+      /* Edit JSON modal */
+      this.editjson_holder = this.theme.getModal()
+      this.editjson_textarea_label = this.theme.getHiddenLabel(this.translate('button_edit_json'))
+      this.editjson_textarea_label.setAttribute('for', this.path + '-' + 'edit-json-textarea')
+      this.editjson_textarea = this.theme.getTextareaInput()
+      this.editjson_textarea.setAttribute('id', this.path + '-' + 'edit-json-textarea')
+      this.editjson_textarea.setAttribute('aria-labelledby', this.path + '-' + 'edit-json-textarea')
+      this.editjson_textarea.classList.add('je-edit-json--textarea')
+      this.editjson_save = this.getButton('button_save', 'save', 'button_save')
+      this.editjson_save.classList.add('json-editor-btntype-save')
+      this.editjson_save.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.saveJSON()
+      })
+      this.editjson_copy = this.getButton('button_copy', 'copy', 'button_copy')
+      this.editjson_copy.classList.add('json-editor-btntype-copy')
+      this.editjson_copy.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.copyJSON()
+      })
+      this.editjson_cancel = this.getButton('button_cancel', 'cancel', 'button_cancel')
+      this.editjson_cancel.classList.add('json-editor-btntype-cancel')
+      this.editjson_cancel.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.hideEditJSON()
+      })
+      this.editjson_holder.appendChild(this.editjson_textarea_label)
+      this.editjson_holder.appendChild(this.editjson_textarea)
+      this.editjson_holder.appendChild(this.editjson_save)
+      this.editjson_holder.appendChild(this.editjson_copy)
+      this.editjson_holder.appendChild(this.editjson_cancel)
+
+      /* Manage Properties modal */
+      this.addproperty_holder = this.theme.getModal()
+      this.addproperty_list = document.createElement('div')
+      this.addproperty_list.classList.add('property-selector')
+      this.addproperty_add = this.getButton('button_add', 'add', 'button_add')
+      this.addproperty_add.classList.add('json-editor-btntype-add')
+
+      this.addproperty_input = this.theme.getFormInputField('text')
+      this.addproperty_input.setAttribute('placeholder', 'Property name...')
+
+      this.addproperty_input_label = this.theme.getHiddenLabel(this.translate('button_properties'))
+      this.addproperty_input_label.setAttribute('for', this.path + '-' + 'property-selector')
+
+      this.addproperty_input.classList.add('property-selector-input')
+      this.addproperty_input.setAttribute('id', this.path + '-' + 'property-selector')
+      this.addproperty_input.setAttribute('aria-labelledby', this.path + '-' + 'property-selector')
+
+      this.addproperty_add.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (this.addproperty_input.value) {
+          if (this.editors[this.addproperty_input.value]) {
+            window.alert('there is already a property with that name')
+            return
           }
 
-          self.addObjectProperty(self.addproperty_input.value);
-          if(self.editors[self.addproperty_input.value]) {
-            self.editors[self.addproperty_input.value].disable();
+          this.addObjectProperty(this.addproperty_input.value)
+          if (this.editors[this.addproperty_input.value]) {
+            this.editors[this.addproperty_input.value].disable()
           }
-          self.onChange(true);
+          const key = this.editors[this.addproperty_input.value].key
+          const type = this.editors[this.addproperty_input.value].type
+          const path = this.editors[this.addproperty_input.value].path
+
+          this.onChange(true, false, {
+            event: 'add',
+            data: { key, type, path }
+          })
         }
-      });
-      this.addproperty_holder.appendChild(this.addproperty_list);
-      this.addproperty_holder.appendChild(this.addproperty_input);
-      this.addproperty_holder.appendChild(this.addproperty_add);
-      var spacer = document.createElement('div');
-      spacer.style.clear = 'both';
-      this.addproperty_holder.appendChild(spacer);
-
-      // Close properties modal if clicked outside modal
-      document.addEventListener('click', function(e) {
-          if (!this.addproperty_holder.contains(e.target) && this.adding_property) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.toggleAddProperty();
-          }
-      }.bind(this));
+      })
+      this.addproperty_input.addEventListener('input', (e) => {
+        e.target.previousSibling.previousSibling.childNodes.forEach((value) => {
+          let searchTerm = value.innerText
+          let propertyTitle = e.target.value
 
-      // Description
-      if(this.schema.description) {
-        this.description = this.theme.getDescription(this.schema.description);
-        this.container.appendChild(this.description);
-      }
-
-      // Validation error placeholder area
-      this.error_holder = document.createElement('div');
-      this.container.appendChild(this.error_holder);
-
-      // Container for child editor area
-      this.editor_holder = this.theme.getIndentedPanel();
-      this.container.appendChild(this.editor_holder);
+          const caseSensitivePropertySearch = this.options.case_sensitive_property_search || this.jsoneditor.options.case_sensitive_property_search
 
-      // Container for rows of child editors
-      this.row_container = this.theme.getGridContainer();
+          if (!caseSensitivePropertySearch) {
+            searchTerm = searchTerm.toLowerCase()
+            propertyTitle = propertyTitle.toLowerCase()
+          }
 
-      if(isCategoriesFormat) {
-        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.schema.title));
-        this.tabPanesContainer = this.theme.getTopTabContentHolder(this.tabs_holder);
-        this.editor_holder.appendChild(this.tabs_holder);
+          if (searchTerm.includes(propertyTitle)) {
+            value.style.display = ''
+          } else {
+            value.style.display = 'none'
+          }
+        })
+      })
+      this.addproperty_holder.appendChild(this.addproperty_list)
+      this.addproperty_holder.appendChild(this.addproperty_input_label)
+      this.addproperty_holder.appendChild(this.addproperty_input)
+      this.addproperty_holder.appendChild(this.addproperty_add)
+      const spacer = document.createElement('div')
+      spacer.style.clear = 'both'
+      this.addproperty_holder.appendChild(spacer)
+
+      /* Close properties modal if clicked outside modal */
+      this.onOutsideModalClickListener = this.onOutsideModalClick.bind(this)
+      document.addEventListener('click', this.onOutsideModalClickListener, true)
+
+      /* Description */
+      if (this.schema.description) {
+        this.description = this.theme.getDescription(this.translateProperty(this.schema.description))
+        this.container.appendChild(this.description)
       }
-      else {
-        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.schema.title));
-        this.tabPanesContainer = this.theme.getTabContentHolder(this.tabs_holder);
-        this.editor_holder.appendChild(this.row_container);
+
+      /* Validation error placeholder area */
+      this.error_holder = document.createElement('div')
+      this.container.appendChild(this.error_holder)
+
+      /* Container for child editor area */
+      this.editor_holder = this.theme.getIndentedPanel()
+      this.container.appendChild(this.editor_holder)
+
+      /* Container for rows of child editors */
+      this.row_container = this.theme.getGridContainer()
+
+      if (isCategoriesFormat) {
+        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.translateProperty(this.schema.title)))
+        this.tabPanesContainer = this.theme.getTopTabContentHolder(this.tabs_holder)
+        this.editor_holder.appendChild(this.tabs_holder)
+      } else {
+        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.translateProperty(this.schema.title)))
+        this.tabPanesContainer = this.theme.getTabContentHolder(this.tabs_holder)
+        this.editor_holder.appendChild(this.row_container)
       }
 
-      $each(this.editors, function(key,editor) {
-        var aPane = self.theme.getTabContent();
-        var holder = self.theme.getGridColumn();
-        var isObjOrArray = (editor.schema && (editor.schema.type === 'object' || editor.schema.type === 'array')) ? true : false;
-        aPane.isObjOrArray = isObjOrArray;
-
-        if(isCategoriesFormat){
-          if(isObjOrArray) {
-            var single_row_container = self.theme.getGridContainer();
-            single_row_container.appendChild(holder);
-            aPane.appendChild(single_row_container);
-            self.tabPanesContainer.appendChild(aPane);
-            self.row_container = single_row_container;
-          }
-          else {
-            if(typeof self.row_container_basic === 'undefined'){
-              self.row_container_basic = self.theme.getGridContainer();
-              aPane.appendChild(self.row_container_basic);
-              if(self.tabPanesContainer.childElementCount == 0){
-                self.tabPanesContainer.appendChild(aPane);
-              }
-              else {
-                self.tabPanesContainer.insertBefore(aPane,self.tabPanesContainer.childNodes[1]);
+      Object.values(this.editors).forEach(editor => {
+        const aPane = this.theme.getTabContent()
+        const holder = this.theme.getGridColumn()
+        const isObjOrArray = !!((editor.schema && (editor.schema.type === 'object' || editor.schema.type === 'array')))
+        aPane.isObjOrArray = isObjOrArray
+
+        if (isCategoriesFormat) {
+          if (isObjOrArray) {
+            const singleRowContainer = this.theme.getGridContainer()
+            singleRowContainer.appendChild(holder)
+            aPane.appendChild(singleRowContainer)
+            this.tabPanesContainer.appendChild(aPane)
+            this.row_container = singleRowContainer
+          } else {
+            if (typeof this.row_container_basic === 'undefined') {
+              this.row_container_basic = this.theme.getGridContainer()
+              aPane.appendChild(this.row_container_basic)
+              if (this.tabPanesContainer.childElementCount === 0) {
+                this.tabPanesContainer.appendChild(aPane)
+              } else {
+                this.tabPanesContainer.insertBefore(aPane, this.tabPanesContainer.childNodes[1])
               }
             }
-            self.row_container_basic.appendChild(holder);
+            this.row_container_basic.appendChild(holder)
           }
 
-          self.addRow(editor,self.tabs_holder,aPane);
+          this.addRow(editor, this.tabs_holder, aPane)
 
-          aPane.id = self.getValidId(editor.schema.title); //editor.schema.path//tab_text.textContent
-
-        }
-        else {
-          self.row_container.appendChild(holder);
+          aPane.id = this.getValidId(editor.schema.title) /* editor.schema.path//tab_text.textContent */
+        } else {
+          this.row_container.appendChild(holder)
         }
 
-        editor.setContainer(holder);
-        editor.build();
-        editor.postBuild();
-      });
+        editor.setContainer(holder)
+        editor.build()
+        editor.postBuild()
+        editor.setOptInCheckbox(editor.header)
+      })
 
-      if(this.rows[0]){
-        $trigger(this.rows[0].tab,'click');
+      if (this.rows[0]) {
+        trigger(this.rows[0].tab, 'click')
       }
 
-      // Control buttons
-      this.title_controls = this.theme.getHeaderButtonHolder();
-      this.editjson_controls = this.theme.getHeaderButtonHolder();
-      this.addproperty_controls = this.theme.getHeaderButtonHolder();
-      this.title.appendChild(this.title_controls);
-      this.title.appendChild(this.editjson_controls);
-      this.title.appendChild(this.addproperty_controls);
-
-      // Show/Hide button
-      this.collapsed = false;
-      this.toggle_button = this.getButton('', 'collapse', this.translate('button_collapse'));
-      this.toggle_button.classList.add('json-editor-btntype-toggle');
-      this.title_controls.appendChild(this.toggle_button);
-      this.toggle_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if(self.collapsed) {
-          self.editor_holder.style.display = '';
-          self.collapsed = false;
-          self.setButtonText(self.toggle_button,'','collapse',self.translate('button_collapse'));
-        }
-        else {
-          self.editor_holder.style.display = 'none';
-          self.collapsed = true;
-          self.setButtonText(self.toggle_button,'','expand',self.translate('button_expand'));
+      /* Show/Hide button */
+      this.collapsed = false
+      this.collapse_control = this.getButton('', 'collapse', 'button_collapse')
+      this.collapse_control.classList.add('json-editor-btntype-toggle')
+      this.title.insertBefore(this.collapse_control, this.title.childNodes[0])
+
+      this.collapse_control.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (this.collapsed) {
+          this.editor_holder.style.display = ''
+          this.collapsed = false
+          this.setButtonText(this.collapse_control, '', 'collapse', 'button_collapse')
+        } else {
+          this.editor_holder.style.display = 'none'
+          this.collapsed = true
+          this.setButtonText(this.collapse_control, '', 'expand', 'button_expand')
         }
-      });
+      })
 
-      // If it should start collapsed
-      if(this.options.collapsed) {
-        $trigger(this.toggle_button,'click');
+      /* If it should start collapsed */
+      if (this.options.collapsed) {
+        trigger(this.collapse_control, 'click')
       }
 
-      // Collapse button disabled
-      if(this.schema.options && typeof this.schema.options.disable_collapse !== "undefined") {
-        if(this.schema.options.disable_collapse) this.toggle_button.style.display = 'none';
-      }
-      else if(this.jsoneditor.options.disable_collapse) {
-        this.toggle_button.style.display = 'none';
+      /* Collapse button disabled */
+      if (this.schema.options && typeof this.schema.options.disable_collapse !== 'undefined') {
+        if (this.schema.options.disable_collapse) this.collapse_control.style.display = 'none'
+      } else if (this.jsoneditor.options.disable_collapse) {
+        this.collapse_control.style.display = 'none'
       }
 
-      // Edit JSON Button
-      this.editjson_button = this.getButton('JSON','edit','Edit JSON');
-      this.editjson_button.classList.add('json-editor-btntype-editjson');
-      this.editjson_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.toggleEditJSON();
-      });
-      this.editjson_controls.appendChild(this.editjson_button);
-      this.editjson_controls.appendChild(this.editjson_holder);
-
-      // Edit JSON Buttton disabled
-      if(this.schema.options && typeof this.schema.options.disable_edit_json !== "undefined") {
-        if(this.schema.options.disable_edit_json) this.editjson_button.style.display = 'none';
-      }
-      else if(this.jsoneditor.options.disable_edit_json) {
-        this.editjson_button.style.display = 'none';
+      /* Edit JSON Button */
+      this.editjson_control = this.getButton('JSON', 'edit', 'button_edit_json')
+      this.editjson_control.classList.add('json-editor-btntype-editjson')
+      this.editjson_control.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.toggleEditJSON()
+      })
+      this.controls.appendChild(this.editjson_control)
+      this.controls.insertBefore(this.editjson_holder, this.controls.childNodes[0])
+
+      /* Edit JSON Buttton disabled */
+      if (this.schema.options && typeof this.schema.options.disable_edit_json !== 'undefined') {
+        if (this.schema.options.disable_edit_json) this.editjson_control.style.display = 'none'
+      } else if (this.jsoneditor.options.disable_edit_json) {
+        this.editjson_control.style.display = 'none'
       }
 
-      // Object Properties Button
-      this.addproperty_button = this.getButton('Properties','edit','Object Properties');
-      this.addproperty_button.classList.add('json-editor-btntype-properties');
-      this.addproperty_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.toggleAddProperty();
-      });
-      this.addproperty_controls.appendChild(this.addproperty_button);
-      this.addproperty_controls.appendChild(this.addproperty_holder);
-      this.refreshAddProperties();
+      /* Object Properties Button */
+      this.addproperty_button = this.getButton('properties', 'edit_properties', 'button_object_properties')
+      this.addproperty_button.classList.add('json-editor-btntype-properties')
+      this.addproperty_button.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.toggleAddProperty()
+      })
+      this.controls.appendChild(this.addproperty_button)
+      this.controls.insertBefore(this.addproperty_holder, this.controls.childNodes[1])
+
+      this.refreshAddProperties()
+
+      /* non required properties start deactivated */
+      this.deactivateNonRequiredProperties(false)
     }
-            
-    // Fix table cell ordering
-    if(this.options.table_row) {
-      this.editor_holder = this.container;
-      $each(this.property_order,function(i,key) {
-        self.editor_holder.appendChild(self.editors[key].container);
-      });
+
+    /* Fix table cell ordering */
+    if (this.options.table_row) {
+      this.editor_holder = this.container
+      this.property_order.forEach(key => {
+        this.editor_holder.appendChild(this.editors[key].container)
+      })
+      /* Layout object editors in grid if needed */
+    } else {
+      /* Initial layout */
+      this.layoutEditors()
+      /* Do it again now that we know the approximate heights of elements */
+      this.layoutEditors()
     }
-    // Layout object editors in grid if needed
-    else {
-      // Initial layout
-      this.layoutEditors();
-      // Do it again now that we know the approximate heights of elements
-      this.layoutEditors();
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable()
     }
-  },
-  showEditJSON: function() {
-    if(!this.editjson_holder) return;
-    this.hideAddProperty();
-
-    // Position the form directly beneath the button
-    // TODO: edge detection
-    this.editjson_holder.style.left = this.editjson_button.offsetLeft+"px";
-    this.editjson_holder.style.top = this.editjson_button.offsetTop + this.editjson_button.offsetHeight+"px";
-
-    // Start the textarea with the current value
-    this.editjson_textarea.value = JSON.stringify(this.getValue(),null,2);
-
-    // Disable the rest of the form while editing JSON
-    this.disable();
-
-    this.editjson_holder.style.display = '';
-    this.editjson_button.disabled = false;
-    this.editing_json = true;
-  },
-  hideEditJSON: function() {
-    if(!this.editjson_holder) return;
-    if(!this.editing_json) return;
-
-    this.editjson_holder.style.display = 'none';
-    this.enable();
-    this.editing_json = false;
-  },
-  copyJSON: function() {
-    if(!this.editjson_holder) return;
-    var ta = document.createElement('textarea');
-    ta.value = this.editjson_textarea.value;
-    ta.setAttribute('readonly', '');
-    ta.style.position = 'absolute';
-    ta.style.left = '-9999px';
-    document.body.appendChild(ta);
-    ta.select();
-    document.execCommand('copy');
-    document.body.removeChild(ta);
-  },
-  saveJSON: function() {
-    if(!this.editjson_holder) return;
+  }
 
-    try {
-      var json = JSON.parse(this.editjson_textarea.value);
-      this.setValue(json);
-      this.hideEditJSON();
-      this.onChange(true); 
+  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')
+    const editorOptInEnabled = (editorOptInDefined && this.options.show_opt_in === true)
+    const editorOptInDisabled = (editorOptInDefined && this.options.show_opt_in === false)
+    if (editorOptInEnabled || (!editorOptInDisabled && globalOptIn) || (!editorOptInDefined && globalOptIn)) {
+      Object.entries(this.editors).forEach(([key, editor]) => {
+        if (!this.isRequiredObject(editor)) {
+          this.editors[key].deactivate()
+        }
+        if (recursive && typeof this.editors[key].deactivateNonRequiredProperties === 'function') {
+          this.editors[key].deactivateNonRequiredProperties(recursive)
+        }
+      })
     }
-    catch(e) {
-      window.alert('invalid JSON');
-      throw e;
+  }
+
+  showEditJSON () {
+    if (!this.editjson_holder) return
+    this.hideAddProperty()
+
+    /* Position the form directly beneath the button */
+    /* TODO: edge detection */
+    this.editjson_holder.style.left = `${this.editjson_control.offsetLeft}px`
+    this.editjson_holder.style.top = `${this.editjson_control.offsetTop + this.editjson_control.offsetHeight}px`
+
+    /* Start the textarea with the current value */
+    this.editjson_textarea.value = JSON.stringify(this.getValue(), null, 2)
+
+    /* Disable the rest of the form while editing JSON */
+    this.disable()
+
+    this.editjson_holder.style.display = ''
+    this.editjson_control.disabled = false
+    this.editing_json = true
+  }
+
+  hideEditJSON () {
+    if (!this.editjson_holder) return
+    if (!this.editing_json) return
+
+    this.editjson_holder.style.display = 'none'
+    this.enable()
+    this.editing_json = false
+  }
+
+  copyJSON () {
+    if (!this.editjson_holder) return
+    navigator.clipboard.writeText(this.editjson_textarea.value)
+      .catch((e) => window.alert(e))
+  }
+
+  saveJSON () {
+    if (!this.editjson_holder) return
+
+    try {
+      const json = JSON.parse(this.editjson_textarea.value)
+      this.setValue(json)
+      this.hideEditJSON()
+      this.onChange(true)
+    } catch (e) {
+      window.alert('invalid JSON')
+      throw e
     }
-  },
-  toggleEditJSON: function() {
-    if(this.editing_json) this.hideEditJSON();
-    else this.showEditJSON();
-  },
-  insertPropertyControlUsingPropertyOrder: function (property, control, container) {
-    var propertyOrder;
-    if (this.schema.properties[property])
-      propertyOrder = this.schema.properties[property].propertyOrder;
-    if (typeof propertyOrder !== "number") propertyOrder = 1000;
-    control.propertyOrder = propertyOrder;
-
-    for (var i = 0; i < container.childNodes.length; i++) {
-      var child = container.childNodes[i];
+  }
+
+  toggleEditJSON () {
+    if (this.editing_json) this.hideEditJSON()
+    else this.showEditJSON()
+  }
+
+  insertPropertyControlUsingPropertyOrder (property, control, container) {
+    let propertyOrder
+    if (this.schema.properties[property]) { propertyOrder = this.schema.properties[property].propertyOrder }
+    if (typeof propertyOrder !== 'number') propertyOrder = 1000
+    control.propertyOrder = propertyOrder
+
+    for (let i = 0; i < container.childNodes.length; i++) {
+      const child = container.childNodes[i]
       if (control.propertyOrder < child.propertyOrder) {
-        this.addproperty_list.insertBefore(control, child);
-        control = null;
-        break;
+        this.addproperty_list.insertBefore(control, child)
+        control = null
+        break
       }
     }
     if (control) {
-      this.addproperty_list.appendChild(control);
+      this.addproperty_list.appendChild(control)
     }
-  },
-  addPropertyCheckbox: function(key) {
-    var self = this;
-    var checkbox, label, labelText, control;
+  }
+
+  addPropertyCheckbox (key) {
+    let labelText
 
-    checkbox = self.theme.getCheckbox();
-    checkbox.style.width = 'auto';
+    const checkbox = this.theme.getCheckbox()
 
-    if (this.schema.properties[key] && this.schema.properties[key].title)
-      labelText = this.schema.properties[key].title;
-    else
-      labelText = key;
+    if (this.schema.properties[key] && this.schema.properties[key].title) { labelText = this.schema.properties[key].title } else { labelText = key }
 
-    label = self.theme.getCheckboxLabel(labelText);
+    const label = this.theme.getCheckboxLabel(labelText)
 
-    control = self.theme.getFormControl(label,checkbox);
-    control.style.paddingBottom = control.style.marginBottom = control.style.paddingTop = control.style.marginTop = 0;
-    control.style.height = 'auto';
-    //control.style.overflowY = 'hidden';
+    const control = this.theme.getFormControl(label, checkbox, null, null, this.path + '-' + key)
+    control.style.paddingBottom = control.style.marginBottom = control.style.paddingTop = control.style.marginTop = 0
+    control.style.height = 'auto'
+    /* control.style.overflowY = 'hidden'; */
 
-    this.insertPropertyControlUsingPropertyOrder(key, control, this.addproperty_list);
+    this.insertPropertyControlUsingPropertyOrder(key, control, this.addproperty_list)
 
-    checkbox.checked = key in this.editors;
-    checkbox.addEventListener('change',function() {
-      if(checkbox.checked) {
-        self.addObjectProperty(key);
+    checkbox.checked = key in this.editors
+    checkbox.addEventListener('change', () => {
+      if (checkbox.checked) {
+        this.addObjectProperty(key)
+      } else {
+        this.removeObjectProperty(key)
       }
-      else {
-        self.removeObjectProperty(key);
+      this.onChange(true)
+    })
+    this.addproperty_checkboxes[key] = checkbox
+
+    return checkbox
+  }
+
+  showAddProperty () {
+    if (!this.addproperty_holder) return
+    this.hideEditJSON()
+
+    /* Position the form directly beneath the button */
+    /* TODO: edge detection */
+    this.addproperty_holder.style.left = `${this.addproperty_button.offsetLeft}px`
+    this.addproperty_holder.style.top = `${this.addproperty_button.offsetTop + this.addproperty_button.offsetHeight}px`
+
+    /* Disable the rest of the form while editing JSON */
+    this.disable()
+
+    this.adding_property = true
+    this.addproperty_button.disabled = false
+    this.addproperty_holder.style.display = ''
+    this.refreshAddProperties()
+  }
+
+  hideAddProperty () {
+    if (!this.addproperty_holder) return
+    if (!this.adding_property) return
+
+    this.addproperty_holder.style.display = 'none'
+    this.enable()
+
+    this.adding_property = false
+  }
+
+  toggleAddProperty () {
+    if (this.adding_property) this.hideAddProperty()
+    else this.showAddProperty()
+  }
+
+  removeObjectProperty (property) {
+    if (this.editors[property]) {
+      // do not destroy dependent editors
+      if (this.editors[property].schema?.options?.dependencies) {
+        return
       }
-      self.onChange(true);
-    });
-    self.addproperty_checkboxes[key] = checkbox;
-
-    return checkbox;
-  },
-  showAddProperty: function() {
-    if(!this.addproperty_holder) return;
-    this.hideEditJSON();
-
-    // Position the form directly beneath the button
-    // TODO: edge detection
-    this.addproperty_holder.style.left = this.addproperty_button.offsetLeft+"px";
-    this.addproperty_holder.style.top = this.addproperty_button.offsetTop + this.addproperty_button.offsetHeight+"px";
-
-    // Disable the rest of the form while editing JSON
-    this.disable();
-
-    this.adding_property = true;
-    this.addproperty_button.disabled = false;
-    this.addproperty_holder.style.display = '';
-    this.refreshAddProperties();
-  },
-  hideAddProperty: function() {
-    if(!this.addproperty_holder) return;
-    if(!this.adding_property) return;
-
-    this.addproperty_holder.style.display = 'none';
-    this.enable();
-
-    this.adding_property = false;
-  },
-  toggleAddProperty: function() {
-    if(this.adding_property) this.hideAddProperty();
-    else this.showAddProperty();
-  },
-  removeObjectProperty: function(property) {
-    if(this.editors[property]) {
-      this.editors[property].unregister();
-      delete this.editors[property];
-
-      this.refreshValue();
-      this.layoutEditors();
-    }
-  },
-  addObjectProperty: function(name, prebuild_only) {
-    var self = this;
-
-    // Property is already added
-    if(this.editors[name]) return;
-
-    // Property was added before and is cached
-    if(this.cached_editors[name]) {
-      this.editors[name] = this.cached_editors[name];
-      if(prebuild_only) return;
-      this.editors[name].register();
+
+      this.editors[property].unregister()
+      delete this.editors[property]
+
+      this.refreshValue()
+      this.layoutEditors()
     }
-    // New property
-    else {
-      if(!this.canHaveAdditionalProperties() && (!this.schema.properties || !this.schema.properties[name])) {
-        return;
-      }
+  }
 
-      var schema = self.getPropertySchema(name);
-      if(typeof schema.propertyOrder !== 'number'){
-        // if the propertyOrder undefined, then set a smart default value.
-        schema.propertyOrder = Object.keys(self.editors).length + 1000;
+  getSchemaOnMaxDepth (schema) {
+    return Object.keys(schema).reduce((acc, key) => {
+      switch (key) {
+        case '$ref':
+          return acc
+        case 'properties':
+        case 'items':
+          return {
+            ...acc,
+            [key]: {}
+          }
+        case 'additionalProperties':
+        case 'propertyNames':
+          return {
+            ...acc,
+            [key]: true
+          }
+        default:
+          return {
+            ...acc,
+            [key]: schema[key]
+          }
       }
+    }, {})
+  }
 
+  addObjectProperty (name, prebuildOnly) {
+    /* Property is already added */
+    if (this.editors[name]) return
+
+    /* Property was added before and is cached */
+    if (this.cached_editors[name]) {
+      this.editors[name] = this.cached_editors[name]
+      if (prebuildOnly) return
+      this.editors[name].register()
+      /* New property */
+    } else {
+      if (!this.canHaveAdditionalProperties() && (!this.schema.properties || !this.schema.properties[name]) &&
+        (!this.schema.patternProperties || !(Object.keys(this.schema.patternProperties).find(i => new RegExp(i).test(name))))) {
+        return
+      }
 
-      // Add the property
-      var editor = self.jsoneditor.getEditorClass(schema);
-
-      self.editors[name] = self.jsoneditor.createEditor(editor,{
-        jsoneditor: self.jsoneditor,
-        schema: schema,
-        path: self.path+'.'+name,
-        parent: self
-      });
-      self.editors[name].preBuild();
+      const schema = this.getPropertySchema(name)
+      if (typeof schema.propertyOrder !== 'number') {
+        /* if the propertyOrder undefined, then set a smart default value. */
+        schema.propertyOrder = Object.keys(this.editors).length + 1000
+      }
 
-      if(!prebuild_only) {
-        var holder = self.theme.getChildEditorHolder();
-        self.editor_holder.appendChild(holder);
-        self.editors[name].setContainer(holder);
-        self.editors[name].build();
-        self.editors[name].postBuild();
+      /* Add the property */
+      const editor = this.jsoneditor.getEditorClass(schema)
+
+      const { max_depth: maxDepth } = this.jsoneditor.options
+
+      this.editors[name] = this.jsoneditor.createEditor(editor, {
+        jsoneditor: this.jsoneditor,
+        schema: !!maxDepth && this.currentDepth >= maxDepth ? this.getSchemaOnMaxDepth(schema) : schema,
+        path: `${this.path}.${name}`,
+        parent: this
+      }, this.currentDepth + 1)
+      this.editors[name].preBuild()
+
+      if (!prebuildOnly) {
+        const holder = this.theme.getChildEditorHolder()
+        this.editor_holder.appendChild(holder)
+        this.editors[name].setContainer(holder)
+        this.editors[name].build()
+        this.editors[name].postBuild()
+        this.editors[name].setOptInCheckbox(editor.header)
+        this.editors[name].activate()
       }
 
-      self.cached_editors[name] = self.editors[name];
+      this.cached_editors[name] = this.editors[name]
     }
 
-    // If we're only prebuilding the editors, don't refresh values
-    if(!prebuild_only) {
-      self.refreshValue();
-      self.layoutEditors();
-    }
-  },
-  onChildEditorChange: function(editor) {
-    this.refreshValue();
-    this._super(editor);
-  },
-  canHaveAdditionalProperties: function() {
-    if (typeof this.schema.additionalProperties === "boolean") {
-      return this.schema.additionalProperties;
-    }
-    return !this.jsoneditor.options.no_additional_properties;
-  },
-  destroy: function() {
-    $each(this.cached_editors, function(i,el) {
-      el.destroy();
-    });
-    if(this.editor_holder) this.editor_holder.innerHTML = '';
-    if(this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title);
-    if(this.error_holder && this.error_holder.parentNode) this.error_holder.parentNode.removeChild(this.error_holder);
-
-    this.editors = null;
-    this.cached_editors = null;
-    if(this.editor_holder && this.editor_holder.parentNode) this.editor_holder.parentNode.removeChild(this.editor_holder);
-    this.editor_holder = null;
-
-    this._super();
-  },
-  getValue: function() {
-    if (!this.dependenciesFulfilled) {
-      return undefined;
+    /* If we're only prebuilding the editors, don't refresh values */
+    if (!prebuildOnly) {
+      this.refreshValue()
+      this.layoutEditors()
     }
-    var result = this._super();
-    if(this.jsoneditor.options.remove_empty_properties || this.options.remove_empty_properties) {
-      for (var i in result) {
-        if (result.hasOwnProperty(i)) {
-          if (typeof result[i] === 'undefined' || result[i] === '' || result[i] === Object(result[i]) && Object.keys(result[i]).length == 0 && result[i].constructor == Object) {
-            delete result[i];
-          }
-        }
-      }
+  }
+
+  onOutsideModalClick (e) {
+    const path = e.path || (e.composedPath && e.composedPath())
+    if (this.addproperty_holder && !this.addproperty_holder.contains(path[0]) && this.adding_property) {
+      e.preventDefault()
+      e.stopPropagation()
+      this.toggleAddProperty()
     }
+  }
 
-    return result;
-  },
-  refreshValue: function() {
-    this.value = {};
-    var self = this;
+  onChildEditorChange (editor, eventData) {
+    this.refreshValue()
+    super.onChildEditorChange(editor, eventData)
+  }
 
-    for(var i in this.editors) {
-      if(!this.editors.hasOwnProperty(i)) continue;
-      this.value[i] = this.editors[i].getValue();
+  canHaveAdditionalProperties () {
+    // schemas have priority over options
+    // local options have priority over global options
+    // lastly global options are evaluated
+
+    // If the schema additionalProperties keyword is a boolean let the keyword decide
+    if (typeof this.schema.additionalProperties === 'boolean') {
+      return this.schema.additionalProperties
     }
 
-    if(this.adding_property) this.refreshAddProperties();
-  },
-  refreshAddProperties: function() {
-    if(this.options.disable_properties || (this.options.disable_properties !== false && this.jsoneditor.options.disable_properties)) {
-      this.addproperty_controls.style.display = 'none';
-      return;
+    // If the schema additionalProperties keyword is a schema then additional properties are allowed and limited by such schema
+    if (typeof this.schema.additionalProperties === 'object' && this.schema.additionalProperties !== null) {
+      return true
     }
 
-    var can_add = false, can_remove = false, num_props = 0, i, show_modal = false;
+    // If the schema options no_additional_properties is a boolean let the option decide
+    if (typeof this.options.no_additional_properties === 'boolean') {
+      return !this.options.no_additional_properties
+    }
 
-    // Get number of editors
-    for(i in this.editors) {
-      if(!this.editors.hasOwnProperty(i)) continue;
-      num_props++;
+    // If the global options no_additional_properties is a boolean let the option decide
+    if (typeof this.jsoneditor.options.no_additional_properties === 'boolean') {
+      return !this.jsoneditor.options.no_additional_properties
     }
 
-    // Determine if we can add back removed properties
-    can_add = this.canHaveAdditionalProperties() && !(typeof this.schema.maxProperties !== "undefined" && num_props >= this.schema.maxProperties);
+    return true
+  }
+
+  destroy () {
+    Object.values(this.cached_editors).forEach(el => el.destroy())
+    if (this.editor_holder) this.editor_holder.innerHTML = ''
+    if (this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title)
+    if (this.error_holder && this.error_holder.parentNode) this.error_holder.parentNode.removeChild(this.error_holder)
+
+    this.editors = null
+    this.cached_editors = null
+    if (this.editor_holder && this.editor_holder.parentNode) this.editor_holder.parentNode.removeChild(this.editor_holder)
+    this.editor_holder = null
+    document.removeEventListener('click', this.onOutsideModalClickListener, true)
 
-    if(this.addproperty_checkboxes) {
-      this.addproperty_list.innerHTML = '';
+    super.destroy()
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    const result = super.getValue()
+    const isEmpty = obj => typeof obj === 'undefined' || obj === '' ||
+    (
+      obj === Object(obj) &&
+      Object.keys(obj).length === 0 &&
+      obj.constructor === Object
+    )
+    if (result && (this.jsoneditor.options.remove_empty_properties || this.options.remove_empty_properties)) {
+      Object.keys(result).forEach(key => {
+        if (isEmpty(result[key])) {
+          delete result[key]
+        }
+      })
     }
-    this.addproperty_checkboxes = {};
 
-    // Check for which editors can't be removed or added back
-    for(i in this.cached_editors) {
-      if(!this.cached_editors.hasOwnProperty(i)) continue;
+    if (result && (this.jsoneditor.options.remove_false_properties || this.options.remove_false_properties)) {
+      Object.keys(result).forEach(key => {
+        if (result[key] === false) {
+          delete result[key]
+        }
+      })
+    }
+    return result
+  }
 
-      this.addPropertyCheckbox(i);
+  refreshValue () {
+    this.value = {}
 
-      if(this.isRequired(this.cached_editors[i]) && i in this.editors) {
-        this.addproperty_checkboxes[i].disabled = true;
+    if (!this.editors) {
+      return
+    }
+
+    Object.keys(this.editors).forEach(i => {
+      if (this.editors[i].isActive()) {
+        this.editors[i].refreshValue()
+        this.value[i] = this.editors[i].getValue()
       }
+    })
 
-      if(typeof this.schema.minProperties !== "undefined" && num_props <= this.schema.minProperties) {
-        this.addproperty_checkboxes[i].disabled = this.addproperty_checkboxes[i].checked;
-        if(!this.addproperty_checkboxes[i].checked) show_modal = true;
+    Object.keys(this.editors).forEach(i => {
+      if (this.editors[i].isActive()) {
+        this.activateDependentRequired(this.editors[i].key)
       }
-      else if(!(i in this.editors)) {
-        if(!can_add  && !this.schema.properties.hasOwnProperty(i)) {
-          this.addproperty_checkboxes[i].disabled = true;
-        }
-        else {
-          this.addproperty_checkboxes[i].disabled = false;
-          show_modal = true;
+    })
+
+    if (this.adding_property) {
+      this.refreshAddProperties()
+    }
+  }
+
+  activateDependentRequired (key) {
+    const dependentRequired = this.getDependentRequired(key)
+    dependentRequired.forEach((requiredProperty) => {
+      let dependentRequiredEditor
+
+      Object.entries(this.cached_editors).forEach(([i, cachedEditor]) => {
+        if (cachedEditor.key === requiredProperty) {
+          dependentRequiredEditor = cachedEditor
         }
+      })
+
+      if (dependentRequiredEditor && !dependentRequiredEditor.isActive()) {
+        dependentRequiredEditor.activate()
       }
-      else {
-        show_modal = true;
-        can_remove = true;
+    })
+  }
+
+  getDependentRequired (property) {
+    if (this.schema.dependentRequired) {
+      if (hasOwnProperty(this.schema.dependentRequired, property)) {
+        return this.schema.dependentRequired[property]
       }
     }
 
-    if(this.canHaveAdditionalProperties()) {
-      show_modal = true;
-    }
+    return []
+  }
 
-    // Additional addproperty checkboxes not tied to a current editor
-    for(i in this.schema.properties) {
-      if(!this.schema.properties.hasOwnProperty(i)) continue;
-      if(this.cached_editors[i]) continue;
-      show_modal = true;
-      this.addPropertyCheckbox(i);
+  refreshAddProperties () {
+    if (this.options.disable_properties || (this.options.disable_properties !== false && this.jsoneditor.options.disable_properties)) {
+      this.addproperty_button.style.display = 'none'
+      return
     }
 
-    // If no editors can be added or removed, hide the modal button
-    if(!show_modal) {
-      this.hideAddProperty();
-      this.addproperty_controls.style.display = 'none';
+    let canAdd = false; let numProps = 0; let showModal = false
+
+    /* Get number of editors */
+    Object.keys(this.editors).forEach(i => numProps++)
+
+    /* Determine if we can add back removed properties */
+    canAdd = this.canHaveAdditionalProperties() && !(typeof this.schema.maxProperties !== 'undefined' && numProps >= this.schema.maxProperties)
+
+    if (this.addproperty_checkboxes) {
+      this.addproperty_list.innerHTML = ''
     }
-    // If additional properties are disabled
-    else if(!this.canHaveAdditionalProperties()) {
-      this.addproperty_add.style.display = 'none';
-      this.addproperty_input.style.display = 'none';
+    this.addproperty_checkboxes = {}
+
+    /* Check for which editors can't be removed or added back */
+    Object.keys(this.cached_editors).forEach(i => {
+      this.addPropertyCheckbox(i)
+
+      if (this.isRequiredObject(this.cached_editors[i]) && i in this.editors) {
+        this.addproperty_checkboxes[i].disabled = true
+      }
+
+      if (typeof this.schema.minProperties !== 'undefined' && numProps <= this.schema.minProperties) {
+        this.addproperty_checkboxes[i].disabled = this.addproperty_checkboxes[i].checked
+        if (!this.addproperty_checkboxes[i].checked) showModal = true
+      } else if (!(i in this.editors)) {
+        if (!canAdd && !hasOwnProperty(this.schema.properties, i)) {
+          this.addproperty_checkboxes[i].disabled = true
+        } else {
+          this.addproperty_checkboxes[i].disabled = false
+          showModal = true
+        }
+      } else {
+        showModal = true
+      }
+    })
+
+    if (this.canHaveAdditionalProperties()) {
+      showModal = true
     }
-    // If no new properties can be added
-    else if(!can_add) {
-      this.addproperty_add.disabled = true;
+
+    /* Additional addproperty checkboxes not tied to a current editor */
+    Object.keys(this.schema.properties).forEach(i => {
+      if (this.cached_editors[i]) return
+      showModal = true
+      this.addPropertyCheckbox(i)
+    })
+
+    /* If no editors can be added or removed, hide the modal button */
+    if (!showModal) {
+      this.hideAddProperty()
+      this.addproperty_button.style.display = 'none'
+      /* If additional properties are disabled */
+    } else if (!this.canHaveAdditionalProperties()) {
+      this.addproperty_add.style.display = 'none'
+      this.addproperty_input.style.display = 'none'
+      /* If no new properties can be added */
+    } else if (!canAdd) {
+      this.addproperty_add.disabled = true
+      /* If new properties can be added */
+    } else {
+      this.addproperty_add.disabled = false
     }
-    // If new properties can be added
-    else {
-      this.addproperty_add.disabled = false;
+  }
+
+  isRequiredObject (editor) {
+    if (!editor) {
+      return
     }
-  },
-  isRequired: function(editor) {
-    if(typeof editor.schema.required === "boolean") return editor.schema.required;
-    else if(Array.isArray(this.schema.required)) return this.schema.required.indexOf(editor.key) > -1;
-    else if(this.jsoneditor.options.required_by_default) return true;
-    else return false;
-  },
-  setValue: function(value, initial) {
-    var self = this;
-    value = value || {};
-
-    if(typeof value !== "object" || Array.isArray(value)) value = {};
-
-    // First, set the values for all of the defined properties
-    $each(this.cached_editors, function(i,editor) {
-      // Value explicitly set
-      if(typeof value[i] !== "undefined") {
-        self.addObjectProperty(i);
-        editor.setValue(value[i],initial);
-      }
-      // Otherwise, remove value unless this is the initial set or it's required
-      else if(!initial && !self.isRequired(editor)) {
-        self.removeObjectProperty(i);
-      }
-      // Otherwise, set the value to the default
-      else {
-        editor.setValue(editor.getDefault(),initial);
-      }
-    });
 
-    $each(value, function(i,val) {
-      if(!self.cached_editors[i]) {
-        self.addObjectProperty(i);
-        if(self.editors[i]) self.editors[i].setValue(val,initial);
-      }
-    });
-
-    this.refreshValue();
-    this.layoutEditors();
-    this.onChange();
-  },
-  showValidationErrors: function(errors) {
-    var self = this;
-
-    // Get all the errors that pertain to this editor
-    var my_errors = [];
-    var other_errors = [];
-    $each(errors, function(i,error) {
-      if(error.path === self.path) {
-        my_errors.push(error);
+    if (typeof editor.schema.required === 'boolean') return editor.schema.required
+    else if (Array.isArray(this.schema.required)) return this.schema.required.includes(editor.key)
+    else if (this.jsoneditor.options.required_by_default) return true
+    return false
+  }
+
+  setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
+    value = value || {}
+
+    if (typeof value !== 'object' || Array.isArray(value)) value = {}
+
+    /* First, set the values for all of the defined properties */
+    Object.entries(this.cached_editors).forEach(([i, editor]) => {
+      /* Value explicitly set */
+      if (typeof value[i] !== 'undefined') {
+        this.addObjectProperty(i)
+        editor.setValue(value[i], initial)
+        editor.activate()
+        if (this.disabled) {
+          editor.disable()
+        }
+        /* Otherwise, remove value unless this is the initial set or it's required */
+      } else if (!initial && !this.isRequiredObject(editor)) {
+        if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {
+          editor.deactivate()
+        } else {
+          this.removeObjectProperty(i)
+        }
+        /* Otherwise, set the value to the default */
+      } else {
+        editor.setValue(editor.getDefault(), initial)
       }
-      else {
-        other_errors.push(error);
+    })
+
+    Object.entries(value).forEach(([i, val]) => {
+      if (!this.cached_editors[i]) {
+        this.addObjectProperty(i)
+        if (this.editors[i]) this.editors[i].setValue(val, initial, !!this.editors[i].template)
       }
-    });
-
-    // Show errors for this editor
-    if(this.error_holder) {
-      if(my_errors.length) {
-        var message = [];
-        this.error_holder.innerHTML = '';
-        this.error_holder.style.display = '';
-        $each(my_errors, function(i,error) {
-          self.error_holder.appendChild(self.theme.getErrorMessage(error.message));
-        });
+    })
+
+    this.refreshValue()
+    this.layoutEditors()
+    this.onChange()
+  }
+
+  showValidationErrors (errors) {
+    /* Get all the errors that pertain to this editor */
+    const myErrors = []
+    const otherErrors = []
+    errors.forEach(error => {
+      if (error.path === this.path) {
+        myErrors.push(error)
+      } else {
+        otherErrors.push(error)
       }
-      // Hide error area
-      else {
-        this.error_holder.style.display = 'none';
+    })
+
+    /* Show errors for this editor */
+    if (this.error_holder) {
+      if (myErrors.length) {
+        this.error_holder.innerHTML = ''
+        this.error_holder.style.display = ''
+        myErrors.forEach(error => {
+          if (error.errorcount && error.errorcount > 1) error.message += ` (${error.errorcount} errors)`
+          this.error_holder.appendChild(this.theme.getErrorMessage(error.message))
+        })
+        /* Hide error area */
+      } else {
+        this.error_holder.style.display = 'none'
       }
     }
 
-    // Show error for the table row if this is inside a table
-    if(this.options.table_row) {
-      if(my_errors.length) {
-        this.theme.addTableRowError(this.container);
-      }
-      else {
-        this.theme.removeTableRowError(this.container);
+    /* Show error for the table row if this is inside a table */
+    if (this.options.table_row) {
+      if (myErrors.length) {
+        this.theme.addTableRowError(this.container)
+      } else {
+        this.theme.removeTableRowError(this.container)
       }
     }
 
-    // Show errors for child editors
-    $each(this.editors, function(i,editor) {
-      editor.showValidationErrors(other_errors);
-    });
+    /* Show errors for child editors */
+    Object.values(this.editors).forEach(editor => {
+      editor.showValidationErrors(otherErrors)
+    })
   }
-});
+}
+
+ObjectEditor.rules = rules