@json-editor/json-editor 2.12.0 → 2.13.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",

package/src/editor.js

@@ -510,6 +510,7 @@ export class AbstractEditor {
 
   onWatchedFieldChange () {
     let vars
+
     if (this.header_template) {
       vars = extend(this.getWatchedFieldValues(), {
         key: this.key,
@@ -518,6 +519,23 @@ export class AbstractEditor {
         i1: (this.key * 1 + 1),
         title: this.getTitle()
       })
+
+      // object properties
+      if (Object.keys(this.editors).length) {
+        Object.keys(this.editors).forEach((key) => {
+          const editor = this.editors[key]
+
+          if (editor.schema && editor.schema.enum && editor.schema.options && editor.schema.options.enum_titles) {
+            const enumIndex = editor.schema.enum.indexOf(editor.value)
+            const enumTitle = editor.options.enum_titles[enumIndex]
+            vars.properties = {}
+            vars.properties[key] = {
+              enumTitle: enumTitle
+            }
+          }
+        })
+      }
+
       const headerText = this.header_template(vars)
 
       if (headerText !== this.header_text) {

package/src/editors/button.js

@@ -24,7 +24,6 @@ export class ButtonEditor extends AbstractEditor {
 
     /* Get options, either global options from "this.defaults.options.button" or */
     /* single property options from schema "options.button" */
-    const title = this.translateProperty(this.schema.title) || this.key
     const options = this.expandCallbacks('button', extend({}, {
       icon: '',
       validated: false,
@@ -34,8 +33,15 @@ export class ButtonEditor extends AbstractEditor {
       }
     }, this.defaults.options.button || {}, this.options.button || {}))
 
+    const title = this.translateProperty(options.text || this.schema.title) || this.key
+
     this.input = this.getButton(title, options.icon, title)
-    this.input.addEventListener('click', options.action, false)
+
+    if (typeof options.action !== 'function') {
+      window.alert(`No button action defined for "${this.path}"`)
+    } else {
+      this.input.addEventListener('click', options.action, false)
+    }
 
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
       this.disable(true)

package/src/editors/simplemde.js

@@ -23,7 +23,8 @@ export class SimplemdeEditor extends StringEditor {
       options = this.expandCallbacks('simplemde', extend({}, {
         height: 300
       }, this.defaults.options.simplemde || {}, this.options.simplemde || {}, {
-        element: this.input
+        element: this.input,
+        forceSync: true
       }))
 
       this.simplemde_instance = new window.SimpleMDE(options)

package/src/resolvers.js

@@ -1,11 +1,14 @@
-/* Use "multiple" as a fall back for everything */
+/* Use "multiple" as a fallback for everything */
 const defaultResolver = schema => typeof schema.type !== 'string' && 'multiple'
 
+/* If the type is a script type, then presume the Editor's type is "string" until later resolvers decide otherwise */
+const defaultResolverString = schema => typeof schema.type === 'string' && 'string'
+
 /* If the type is not set but properties are defined, we can infer the type is actually object */
 const object = schema => !schema.type && schema.properties && 'object'
 
-/* If the type is set and it's a basic type, use the primitive editor */
-const primitive = schema => typeof schema.type === 'string' && schema.type
+/* If type is set, and it's a basic JSON type, use the primitive editor */
+const primitive = schema => typeof schema.type === 'string' && ['string', 'number', 'integer', 'boolean', 'null', 'array', 'object'].includes(schema.type) && schema.type
 
 /* Use specialized editor for signatures */
 const signature = schema => schema.type === 'string' && schema.format === 'signature' && 'signature'
@@ -129,4 +132,4 @@ const ip = schema => schema.type === 'string' && ['ip', 'ipv4', 'ipv6', 'hostnam
 const colorPicker = schema => schema.type === 'string' && schema.format === 'color' && 'colorpicker'
 
 /* Export resolvers in order of discovery, first to last */
-export const resolvers = [colorPicker, ip, ace, xhtml, markdown, jodit, autoComplete, uuid, info, button, stepper, describeBy, starratings, date, oneOf, ifThenElse, arraysOfStrings, enumeratedProperties, enumSource, table, upload, base64, any, boolean, signature, primitive, object, defaultResolver]
+export const resolvers = [colorPicker, ip, ace, xhtml, markdown, jodit, autoComplete, uuid, info, button, stepper, describeBy, starratings, date, oneOf, ifThenElse, arraysOfStrings, enumeratedProperties, enumSource, table, upload, base64, any, boolean, signature, primitive, object, defaultResolver, defaultResolverString]

package/tests/codeceptjs/codecept.json

@@ -1,6 +1,6 @@
 {
   "tests": "./**/*_test.js",
-  "timeout": 10000,
+  "timeout": 30,
   "output": "./output",
   "plugins": {
     "pauseOnFail": {}

package/tests/codeceptjs/constrains/contains_test.js

@@ -7,18 +7,18 @@ Scenario('should display contains validation errors @contains', ({ I }) => {
   I.waitForElement('.je-ready')
   I.waitForText('No items match contains')
   I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
   I.dontSee('No items match contains')
 })
 
 Scenario('should display @minContains validation errors @contains', ({ I }) => {
   I.amOnPage('minContains.html')
   I.waitForElement('.je-ready')
-  I.dontSee('No items match contains')
   I.waitForText('Contains match count 0 is less than minimum contains count of 2')
   I.click('.json-editor-btn-add')
-  I.dontSee('No items match contains')
   I.waitForText('Contains match count 1 is less than minimum contains count of 2')
   I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
   I.dontSee('No items match contains')
   I.dontSee('minimum contains count of 2')
 })
@@ -28,6 +28,7 @@ Scenario('should display @maxContains validation errors @contains', ({ I }) => {
   I.waitForElement('.je-ready')
   I.waitForText('No items match contains')
   I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
   I.dontSee('No items match contains')
   I.click('.json-editor-btn-add')
   I.dontSee('No items match contains')

package/tests/codeceptjs/constrains/dependentSchemas_test.js

@@ -9,6 +9,7 @@ Scenario('@dependentSchemas should display validation errors', ({ I }) => {
   I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
   I.waitForText('Object is missing the required property \'billing_address\'')
   I.click('[data-schemapath="root.billing_address"] .json-editor-opt-in')
+  I.waitForInvisible('.alert-danger')
   I.dontSee('Object is missing the required property \'billing_address\'')
   I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
   I.dontSee('Object is missing the required property \'billing_address\'')

package/tests/codeceptjs/core_test.js

@@ -89,18 +89,18 @@ Scenario('should set and get individual values', async ({ I }) => {
   I.waitForValue('.value', '"john kaminski"')
 })
 
-Scenario('should watch a specific field for changes', async ({ I }) => {
+Scenario('should watch a specific field for changes @core @change', async ({ I }) => {
   I.amOnPage('core.html')
   I.dontSeeElement('.name-changed')
   I.click('.set-individual-value')
-  I.seeElement('.name-changed')
+  I.waitForElement('.name-changed')
 })
 
-Scenario('should watch form for changes', async ({ I }) => {
+Scenario('should watch form for changes @core @change', async ({ I }) => {
   I.amOnPage('core.html')
   I.dontSeeElement('.form-changed')
   I.click('.set-value')
-  I.seeElement('.form-changed')
+  I.waitForElement('.form-changed')
 })
 
 Scenario('should change the form if form_name_root option is set @core', async ({ I }) => {

package/tests/codeceptjs/editors/advanced_test.js

@@ -1,6 +1,6 @@
 /* global Feature Scenario */
 
-Feature('Advanced Editor')
+Feature('Advanced Editor @advance-editor')
 
 Scenario('test validation & delete', ({ I }) => {
   I.amOnPage('advanced.html')

package/tests/codeceptjs/editors/array_test.js

@@ -4,6 +4,13 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('array')
 
+Scenario('Should display properties enum titles in items headerTemplate @headerTemplate', async ({ I }) => {
+  I.amOnPage('array-header-template.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForText('Dog', DEFAULT_WAIT_TIME, '.nav-link span')
+  I.waitForText('Cat', DEFAULT_WAIT_TIME, '.nav-link span')
+})
+
 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)

package/tests/codeceptjs/editors/autocomplete_test.js

@@ -5,7 +5,9 @@ Feature('autocomplete')
 Scenario('autocomplete should work @autocomplete', async ({ I }) => {
   I.amOnPage('autocomplete.html')
   I.waitForElement('.je-ready', 10)
-  I.fillField('root', 'ir')
+  I.click('[name="root"]')
+  I.pressKey('i')
+  I.pressKey('r')
   I.waitForText('iran', 20, '.autocomplete-result-list')
   I.waitForText('iraq', 20, '.autocomplete-result-list')
   I.click('iraq', '.autocomplete-result:nth-child(2)')

package/tests/codeceptjs/editors/tabs_test.js

@@ -4,7 +4,7 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('Tabs')
 
-Scenario('test top-tabs', ({ I }) => {
+Scenario('test @top-tabs', ({ I }) => {
   I.amOnPage('tabs.html')
   I.waitForElement('[data-schemapath="root"] .json-editor-btn-add')
   I.click('[data-schemapath="root"] .json-editor-btn-add')

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

@@ -7,12 +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.waitForInvisible('.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.waitForInvisible('.invalid-feedback')
   I.dontSee('Value required')
 })

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

@@ -0,0 +1,12 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1431 should remain fixed @issue-1431', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1431.html')
+  I.waitForElement('.je-ready')
+  I.waitForElement('.CodeMirror')
+  I.click('.CodeMirror')
+  I.pressKeys('simple-mde')
+  I.waitForValue('#value', '{"name":"simple-mde"}')
+})

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

@@ -0,0 +1,12 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1439 should remain fixed @issue-1439', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1439.html')
+  I.waitForElement('.je-ready')
+  I.waitForElement('[name="root[wrong]"]')
+  I.waitForElement('[data-schemapath="root.correct"] button')
+  I.waitForText('Button text')
+  I.waitForValue('#value', '{"wrong":""}')
+})

package/tests/pages/array-header-template.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>array-header-template</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>
+  const editorContainer = document.querySelector('#editor-container')
+  const schema1 = {
+    "title": "Pets",
+    "format": "tabs",
+    "type": "array",
+    "minItems": 1,
+    "default": [
+      {
+        "pet": "pet_1"
+      },
+      {
+        "pet": "pet_2"
+      }
+    ],
+    "items": {
+      "title": "Pets",
+      "type": "object",
+      "headerTemplate": "{{ properties.pet.enumTitle }}",
+      "properties": {
+        "pet": {
+          "title": "Pet",
+          "type": "string",
+          "enum": [ "pet_1", "pet_2" ],
+          "options": {
+            "enum_titles": [ "Dog", "Cat" ]
+          }
+        }
+      }
+    }
+  }
+
+  const editor = new JSONEditor(editorContainer, {
+    schema: schema1,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+    disable_collapse: true,
+    disable_edit_json: true,
+    disable_properties: true
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/button-icons.html

@@ -17,7 +17,7 @@
     'title': 'test',
     'properties': {
       'search': {
-        'type': 'button',
+        'format': 'button',
         'title': 'Search',
         'options': {
           'button': {

package/tests/pages/issues/issue-gh-1431.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1431</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" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+    <script src="../../../dist/jsoneditor.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <textarea class="form-control" id="value" cols="30" rows="10"></textarea>
+      <a href="https://github.com/json-editor/json-editor/issues/1431">GitHub Issue 1431</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      var value = document.querySelector('#value')
+      var defaultSchema = {
+        "title": "Person",
+        "type": "object",
+        "required": [
+          "name"
+        ],
+        "properties": {
+          "name": {
+            "type": "string",
+            "format": "markdown"
+          }
+        }
+      }
+
+      var editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        show_errors: 'always',
+        theme: 'bootstrap4'
+      })
+
+      editor.on('change', function () {
+        value.value = JSON.stringify(editor.getValue())
+      })
+
+      window.addEventListener('click', (e) => {console.log(e.target)})
+    </script>
+  </body>
+</html>

package/tests/pages/issues/issue-gh-1439.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1439</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" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+    <script src="../../../dist/jsoneditor.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <textarea class="form-control" id="value" cols="30" rows="10"></textarea>
+      <a href="https://github.com/json-editor/json-editor/issues/1439">GitHub Issue 1439</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      var value = document.querySelector('#value')
+      var defaultSchema = {
+        "type": "object",
+        "properties": {
+          "wrong": {
+            "type": "button",
+            "title": "Search",
+            "options": {
+              "button": {
+                "icon": "search",
+                "action": "myAction",
+                "validated": true
+              }
+            }
+          },
+          "correct": {
+            "format": "button",
+            "options": {
+              "button": {
+                "text": "Button text",
+                "icon": "search",
+                "action": "myAction",
+                "validated": true
+              }
+            }
+          }
+        }
+      }
+
+      JSONEditor.defaults.callbacks = {
+        "button" : {
+          "myAction" : function () {
+            alert('Button action')
+          }
+        }
+      }
+
+      var editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        show_errors: 'always',
+        theme: 'bootstrap4'
+      })
+
+      editor.on('change', function () {
+        value.value = JSON.stringify(editor.getValue())
+      })
+    </script>
+  </body>
+</html>

package/tests/pages/meta-schema.html

@@ -496,7 +496,6 @@
             'type': 'string',
             'propertyOrder': 4
           },
-
           'enum': {
             'type': 'array',
             'minItems': 1,
@@ -504,6 +503,17 @@
             'propertyOrder': 50,
             'format': 'table'
           },
+          'const': {
+            'type': [
+              'object',
+              'array',
+              'string',
+              'number',
+              'integer',
+              'boolean',
+              'null'
+            ]
+          },
           'enumSource': {
             'oneOf': [
               {