@json-editor/json-editor 2.11.0 → 2.12.0

package/src/editors/table.js

@@ -36,8 +36,11 @@ export class TableEditor extends ArrayEditor {
   }
 
   build () {
+    this.tableContainer = this.theme.getTableContainer()
     this.table = this.theme.getTable()
-    this.container.appendChild(this.table)
+    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()
@@ -74,7 +77,7 @@ export class TableEditor extends ArrayEditor {
       this.container.appendChild(this.panel)
     }
 
-    this.panel.appendChild(this.table)
+    this.panel.appendChild(this.tableContainer)
     this.controls = this.theme.getButtonHolder()
     if (this.array_controls_top) {
       this.title.appendChild(this.controls)
@@ -232,28 +235,28 @@ export class TableEditor extends ArrayEditor {
       if (editor.delete_button) {
         /* Hide the delete button if we have minItems items */
         const display = !minItems
-        this.setVisibility(editor.delete_button, display)
+        this.setButtonState(editor.delete_button, display)
         needRowButtons.push(display)
       }
 
       if (editor.copy_button) {
         /* Hide the copy button if we have maxItems items */
         const display = !maxItems
-        this.setVisibility(editor.copy_button, display)
+        this.setButtonState(editor.copy_button, display)
         needRowButtons.push(display)
       }
 
       if (editor.moveup_button) {
         /* Hide the moveup button for the first row */
         const display = i !== 0
-        this.setVisibility(editor.moveup_button, display)
+        this.setButtonState(editor.moveup_button, display)
         needRowButtons.push(display)
       }
 
       if (editor.movedown_button) {
         /* Hide the movedown button for the last row */
         const display = i !== this.rows.length - 1
-        this.setVisibility(editor.movedown_button, display)
+        this.setButtonState(editor.movedown_button, display)
         needRowButtons.push(display)
       }
     })
@@ -261,26 +264,26 @@ export class TableEditor extends ArrayEditor {
     const need = needRowButtons.some(e => e)
     /* Show/hide controls column in table */
     this.rows.forEach((editor) =>
-      this.setVisibility(editor.controls_cell, need)
+      this.setButtonState(editor.controls_cell, need)
     )
-    this.setVisibility(this.controls_header_cell, need)
+    this.setButtonState(this.controls_header_cell, need)
 
-    this.setVisibility(this.table, this.value.length)
+    this.setButtonState(this.table, this.value.length)
 
     /* 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.setVisibility(this.add_row_button, display1)
+    this.setButtonState(this.add_row_button, display1)
 
     /* 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.setVisibility(this.delete_last_row_button, display2)
+    this.setButtonState(this.delete_last_row_button, display2)
 
     /* 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.setVisibility(this.remove_all_rows_button, display3)
+    this.setButtonState(this.remove_all_rows_button, display3)
 
     const controlsNeeded = display1 || display2 || display3
-    this.setVisibility(this.controls, controlsNeeded)
+    this.setButtonState(this.controls, controlsNeeded)
   }
 
   refreshValue () {
@@ -439,7 +442,7 @@ export class TableEditor extends ArrayEditor {
         e.preventDefault()
         e.stopPropagation()
 
-        this.setVisibility(this.panel, this.collapsed)
+        this.setButtonState(this.panel, this.collapsed)
         if (this.collapsed) {
           this.collapsed = false
           this.setButtonText(e.currentTarget, '', 'collapse', 'button_collapse')

package/src/resolvers.js

@@ -61,7 +61,11 @@ const enumeratedProperties = schema => {
 }
 
 /* Specialized editors for arrays of strings */
-const arraysOfStrings = schema => {
+const arraysOfStrings = (schema, je) => {
+  if (schema.items) {
+    schema.items = je.expandSchema(schema.items)
+  }
+
   if (schema.type === 'array' && schema.items && !(Array.isArray(schema.items)) && ['string', 'number', 'integer'].includes(schema.items.type)) {
     if (schema.format === 'choices') return 'arrayChoices'
     if (schema.uniqueItems) {
@@ -117,7 +121,7 @@ const markdown = schema => schema.type === 'string' && schema.format === 'markdo
 const xhtml = schema => schema.type === 'string' && ['xhtml', 'bbcode'].includes(schema.format) && 'sceditor'
 
 /* Use the ace editor for schemas with format equals any of ace editor modes */
-const aceModes = ['actionscript', 'batchfile', 'c', 'c++', 'cpp', 'coffee', 'csharp', 'css', 'dart', 'django', 'ejs', 'erlang', 'golang', 'groovy', 'handlebars', 'haskell', 'haxe', 'html', 'ini', 'jade', 'java', 'javascript', 'json', 'less', 'lisp', 'lua', 'makefile', 'matlab', 'mysql', 'objectivec', 'pascal', 'perl', 'pgsql', 'php', 'python', 'r', 'ruby', 'sass', 'scala', 'scss', 'sh', 'smarty', 'sql', 'sqlserver', 'stylus', 'svg', 'twig', 'vbscript', 'xml', 'yaml']
+const aceModes = ['actionscript', 'batchfile', 'c', 'c++', 'cpp', 'coffee', 'csharp', 'css', 'dart', 'django', 'ejs', 'erlang', 'golang', 'groovy', 'handlebars', 'haskell', 'haxe', 'html', 'ini', 'jade', 'java', 'javascript', 'json', 'less', 'lisp', 'lua', 'makefile', 'matlab', 'mysql', 'objectivec', 'pascal', 'perl', 'pgsql', 'php', 'python', 'prql', 'r', 'ruby', 'rust', 'sass', 'scala', 'scss', 'sh', 'smarty', 'sql', 'sqlserver', 'stylus', 'svg', 'typescript', 'twig', 'vbscript', 'xml', 'yaml', 'zig']
 const ace = schema => schema.type === 'string' && aceModes.includes(schema.format) && 'ace'
 
 const ip = schema => schema.type === 'string' && ['ip', 'ipv4', 'ipv6', 'hostname'].includes(schema.format) && 'ip'

package/src/schemaloader.js

@@ -449,6 +449,12 @@ export class SchemaLoader {
         if (typeof response === 'undefined') throw new Error(`Failed to fetch ref via ajax - ${uri}`)
         try {
           externalSchema = JSON.parse(response.responseText)
+
+          this.onSchemaLoaded({
+            schema: externalSchema,
+            schemaUrl: url
+          })
+
           if (this.options.ajax_cache_responses) {
             this.cacheSet(url, externalSchema)
           }
@@ -472,11 +478,18 @@ export class SchemaLoader {
       }
       await this._asyncloadExternalRefs(externalSchema, url, newfileBase)
     }
+
     if (!waiting) {
       return true
     }
+
+    this.onAllSchemasLoaded()
   }
 
+  onSchemaLoaded (payload) {}
+
+  onAllSchemasLoaded () {}
+
   extendSchemas (obj1, obj2) {
     obj1 = extend({}, obj1)
     obj2 = extend({}, obj2)

package/src/theme.js

@@ -414,6 +414,10 @@ export class AbstractTheme {
     if (title) button.setAttribute('title', title)
   }
 
+  getTableContainer () {
+    return document.createElement('div')
+  }
+
   /* Table functions */
   getTable () {
     return document.createElement('table')

package/src/themes/bootstrap3.js

@@ -136,6 +136,12 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
+  getTableContainer () {
+    const el = super.getTableContainer()
+    el.classList.add('table-responsive')
+    return el
+  }
+
   getTable () {
     const el = document.createElement('table')
     el.classList.add('table', 'table-bordered')

package/src/themes/bootstrap4.js

@@ -454,6 +454,12 @@ export class bootstrap4Theme extends AbstractTheme {
     return el
   }
 
+  getTableContainer () {
+    const el = super.getTableContainer()
+    el.classList.add('table-responsive')
+    return el
+  }
+
   getTable () {
     const el = document.createElement('table')
     el.classList.add('table', 'table-sm')

package/src/themes/bootstrap5.js

@@ -390,6 +390,12 @@ export class bootstrap5Theme extends AbstractTheme {
     return el
   }
 
+  getTableContainer () {
+    const el = super.getTableContainer()
+    el.classList.add('table-responsive')
+    return el
+  }
+
   getTable () {
     const el = document.createElement('table')
     el.classList.add('table', 'table-sm')

package/src/validator.js

@@ -11,6 +11,34 @@ export class Validator {
     this.defaults = defaults
 
     this._validateSubSchema = {
+      dependentRequired (schema, value, path) {
+        const errors = []
+
+        if (typeof schema.dependentRequired !== 'undefined') {
+          let missingProperties = []
+
+          Object.keys(schema.dependentRequired).forEach((key) => {
+            if (typeof value[key] !== 'undefined') {
+              const requiredProperties = schema.dependentRequired[key]
+
+              missingProperties = requiredProperties.filter((property) => {
+                return !hasOwnProperty(value, property)
+              })
+            }
+          })
+
+          const invalid = missingProperties.length > 0
+
+          if (invalid) {
+            errors.push({
+              message: 'Must have the required properties: ' + missingProperties.join(', '),
+              path: path
+            })
+          }
+        }
+
+        return errors
+      },
       dependentSchemas (schema, value, path) {
         let errors = []
 

package/tests/codeceptjs/constrains/dependentRequired_test.js

@@ -0,0 +1,33 @@
+/* global Feature Scenario */
+
+Feature('dependentRequired')
+
+Scenario('@dependentRequired should display validation errors', ({ I }) => {
+  I.amOnPage('dependentRequired.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#textarea-value', '{"name":""}')
+
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_1"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_2"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_1"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_2"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":""}')
+  I.dontSee('Must have the required properties: billing_address_3')
+})

package/tests/codeceptjs/core_test.js

@@ -5,6 +5,16 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should listen to @load-events', async ({ I }) => {
+  I.amOnPage('load-events.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('/tests/pages/../fixtures/basic_person.json')
+  I.waitForText('{"title":"Person","type":"object","id":"person","properties":{"name":{"type":"string","description":"First and Last name","minLength":4},"age":{"type":"integer","default":21,"minimum":18,"maximum":99},"gender":{"type":"string","enum":["male","female","other"]}}}')
+  I.waitForText('/tests/pages/../fixtures/person.json')
+  I.waitForText('{"$ref":"../fixtures/basic_person.json","properties":{"location":{"type":"object","title":"Location","properties":{"city":{"type":"string"},"state":{"type":"string"},"citystate":{"type":"string","description":"This is generated automatically from the previous two fields","template":"{{city}}, {{state}}","watch":{"city":"person.location.city","state":"person.location.state"}}}},"pets":{"type":"array","format":"table","title":"Pets","uniqueItems":true,"items":{"type":"object","properties":{"type":{"type":"string","enum":["cat","dog","bird","reptile","other"],"default":"dog"},"name":{"type":"string"},"fixed":{"type":"boolean","title":"spayed / neutered"}}}}}}')
+  I.waitForText('All schemas loaded')
+})
+
 Scenario('should set per-editor options @per-editor-options', async ({ I }) => {
   I.amOnPage('per-editor-options.html')
   I.waitForElement('.je-ready')

package/tests/codeceptjs/editors/array_test.js

@@ -4,6 +4,36 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('array')
 
+Scenario('Should set buttons states correctly @button_state_mode', async ({ I }) => {
+  I.amOnPage('button_state_mode_1.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-add', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btn-movedown', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btn-moveup', DEFAULT_WAIT_TIME)
+  I.dontSeeElement('.json-editor-btntype-delete')
+  I.dontSeeElement('.json-editor-btntype-deletelast')
+  I.dontSeeElement('.json-editor-btntype-deleteall')
+  I.click('.json-editor-btntype-add')
+  I.waitForElement('.json-editor-btntype-delete')
+  I.waitForElement('.json-editor-btntype-deletelast')
+  I.waitForElement('.json-editor-btntype-deleteall')
+
+  I.amOnPage('button_state_mode_2.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-add', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btn-movedown', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btn-moveup', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-delete', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-deletelast', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('.json-editor-btntype-delete')
+  I.seeDisabledAttribute('.json-editor-btntype-deletelast')
+  I.seeDisabledAttribute('.json-editor-btntype-deleteall')
+  I.click('.json-editor-btntype-add')
+  I.dontSeeDisabledAttribute('.json-editor-btntype-delete')
+  I.dontSeeDisabledAttribute('.json-editor-btntype-deletelast')
+  I.dontSeeDisabledAttribute('.json-editor-btntype-deleteall')
+})
+
 Scenario('should have correct initial value', async ({ I }) => {
   I.amOnPage('array.html')
   I.click('.get-value')
@@ -963,3 +993,25 @@ Scenario('should work well with selectize multiselect editors', async ({ I }) =>
   I.seeElement('[data-schemapath="root.0"] .selectize-dropdown-content [data-value="3"]')
   I.seeElement('[data-schemapath="root.0"] .selectize-dropdown-content [data-value="4"]')
 })
+
+Scenario('should be possible to add items to selectize array @selectize-add', async ({ I }) => {
+  I.amOnPage('array-selectize-create.html')
+  I.click('.selectize-input')
+  I.pressKey('g')
+  I.pressKey('Enter')
+  I.pressKey('r')
+  I.pressKey('Enter')
+  I.pressKey('e')
+  I.pressKey('Enter')
+  I.pressKey('a')
+  I.pressKey('Enter')
+  I.pressKey('t')
+  I.pressKey('Enter')
+  I.waitForValue('#value', '["g","r","e","a","t"]')
+})
+
+Scenario('Tables should have a container parent that makes tables responsive @array-table', async ({ I }) => {
+  I.amOnPage('array-table-responsive.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('.table-responsive')
+})

package/tests/codeceptjs/editors/object_test.js

@@ -5,6 +5,26 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('object')
 
+Scenario('@case-sensitive-property-search', async ({ I }) => {
+  I.amOnPage('object-case-sensitive-property-search-true.html')
+  I.click('.json-editor-btn-edit_properties')
+  I.fillField('.property-selector-input', 'aaa')
+  I.see('aaa', '.form-check label')
+  I.dontSee('AAA', '.form-check label')
+  I.fillField('.property-selector-input', 'AAA')
+  I.see('AAA', '.form-check label')
+  I.dontSee('aaa', '.form-check label')
+
+  I.amOnPage('object-case-sensitive-property-search-false.html')
+  I.click('.json-editor-btn-edit_properties')
+  I.fillField('.property-selector-input', 'aaa')
+  I.see('aaa', '.form-check label')
+  I.see('AAA', '.form-check label')
+  I.fillField('.property-selector-input', 'AAA')
+  I.see('AAA', '.form-check label')
+  I.see('aaa', '.form-check label')
+})
+
 Scenario('should respect property orders', async ({ I }) => {
   I.amOnPage('object.html')
   assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(1) [data-schemapath^="root."]', 'data-schemapath'), 'root.age')

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

@@ -0,0 +1,8 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1330 should remain fixed @issue-1330 @multiselect', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1330.html')
+  I.waitForElement('[data-schemapath="root.test"] input[type="checkbox"]')
+})

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

@@ -7,10 +7,12 @@ Scenario('GitHub issue 1338 should remain fixed @issue-1338', async ({ I }) => {
   I.waitForText('Value required')
   I.fillField('[id="root[field_a]"]', 'test')
   I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
   I.dontSee('Value required')
   I.refreshPage()
   I.waitForText('Value required')
   I.fillField('[id="root[field_b]"]', 'test')
   I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
   I.dontSee('Value required')
 })

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

@@ -0,0 +1,13 @@
+/* global Feature Scenario */
+
+Feature('GitHub issue 1364')
+
+Scenario('GitHub issue 1364 should remain fixed @issue-1364', ({ I }) => {
+  I.amOnPage('issues/issue-gh-1364.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{"engine":"none","child1":{}}')
+  I.selectOption('[id="root[engine]"]', 'test1')
+  I.waitForValue('#value', '{"engine":"test1","child1":{"L2Name":""},"L1Name":""}')
+  I.selectOption('[id="root[engine]"]', 'none')
+  I.waitForValue('#value', '{"engine":"none","child1":{}}')
+})

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

@@ -0,0 +1,11 @@
+/* global Feature Scenario */
+const assert = require('assert')
+
+Feature('GitHub issue 1367')
+
+Scenario('GitHub issue 1367 should remain fixed @issue-1367', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1367.html')
+  I.waitForElement('.je-ready')
+  I.click('canvas')
+  assert.match(await I.grabValueFrom('#value'), /base64/)
+})

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

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

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

@@ -0,0 +1,9 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1384 should remain fixed @issue-1384 @optional', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1384.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('Zope layout definition')
+})

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

@@ -0,0 +1,13 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1410 should remain fixed @issue-1410', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1410.html')
+  I.waitForElement('.je-ready')
+  I.click('[data-schemapath="root.standard"] .json-editor-btn-edit_properties')
+  I.waitForInvisible('[data-schemapath="root.standard"] .json-editor-btn-add')
+  I.click('[data-schemapath="root.standard"] .json-editor-btn-edit_properties')
+  I.click('[data-schemapath="root.extras"] .json-editor-btn-edit_properties')
+  I.waitForVisible('[data-schemapath="root.extras"] .json-editor-btn-add')
+})

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

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

package/tests/docker-compose-local.yml

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

package/tests/pages/array-selectize-create.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Selectize add item</title>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.css">
+    <script src="../../dist/jsoneditor.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
+</head>
+<body>
+
+<div class="container">
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <div id='editor-container'></div>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <label for="value">value</label>
+            <textarea class="form-control" id="value" cols="30" rows="10"></textarea>
+            <button id="set-value">Set value</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    var schema = {
+        "type": "array",
+        "format":"selectize",
+        "uniqueItems": true,
+        "items": {
+            "type": "string"
+        },
+        "options": {
+            "selectize": {
+                "create": true,
+                "plugins": ["remove_button"],
+            }
+        }
+    }
+    var editorContainer = document.querySelector('#editor-container')
+    var value = document.querySelector('#value')
+    var setValue = document.querySelector('#set-value')
+    var editor = new JSONEditor(editorContainer, {
+        schema: schema,
+        theme: 'bootstrap4',
+        iconlib: 'fontawesome'
+    })
+
+    editor.on('change', function () {
+        value.value = JSON.stringify(editor.getValue())
+    })
+
+    setValue.addEventListener('click', function () {
+        editor.setValue(JSON.parse(value.value))
+    })
+</script>
+
+</body>
+</html>

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

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>dependentSchemas</title>
+  <script src="../../dist/jsoneditor.js"></script>
+  <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+  <div id='editor-container'></div>
+</div>
+
+<style>
+  th {
+    white-space: nowrap;
+  }
+</style>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    "title": "Array table responsive",
+    "format": "table",
+    "type": "array",
+    "minItems": 1,
+    "items": {
+      "title": "item",
+      "type": "object",
+      "properties": {
+        "property_a": {
+          "title": "A very long title",
+          "type": "string"
+        },
+        "property_b": {
+          "title": "Another long title",
+          "type": "string"
+        },
+        "property_c": {
+          "title": "Another long title too",
+          "type": "string"
+        },
+        "property_d": {
+          "title": "Another long title too",
+          "type": "string"
+        },
+        "property_e": {
+          "title": "Another long title too",
+          "type": "string"
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/button_state_mode_1.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>button_state_mode</title>
+  <script src="../../dist/jsoneditor.js"></script>
+  <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+  <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    'title': 'button_state_mode',
+    'type': 'array',
+    'items': {
+      'type': 'number'
+    },
+    'minItems': 3
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4'
+  })
+</script>
+
+</body>
+</html>