@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/table.js

@@ -1,480 +1,556 @@
-JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
-  register: function() {
-    this._super();
-    if(this.rows) {
-      for(var i=0; i<this.rows.length; i++) {
-        this.rows[i].register();
+import { ArrayEditor, supportDragDrop } from './array.js'
+import { extend, generateUUID, trigger } from '../utilities.js'
+
+export class TableEditor extends ArrayEditor {
+  register () {
+    super.register()
+    if (this.rows) {
+      for (let i = 0; i < this.rows.length; i++) {
+        this.rows[i].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) {
+      for (let i = 0; i < this.rows.length; i++) {
+        this.rows[i].unregister()
       }
     }
-  },
-  getNumColumns: function() {
-    return Math.max(Math.min(12,this.width),3);
-  },
-  preBuild: function() {
-    var item_schema = this.jsoneditor.expandRefs(this.schema.items || {});
-
-    this.item_title = item_schema.title || 'row';
-    this.item_default = item_schema["default"] || null;
-    this.item_has_child_editors = item_schema.properties || item_schema.items;
-    this.width = 12;
-    this._super();
-  },
-  build: function() {
-    var self = this;
-    this.table = this.theme.getTable();
-    this.container.appendChild(this.table);
-    this.thead = this.theme.getTableHead();
-    this.table.appendChild(this.thead);
-    this.header_row = this.theme.getTableRow();
-    this.thead.appendChild(this.header_row);
-    this.row_holder = this.theme.getTableBody();
-    this.table.appendChild(this.row_holder);
-
-    // Determine the default value of array element
-    var tmp = this.getElementEditor(0,true);
-    this.item_default = tmp.getDefault();
-    this.width = tmp.getNumColumns() + 2;
-
-    if(!this.options.compact) {
-      this.title = this.theme.getHeader(this.getTitle());
-      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);
+  }
+
+  getNumColumns () {
+    return Math.max(Math.min(12, this.width), 3)
+  }
+
+  preBuild () {
+    const itemSchema = this.jsoneditor.expandRefs(this.schema.items || {})
+
+    this.item_title = itemSchema.title || 'row'
+    this.item_default = itemSchema.default || null
+    this.item_has_child_editors = itemSchema.properties || itemSchema.items
+    this.width = 12
+    this.array_controls_top = this.options.array_controls_top || this.jsoneditor.options.array_controls_top
+    super.preBuild()
+  }
+
+  build () {
+    this.tableContainer = this.theme.getTableContainer()
+    this.table = this.theme.getTable()
+    this.tableContainer.appendChild(this.table)
+
+    this.container.appendChild(this.tableContainer)
+    this.thead = this.theme.getTableHead()
+    this.table.appendChild(this.thead)
+    this.header_row = this.theme.getTableRow()
+    this.thead.appendChild(this.header_row)
+    this.row_holder = this.theme.getTableBody()
+    this.table.appendChild(this.row_holder)
+
+    /* Determine the default value of array element */
+    const tmp = this.getElementEditor(0, true)
+    this.item_default = tmp.getDefault()
+    this.width = tmp.getNumColumns() + 2
+
+    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.panel = this.theme.getIndentedPanel();
-      this.container.appendChild(this.panel);
-      this.error_holder = document.createElement('div');
-      this.panel.appendChild(this.error_holder);
+      this.panel = this.theme.getIndentedPanel()
+      this.container.appendChild(this.panel)
+      this.error_holder = document.createElement('div')
+      this.panel.appendChild(this.error_holder)
+    } else {
+      this.panel = document.createElement('div')
+      this.container.appendChild(this.panel)
     }
-    else {
-      this.panel = document.createElement('div');
-      this.container.appendChild(this.panel);
+
+    this.panel.appendChild(this.tableContainer)
+    this.controls = this.theme.getButtonHolder()
+    if (this.array_controls_top) {
+      this.title.appendChild(this.controls)
+    } else {
+      this.panel.appendChild(this.controls)
     }
 
-    this.panel.appendChild(this.table);
-    this.controls = this.theme.getButtonHolder();
-    this.panel.appendChild(this.controls);
-
-    if(this.item_has_child_editors) {
-      var ce = tmp.getChildEditors();
-      var order = tmp.property_order || Object.keys(ce);
-      for(var i=0; i<order.length; i++) {
-        var th = self.theme.getTableHeaderCell(ce[order[i]].getTitle());
-        if(ce[order[i]].options.hidden) th.style.display = 'none';
-        self.header_row.appendChild(th);
+    if (this.item_has_child_editors) {
+      const ce = tmp.getChildEditors()
+      const order = tmp.property_order || Object.keys(ce)
+      for (let i = 0; i < order.length; i++) {
+        const th = this.theme.getTableHeaderCell(ce[order[i]].getTitle())
+        if (ce[order[i]].options.hidden) th.style.display = 'none'
+        this.header_row.appendChild(th)
       }
+    } else {
+      this.header_row.appendChild(this.theme.getTableHeaderCell(this.item_title))
     }
-    else {
-      self.header_row.appendChild(self.theme.getTableHeaderCell(this.item_title));
-    }
 
-    tmp.destroy();
-    this.row_holder.innerHTML = '';
-
-    // Row Controls column
-    this.controls_header_cell = self.theme.getTableHeaderCell(" ");
-    self.header_row.appendChild(this.controls_header_cell);
-
-    // Add controls
-    this.addControls();
-  },
-  onChildEditorChange: function(editor) {
-    this.refreshValue();
-    this._super();
-  },
-  getItemDefault: function() {
-    return $extend({},{"default":this.item_default})["default"];
-  },
-  getItemTitle: function() {
-    return this.item_title;
-  },
-  getElementEditor: function(i,ignore) {
-    var schema_copy = $extend({},this.schema.items);
-    var editor = this.jsoneditor.getEditorClass(schema_copy, this.jsoneditor);
-    var row = this.row_holder.appendChild(this.theme.getTableRow());
-    var holder = row;
-    if(!this.item_has_child_editors) {
-      holder = this.theme.getTableCell();
-      row.appendChild(holder);
+    tmp.destroy()
+    this.row_holder.innerHTML = ''
+
+    /* Row Controls column */
+    this.controls_header_cell = this.theme.getTableHeaderCell(this.translate('table_controls'))
+    this.controls_header_cell.setAttribute('aria-hidden', 'true')
+    this.controls_header_cell.style.visibility = 'hidden'
+    this.header_row.appendChild(this.controls_header_cell)
+
+    /* Add controls */
+    this.addControls()
+  }
+
+  onChildEditorChange (editor, eventData) {
+    this.refreshValue()
+    super.onChildEditorChange(editor, eventData)
+  }
+
+  getItemDefault () {
+    return extend({}, { default: this.item_default }).default
+  }
+
+  getItemTitle () {
+    return this.item_title
+  }
+
+  getElementEditor (i, ignore) {
+    const schemaCopy = extend({}, this.schema.items)
+    const editor = this.jsoneditor.getEditorClass(schemaCopy, this.jsoneditor)
+    const row = this.row_holder.appendChild(this.theme.getTableRow())
+    let holder = row
+    if (!this.item_has_child_editors) {
+      holder = this.theme.getTableCell()
+      row.appendChild(holder)
     }
 
-    var ret = this.jsoneditor.createEditor(editor,{
+    const ret = this.jsoneditor.createEditor(editor, {
       jsoneditor: this.jsoneditor,
-      schema: schema_copy,
+      schema: schemaCopy,
       container: holder,
-      path: this.path+'.'+i,
+      path: `${this.path}.${i}`,
       parent: this,
       compact: true,
       table_row: true
-    });
-
-    ret.preBuild();
-    if(!ignore) {
-      ret.build();
-      ret.postBuild();
-
-      ret.controls_cell = row.appendChild(this.theme.getTableCell());
-      ret.row = row;
-      ret.table_controls = this.theme.getButtonHolder();
-      ret.controls_cell.appendChild(ret.table_controls);
-      ret.table_controls.style.margin = 0;
-      ret.table_controls.style.padding = 0;
+    })
+
+    ret.preBuild()
+    if (!ignore) {
+      ret.build()
+      ret.postBuild()
+
+      ret.controls_cell = row.appendChild(this.theme.getTableCell())
+      ret.row = row
+      ret.table_controls = this.theme.getButtonHolder()
+      ret.controls_cell.appendChild(ret.table_controls)
+      ret.table_controls.style.margin = 0
+      ret.table_controls.style.padding = 0
     }
 
-    return ret;
-  },
-  destroy: function() {
-    this.innerHTML = '';
-    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.table && this.table.parentNode) this.table.parentNode.removeChild(this.table);
-    if(this.panel && this.panel.parentNode) this.panel.parentNode.removeChild(this.panel);
-
-    this.rows = this.title = this.description = this.row_holder = this.table = this.panel = null;
-
-    this._super();
-  },
-  setValue: function(value, initial) {
-    // Update the array's value, adding/removing rows when necessary
-    value = value || [];
-
-    // Make sure value has between minItems and maxItems items in it
-    if(this.schema.minItems) {
-      while(value.length < this.schema.minItems) {
-        value.push(this.getItemDefault());
+    return ret
+  }
+
+  destroy () {
+    this.innerHTML = ''
+    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.table)) this.table.parentNode.removeChild(this.table)
+    if (this.checkParent(this.panel)) this.panel.parentNode.removeChild(this.panel)
+
+    this.rows = this.title = this.description = this.row_holder = this.table = this.panel = null
+
+    super.destroy()
+  }
+
+  ensureArraySize (value) {
+    if (!(Array.isArray(value))) value = [value]
+
+    if (this.schema.minItems) {
+      while (value.length < this.schema.minItems) {
+        value.push(this.getItemDefault())
       }
     }
-    if(this.schema.maxItems && value.length > this.schema.maxItems) {
-      value = value.slice(0,this.schema.maxItems);
+    if (this.schema.maxItems && value.length > this.schema.maxItems) {
+      value = value.slice(0, this.schema.maxItems)
     }
+    return value
+  }
 
-    var serialized = JSON.stringify(value);
-    if(serialized === this.serialized) return;
+  setValue (value = [], initial) {
+    value = this.applyConstFilter(value)
 
-    var numrows_changed = false;
+    /* Make sure value has between minItems and maxItems items in it */
+    value = this.ensureArraySize(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);
-      }
-      else {
-        self.addRow(val);
-        numrows_changed = true;
+    const serialized = JSON.stringify(value)
+    if (serialized === this.serialized) return
+
+    let numrowsChanged = false
+
+    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)
+      } else {
+        this.addRow(val)
+        numrowsChanged = true
       }
-    });
+    })
 
-    for(var j=value.length; j<self.rows.length; j++) {
-      var holder = self.rows[j].container;
-      if(!self.item_has_child_editors) {
-        self.rows[j].row.parentNode.removeChild(self.rows[j].row);
+    for (let j = value.length; j < this.rows.length; j++) {
+      const holder = this.rows[j].container
+      if (!this.item_has_child_editors) {
+        this.rows[j].row.parentNode.removeChild(this.rows[j].row)
       }
-      self.rows[j].destroy();
-      if(holder.parentNode) holder.parentNode.removeChild(holder);
-      self.rows[j] = null;
-      numrows_changed = true;
+      this.rows[j].destroy()
+      if (holder.parentNode) holder.parentNode.removeChild(holder)
+      this.rows[j] = null
+      numrowsChanged = true
     }
-    self.rows = self.rows.slice(0,value.length);
-
-    self.refreshValue();
-    if(numrows_changed || initial) self.refreshRowButtons();
+    this.rows = this.rows.slice(0, value.length)
 
-    self.onChange();
+    this.refreshValue()
+    if (numrowsChanged || initial) this.refreshRowButtons()
 
-    // TODO: sortable
-  },
-  refreshRowButtons: function() {
-    var self = this;
-
-    // If we currently have minItems items in the array
-    var minItems = this.schema.minItems && this.schema.minItems >= this.rows.length;
+    this.onChange()
+    /* TODO: sortable */
+  }
 
-    var need_row_buttons = false;
-    $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 {
-          need_row_buttons = true;
-          editor.movedown_button.style.display = '';
-        }
+  refreshRowButtons () {
+    /* If we currently have minItems items in the array */
+    const minItems = this.schema.minItems && this.schema.minItems >= this.rows.length
+    /* If we currently have maxItems items in the array */
+    const maxItems = this.schema.maxItems && this.schema.maxItems <= this.rows.length
+
+    const needRowButtons = []
+    this.rows.forEach((editor, i) => {
+      if (editor.delete_button) {
+        /* Hide the delete button if we have minItems items */
+        const display = !minItems
+        this.setButtonState(editor.delete_button, display)
+        needRowButtons.push(display)
       }
 
-      // Hide the delete button if we have minItems items
-      if(editor.delete_button) {
-        if(minItems) {
-          editor.delete_button.style.display = 'none';
-        }
-        else {
-          need_row_buttons = true;
-          editor.delete_button.style.display = '';
-        }
+      if (editor.copy_button) {
+        /* Hide the copy button if we have maxItems items */
+        const display = !maxItems
+        this.setButtonState(editor.copy_button, display)
+        needRowButtons.push(display)
       }
 
-      if(editor.moveup_button) {
-        need_row_buttons = true;
+      if (editor.moveup_button) {
+        /* Hide the moveup button for the first row */
+        const display = i !== 0
+        this.setButtonState(editor.moveup_button, display)
+        needRowButtons.push(display)
       }
-    });
 
-    // Show/hide controls column in table
-    $each(this.rows,function(i,editor) {
-      if(need_row_buttons) {
-        editor.controls_cell.style.display = '';
+      if (editor.movedown_button) {
+        /* Hide the movedown button for the last row */
+        const display = i !== this.rows.length - 1
+        this.setButtonState(editor.movedown_button, display)
+        needRowButtons.push(display)
       }
-      else {
-        editor.controls_cell.style.display = 'none';
-      }
-    });
-    if(need_row_buttons) {
-      this.controls_header_cell.style.display = '';
-    }
-    else {
-      this.controls_header_cell.style.display = 'none';
-    }
+    })
 
-    var controls_needed = false;
+    const need = needRowButtons.some(e => e)
+    /* Show/hide controls column in table */
+    this.rows.forEach((editor) =>
+      this.setButtonState(editor.controls_cell, need)
+    )
+    this.setButtonState(this.controls_header_cell, need)
 
-    if(!this.value.length) {
-      this.delete_last_row_button.style.display = 'none';
-      this.remove_all_rows_button.style.display = 'none';
-      this.table.style.display = 'none';
-    }
-    else if(this.value.length === 1) {
-      this.table.style.display = '';
-      this.remove_all_rows_button.style.display = 'none';
+    this.setButtonState(this.table, this.value.length)
 
-      // 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 {
-      this.table.style.display = '';
+    /* If there are maxItems items in the array, or configured to hide the add_row_button button, hide the button beneath the rows */
+    const display1 = !(maxItems || this.hide_add_button)
+    this.setButtonState(this.add_row_button, display1)
 
-      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;
-      }
+    /* If there are minItems items in the array, or configured to hide the delete_last_row button, hide the button beneath the rows */
+    const display2 = !(!this.value.length || minItems || this.hide_delete_last_row_buttons)
+    this.setButtonState(this.delete_last_row_button, display2)
 
-      if(minItems || this.hide_delete_all_rows_buttons) {
-        this.remove_all_rows_button.style.display = 'none';
-      }
-      else {
-        this.remove_all_rows_button.style.display = '';
-        controls_needed = true;
-      }
-    }
+    /* If there are minItems items in the array, or configured to hide the remove_all_rows_button button, hide the button beneath the rows */
+    const display3 = !(this.value.length <= 1 || minItems || this.hide_delete_all_rows_buttons)
+    this.setButtonState(this.remove_all_rows_button, display3)
+
+    const controlsNeeded = display1 || display2 || display3
+    this.setButtonState(this.controls, controlsNeeded)
+  }
+
+  refreshValue () {
+    this.value = []
 
-    // If there are maxItems in the array, hide the add button beneath the rows
-    if((this.schema.maxItems && this.schema.maxItems <= this.rows.length) || this.hide_add_button) {
-      this.add_row_button.style.display = 'none';
+    this.rows.forEach((editor, i) => {
+      /* Get the value for this editor */
+      this.value[i] = editor.getValue()
+    })
+    this.serialized = JSON.stringify(this.value)
+  }
+
+  addRow (value) {
+    const i = this.rows.length
+
+    this.rows[i] = this.getElementEditor(i)
+
+    const controlsHolder = this.rows[i].table_controls
+
+    /* Buttons to delete row, copy row, move row up, and move row down */
+    if (!this.hide_delete_buttons) {
+      this.rows[i].delete_button = this._createDeleteButton(i, controlsHolder)
     }
-    else {
-      this.add_row_button.style.display = '';
-      controls_needed = true;
+
+    if (this.show_copy_button) {
+      this.rows[i].copy_button = this._createCopyButton(i, controlsHolder)
     }
 
-    if(!controls_needed) {
-      this.controls.style.display = 'none';
+    if (!this.hide_move_buttons) {
+      this.rows[i].moveup_button = this._createMoveUpButton(i, controlsHolder)
     }
-    else {
-      this.controls.style.display = '';
+
+    if (!this.hide_move_buttons) {
+      this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
     }
-  },
-  refreshValue: function() {
-    var self = this;
-    this.value = [];
-
-    $each(this.rows,function(i,editor) {
-      // Get the value for this editor
-      self.value[i] = editor.getValue();
-    });
-    this.serialized = JSON.stringify(this.value);
-  },
-  addRow: function(value) {
-    var self = this;
-    var i = this.rows.length;
-
-    self.rows[i] = this.getElementEditor(i);
-
-    var controls_holder = self.rows[i].table_controls;
-
-    // Buttons to delete row, move row up, and move row down
-    if(!this.hide_delete_buttons) {
-      self.rows[i].delete_button = this.getButton('','delete',this.translate('button_delete_row_title_short'));
-      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 (!self.askConfirmation()) {
-          return false;
-        }
 
-        var i = this.getAttribute('data-i')*1;
+    this._supportDragDrop(this.rows[i].row)
 
-        var value = self.getValue();
+    if (typeof value !== 'undefined') this.rows[i].setValue(value)
 
-        var newval = [];
-        $each(value,function(j,row) {
-          if(j===i) return; // If this is the one we're deleting
-          newval.push(row);
-        });
-        self.setValue(newval);
-        self.onChange(true);
-      });
-      controls_holder.appendChild(self.rows[i].delete_button);
-    }
+    return this.rows[i]
+  }
 
+  _createDeleteButton (i, holder) {
+    const button = this.getButton('', 'delete', 'button_delete_row_title_short')
+    button.classList.add('delete', 'json-editor-btntype-delete')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
 
-    if(i && !this.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;
-
-        if(i<=0) return;
-        var rows = self.getValue();
-        var tmp = rows[i-1];
-        rows[i-1] = rows[i];
-        rows[i] = tmp;
-
-        self.setValue(rows);
-        self.onChange(true);
-      });
-      controls_holder.appendChild(self.rows[i].moveup_button);
-    }
+      if (!this.askConfirmation()) {
+        return false
+      }
 
-    if(!this.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;
-        var rows = self.getValue();
-        if(i>=rows.length-1) return;
-        var tmp = rows[i+1];
-        rows[i+1] = rows[i];
-        rows[i] = tmp;
-
-        self.setValue(rows);
-        self.onChange(true);
-      });
-      controls_holder.appendChild(self.rows[i].movedown_button);
-    }
+      const j = e.currentTarget.getAttribute('data-i') * 1
+      const value = this.getValue()
 
-    if(value) self.rows[i].setValue(value);
-  },
-  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');
-    if(this.title_controls) {
-      this.title_controls.appendChild(this.toggle_button);
-      this.toggle_button.addEventListener('click',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if(self.collapsed) {
-          self.collapsed = false;
-          self.panel.style.display = '';
-          self.setButtonText(this,'','collapse',self.translate('button_collapse'));
-        }
-        else {
-          self.collapsed = true;
-          self.panel.style.display = 'none';
-          self.setButtonText(this,'','expand',self.translate('button_expand'));
-        }
-      });
+      const rows = this.getValue()
+      const editorValue = rows[j]
+
+      value.splice(j, 1)
+
+      this.setValue(value)
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteRow', editorValue)
+    })
+    holder.appendChild(button)
+    return button
+  }
 
-      // If it should start collapsed
-      if(this.options.collapsed) {
-        $trigger(this.toggle_button,'click');
+  _createCopyButton (i, holder) {
+    const button = this.getButton('', 'copy', 'button_copy_row_title_short')
+    const schema = this.schema
+    button.classList.add('copy', 'json-editor-btntype-copy')
+    button.setAttribute('data-i', i)
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      const j = e.currentTarget.getAttribute('data-i') * 1
+      const value = this.getValue()
+
+      let newValue = value[j]
+
+      /* On copy, recreate uuid if needed. */
+      if (schema.items.type === 'string' && schema.items.format === 'uuid') {
+        newValue = generateUUID()
+      } else if (schema.items.type === 'object' && schema.items.properties) {
+        value.forEach((row, i) => {
+          if (j === i) {
+            for (const key of Object.keys(row)) {
+              if (schema.items.properties && schema.items.properties[key] && schema.items.properties[key].format === 'uuid') {
+                newValue = Object.assign({}, value[j])
+                newValue[key] = generateUUID()
+              }
+            }
+          }
+        })
       }
 
-      // 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';
+      value.splice(j + 1, 0, newValue)
+      this.setValue(value)
+      this.onChange(true)
+      this.jsoneditor.trigger('copyRow', this.rows[j + 1])
+    })
+    holder.appendChild(button)
+    return button
+  }
+
+  _createMoveUpButton (i, holder) {
+    const button = this.getButton('', '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 j = e.currentTarget.getAttribute('data-i') * 1
+      const value = this.getValue()
+
+      value.splice(j - 1, 0, value.splice(j, 1)[0])
+
+      this.setValue(value)
+      this.onChange(true)
+      this.jsoneditor.trigger('moveRow', this.rows[j - 1])
+    })
+    holder.appendChild(button)
+    return button
+  }
+
+  _createMoveDownButton (i, holder) {
+    const button = this.getButton('', '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 j = e.currentTarget.getAttribute('data-i') * 1
+      const value = this.getValue()
+
+      value.splice(j + 1, 0, value.splice(j, 1)[0])
+
+      this.setValue(value)
+      this.onChange(true)
+      this.jsoneditor.trigger('moveRow', this.rows[j + 1])
+    })
+    holder.appendChild(button)
+    return button
+  }
+
+  _supportDragDrop (tab) {
+    supportDragDrop(tab, (i, j) => {
+      const rows = this.getValue()
+      const tmp = rows[i]
+      rows.splice(i, 1)
+      rows.splice(j, 0, tmp)
+
+      this.setValue(rows)
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[j])
+    }, { useTrigger: true })
+  }
+
+  addControls () {
+    this.collapsed = false
+    this.toggle_button = this._createToggleButton()
+    if (this.title_controls) {
+      this.title.insertBefore(this.toggle_button, this.title.childNodes[0])
+      this.toggle_button.addEventListener('click', e => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        this.setButtonState(this.panel, this.collapsed)
+        if (this.collapsed) {
+          this.collapsed = false
+          this.setButtonText(e.currentTarget, '', 'collapse', 'button_collapse')
+        } else {
+          this.collapsed = true
+          this.setButtonText(e.currentTarget, '', 'expand', 'button_expand')
+        }
+      })
+
+      /* If it should start collapsed */
+      if (this.options.collapsed) {
+        trigger(this.toggle_button, 'click')
       }
-      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.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();
-
-      self.addRow();
-      self.refreshValue();
-      self.refreshRowButtons();
-      self.onChange(true);
-    });
-    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;
+    /* 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()
+  }
+
+  _createToggleButton () {
+    const button = this.getButton('', 'collapse', 'button_collapse')
+    button.classList.add('json-editor-btntype-toggle')
+    return 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 editor = this.addRow()
+      this.refreshValue()
+      this.refreshRowButtons()
+      this.onChange(true)
+      this.jsoneditor.trigger('addRow', editor)
+    })
+    this.controls.appendChild(button)
+    return button
+  }
+
+  _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();
-      rows.pop();
-      self.setValue(rows);
-      self.onChange(true);
-    });
-    self.controls.appendChild(this.delete_last_row_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();
-
-      if (!self.askConfirmation()) {
-        return false;
+      const rows = this.getValue()
+      const editorValue = rows.pop()
+      this.setValue(rows)
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteRow', editorValue)
+    })
+    this.controls.appendChild(button)
+    return button
+  }
+
+  _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 (!this.askConfirmation()) {
+        return false
       }
 
-      self.setValue([]);
-      self.onChange(true);
-    });
-    self.controls.appendChild(this.remove_all_rows_button);
+      const values = this.getValue()
+
+      this.setValue([])
+      this.onChange(true)
+      this.jsoneditor.trigger('deleteAllRows', values)
+    })
+    this.controls.appendChild(button)
+    return button
   }
-});
+}