@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/array.js

@@ -1,804 +1,921 @@
-JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
-  askConfirmation: function() {
+import { AbstractEditor } from '../editor.js'
+import { extend, generateUUID, trigger } from '../utilities.js'
+import rules from './array.css.js'
+
+export class ArrayEditor extends AbstractEditor {
+  askConfirmation () {
     if (this.jsoneditor.options.prompt_before_delete === true) {
-      if (confirm("Are you sure you want to remove this node?") === false) {
-        return false;
+      if (window.confirm(this.translate('button_delete_node_warning')) === false) {
+        return false
       }
     }
-    return true;
-  },
-  getDefault: function() {
-    return this.schema["default"] || [];
-  },
-  register: function() {
-    this._super();
-    if(this.rows) {
-      for(var i=0; i<this.rows.length; i++) {
-        this.rows[i].register();
-      }
+    return true
+  }
+
+  register () {
+    super.register()
+    if (this.rows) {
+      this.rows.forEach(row => row.register())
     }
-  },
-  unregister: function() {
-    this._super();
-    if(this.rows) {
-      for(var i=0; i<this.rows.length; i++) {
-        this.rows[i].unregister();
-      }
+  }
+
+  unregister () {
+    super.unregister()
+    if (this.rows) {
+      this.rows.forEach(row => row.unregister())
     }
-  },
-  getNumColumns: function() {
-    var info = this.getItemInfo(0);
-    // Tabs require extra horizontal space
-    if(this.tabs_holder && this.schema.format !== 'tabs-top') {
-      return Math.max(Math.min(12,info.width+2),4);
-    }
-    else {
-      return info.width;
-    }
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      if(this.add_row_button) this.add_row_button.disabled = false;
-      if(this.remove_all_rows_button) this.remove_all_rows_button.disabled = false;
-      if(this.delete_last_row_button) this.delete_last_row_button.disabled = false;
-
-      if(this.rows) {
-        for(var i=0; i<this.rows.length; i++) {
-          this.rows[i].enable();
-
-          if(this.rows[i].moveup_button) this.rows[i].moveup_button.disabled = false;
-          if(this.rows[i].movedown_button) this.rows[i].movedown_button.disabled = false;
-          if(this.rows[i].delete_button) this.rows[i].delete_button.disabled = false;
-        }
-      }
-      this._super();
-    }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    if(this.add_row_button) this.add_row_button.disabled = true;
-    if(this.remove_all_rows_button) this.remove_all_rows_button.disabled = true;
-    if(this.delete_last_row_button) this.delete_last_row_button.disabled = true;
-
-    if(this.rows) {
-      for(var i=0; i<this.rows.length; i++) {
-        this.rows[i].disable(always_disabled);
-
-        if(this.rows[i].moveup_button) this.rows[i].moveup_button.disabled = true;
-        if(this.rows[i].movedown_button) this.rows[i].movedown_button.disabled = true;
-        if(this.rows[i].delete_button) this.rows[i].delete_button.disabled = true;
-      }
+  }
+
+  getNumColumns () {
+    const info = this.getItemInfo(0)
+    /* Tabs require extra horizontal space */
+    if (this.tabs_holder && this.schema.format !== 'tabs-top') {
+      return Math.max(Math.min(12, info.width + 2), 4)
     }
-    this._super();
-  },
-  preBuild: function() {
-    this._super();
-
-    this.rows = [];
-    this.row_cache = [];
-
-    this.hide_delete_buttons = this.options.disable_array_delete || this.jsoneditor.options.disable_array_delete;
-    this.hide_delete_all_rows_buttons = this.hide_delete_buttons || this.options.disable_array_delete_all_rows || this.jsoneditor.options.disable_array_delete_all_rows;
-    this.hide_delete_last_row_buttons = this.hide_delete_buttons || this.options.disable_array_delete_last_row || this.jsoneditor.options.disable_array_delete_last_row;
-    this.hide_move_buttons = this.options.disable_array_reorder || this.jsoneditor.options.disable_array_reorder;
-    this.hide_add_button = this.options.disable_array_add || this.jsoneditor.options.disable_array_add;
-    this.show_copy_button = this.options.enable_array_copy || this.jsoneditor.options.enable_array_copy;
-    this.array_controls_top = this.options.array_controls_top || this.jsoneditor.options.array_controls_top;
-  },
-  build: function() {
-    var self = this;
-
-    if(!this.options.compact) {
-      this.header = document.createElement('span');
-      this.header.textContent = this.getTitle();
-      this.title = this.theme.getHeader(this.header);
-      this.container.appendChild(this.title);
-      this.title_controls = this.theme.getHeaderButtonHolder();
-      this.title.appendChild(this.title_controls);
-      if(this.schema.description) {
-        this.description = this.theme.getDescription(this.schema.description);
-        this.container.appendChild(this.description);
-      }
-      this.error_holder = document.createElement('div');
-      this.container.appendChild(this.error_holder);
+    return info.width
+  }
 
-      if(this.schema.format === 'tabs-top') {
-        this.controls = this.theme.getHeaderButtonHolder();
-        this.title.appendChild(this.controls);
-        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.getItemTitle()));
-        this.container.appendChild(this.tabs_holder);
-        this.row_holder = this.theme.getTopTabContentHolder(this.tabs_holder);
+  enable () {
+    if (!this.always_disabled) {
+      this.setAvailability(this, false)
 
-        this.active_tab = null;
+      if (this.rows) {
+        this.rows.forEach(row => {
+          row.enable()
+          this.setAvailability(row, false)
+        })
       }
-      else if(this.schema.format === 'tabs') {
-        this.controls = this.theme.getHeaderButtonHolder();
-        this.title.appendChild(this.controls);
-        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.getItemTitle()));
-        this.container.appendChild(this.tabs_holder);
-        this.row_holder = this.theme.getTabContentHolder(this.tabs_holder);
-
-        this.active_tab = null;
-      }
-      else {
-        this.panel = this.theme.getIndentedPanel();
-        this.container.appendChild(this.panel);
-        this.row_holder = document.createElement('div');
-        this.panel.appendChild(this.row_holder);
-        this.controls = this.theme.getButtonHolder();
+      super.enable()
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    this.setAvailability(this, true)
+
+    if (this.rows) {
+      this.rows.forEach(row => {
+        row.disable(alwaysDisabled)
+        this.setAvailability(row, true)
+      })
+    }
+    super.disable()
+  }
+
+  setAvailability (element, val) {
+    if (element.add_row_button) element.add_row_button.disabled = val
+    if (element.remove_all_rows_button) element.remove_all_rows_button.disabled = val
+    if (element.delete_last_row_button) element.delete_last_row_button.disabled = val
+    if (element.copy_button) element.copy_button.disabled = val
+    if (element.delete_button) element.delete_button.disabled = val
+    if (element.moveup_button) element.moveup_button.disabled = val
+    if (element.movedown_button) element.movedown_button.disabled = val
+  }
+
+  preBuild () {
+    super.preBuild()
+
+    this.rows = []
+    this.row_cache = []
+
+    this.hide_delete_buttons = this.options.disable_array_delete || this.jsoneditor.options.disable_array_delete
+    this.hide_delete_all_rows_buttons = this.hide_delete_buttons || this.options.disable_array_delete_all_rows || this.jsoneditor.options.disable_array_delete_all_rows
+    this.hide_delete_last_row_buttons = this.hide_delete_buttons || this.options.disable_array_delete_last_row || this.jsoneditor.options.disable_array_delete_last_row
+    this.hide_move_buttons = this.options.disable_array_reorder || this.jsoneditor.options.disable_array_reorder
+    this.hide_add_button = this.options.disable_array_add || this.jsoneditor.options.disable_array_add
+    this.show_copy_button = this.options.enable_array_copy || this.jsoneditor.options.enable_array_copy
+    this.array_controls_top = this.options.array_controls_top || this.jsoneditor.options.array_controls_top
+  }
+
+  build () {
+    if (!this.options.compact) {
+      this.header = document.createElement('span')
+      this.header.textContent = this.getTitle()
+      this.title = this.theme.getHeader(this.header, this.getPathDepth())
+      this.container.appendChild(this.title)
+      if (this.options.infoText) {
+        this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+        this.container.appendChild(this.infoButton)
+      }
+      this.title_controls = this.theme.getHeaderButtonHolder()
+      this.title.appendChild(this.title_controls)
+      if (this.schema.description) {
+        this.description = this.theme.getDescription(this.translateProperty(this.schema.description))
+        this.container.appendChild(this.description)
+      }
+      this.error_holder = document.createElement('div')
+      this.container.appendChild(this.error_holder)
+
+      if (this.schema.format === 'tabs-top') {
+        this.controls = this.theme.getHeaderButtonHolder()
+        this.title.appendChild(this.controls)
+        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.getItemTitle()))
+        this.container.appendChild(this.tabs_holder)
+        this.row_holder = this.theme.getTopTabContentHolder(this.tabs_holder)
+
+        this.active_tab = null
+      } else if (this.schema.format === 'tabs') {
+        this.controls = this.theme.getHeaderButtonHolder()
+        this.title.appendChild(this.controls)
+        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.getItemTitle()))
+        this.container.appendChild(this.tabs_holder)
+        this.row_holder = this.theme.getTabContentHolder(this.tabs_holder)
+
+        this.active_tab = null
+      } else {
+        this.panel = this.theme.getIndentedPanel()
+        this.container.appendChild(this.panel)
+        this.row_holder = document.createElement('div')
+        this.panel.appendChild(this.row_holder)
+        this.controls = this.theme.getButtonHolder()
         if (this.array_controls_top) {
-          this.title.appendChild(this.controls);
-        }
-        else {
-          this.panel.appendChild(this.controls);
+          this.title.appendChild(this.controls)
+        } else {
+          this.panel.appendChild(this.controls)
         }
       }
+    } else {
+      /* compact mode */
+      this.title = this.theme.getHeader('', this.getPathDepth())
+      this.container.appendChild(this.title)
+      this.panel = this.theme.getIndentedPanel()
+      this.container.appendChild(this.panel)
+      this.title_controls = this.theme.getHeaderButtonHolder()
+      this.title.appendChild(this.title_controls)
+      this.controls = this.theme.getHeaderButtonHolder()
+      this.title.appendChild(this.controls)
+      this.row_holder = document.createElement('div')
+      this.panel.appendChild(this.row_holder)
+    }
+
+    /* Add controls */
+    this.addControls()
+  }
+
+  postBuild () {
+    super.postBuild()
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable()
     }
-    else {
-        this.panel = this.theme.getIndentedPanel();
-        this.container.appendChild(this.panel);
-        this.title_controls = this.theme.getHeaderButtonHolder();
-        this.panel.appendChild(this.title_controls);
-        this.controls = this.theme.getButtonHolder();
-        this.panel.appendChild(this.controls);
-        this.row_holder = document.createElement('div');
-        this.panel.appendChild(this.row_holder);
-    }
-
-    // Add controls
-    this.addControls();
-  },
-  onChildEditorChange: function(editor) {
-    this.refreshValue();
-    this.refreshTabs(true);
-    this._super(editor);
-  },
-  getItemTitle: function() {
-    if(!this.item_title) {
-      if(this.schema.items && !Array.isArray(this.schema.items)) {
-        var tmp = this.jsoneditor.expandRefs(this.schema.items);
-        this.item_title = tmp.title || 'item';
-      }
-      else {
-        this.item_title = 'item';
+  }
+
+  onChildEditorChange (editor, eventData) {
+    this.refreshValue()
+    this.refreshTabs(true)
+    this.is_dirty = true
+    super.onChildEditorChange(editor, eventData)
+  }
+
+  getItemTitle () {
+    if (!this.item_title) {
+      if (this.schema.items && !Array.isArray(this.schema.items)) {
+        const tmp = this.jsoneditor.expandRefs(this.schema.items)
+        this.item_title = this.translateProperty(tmp.title) || this.translate('default_array_item_title')
+      } else {
+        this.item_title = this.translate('default_array_item_title')
       }
     }
-    return this.item_title;
-  },
-  getItemSchema: function(i) {
-    if(Array.isArray(this.schema.items)) {
-      if(i >= this.schema.items.length) {
-        if(this.schema.additionalItems===true) {
-          return {};
-        }
-        else if(this.schema.additionalItems) {
-          return $extend({},this.schema.additionalItems);
+    return this.cleanText(this.item_title)
+  }
+
+  getItemSchema (i) {
+    if (Array.isArray(this.schema.items)) {
+      if (i >= this.schema.items.length) {
+        if (this.schema.additionalItems === true) {
+          return {}
+        } else if (this.schema.additionalItems) {
+          return extend({}, this.schema.additionalItems)
         }
+      } else {
+        return extend({}, this.schema.items[i])
       }
-      else {
-        return $extend({},this.schema.items[i]);
-      }
-    }
-    else if(this.schema.items) {
-      return $extend({},this.schema.items);
+    } else if (this.schema.items) {
+      return extend({}, this.schema.items)
+    } else {
+      return {}
     }
-    else {
-      return {};
-    }
-  },
-  getItemInfo: function(i) {
-    var schema = this.getItemSchema(i);
+  }
 
-    // Check if it's cached
-    this.item_info = this.item_info || {};
-    var stringified = JSON.stringify(schema);
-    if(typeof this.item_info[stringified] !== "undefined") return this.item_info[stringified];
+  getItemInfo (i) {
+    let schema = this.getItemSchema(i)
 
-    // Get the schema for this item
-    schema = this.jsoneditor.expandRefs(schema);
+    /* Check if it's cached */
+    this.item_info = this.item_info || {}
+    const stringified = JSON.stringify(schema)
+    if (typeof this.item_info[stringified] !== 'undefined') return this.item_info[stringified]
+
+    /* Get the schema for this item */
+    schema = this.jsoneditor.expandRefs(schema)
 
     this.item_info[stringified] = {
-      title: schema.title || "item",
-      'default': schema["default"],
+      title: this.translateProperty(schema.title) || this.translate('default_array_item_title'),
+      default: schema.default,
       width: 12,
       child_editors: schema.properties || schema.items
-    };
-
-    return this.item_info[stringified];
-  },
-  getElementEditor: function(i) {
-    var item_info = this.getItemInfo(i);
-    var schema = this.getItemSchema(i);
-    schema = this.jsoneditor.expandRefs(schema);
-    schema.title = item_info.title+' '+(i+1);
-
-    var editor = this.jsoneditor.getEditorClass(schema);
-
-    var holder;
-    if(this.tabs_holder) {
-      if(this.schema.format === 'tabs-top') {
-        holder = this.theme.getTopTabContent();
-      }
-      else {
-        holder = this.theme.getTabContent();
-      }
-      holder.id = this.path+'.'+i;
     }
-    else if(item_info.child_editors) {
-      holder = this.theme.getChildEditorHolder();
-    }
-    else {
-      holder = this.theme.getIndentedPanel();
+
+    return this.item_info[stringified]
+  }
+
+  getElementEditor (i) {
+    const itemInfo = this.getItemInfo(i)
+    let schema = this.getItemSchema(i)
+    schema = this.jsoneditor.expandRefs(schema)
+    schema.title = `${itemInfo.title} ${i + 1}`
+
+    const editor = this.jsoneditor.getEditorClass(schema)
+
+    let holder
+    if (this.tabs_holder) {
+      if (this.schema.format === 'tabs-top') {
+        holder = this.theme.getTopTabContent()
+      } else {
+        holder = this.theme.getTabContent()
+      }
+      holder.id = `${this.path}.${i}`
+    } else if (itemInfo.child_editors) {
+      holder = this.theme.getChildEditorHolder()
+    } else {
+      holder = this.theme.getIndentedPanel()
     }
 
-    this.row_holder.appendChild(holder);
+    this.row_holder.appendChild(holder)
 
-    var ret = this.jsoneditor.createEditor(editor,{
+    const ret = this.jsoneditor.createEditor(editor, {
       jsoneditor: this.jsoneditor,
-      schema: schema,
+      schema,
       container: holder,
-      path: this.path+'.'+i,
+      path: `${this.path}.${i}`,
       parent: this,
       required: true
-    });
-    ret.preBuild();
-    ret.build();
-    ret.postBuild();
-
-    if(!ret.title_controls) {
-      ret.array_controls = this.theme.getButtonHolder();
-      holder.appendChild(ret.array_controls);
-    }
-
-    return ret;
-  },
-  destroy: function() {
-    this.empty(true);
-    if(this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title);
-    if(this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description);
-    if(this.row_holder && this.row_holder.parentNode) this.row_holder.parentNode.removeChild(this.row_holder);
-    if(this.controls && this.controls.parentNode) this.controls.parentNode.removeChild(this.controls);
-    if(this.panel && this.panel.parentNode) this.panel.parentNode.removeChild(this.panel);
-
-    this.rows = this.row_cache = this.title = this.description = this.row_holder = this.panel = this.controls = null;
-
-    this._super();
-  },
-  empty: function(hard) {
-    if(!this.rows) return;
-    var self = this;
-    $each(this.rows,function(i,row) {
-      if(hard) {
-        if(row.tab && row.tab.parentNode) row.tab.parentNode.removeChild(row.tab);
-        self.destroyRow(row,true);
-        self.row_cache[i] = null;
-      }
-      self.rows[i] = null;
-    });
-    self.rows = [];
-    if(hard) self.row_cache = [];
-  },
-  destroyRow: function(row,hard) {
-    var holder = row.container;
-    if(hard) {
-      row.destroy();
-      if(holder.parentNode) holder.parentNode.removeChild(holder);
-      if(row.tab && row.tab.parentNode) row.tab.parentNode.removeChild(row.tab);
-    }
-    else {
-      if(row.tab) row.tab.style.display = 'none';
-      holder.style.display = 'none';
-      row.unregister();
-    }
-  },
-  getMax: function() {
-    if((Array.isArray(this.schema.items)) && this.schema.additionalItems === false) {
-      return Math.min(this.schema.items.length,this.schema.maxItems || Infinity);
-    }
-    else {
-      return this.schema.maxItems || Infinity;
-    }
-  },
-  refreshTabs: function(refresh_headers) {
-    var self = this;
-    $each(this.rows, function(i,row) {
-      if(!row.tab) return;
-
-      if(refresh_headers) {
-        row.tab_text.textContent = row.getHeaderText();
+    })
+    ret.preBuild()
+    ret.build()
+    ret.postBuild()
+
+    if (!ret.title_controls) {
+      ret.array_controls = this.theme.getButtonHolder()
+      holder.appendChild(ret.array_controls)
+    }
+
+    return ret
+  }
+
+  checkParent (elem) {
+    return elem && elem.parentNode
+  }
+
+  destroy () {
+    this.empty(true)
+    if (this.checkParent(this.title)) this.title.parentNode.removeChild(this.title)
+    if (this.checkParent(this.description)) this.description.parentNode.removeChild(this.description)
+    if (this.checkParent(this.row_holder)) this.row_holder.parentNode.removeChild(this.row_holder)
+    if (this.checkParent(this.controls)) this.controls.parentNode.removeChild(this.controls)
+    if (this.checkParent(this.panel)) this.panel.parentNode.removeChild(this.panel)
+
+    this.rows = this.row_cache = this.title = this.description = this.row_holder = this.panel = this.controls = null
+
+    super.destroy()
+  }
+
+  empty (hard) {
+    if (this.rows === null) return
+
+    this.rows.forEach((row, i) => {
+      if (hard) {
+        if (this.checkParent(row.tab)) row.tab.parentNode.removeChild(row.tab)
+        this.destroyRow(row, true)
+        this.row_cache[i] = null
       }
-      else {
-        if(row.tab === self.active_tab) {
-          self.theme.markTabActive(row);
-        }
-        else {
-          self.theme.markTabInactive(row);
-        }
+      this.rows[i] = null
+    })
+    if (hard) {
+      for (let j = this.rows.length; j < this.row_cache.length; j++) {
+        this.destroyRow(this.row_cache[j], true)
+        this.row_cache[j] = null
       }
-    });
-  },
-  setValue: function(value, initial) {
-    // Update the array's value, adding/removing rows when necessary
-    value = value || [];
+    }
+    this.rows = []
+    if (hard) this.row_cache = []
+  }
 
-    if(!(Array.isArray(value))) value = [value];
+  destroyRow (row, hard) {
+    const holder = row.container
+    if (hard) {
+      row.destroy()
+      if (holder.parentNode) holder.parentNode.removeChild(holder)
+      if (this.checkParent(row.tab)) row.tab.parentNode.removeChild(row.tab)
+    } else {
+      if (row.tab) row.tab.style.display = 'none'
+      holder.style.display = 'none'
+      row.unregister()
+    }
+  }
 
-    var serialized = JSON.stringify(value);
-    if(serialized === this.serialized) return;
+  getMax () {
+    if ((Array.isArray(this.schema.items)) && this.schema.additionalItems === false) {
+      return Math.min(this.schema.items.length, this.schema.maxItems || Infinity)
+    }
+    return this.schema.maxItems || Infinity
+  }
 
-    // Make sure value has between minItems and maxItems items in it
-    if(this.schema.minItems) {
-      while(value.length < this.schema.minItems) {
-        value.push(this.getItemInfo(value.length)["default"]);
+  refreshTabs (refreshHeaders) {
+    this.rows.forEach(row => {
+      if (!row.tab) return
+
+      if (refreshHeaders) {
+        row.tab_text.textContent = row.getHeaderText()
+      } else if (row.tab === this.active_tab) {
+        this.theme.markTabActive(row)
+      } else {
+        this.theme.markTabInactive(row)
+      }
+    })
+  }
+
+  ensureArraySize (value) {
+    if (!(Array.isArray(value))) value = [value]
+
+    if (this.schema.minItems) {
+      while (value.length < this.schema.minItems) {
+        value.push(this.getItemInfo(value.length).default)
       }
     }
-    if(this.getMax() && value.length > this.getMax()) {
-      value = value.slice(0,this.getMax());
+    if (this.getMax() && value.length > this.getMax()) {
+      value = value.slice(0, this.getMax())
     }
+    return value
+  }
 
-    var self = this;
-    $each(value,function(i,val) {
-      if(self.rows[i]) {
-        // TODO: don't set the row's value if it hasn't changed
-        self.rows[i].setValue(val,initial);
-      }
-      else if(self.row_cache[i]) {
-        self.rows[i] = self.row_cache[i];
-        self.rows[i].setValue(val,initial);
-        self.rows[i].container.style.display = '';
-        if(self.rows[i].tab) self.rows[i].tab.style.display = '';
-        self.rows[i].register();
+  setValue (value = [], initial) {
+    value = this.applyConstFilter(value)
+    /* Make sure value has between minItems and maxItems items in it */
+    value = this.ensureArraySize(value)
+
+    const serialized = JSON.stringify(value)
+    if (serialized === this.serialized) {
+      if (initial) {
+        this.refreshValue(initial)
       }
-      else {
-        self.addRow(val,initial);
+      return
+    }
+
+    value.forEach((val, i) => {
+      if (this.rows[i]) {
+        /* TODO: don't set the row's value if it hasn't changed */
+        this.rows[i].setValue(val, initial)
+      } else if (this.row_cache[i]) {
+        this.rows[i] = this.row_cache[i]
+        this.rows[i].setValue(val, initial)
+        this.rows[i].container.style.display = ''
+        if (this.rows[i].tab) this.rows[i].tab.style.display = ''
+        this.rows[i].register()
+        this.jsoneditor.trigger('addRow', this.rows[i])
+      } else {
+        const editor = this.addRow(val, initial)
+        this.jsoneditor.trigger('addRow', editor)
       }
-    });
+    })
 
-    for(var j=value.length; j<self.rows.length; j++) {
-      self.destroyRow(self.rows[j]);
-      self.rows[j] = null;
+    for (let j = value.length; j < this.rows.length; j++) {
+      this.destroyRow(this.rows[j])
+      this.rows[j] = null
     }
-    self.rows = self.rows.slice(0,value.length);
+    this.rows = this.rows.slice(0, value.length)
 
-    // Set the active tab
-    var new_active_tab = null;
-    $each(self.rows, function(i,row) {
-      if(row.tab === self.active_tab) {
-        new_active_tab = row.tab;
-        return false;
-      }
-    });
-    if(!new_active_tab && self.rows.length) new_active_tab = self.rows[0].tab;
-
-    self.active_tab = new_active_tab;
-
-    self.refreshValue(initial);
-    self.refreshTabs(true);
-    self.refreshTabs();
-
-    self.onChange();
-
-    // TODO: sortable
-  },
-  refreshValue: function(force) {
-    var self = this;
-    var oldi = this.value? this.value.length : 0;
-    this.value = [];
-
-    $each(this.rows,function(i,editor) {
-      // Get the value for this editor
-      self.value[i] = editor.getValue();
-    });
-
-    if(oldi !== this.value.length || force) {
-      // If we currently have minItems items in the array
-      var minItems = this.schema.minItems && this.schema.minItems >= this.rows.length;
-
-      $each(this.rows,function(i,editor) {
-        // Hide the move down button for the last row
-        if(editor.movedown_button) {
-          if(i === self.rows.length - 1) {
-            editor.movedown_button.style.display = 'none';
-          }
-          else {
-            editor.movedown_button.style.display = '';
-          }
-        }
+    /* Set the active tab */
+    const row = this.rows.find(row => row.tab === this.active_tab)
+    let newActiveTab = typeof row !== 'undefined' ? row.tab : null
+    if (!newActiveTab && this.rows.length) newActiveTab = this.rows[0].tab
 
-        // Hide the delete button if we have minItems items
-        if(editor.delete_button) {
-          if(minItems) {
-            editor.delete_button.style.display = 'none';
-          }
-          else {
-            editor.delete_button.style.display = '';
-          }
-        }
+    this.active_tab = newActiveTab
 
-        // Get the value for this editor
-        self.value[i] = editor.getValue();
-      });
+    this.refreshValue(initial)
+    this.refreshTabs(true)
+    this.refreshTabs()
 
-      var controls_needed = false;
+    this.onChange()
 
-      if(!this.value.length) {
-        this.delete_last_row_button.style.display = 'none';
-        this.remove_all_rows_button.style.display = 'none';
-      }
-      else if(this.value.length === 1) {
-        this.remove_all_rows_button.style.display = 'none';
+    /* TODO: sortable */
+  }
 
-        // If there are minItems items in the array, or configured to hide the delete_last_row button, hide the delete button beneath the rows
-        if(minItems || this.hide_delete_last_row_buttons) {
-          this.delete_last_row_button.style.display = 'none';
-        }
-        else {
-          this.delete_last_row_button.style.display = '';
-          controls_needed = true;
-        }
-      }
-      else {
-        if(minItems || this.hide_delete_last_row_buttons) {
-          this.delete_last_row_button.style.display = 'none';
-        }
-        else {
-          this.delete_last_row_button.style.display = '';
-          controls_needed = true;
-        }
+  setButtonState (element, display) {
+    const buttonStateMode = this.options.button_state_mode || this.jsoneditor.options.button_state_mode
+
+    switch (buttonStateMode) {
+      case 1:
+        element.style.display = display ? '' : 'none'
+        break
+      case 2:
+        element.disabled = !display
+        break
+      default:
+        element.style.display = display ? '' : 'none'
+    }
+  }
+
+  setupButtons (minItems) {
+    const controlsNeeded = []
+
+    if (!this.value.length) {
+      this.setButtonState(this.delete_last_row_button, false)
+      this.setButtonState(this.remove_all_rows_button, false)
+    } else if (this.value.length === 1) {
+      this.setButtonState(this.remove_all_rows_button, false)
+
+      /* If there are minItems items in the array, or configured to hide the delete_last_row button, hide the delete button beneath the rows */
+      const display = !(minItems || this.hide_delete_last_row_buttons)
+      this.setButtonState(this.delete_last_row_button, display)
+      controlsNeeded.push(display)
+    } else {
+      const display1 = !(minItems || this.hide_delete_last_row_buttons)
+      this.setButtonState(this.delete_last_row_button, display1)
+      controlsNeeded.push(display1)
+
+      const display2 = !(minItems || this.hide_delete_all_rows_buttons)
+      this.setButtonState(this.remove_all_rows_button, display2)
+      controlsNeeded.push(display2)
+    }
+
+    /* If there are maxItems in the array, hide the add button beneath the rows */
+    const display = !((this.getMax() && this.getMax() <= this.rows.length) || this.hide_add_button)
+    this.setButtonState(this.add_row_button, display)
+    controlsNeeded.push(display)
+
+    return controlsNeeded.some(e => e)
+  }
+
+  refreshValue (force) {
+    const oldi = this.value ? this.value.length : 0
+    /* Get the value for this editor */
+    this.value = this.rows.map(editor => editor.getValue())
+
+    if (oldi !== this.value.length || force) {
+      /* If we currently have minItems items in the array */
+      const minItems = this.schema.minItems && this.schema.minItems >= this.rows.length
 
-        if(minItems || this.hide_delete_all_rows_buttons) {
-          this.remove_all_rows_button.style.display = 'none';
+      this.rows.forEach((editor, i) => {
+        /* Hide the move down button for the last row */
+        if (editor.movedown_button) {
+          const display = (i !== this.rows.length - 1)
+          this.setButtonState(editor.movedown_button, display)
         }
-        else {
-          this.remove_all_rows_button.style.display = '';
-          controls_needed = true;
+
+        /* Hide the delete button if we have minItems items */
+        if (editor.delete_button) {
+          this.setButtonState(editor.delete_button, !minItems)
         }
-      }
 
-      // If there are maxItems in the array, hide the add button beneath the rows
-      if((this.getMax() && this.getMax() <= this.rows.length) || this.hide_add_button){
-        this.add_row_button.style.display = 'none';
-      }
-      else {
-        this.add_row_button.style.display = '';
-        controls_needed = true;
-      }
+        /* Get the value for this editor */
+        this.value[i] = editor.getValue()
+      })
 
-      if(!this.collapsed && controls_needed) {
-        this.controls.style.display = 'inline-block';
-      }
-      else {
-        this.controls.style.display = 'none';
+      if (this.setupButtons(minItems) && !this.collapsed) {
+        this.controls.style.display = 'inline-block'
+      } else {
+        this.controls.style.display = 'none'
       }
     }
-  },
-  addRow: function(value, initial) {
-    var self = this;
-    var i = this.rows.length;
+    this.serialized = JSON.stringify(this.value)
+  }
 
-    self.rows[i] = this.getElementEditor(i);
-    self.row_cache[i] = self.rows[i];
+  addRow (value, initial) {
+    const i = this.rows.length
 
-    if(self.tabs_holder) {
-      self.rows[i].tab_text = document.createElement('span');
-      self.rows[i].tab_text.textContent = self.rows[i].getHeaderText();
-      if(self.schema.format === 'tabs-top'){
-        self.rows[i].tab = self.theme.getTopTab(self.rows[i].tab_text,this.getValidId(self.rows[i].path));
-        self.theme.addTopTab(self.tabs_holder, self.rows[i].tab);
-      }
-      else {
-        self.rows[i].tab = self.theme.getTab(self.rows[i].tab_text,this.getValidId(self.rows[i].path));
-        self.theme.addTab(self.tabs_holder, self.rows[i].tab);
+    this.rows[i] = this.getElementEditor(i)
+    this.row_cache[i] = this.rows[i]
+
+    if (this.tabs_holder) {
+      this.rows[i].tab_text = document.createElement('span')
+      this.rows[i].tab_text.textContent = this.rows[i].getHeaderText()
+      if (this.schema.format === 'tabs-top') {
+        this.rows[i].tab = this.theme.getTopTab(this.rows[i].tab_text, this.getValidId(this.rows[i].path))
+        this.theme.addTopTab(this.tabs_holder, this.rows[i].tab)
+      } else {
+        this.rows[i].tab = this.theme.getTab(this.rows[i].tab_text, this.getValidId(this.rows[i].path))
+        this.theme.addTab(this.tabs_holder, this.rows[i].tab)
       }
-      self.rows[i].tab.addEventListener('click', function(e) {
-        self.active_tab = self.rows[i].tab;
-        self.refreshTabs();
-        e.preventDefault();
-        e.stopPropagation();
-      });
+      this.rows[i].tab.addEventListener('click', (e) => {
+        this.active_tab = this.rows[i].tab
+        this.refreshTabs()
+        e.preventDefault()
+        e.stopPropagation()
+      })
+      this._supportDragDrop(this.rows[i].tab)
+    } else {
+      this._supportDragDrop(this.rows[i].container, true)
+    }
+
+    const controlsHolder = this.rows[i].title_controls || this.rows[i].array_controls
 
+    /* Buttons to delete row, move row up, and move row down */
+    if (!this.hide_delete_buttons) {
+      this.rows[i].delete_button = this._createDeleteButton(i, controlsHolder)
     }
 
-    var controls_holder = self.rows[i].title_controls || self.rows[i].array_controls;
+    /* Button to copy an array element and add it as last element */
+    if (this.show_copy_button) {
+      this.rows[i].copy_button = this._createCopyButton(i, controlsHolder)
+    }
 
-    // Buttons to delete row, move row up, and move row down
-    if(!self.hide_delete_buttons) {
-      self.rows[i].delete_button = this.getButton(self.getItemTitle(),'delete',this.translate('button_delete_row_title',[self.getItemTitle()]));
-      self.rows[i].delete_button.classList.add('delete', 'json-editor-btntype-delete');
-      self.rows[i].delete_button.setAttribute('data-i',i);
-      self.rows[i].delete_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
+    if (i && !this.hide_move_buttons) {
+      this.rows[i].moveup_button = this._createMoveUpButton(i, controlsHolder)
+    }
 
-        if (!self.askConfirmation()) {
-          return false;
-        }
+    if (!this.hide_move_buttons) {
+      this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
+    }
 
-        var i = this.getAttribute('data-i')*1;
-        var value = self.getValue();
-        var newval = [];
-        var new_active_tab = null;
+    if (typeof value !== 'undefined') this.rows[i].setValue(value, initial)
+    this.refreshTabs()
 
-        $each(value,function(j,row) {
-          if(j !== i) {
-            newval.push(row);
-          }
-        });
+    return this.rows[i]
+  }
 
-        self.empty(true);
-        self.setValue(newval);
+  _createDeleteButton (i, holder) {
+    const button = this.getButton(this.getItemTitle(), 'delete', 'button_delete_row_title', [this.getItemTitle()])
+    button.classList.add('delete', 'json-editor-btntype-delete')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
 
-        if (self.rows[i]) {
-          new_active_tab = self.rows[i].tab;
-        } else if (self.rows[i-1]) {
-          new_active_tab = self.rows[i-1].tab;
-        }
+      if (!this.askConfirmation()) {
+        return false
+      }
 
-        if(new_active_tab) {
-          self.active_tab = new_active_tab;
-          self.refreshTabs();
-        }
+      const i = e.currentTarget.getAttribute('data-i') * 1
+      const newval = this.getValue().filter((row, j) => j !== i)
+      let newActiveTab = null
 
-        self.onChange(true);
-        self.jsoneditor.trigger('deleteRow');
-      });
+      const editor = this.rows[i]
+      const editorValue = editor.getValue()
 
-      if(controls_holder) {
-        controls_holder.appendChild(self.rows[i].delete_button);
+      this.setValue(newval)
+
+      if (this.rows[i]) {
+        newActiveTab = this.rows[i].tab
+      } else if (this.rows[i - 1]) {
+        newActiveTab = this.rows[i - 1].tab
+      }
+
+      if (newActiveTab) {
+        this.active_tab = newActiveTab
+        this.refreshTabs()
       }
+
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteRow', editorValue)
+    })
+
+    if (holder) {
+      holder.appendChild(button)
     }
+    return button
+  }
 
-	//Button to copy an array element and add it as last element
-	if(self.show_copy_button){
-        self.rows[i].copy_button = this.getButton(self.getItemTitle(),'copy','Copy '+self.getItemTitle());
-        self.rows[i].copy_button.classList.add('copy', 'json-editor-btntype-copy');
-        self.rows[i].copy_button.setAttribute('data-i',i);
-        self.rows[i].copy_button.addEventListener('click',function(e) {
-            var value = self.getValue();
-            e.preventDefault();
-            e.stopPropagation();
-            var i = this.getAttribute('data-i')*1;
-
-            $each(value,function(j,row) {
-              if(j===i) {
-                value.push(row);
+  _createCopyButton (i, holder) {
+    const button = this.getButton(this.getItemTitle(), 'copy', 'button_copy_row_title', [this.getItemTitle()])
+    const schema = this.schema
+    button.classList.add('copy', 'json-editor-btntype-copy')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      const value = this.getValue()
+      e.preventDefault()
+      e.stopPropagation()
+      const i = e.currentTarget.getAttribute('data-i') * 1
+
+      value.forEach((row, j) => {
+        if (j === i) {
+          let duplicatedRow = (typeof row === 'object' && row !== null) ? { ...row } : row
+          /* Force generation of new UUID if the item has been cloned. */
+          if (schema.items.type === 'string' && schema.items.format === 'uuid') {
+            duplicatedRow = generateUUID()
+          } else if (schema.items.type === 'object' && schema.items.properties) {
+            for (const key of Object.keys(duplicatedRow)) {
+              if (schema.items.properties && schema.items.properties[key] && schema.items.properties[key].format === 'uuid') {
+                duplicatedRow[key] = generateUUID()
               }
-            });
+            }
+          }
+          value.push(duplicatedRow)
+        }
+      })
+
+      this.setValue(value)
+      this.refreshValue(true)
+      this.onChange(true)
+      this.jsoneditor.trigger('copyRow', this.rows[i - 1])
+    })
+
+    holder.appendChild(button)
+    return button
+  }
 
-            self.setValue(value);
-            self.refreshValue(true);
-            self.onChange(true);
+  _createMoveUpButton (i, holder) {
+    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveleft' : 'moveup'), 'button_move_up_title')
+    button.classList.add('moveup', 'json-editor-btntype-move')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      const i = e.currentTarget.getAttribute('data-i') * 1
 
-        });
+      if (i <= 0) return
+      const rows = this.getValue()
+      const tmp = rows[i - 1]
+      rows[i - 1] = rows[i]
+      rows[i] = tmp
 
-        controls_holder.appendChild(self.rows[i].copy_button);
+      this.setValue(rows)
+      this.active_tab = this.rows[i - 1].tab
+      this.refreshTabs()
+
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[i - 1])
+    })
+
+    if (holder) {
+      holder.appendChild(button)
     }
+    return button
+  }
 
+  _createMoveDownButton (i, holder) {
+    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveright' : 'movedown'), 'button_move_down_title')
+    button.classList.add('movedown', 'json-editor-btntype-move')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      const i = e.currentTarget.getAttribute('data-i') * 1
+
+      const rows = this.getValue()
+      if (i >= rows.length - 1) return
+      const tmp = rows[i + 1]
+      rows[i + 1] = rows[i]
+      rows[i] = tmp
+
+      this.setValue(rows)
+      this.active_tab = this.rows[i + 1].tab
+      this.refreshTabs()
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[i + 1])
+    })
+
+    if (holder) {
+      holder.appendChild(button)
+    }
+    return button
+  }
 
-    if(i && !self.hide_move_buttons) {
-      self.rows[i].moveup_button = this.getButton('','moveup',this.translate('button_move_up_title'));
-      self.rows[i].moveup_button.classList.add('moveup', 'json-editor-btntype-move');
-      self.rows[i].moveup_button.setAttribute('data-i',i);
-      self.rows[i].moveup_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var i = this.getAttribute('data-i')*1;
+  _supportDragDrop (tab, useTrigger) {
+    supportDragDrop(tab, (i, j) => {
+      const rows = this.getValue()
+      const tmp = rows[i]
+      rows.splice(i, 1)
+      rows.splice(j, 0, tmp)
 
-        if(i<=0) return;
-        var rows = self.getValue();
-        var tmp = rows[i-1];
-        rows[i-1] = rows[i];
-        rows[i] = tmp;
+      this.setValue(rows)
+      this.active_tab = this.rows[j].tab
+      this.refreshTabs()
 
-        self.setValue(rows);
-        self.active_tab = self.rows[i-1].tab;
-        self.refreshTabs();
+      this.onChange(true)
 
-        self.onChange(true);
+      this.jsoneditor.trigger('moveRow', this.rows[j])
+    }, { useTrigger })
+  }
 
-        self.jsoneditor.trigger('moveRow');
-      });
+  addControls () {
+    this.collapsed = false
+    this.toggle_button = this._createToggleButton()
 
-      if(controls_holder) {
-        controls_holder.appendChild(self.rows[i].moveup_button);
-      }
+    /* If it should start collapsed */
+    if (this.options.collapsed) {
+      trigger(this.toggle_button, 'click')
     }
 
-    if(!self.hide_move_buttons) {
-      self.rows[i].movedown_button = this.getButton('','movedown',this.translate('button_move_down_title'));
-      self.rows[i].movedown_button.classList.add('movedown', 'json-editor-btntype-move');
-      self.rows[i].movedown_button.setAttribute('data-i',i);
-      self.rows[i].movedown_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var i = this.getAttribute('data-i')*1;
+    /* 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'
+    }
 
-        var rows = self.getValue();
-        if(i>=rows.length-1) return;
-        var tmp = rows[i+1];
-        rows[i+1] = rows[i];
-        rows[i] = tmp;
+    /* Add "new row" and "delete last" buttons below editor */
+    this.add_row_button = this._createAddRowButton()
+    this.delete_last_row_button = this._createDeleteLastRowButton()
+    this.remove_all_rows_button = this._createRemoveAllRowsButton()
 
-        self.setValue(rows);
-        self.active_tab = self.rows[i+1].tab;
-        self.refreshTabs();
-        self.onChange(true);
+    if (this.tabs) {
+      this.add_row_button.classList.add('je-array-control-btn')
+      this.delete_last_row_button.classList.add('je-array-control-btn')
+      this.remove_all_rows_button.classList.add('je-array-control-btn')
+    }
+  }
 
-        self.jsoneditor.trigger('moveRow');
-      });
+  _createToggleButton () {
+    const button = this.getButton('', 'collapse', 'button_collapse')
+    button.classList.add('json-editor-btntype-toggle')
+    this.title.insertBefore(button, this.title.childNodes[0])
+
+    const rowHolderDisplay = this.row_holder.style.display
+    const controlsDisplay = this.controls.style.display
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (this.panel) this.setButtonState(this.panel, this.collapsed)
+      if (this.tabs_holder) this.setButtonState(this.tabs_holder, this.collapsed)
+      if (this.collapsed) {
+        this.collapsed = false
+        this.row_holder.style.display = rowHolderDisplay
+        this.controls.style.display = controlsDisplay
+        this.setButtonText(e.currentTarget, '', 'collapse', 'button_collapse')
+      } else {
+        this.collapsed = true
+        this.row_holder.style.display = 'none'
+        this.controls.style.display = 'none'
+        this.setButtonText(e.currentTarget, '', 'expand', 'button_expand')
+      }
+    })
+    return button
+  }
 
-      if(controls_holder) {
-        controls_holder.appendChild(self.rows[i].movedown_button);
-      }
-    }
+  _createAddRowButton () {
+    const button = this.getButton(this.getItemTitle(), 'add', 'button_add_row_title', [this.getItemTitle()])
+    button.classList.add('json-editor-btntype-add')
+    button.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const i = this.rows.length
+      let editor
+      if (this.row_cache[i]) {
+        editor = this.rows[i] = this.row_cache[i]
+        this.rows[i].setValue(this.rows[i].getDefault(), true)
+        // override cached value, so optional properties are not checked.
+        if (typeof this.rows[i].deactivateNonRequiredProperties === 'function') {
+          this.rows[i].deactivateNonRequiredProperties(true)
+        }
+        this.rows[i].container.style.display = ''
+        if (this.rows[i].tab) this.rows[i].tab.style.display = ''
+        this.rows[i].register()
+      } else {
+        editor = this.addRow()
+      }
+      this.active_tab = this.rows[i].tab
+      this.refreshTabs()
+      this.refreshValue()
+      this.onChange(true)
+      this.jsoneditor.trigger('addRow', editor)
+    })
+    this.controls.appendChild(button)
+    return button
+  }
 
-    if(value) self.rows[i].setValue(value, initial);
-    self.refreshTabs();
-  },
-  addControls: function() {
-    var self = this;
-
-    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);
-    var row_holder_display = self.row_holder.style.display;
-    var controls_display = self.controls.style.display;
-    this.toggle_button.addEventListener('click',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if(self.collapsed) {
-        self.collapsed = false;
-        if(self.panel) self.panel.style.display = '';
-        self.row_holder.style.display = row_holder_display;
-        if(self.tabs_holder) self.tabs_holder.style.display = '';
-        self.controls.style.display = controls_display;
-        self.setButtonText(this,'','collapse',self.translate('button_collapse'));
-      }
-      else {
-        self.collapsed = true;
-        self.row_holder.style.display = 'none';
-        if(self.tabs_holder) self.tabs_holder.style.display = 'none';
-        self.controls.style.display = 'none';
-        if(self.panel) self.panel.style.display = 'none';
-        self.setButtonText(this,'','expand',self.translate('button_expand'));
-      }
-    });
-
-    // If it should start collapsed
-    if(this.options.collapsed) {
-      $trigger(this.toggle_button,'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';
-    }
-
-    // Add "new row" and "delete last" buttons below editor
-    this.add_row_button = this.getButton(this.getItemTitle(),'add',this.translate('button_add_row_title',[this.getItemTitle()]));
-    this.add_row_button.classList.add('json-editor-btntype-add');
-    this.add_row_button.addEventListener('click',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var i = self.rows.length;
-      if(self.row_cache[i]) {
-        self.rows[i] = self.row_cache[i];
-        self.rows[i].setValue(self.rows[i].getDefault(), true);
-        self.rows[i].container.style.display = '';
-        if(self.rows[i].tab) self.rows[i].tab.style.display = '';
-        self.rows[i].register();
-      }
-      else {
-        self.addRow();
-      }
-      self.active_tab = self.rows[i].tab;
-      self.refreshTabs();
-      self.refreshValue();
-      self.onChange(true);
-      self.jsoneditor.trigger('addRow');
-    });
-    self.controls.appendChild(this.add_row_button);
-
-    this.delete_last_row_button = this.getButton(this.translate('button_delete_last',[this.getItemTitle()]),'delete',this.translate('button_delete_last_title',[this.getItemTitle()]));
-    this.delete_last_row_button.classList.add('json-editor-btntype-deletelast');
-    this.delete_last_row_button.addEventListener('click',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!self.askConfirmation()) {
-        return false;
+  _createDeleteLastRowButton () {
+    const button = this.getButton('button_delete_last', 'subtract', 'button_delete_last_title', [this.getItemTitle()])
+    button.classList.add('json-editor-btntype-deletelast')
+    button.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (!this.askConfirmation()) {
+        return false
       }
 
-      var rows = self.getValue();
-      var new_active_tab = null;
+      const rows = this.getValue()
+      let newActiveTab = null
 
-      rows.pop();
-      self.empty(true);
-      self.setValue(rows);
+      const editorValue = rows.pop()
 
-      if (self.rows[self.rows.length-1]) {
-        new_active_tab = self.rows[self.rows.length-1].tab;
+      this.setValue(rows)
+
+      if (this.rows[this.rows.length - 1]) {
+        newActiveTab = this.rows[this.rows.length - 1].tab
       }
 
-      if(new_active_tab) {
-        self.active_tab = new_active_tab;
-        self.refreshTabs();
+      if (newActiveTab) {
+        this.active_tab = newActiveTab
+        this.refreshTabs()
       }
 
-      self.onChange(true);
-      self.jsoneditor.trigger('deleteRow');
-    });
-    self.controls.appendChild(this.delete_last_row_button);
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteRow', editorValue)
+    })
+    this.controls.appendChild(button)
+    return button
+  }
 
-    this.remove_all_rows_button = this.getButton(this.translate('button_delete_all'),'delete',this.translate('button_delete_all_title'));
-    this.remove_all_rows_button.classList.add('json-editor-btntype-deleteall');
-    this.remove_all_rows_button.addEventListener('click',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
+  _createRemoveAllRowsButton () {
+    const button = this.getButton('button_delete_all', 'delete', 'button_delete_all_title')
+    button.classList.add('json-editor-btntype-deleteall')
+    button.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
 
-      if (!self.askConfirmation()) {
-        return false;
+      if (!this.askConfirmation()) {
+        return false
       }
 
-      self.empty(true);
-      self.setValue([]);
-      self.onChange(true);
-      self.jsoneditor.trigger('deleteAllRows');
-    });
-    self.controls.appendChild(this.remove_all_rows_button);
-
-    if(self.tabs) {
-      this.add_row_button.style.width = '100%';
-      this.add_row_button.style.textAlign = 'left';
-      this.add_row_button.style.marginBottom = '3px';
-
-      this.delete_last_row_button.style.width = '100%';
-      this.delete_last_row_button.style.textAlign = 'left';
-      this.delete_last_row_button.style.marginBottom = '3px';
-
-      this.remove_all_rows_button.style.width = '100%';
-      this.remove_all_rows_button.style.textAlign = 'left';
-      this.remove_all_rows_button.style.marginBottom = '3px';
-    }
-  },
-  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);
-      }
-      else {
-        other_errors.push(error);
-      }
-    });
-
-    // 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));
-        });
-      }
-      // Hide error area
-      else {
-        this.error_holder.style.display = 'none';
-      }
-    }
+      const values = this.getValue()
 
-    // Show errors for child editors
-    $each(this.rows, function(i,row) {
-      row.showValidationErrors(other_errors);
-    });
+      this.empty(true)
+      this.setValue([])
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteAllRows', values)
+    })
+    this.controls.appendChild(button)
+    return button
+  }
+
+  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)
+      }
+    })
+
+    /* Show errors for this editor */
+    if (this.error_holder) {
+      if (myErrors.length) {
+        this.error_holder.innerHTML = ''
+        this.error_holder.style.display = ''
+        myErrors.forEach(error => {
+          this.error_holder.appendChild(this.theme.getErrorMessage(error.message))
+        })
+        /* Hide error area */
+      } else {
+        this.error_holder.style.display = 'none'
+      }
+    }
+
+    /* Show errors for child editors */
+    this.rows.forEach(row =>
+      row.showValidationErrors(otherErrors)
+    )
+  }
+}
+ArrayEditor.rules = rules
+
+// drag/drop array item to adjust order
+// handler(fromIdx, toIdx, fromDom, toDom), opt={useTrigger}
+// useTrigger=true: pressing ctrl to enable drag
+export function supportDragDrop (tab, handler, opt = {}) {
+  if (opt.useTrigger) {
+    tab.addEventListener('mousedown', e => {
+      if (e.ctrlKey) {
+        // window.console.log('enable drag')
+        tab.draggable = true
+        const fn = e => {
+          tab.draggable = false
+          // window.console.log('disable drag')
+          document.removeEventListener('dragend', fn)
+          document.removeEventListener('mouseup', fn)
+        }
+        document.addEventListener('dragend', fn)
+        document.addEventListener('mouseup', fn)
+      }
+    })
+  } else {
+    tab.draggable = true
   }
-});
+  tab.addEventListener('dragstart', e => {
+    window.curDrag = tab
+  })
+  tab.addEventListener('dragover', e => {
+    if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+      e.dataTransfer.dropEffect = 'none'
+    } else {
+      e.dataTransfer.dropEffect = 'move'
+    }
+    e.preventDefault()
+  })
+  tab.addEventListener('drop', e => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+      return
+    }
+    const getPos = item => {
+      let i = 0
+      let a = item.parentElement.firstElementChild
+      while (a !== item && a !== null) {
+        a = a.nextSibling
+        ++i
+      }
+      return i
+    }
+    const i = getPos(window.curDrag)
+    const j = getPos(tab)
+    handler(i, j, window.curDrag, tab)
+    window.curDrag = null
+  })
+}