@json-editor/json-editor 2.13.0 → 2.13.2

package/package.json

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

package/src/defaults.js

@@ -408,7 +408,8 @@ const options = {
   use_default_values: true,
   max_depth: 0,
   button_state_mode: 1,
-  case_sensitive_property_search: true
+  case_sensitive_property_search: true,
+  show_errors: 'interaction'
 }
 
 /* This assignment was previously in index.js but makes more sense here */

package/src/editor.js

@@ -15,6 +15,7 @@ export class AbstractEditor {
     this.original_schema = options.schema
     this.schema = this.jsoneditor.expandSchema(this.original_schema)
     this.active = true
+    this.isUiOnly = false
     this.options = extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options)
 
     this.formname = this.jsoneditor.options.form_name_root || 'root'
@@ -522,13 +523,14 @@ export class AbstractEditor {
 
       // object properties
       if (Object.keys(this.editors).length) {
+        vars.properties = {}
+
         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
             }

package/src/editors/array.js

@@ -342,7 +342,12 @@ export class ArrayEditor extends AbstractEditor {
     value = this.ensureArraySize(value)
 
     const serialized = JSON.stringify(value)
-    if (serialized === this.serialized) return
+    if (serialized === this.serialized) {
+      if (initial) {
+        this.refreshValue(initial)
+      }
+      return
+    }
 
     value.forEach((val, i) => {
       if (this.rows[i]) {
@@ -454,7 +459,7 @@ export class ArrayEditor extends AbstractEditor {
         this.value[i] = editor.getValue()
       })
 
-      if (!this.collapsed && this.setupButtons(minItems)) {
+      if (this.setupButtons(minItems) && !this.collapsed) {
         this.controls.style.display = 'inline-block'
       } else {
         this.controls.style.display = 'none'

package/src/editors/button.js

@@ -6,6 +6,7 @@ export class ButtonEditor extends AbstractEditor {
   constructor (options, defaults) {
     super(options, defaults)
     this.active = false
+    this.isUiOnly = true
 
     /* Set field to required in schema otherwise it will not be displayed */
     if (this.parent && this.parent.schema) {

package/src/editors/checkbox.js

@@ -6,6 +6,11 @@ export class CheckboxEditor extends AbstractEditor {
     const changed = this.getValue() !== value
     this.value = value
     this.input.checked = this.value
+
+    if (!initial) {
+      this.is_dirty = true
+    }
+
     this.onChange(changed)
   }
 
@@ -50,6 +55,7 @@ export class CheckboxEditor extends AbstractEditor {
       e.preventDefault()
       e.stopPropagation()
       this.value = e.currentTarget.checked
+      this.is_dirty = true
       this.onChange(true)
     })
 
@@ -77,7 +83,17 @@ export class CheckboxEditor extends AbstractEditor {
   }
 
   showValidationErrors (errors) {
-    this.previous_error_setting = this.jsoneditor.options.show_errors
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
+
+    if (never) {
+      return
+    }
+
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
 
     const addMessage = (messages, error) => {
       if (error.path === this.path) {

package/src/editors/object.js

@@ -42,7 +42,7 @@ export class ObjectEditor extends AbstractEditor {
       super.enable()
       if (this.editors) {
         Object.values(this.editors).forEach(e => {
-          if (e.isActive()) {
+          if (e.isActive() || e.isUiOnly) {
             e.enable()
           }
           e.optInCheckbox.disabled = false
@@ -60,7 +60,7 @@ export class ObjectEditor extends AbstractEditor {
     super.disable()
     if (this.editors) {
       Object.values(this.editors).forEach(e => {
-        if (e.isActive()) {
+        if (e.isActive() || e.isUiOnly) {
           e.disable(alwaysDisabled)
         }
         e.optInCheckbox.disabled = true
@@ -850,15 +850,8 @@ export class ObjectEditor extends AbstractEditor {
 
   copyJSON () {
     if (!this.editjson_holder) return
-    const ta = document.createElement('textarea')
-    ta.value = this.editjson_textarea.value
-    ta.setAttribute('readonly', '')
-    ta.style.position = 'absolute'
-    ta.style.left = '-9999px'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
+    navigator.clipboard.writeText(this.editjson_textarea.value)
+      .catch((e) => window.alert(e))
   }
 
   saveJSON () {

package/src/editors/select.js

@@ -17,12 +17,14 @@ export class SelectEditor extends AbstractEditor {
 
     if (this.value === sanitized) return
 
-    if (initial) this.is_dirty = false
-    else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
-
     this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
 
     this.value = sanitized
+
+    if (!initial) {
+      this.is_dirty = true
+    }
+
     this.onChange()
     this.change()
   }
@@ -345,7 +347,17 @@ export class SelectEditor extends AbstractEditor {
   }
 
   showValidationErrors (errors) {
-    this.previous_error_setting = this.jsoneditor.options.show_errors
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
+
+    if (never) {
+      return
+    }
+
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
 
     const addMessage = (messages, error) => {
       if (error.path === this.path) {

package/src/validator.js

@@ -133,7 +133,8 @@ export class Validator {
         return []
       },
       const (schema, value, path) {
-        const valid = JSON.stringify(schema.const) === JSON.stringify(value) && !(Array.isArray(value) || typeof value === 'object')
+        const valid = JSON.stringify(schema.const) === JSON.stringify(value)
+
         if (!valid) {
           return [{
             path,

package/tests/codeceptjs/core_test.js

@@ -5,6 +5,45 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should show validation errors based on "show_errors" setting @showValidationErrors', async ({ I }) => {
+  I.amOnPage('show-validation-errors.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Value must be the constant value.')
+  I.dontSee('Value must be the constant value.')
+  I.dontSee('Value must be the constant value.')
+
+  // set invalid values through interaction
+  I.checkOption('[name="root[boolean-checkbox]"]')
+  I.selectOption('[name="root[boolean-select]"]', '1')
+  I.selectOption('[name="root[boolean-choices]"]', '1')
+  I.uncheckOption('[name="root[boolean-checkbox]"]')
+  I.selectOption('[name="root[boolean-select]"]', 'false')
+  I.selectOption('[name="root[boolean-choices]"]', 'false')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-checkbox"] .invalid-feedback')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-select"] .invalid-feedback')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-choices"] .invalid-feedback')
+
+  // set valid values through interaction
+  I.checkOption('[name="root[boolean-checkbox]"]')
+  I.selectOption('[name="root[boolean-select]"]', '1')
+  I.selectOption('[name="root[boolean-choices]"]', '1')
+  I.dontSee('Value must be the constant value.')
+  I.dontSee('Value must be the constant value.')
+  I.dontSee('Value must be the constant value.')
+
+  // set invalid values with setValue
+  I.click('#set-invalid-values')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-checkbox"] .invalid-feedback')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-select"] .invalid-feedback')
+  I.waitForText('Value must be the constant value.', DEFAULT_WAIT_TIME, '[data-schemapath="root.boolean-choices"] .invalid-feedback')
+
+  // set valid values with setValue
+  I.click('#set-valid-values')
+  I.waitForInvisible('[data-schemapath="root.boolean-checkbox"] .invalid-feedback')
+  I.waitForInvisible('[data-schemapath="root.boolean-select"] .invalid-feedback')
+  I.waitForInvisible('[data-schemapath="root.boolean-choices"] .invalid-feedback')
+})
+
 Scenario('should listen to @load-events', async ({ I }) => {
   I.amOnPage('load-events.html')
   I.waitForElement('.je-ready')

package/tests/codeceptjs/editors/button_test.js

@@ -42,3 +42,9 @@ Scenario('should set icon @button @button-icon', async ({ I }) => {
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
   I.waitForElement('i.fas.fa-search', DEFAULT_WAIT_TIME)
 })
+
+Scenario('should be disable if we disable parent @button-disable', async ({ I }) => {
+  I.amOnPage('disable-button-in-object-editors.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[data-schemapath="root.some_button"] button')
+})

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

@@ -0,0 +1,18 @@
+/* global Feature Scenario */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('issues')
+
+Scenario('GitHub issue 1453 should remain fixed @issue-1453', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1453.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-add', 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-toggle')
+  I.dontSeeElement('.json-editor-btntype-delete')
+  I.dontSeeElement('.json-editor-btntype-deletelast')
+  I.dontSeeElement('.json-editor-btntype-deleteall')
+})

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

@@ -0,0 +1,14 @@
+/* global Feature Scenario */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('issues')
+
+Scenario('GitHub issue 1461 should remain fixed @issue-1461', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1461.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('.json-editor-btntype-add', DEFAULT_WAIT_TIME)
+  I.dontSeeElement('.json-editor-btntype-delete')
+  I.dontSeeElement('.json-editor-btntype-deletelast')
+  I.dontSeeElement('.json-editor-btntype-deleteall')
+})

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

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

package/tests/pages/disable-button-in-object-editors.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Button disabled</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 = {
+    "type": "object",
+    "title": "test",
+    "properties": {
+      "some_button": {
+        "format": "button",
+        "title": "A button",
+        "options": {
+          "button": {
+            "align": "left",
+            "icon": "map-marker",
+            "action": "determineCurrentCoordinates"
+          }
+        }
+      }
+    }
+  }
+
+  JSONEditor.defaults.callbacks.button = {
+    "determineCurrentCoordinates": function() {
+      console.log('OK')
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+    show_errors: 'always',
+    show_opt_in: true
+  })
+
+  editor.on('ready', function () {
+    editor.disable()
+  })
+</script>
+
+</body>
+</html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1453</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/1453">GitHub Issue 1453</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      var value = document.querySelector('#value')
+      
+      var defaultSchema = {
+        "type": "object",
+        "properties": {
+          "list": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "options": {
+              "collapsed": true
+            }
+          }
+        }
+      }
+          
+      var editor = new JSONEditor(document.getElementById('editor_holder'), {
+        schema: defaultSchema,
+        show_errors: 'always',
+        disable_array_delete_last_row: true,
+        disable_array_delete_all_rows: true,
+      })
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1461</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/1461">GitHub Issue 1461</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      var value = document.querySelector('#value')
+      
+      var defaultSchema = {
+        "type": "object",
+        "properties": {
+          "enumProperty": {
+              "type": "string",
+              "default": "secondValue",
+              "enum": [
+                "firstValue",
+                "secondValue"
+              ]
+          },
+          "arrayProperty": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "attribute": {
+                  "type": "string"
+                }
+            }
+            }
+          }}
+      }
+          
+      var editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        show_errors: 'always',
+        disable_array_delete_last_row: true,
+        disable_array_delete_all_rows: true
+      })
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1463</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">
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      const value = document.querySelector('#value')
+      const defaultSchema = {
+        "title": "const",
+        "type": "object",
+        "properties": {
+          "object": {
+            "type": "object",
+            "const": {}
+          },
+          "array": {
+            "type": "array",
+            "const": []
+          }
+        }
+      }
+
+      const editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        theme: 'bootstrap4'
+      })
+    </script>
+  </body>
+</html>

package/tests/pages/show-validation-errors.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>showValidationErrors</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 class="btn btn-success" id="set-valid-values">Set valid values</div>
+    <div class="btn btn-danger" id="set-invalid-values">Set invalid values</div>
+</div>
+
+<script>
+  const editorContainer = document.querySelector('#editor-container')
+  const schema = {
+    "type": "object",
+    "properties": {
+      "boolean-checkbox": {
+        "title": "boolean-checkbox",
+        "type": "boolean",
+        "format": "checkbox",
+        "const": true,
+        "default": false
+      },
+      "boolean-select": {
+        "title": "boolean-select",
+        "type": "boolean",
+        "const": true,
+        "default": false
+      },
+      "boolean-choices": {
+        "title": "boolean-choices",
+        "type": "boolean",
+        "format": "choices",
+        "const": true,
+        "default": false
+      }
+    }
+  }
+
+  const editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+
+  const setValidValues = document.querySelector('#set-valid-values')
+  const setInvalidValues = document.querySelector('#set-invalid-values')
+
+  setValidValues.addEventListener('click', () => {
+    editor.setValue({
+      "boolean-checkbox": true,
+      "boolean-select": true,
+      "boolean-choices": true
+    })
+  })
+
+  setInvalidValues.addEventListener('click', () => {
+    editor.setValue({
+      "boolean-checkbox": false,
+      "boolean-select": false,
+      "boolean-choices": false
+    })
+  })
+</script>
+
+</body>
+</html>