@json-editor/json-editor 2.14.0 → 2.15.0

package/src/style.css.js

@@ -1,3 +1,3 @@
 /* eslint-disable */
-export default {".je-float-right-linkholder":"float:right;margin-left:10px",".je-modal":"background-color:white;border:1px%20solid%20black;box-shadow:3px%203px%20black;position:absolute;z-index:10",".je-infobutton-icon":"font-size:16px;font-weight:bold;padding:0.25rem;position:relative;display:inline-block",".je-infobutton-tooltip":"font-size:12px;font-weight:normal;font-family:sans-serif;visibility:hidden;background-color:rgba(50%2C%2050%2C%2050%2C%200.75);margin:0%200.25rem;color:%23fafafa;padding:0.5rem%201rem;border-radius:0.25rem;width:20rem;position:absolute",".je-not-loaded":"pointer-events:none",".je-header":"display:inline-block",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem",".je-checkbox":"display:inline-block;width:auto",".je-checkbox-control--compact":"display:inline-block;margin-right:1rem",".je-radio":"display:inline-block;width:auto",".je-radio-control--compact":"display:inline-block;margin-right:1rem",".je-switcher":"background-color:transparent;display:inline-block;font-style:italic;font-weight:normal;height:auto;width:auto;margin-bottom:0;margin-left:5px;padding:0%200%200%203px",".je-textarea":"width:100%25;height:300px;box-sizing:border-box",".je-range-control":"text-align:center",".je-indented-panel":"padding-left:10px;margin-left:10px;border-left:1px%20solid%20%23ccc",".je-indented-panel--top":"padding-left:10px;margin-left:10px",".je-tabholder":"float:left;width:130px",".je-tabholder .content":"margin-left:120px",".je-tabholder--top":"margin-left:10px",".je-tabholder--clear":"clear:both",".je-tab":"border:1px%20solid%20%23ccc;border-width:1px%200%201px%201px;text-align:center;line-height:30px;border-radius:5px;border-bottom-right-radius:0;border-top-right-radius:0;font-weight:bold;cursor:pointer",".je-tab--top":"float:left;border:1px%20solid%20%23ccc;border-width:1px%201px%200px%201px;text-align:center;line-height:30px;border-radius:5px;padding-left:5px;padding-right:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;font-weight:bold;cursor:pointer",".je-block-link":"display:block",".je-media":"width:100%25"}
+export default {".table-responsive .autocomplete-result-list":"position:relative%20!important",".je-float-right-linkholder":"float:right;margin-left:10px",".je-modal":"background-color:white;border:1px%20solid%20black;box-shadow:3px%203px%20black;position:absolute;z-index:10",".je-infobutton-icon":"font-size:16px;font-weight:bold;padding:0.25rem;position:relative;display:inline-block",".je-infobutton-tooltip":"font-size:12px;font-weight:normal;font-family:sans-serif;visibility:hidden;background-color:rgba(50%2C%2050%2C%2050%2C%200.75);margin:0%200.25rem;color:%23fafafa;padding:0.5rem%201rem;border-radius:0.25rem;width:20rem;position:absolute",".je-not-loaded":"pointer-events:none",".je-header":"display:inline-block",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem",".je-checkbox":"display:inline-block;width:auto",".je-checkbox-control--compact":"display:inline-block;margin-right:1rem",".je-radio":"display:inline-block;width:auto",".je-radio-control--compact":"display:inline-block;margin-right:1rem",".je-switcher":"background-color:transparent;display:inline-block;font-style:italic;font-weight:normal;height:auto;width:auto;margin-bottom:0;margin-left:5px;padding:0%200%200%203px",".je-textarea":"width:100%25;height:300px;box-sizing:border-box",".je-range-control":"text-align:center",".je-indented-panel":"padding-left:10px;margin-left:10px;border-left:1px%20solid%20%23ccc",".je-indented-panel--top":"padding-left:10px;margin-left:10px",".je-tabholder":"float:left;width:130px",".je-tabholder .content":"margin-left:120px",".je-tabholder--top":"margin-left:10px",".je-tabholder--clear":"clear:both",".je-tab":"border:1px%20solid%20%23ccc;border-width:1px%200%201px%201px;text-align:center;line-height:30px;border-radius:5px;border-bottom-right-radius:0;border-top-right-radius:0;font-weight:bold;cursor:pointer",".je-tab--top":"float:left;border:1px%20solid%20%23ccc;border-width:1px%201px%200px%201px;text-align:center;line-height:30px;border-radius:5px;padding-left:5px;padding-right:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;font-weight:bold;cursor:pointer",".je-block-link":"display:block",".je-media":"width:100%25"}
 /* eslint-enable */

package/src/templates/default.js

@@ -34,7 +34,7 @@ export const defaultTemplate = () => ({
         r: func
       })
     }
-    for (var i = 0; i < l; i++) {
+    for (let i = 0; i < l; i++) {
       getReplacement(i)
     }
 
@@ -42,7 +42,7 @@ export const defaultTemplate = () => ({
     return (vars) => {
       let ret = `${template}`
       let r
-      for (i = 0; i < l; i++) {
+      for (let i = 0; i < l; i++) {
         r = replacements[i]
         ret = ret.replace(r.s, r.r(vars))
       }

package/src/theme.js

@@ -202,9 +202,9 @@ export class AbstractTheme {
     return el
   }
 
-  getSelectInput (options, multiple) {
+  getSelectInput (options, multiple, hasPlaceholderOption = false) {
     const select = document.createElement('select')
-    if (options) this.setSelectOptions(select, options)
+    if (options) this.setSelectOptions(select, options, [], hasPlaceholderOption)
     return select
   }
 
@@ -222,8 +222,18 @@ export class AbstractTheme {
     this.setSelectOptions(switcher, options, titles)
   }
 
-  setSelectOptions (select, options, titles = []) {
+  setSelectOptions (select, options, titles = [], hasPlaceholderOption = false, placeholderOptionText = ' ') {
     select.innerHTML = ''
+
+    if (hasPlaceholderOption) {
+      const option = document.createElement('option')
+      option.setAttribute('value', '_placeholder_')
+      option.textContent = placeholderOptionText
+      option.setAttribute('disabled', '')
+      option.setAttribute('hidden', '')
+      select.appendChild(option)
+    }
+
     for (let i = 0; i < options.length; i++) {
       const option = document.createElement('option')
       option.setAttribute('value', options[i])

package/src/themes/bootstrap3.js

@@ -22,11 +22,6 @@ export class bootstrap3Theme extends AbstractTheme {
     if (this.closest(input, '.compact')) {
       input.controlgroup.style.marginBottom = 0
     }
-    if (this.queuedInputErrorText) {
-      const text = this.queuedInputErrorText
-      delete this.queuedInputErrorText
-      this.addInputError(input, text)
-    }
 
     /* TODO: use bootstrap slider */
   }
@@ -197,7 +192,6 @@ export class bootstrap3Theme extends AbstractTheme {
 
   addInputError (input, text) {
     if (!input.controlgroup) {
-      this.queuedInputErrorText = text
       return
     }
     input.controlgroup.classList.add('has-error')
@@ -214,9 +208,6 @@ export class bootstrap3Theme extends AbstractTheme {
   }
 
   removeInputError (input) {
-    if (!input.controlgroup) {
-      delete this.queuedInputErrorText
-    }
     if (!input.errmsg) return
     input.errmsg.style.display = 'none'
     input.controlgroup.classList.remove('has-error')

package/src/themes/index.js

@@ -1,4 +1,3 @@
-
 import { htmlTheme } from './html.js'
 // import  { bootstrap2Theme } from  './bootstrap2'
 import { bootstrap3Theme } from './bootstrap3.js'

package/src/validator.js

@@ -32,7 +32,7 @@ export class Validator {
           if (invalid) {
             errors.push({
               message: 'Must have the required properties: ' + missingProperties.join(', '),
-              path: path
+              path
             })
           }
         }
@@ -72,14 +72,14 @@ export class Validator {
           if (minContainsInvalid) {
             errors.push({
               message: this.translate('error_minContains', [counter, schema.minContains], schema),
-              path: path
+              path
             })
           }
         } else {
           if (containsInvalid) {
             errors.push({
               message: this.translate('error_contains', null, schema),
-              path: path
+              path
             })
           }
         }
@@ -90,7 +90,7 @@ export class Validator {
           if (maxContainsInvalid) {
             errors.push({
               message: this.translate('error_maxContains', [counter, schema.maxContains], schema),
-              path: path
+              path
             })
           }
         }

package/tests/Dockerfile

@@ -1,3 +1,3 @@
-FROM node:12
+FROM node:18
 
 ENV PATH=/repo/node_modules/.bin:$PATH

package/tests/codeceptjs/core_test.js

@@ -5,6 +5,12 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should enforce const @enforce_const', async ({ I }) => {
+  I.amOnPage('enforce-const.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{"string":"Alice","integer":5,"number":5.5,"string-enum":"Bob","boolean":true,"boolean-checkbox":true,"boolean-choices":true,"object":{"name":"Alice"},"array":[{"name":"Alice"},{"name":"Bob"}],"array-table":[{"name":"Alice"},{"name":"Bob"}],"array-tabs":[{"name":"Alice"},{"name":"Bob"}],"array-of-strings":["Alice","Bob"],"array-enum":["Carl","Dennis"],"object-enum":{"name":"Bob"}}')
+})
+
 Scenario('should hide titles @titleHidden', async ({ I }) => {
   I.amOnPage('title-hidden.html')
   I.waitForElement('.je-ready')
@@ -155,7 +161,7 @@ Scenario('should watch form for changes @core @change', async ({ I }) => {
 
 Scenario('should change the form if form_name_root option is set @core', async ({ I }) => {
   I.amOnPage('form-name.html')
-  I.see('Property must be set.', '.invalid-feedback')
+  I.see('Value must be one of the enumerated values', '.invalid-feedback')
   I.seeElement('[data-schemapath="form_1"]')
   I.seeElement('[data-schemapath="form_2"]')
   I.seeElement('[name="form_1"]')
@@ -174,7 +180,7 @@ Scenario('should change the form if form_name_root option is set @core', async (
   I.seeElement('[for="form_2[2]"]')
   I.click('[for="form_1[0]"]')
   I.click('[for="form_2[1]"]')
-  I.dontSee('Property must be set.', '.invalid-feedback')
+  I.dontSee('Value must be one of the enumerated values', '.invalid-feedback')
   I.click('#get-value-form-1')
   I.waitForValue('#value-form-1', '"yes"')
   I.click('#get-value-form-2')

package/tests/codeceptjs/editors/array_test.js

@@ -177,33 +177,38 @@ Scenario('should array editor events @array-events', async ({ I }) => {
   I.waitForValue('.debug', '["A","B"]')
 
   I.click('.json-editor-btn-moveup')
-  I.waitForValue('.action', 'moveRow')
+  I.waitForValue('#action1', 'moveRow')
   I.click('.get-value')
   I.waitForValue('.debug', '["B","A"]')
 
   I.click('.json-editor-btn-movedown')
-  I.waitForValue('.action', 'moveRow')
+  I.waitForValue('#action1', 'moveRow')
   I.click('.get-value')
   I.waitForValue('.debug', '["A","B"]')
 
   I.click('.json-editor-btntype-add')
-  I.waitForValue('.action', 'addRow')
+  I.waitForValue('#action1', 'addRow')
   I.click('.get-value')
   I.waitForValue('.debug', '["A","B",""]')
 
+  I.click('.json-editor-btntype-copy')
+  I.waitForValue('#action2', 'copyRow')
+  I.click('.get-value')
+  I.waitForValue('.debug', '["A","B","","A"]')
+
   I.amAcceptingPopups()
   I.click('.json-editor-btntype-deletelast')
   I.seeInPopup('Are you sure you want to remove this item?')
   I.acceptPopup()
-  I.waitForValue('.action', 'deleteRow')
+  I.waitForValue('#action1', 'deleteRow')
   I.click('.get-value')
-  I.waitForValue('.debug', '["A","B"]')
+  I.waitForValue('.debug', '["A","B",""]')
 
   I.amAcceptingPopups()
   I.click('.json-editor-btntype-deleteall')
   I.seeInPopup('Are you sure you want to remove this item?')
   I.acceptPopup()
-  I.waitForValue('.action', 'deleteAllRows')
+  I.waitForValue('#action1', 'deleteAllRows')
   I.click('.get-value')
   I.waitForValue('.debug', '[]')
 })

package/tests/codeceptjs/editors/autocomplete_test.js

@@ -11,6 +11,5 @@ Scenario('autocomplete should work @autocomplete', async ({ I }) => {
   I.waitForText('iran', 20, '.autocomplete-result-list')
   I.waitForText('iraq', 20, '.autocomplete-result-list')
   I.click('iraq', '.autocomplete-result:nth-child(2)')
-  I.wait(1)
   I.waitForValue('.value', '"iraq"')
 })

package/tests/codeceptjs/editors/integer_test.js

@@ -71,13 +71,9 @@ Scenario('should be readonly if specified and not disabled @readOnly', async ({
 
 Scenario('should update output when (method) setValue is called', async ({ I }) => {
   I.amOnPage('integer.html')
-  I.saveScreenshot('integer-setvalue-1.png')
   I.waitForText('5', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
-  I.saveScreenshot('integer-setvalue-2.png')
   I.click('.set-value')
-  I.saveScreenshot('integer-setvalue-3.png')
   I.waitForText('2', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
-  I.saveScreenshot('integer-setvalue-4.png')
 })
 
 Scenario('should validate value', async ({ I }) => {

package/tests/codeceptjs/editors/object_test.js

@@ -327,3 +327,11 @@ Scenario('should open and close the properties modal', ({ I }) => {
   I.click('textarea')
   I.dontSeeElement('.je-modal .property-selector')
 })
+
+Scenario('should remove false properties @remove_false_properties', ({ I }) => {
+  I.amOnPage('remove-false-properties.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{}')
+  I.click('[for="root[a]"]')
+  I.waitForValue('#value', '{"a":true}')
+})

package/tests/codeceptjs/editors/rating_test.js

@@ -1,6 +1,6 @@
 /* global Feature Scenario */
 
-Feature('rating')
+Feature('readonly')
 
 Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')

package/tests/codeceptjs/editors/select_test.js

@@ -2,6 +2,24 @@
 
 Feature('select')
 
+Scenario('Should render a non selectable placeholder options for not in enum values @placeholderOption', async ({ I }) => {
+  I.amOnPage('placeholder-options.html')
+  I.waitForElement('.je-ready')
+  I.waitForElement('option[value="_placeholder_"][disabled][hidden]')
+  I.waitForElement('option[value="a"]')
+  I.waitForElement('option[value="b"]')
+  I.click('#set-value')
+  I.waitForText('-select-')
+  I.waitForText('Value must be one of the enumerated values')
+  I.waitForValue('#value', '"other"')
+  I.selectOption('[name="root"]', 'a')
+  I.waitForValue('#value', '"a"')
+  I.dontSee('Value must be one of the enumerated values')
+  I.selectOption('[name="root"]', 'b')
+  I.waitForValue('#value', '"b"')
+  I.dontSee('Value must be one of the enumerated values')
+})
+
 Scenario('should return correct booleans values when selected @readOnly', async ({ I }) => {
   I.amOnPage('select.html')
   I.click('.get-value')

package/tests/codeceptjs/editors/starrating_test.js

@@ -0,0 +1,15 @@
+/* global Feature Scenario */
+
+Feature('starrating')
+
+Scenario('should set and get values properly @starrating', async ({ I }) => {
+  I.amOnPage('starrating.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{"integer_rating":0,"string_rating":"","starrating":"Beginner","starrating2":"Beginner","starrating3":"5 Stars"}')
+  I.click('[for="root[integer_rating]3"]')
+  I.click('[for="root[string_rating]3"]')
+  I.click('[for="root[starrating]3"]')
+  I.click('[for="root[starrating2]3"]')
+  I.click('[for="root[starrating3]10"]')
+  I.waitForValue('#value', '{"integer_rating":3,"string_rating":"3","starrating":"Experienced","starrating2":"Experienced","starrating3":"10 Stars"}')
+})

package/tests/codeceptjs/editors/string_test.js

@@ -116,3 +116,10 @@ Scenario('should work with cleave.js library', async ({ I }) => {
   I.click('.get-value')
   I.waitForValue('.debug', JSON.stringify({ cleave_test: '1234.567.890-1234' }))
 })
+
+Scenario('ace editor should have correct initial @prompt-paste-max-length-reached', async ({ I }) => {
+  I.amOnPage('prompt-paste-max-length-reached.html')
+  I.waitForElement('.je-ready')
+  I.click('#paste')
+  I.seeInPopup('Pasted text exceeded maximum length of 5 and will be clipped.')
+})

package/tests/codeceptjs/issues/issue-gh-1158_test.js

@@ -2,7 +2,7 @@
 
 Feature('issues')
 
-Scenario('GitHub issue 1158 should remain fixed @issue-1158 @optional', async ({ I }) => {
+Scenario('GitHub issue 1158 should remain fixed @issue-1158', async ({ I }) => {
   I.amOnPage('issues/issue-gh-1158.html')
   I.seeElement('[name="root[name]"]')
 })

package/tests/codeceptjs/issues/issue-gh-1164_test.js

@@ -5,6 +5,5 @@ Feature('GitHub issue 1164')
 Scenario('GitHub issue 1164 should remain fixed @issue-1164', ({ I }) => {
   I.amOnPage('issues/issue-gh-1164.html')
   I.waitForElement('.je-ready')
-  I.waitForInvisible('option[value="undefined"]')
   I.waitForValue('#value', '{"arrayEnumSelect":["one"],"stringEnumRadio":"one","numberEnumRadio":1.1,"integerEnumRadio":1}')
 })

package/tests/codeceptjs/issues/issue-gh-1171_test.js

@@ -0,0 +1,11 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1171 should remain fixed @issue-1171', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1171.html')
+  I.waitForElement('.je-ready')
+  I.dontSeeCheckedAttribute('[id="root[1]"]')
+  I.checkOption('[id="root[1]"]')
+  I.dontSeeCheckedAttribute('[id="root[0]"]')
+})

package/tests/codeceptjs/issues/issue-gh-1272_test.js

@@ -0,0 +1,21 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1272 should remain fixed @issue-1272', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1272.html')
+  I.waitForElement('.je-ready')
+  I.selectOption('[name="root[recorder][albums]"]', 'album2')
+  I.waitForText('song1')
+  I.dontSee('array editor')
+  I.selectOption('[data-schemapath="root.recorder.album2"] .je-switcher', 'SideB')
+  I.waitForText('array editor')
+  I.dontSee('song1')
+  I.selectOption('[data-schemapath="root.recorder.album2"] .je-switcher', 'SideA')
+  I.waitForText('song1')
+  I.dontSee('array editor')
+  I.selectOption('[name="root[recorder][albums]"]', 'album1')
+  I.selectOption('[name="root[recorder][albums]"]', 'album2')
+  I.waitForText('song1')
+  I.dontSee('array editor')
+})

package/tests/codeceptjs/issues/issue-gh-1383_test.js

@@ -2,7 +2,7 @@
 
 Feature('issues')
 
-Scenario('GitHub issue 1383 should remain fixed @issue-1383 @optional', async ({ I }) => {
+Scenario('GitHub issue 1383 should remain fixed @issue-1383', async ({ I }) => {
   I.amOnPage('issues/issue-gh-1383.html')
   I.waitForElement('.je-ready')
   I.waitForText('activity-timeout')

package/tests/codeceptjs/issues/issue-gh-1452_test.js

@@ -0,0 +1,10 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1452 should remain fixed @issue-1452', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1452.html')
+  I.click('#set-value')
+  I.selectOption('[id="root[category]"]', 'Vegetables')
+  I.waitForElement('[id="root[subcategory2]"]')
+})

package/tests/codeceptjs/issues/issue-gh-1485_test.js

@@ -0,0 +1,13 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1485 should remain fixed @issue-1485', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1485.html')
+  I.waitForElement('.je-ready')
+  I.fillField('[name="root[first_name]"]', 'John')
+  I.pressKey('Tab')
+  I.fillField('[name="root[last_name]"]', 'Doe')
+  I.pressKey('Tab')
+  I.waitForValue('[name="root[full_name]"]', 'John Doe')
+})

package/tests/codeceptjs/issues/issue-gh-1491_test.js

@@ -0,0 +1,9 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1491 should remain fixed @issue-1491', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1491.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Value required')
+})

package/tests/codeceptjs/issues/issue-gh-1525_test.js

@@ -0,0 +1,9 @@
+/* /* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1525 should remain fixed @issue-1525', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1525.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{"example":"dd"}')
+})

package/tests/codeceptjs/issues/issue-gh-1536_test.js

@@ -0,0 +1,12 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1536 should remain fixed @issue-1536', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1536.html')
+  I.waitForElement('.je-ready')
+  I.checkOption('[name="root[dependency_chain_head]')
+  I.waitForText('dependent_field_one')
+  I.checkOption('[name="root[dependent_field_one]')
+  I.waitForText('dependent_field_two')
+})

package/tests/codeceptjs/issues/issue-gh-1538_test.js

@@ -0,0 +1,10 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1538 should remain fixed @issue-1538', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1538.html')
+  I.waitForElement('.je-ready')
+  I.checkOption('[name="root[watched_field]')
+  I.waitForText('dependent_field')
+})

package/tests/codeceptjs/issues/issue-gh-1541_test.js

@@ -0,0 +1,8 @@
+/* /* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1541 should remain fixed @issue-1541 ', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1541.html')
+  I.waitForElement('.je-ready')
+})

package/tests/docker-compose-local.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   chrome:
-    image: seleniarm/standalone-chromium:114.0
+    image: seleniarm/standalone-chromium:114.0

package/tests/docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   node:
     build: .

package/tests/pages/array-events-table.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>array events table</title>
-    <meta charset="utf-8"/>
-    <script src="../../dist/jsoneditor.js"></script>
+  <title>array events table</title>
+  <meta charset="utf-8"/>
+  <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
@@ -14,9 +14,9 @@
 <div class='container'></div>
 
 <script>
-  var container = document.querySelector('.container');
-  var debug = document.querySelector('.debug');
-  var schema = {
+  const container = document.querySelector('.container');
+  const debug = document.querySelector('.debug');
+  const schema = {
     "type": "array",
     "title": "Strings",
     "format": "table",
@@ -25,37 +25,45 @@
       "title": "String"
     }
   };
-  var editor = new JSONEditor(container, {
+
+  const editor = new JSONEditor(container, {
     schema: schema,
     enable_array_copy: true
   });
+
   editor.promise.then(() => {
     document.querySelector('.get-value').addEventListener('click', function () {
-    debug.value = JSON.stringify(editor.getValue());
-  });
-  editor.setValue(["A","B","C","D","E"]);
-  editor.on('copyRow', function () {
-    alert('copyRow');
-    console.log('copyRow');
-  });
-  editor.on('moveRow', function () {
-    alert('moveRow');
-    console.log('moveRow');
-  });
-  editor.on('addRow', function () {
-    alert('addRow');
-    console.log('addRow');
-  });
-  editor.on('deleteRow', function () {
-    alert('deleteRow');
-    console.log('deleteRow');
-  });
-  editor.on('deleteAllRows', function () {
-    alert('deleteAllRows');
-    console.log('deleteAllRows');
-  });
+      debug.value = JSON.stringify(editor.getValue());
+    });
+
+    editor.setValue(["A", "B", "C", "D", "E"]);
+
+    editor.on('copyRow', function () {
+      alert('copyRow');
+      console.log('copyRow');
+    });
+
+    editor.on('moveRow', function () {
+      alert('moveRow');
+      console.log('moveRow');
+    });
+
+    editor.on('addRow', function () {
+      alert('addRow');
+      console.log('addRow');
+    });
+
+    editor.on('deleteRow', function () {
+      alert('deleteRow');
+      console.log('deleteRow');
+    });
+
+    editor.on('deleteAllRows', function () {
+      alert('deleteAllRows');
+      console.log('deleteAllRows');
+    });
   })
- 
+
 </script>
 
 </body>