@json-editor/json-editor 2.14.0 → 2.14.1

package/package.json

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

package/src/editor.js

@@ -535,7 +535,7 @@ export class AbstractEditor {
       })
 
       // object properties
-      if (Object.keys(this.editors).length) {
+      if (this.editors && Object.keys(this.editors).length) {
         vars.properties = {}
 
         Object.keys(this.editors).forEach((key) => {

package/src/editors/array.js

@@ -283,7 +283,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   empty (hard) {
-    if (!this.rows) return
+    if (this.rows === null) return
 
     this.rows.forEach((row, i) => {
       if (hard) {
@@ -293,6 +293,12 @@ export class ArrayEditor extends AbstractEditor {
       }
       this.rows[i] = null
     })
+    if (hard) {
+      for (let j = this.rows.length; j < this.row_cache.length; j++) {
+        this.destroyRow(this.row_cache[j], true)
+        this.row_cache[j] = null
+      }
+    }
     this.rows = []
     if (hard) this.row_cache = []
   }

package/src/editors/multiple.js

@@ -107,6 +107,10 @@ export class MultipleEditor extends AbstractEditor {
       }
     }
 
+    if (schema?.options?.dependencies) {
+      delete schema.options.dependencies
+    }
+
     const editor = this.jsoneditor.getEditorClass(schema)
 
     this.editors[i] = this.jsoneditor.createEditor(editor, {
@@ -121,7 +125,9 @@ export class MultipleEditor extends AbstractEditor {
     this.editors[i].build()
     this.editors[i].postBuild()
 
-    if (this.editors[i].header) this.editors[i].header.style.display = 'none'
+    if (this.editors[i].header) {
+      this.theme.visuallyHidden(this.editors[i].header)
+    }
 
     this.editors[i].option = this.switcher_options[i]
 

package/src/editors/radio.js

@@ -19,6 +19,10 @@ export class RadioEditor extends SelectEditor {
     const radioInputEventhandler = e => {
       this.setValue(e.currentTarget.value)
       this.onChange(true)
+
+      this.radioGroup.forEach((radio) => {
+        radio.checked = (radio.value === this.getValue())
+      })
     }
 
     for (let i = 0; i < this.enum_values.length; i++) {

package/src/editors/string.js

@@ -50,7 +50,9 @@ export class StringEditor extends AbstractEditor {
     if (this.adjust_height) this.adjust_height(this.input)
 
     /* Bubble this setValue to parents if the value changed */
-    this.onChange(changed)
+    if (!fromTemplate) {
+      this.onChange(changed)
+    }
 
     /* Return object with changed state and sanitized value for use in editors that extend this */
     return { changed, value: sanitized }

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/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-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/pages/issues/issue-gh-1171.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1171</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">
+      <h1>Test</h1>
+      <a href="https://github.com/json-editor/json-editor/issues/1171">Link to issue</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      const value = document.querySelector('#value')
+      const defaultSchema = {
+        "type": "string",
+        "format": "radio",
+        "title": "Gender",
+        "enum": [
+          "male",
+          "female"
+        ]
+      }
+
+      const editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        theme: 'bootstrap4',
+        use_name_attributes: false
+      })
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1272</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">
+      <h1>Test</h1>
+      <a href="https://github.com/json-editor/json-editor/issues/1272">Link to issue</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      const value = document.querySelector('#value')
+      const defaultSchema = {
+        "$schema": "http://json-schema.org/draft-04/schema#",
+        "title": "&nbsp;",
+        "description": "&nbsp;",
+        "type": "object",
+        "format": "categories",
+        "options": {
+          "keep_oneof_values": false,
+          "disable_collapse": true
+        },
+        "properties": {
+          "recorder": {
+            "title": "Recorder",
+            "type": "object",
+            "format": "grid-strict",
+            "properties": {
+              "albums": {
+                "title": "Select album:",
+                "type": "string",
+                "options": {
+                  "grid_columns": 2
+                },
+                "enum": [
+                  "album1",
+                  "album2"
+                ]
+              },
+              "album1": {
+                "title": "&nbsp;",
+                "type": "object",
+                "format": "grid-strict",
+                "options": {
+                  "disable_collapse": true,
+                  "dependencies": {
+                    "albums": "album1"
+                  }
+                },
+                "required": [
+                  "song1",
+                  "song2"
+                ],
+                "properties": {
+                  "song1": {
+                    "options": {
+                      "grid_columns": 4
+                    },
+                    "type": "string"
+                  },
+                  "song2": {
+                    "options": {
+                      "grid_columns": 4
+                    },
+                    "type": "string"
+                  }
+                }
+              },
+              "album2": {
+                "title": "&nbsp;",
+                "options": {
+                  "dependencies": {
+                    "albums": "album2"
+                  }
+                },
+                "oneOf": [
+                  {
+                    "title": "SideA",
+                    "type": "object",
+                    "format": "grid-strict",
+                    "options": {
+                      "disable_collapse": true
+                    },
+                    "required": [
+                      "song1",
+                      "song2"
+                    ],
+                    "properties": {
+                      "song1": {
+                        "options": {
+                          "grid_columns": 3
+                        },
+                        "type": "string"
+                      },
+                      "song2": {
+                        "options": {
+                          "grid_columns": 3
+                        },
+                        "type": "string"
+                      }
+                    }
+                  },
+                  {
+                    "title": "SideB",
+                    "type": "object",
+                    "format": "grid-strict",
+                    "options": {
+                      "disable_collapse": true
+                    },
+                    "required": [
+                      "songs"
+                    ],
+                    "properties": {
+                      "songs": {
+                        "title": "array editor",
+                        "type": "array",
+                        "format": "table",
+                        "uniqueItems": true,
+                        "items": {
+                          "title": "song",
+                          "type": "object",
+                          "options": {
+                            "disable_collapse": true
+                          },
+                          "properties": {
+                            "song": {
+                              "type": "integer",
+                              "enum": [
+                                1,
+                                2,
+                                3,
+                                4,
+                                5
+                              ]
+                            },
+                            "title": {
+                              "type": "string"
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+
+      const editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        theme: 'bootstrap4',
+        keep_oneof_values: false
+      })
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1466</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/nonmin/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/1466">GitHub Issue 1466</a>
+      
+      <p>Remove Item 2, then destroy editor. The row of Item 2 which is only stored in the cache is not destroyed.</p>
+      <div id='editor_holder'></div>
+      <button onclick="start()">start </button>
+      <button onclick="destroyEditor()">destroyEditor </button>
+    </div>
+
+    <script>
+      var value = document.querySelector('#value')
+      var editor;
+      function start()
+      {
+        var defaultSchema = {
+          "type": "object",
+          "properties": {
+            "array": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": { 
+                  "someProperty": { 
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        editor = new JSONEditor(document.getElementById('editor_holder'), {
+          iconlib: 'fontawesome5',
+          schema: defaultSchema,
+          show_errors: 'always',
+        })
+
+        editor.on('ready', function () {
+          editor.setValue({       "array": [{ someProperty: "Item 1" }, { someProperty: "Item 2" }, { someProperty: "Item 3" }]    })
+        })
+      }
+
+      function destroyEditor()
+      {
+        editor.destroy();
+        editor = undefined;
+      }
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1485</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">
+      <h1>Test</h1>
+      <a href="https://github.com/json-editor/json-editor/issues/1485">Link to issue</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      const value = document.querySelector('#value')
+      const defaultSchema = {
+        "title": "json schema example",
+        "type": "object",
+        "properties": {
+          "example": {
+            "type": "string",
+            "template": "random_string"
+          },
+          "first_name": {
+            "type": "string"
+          },
+          "last_name": {
+            "type": "string"
+          },
+          "full_name": {
+            "type": "string",
+            "template": "{{ fname }} {{ lname }}",
+            "watch": {
+              "fname": "first_name",
+              "lname": "last_name"
+            }
+          }
+        }
+      }
+
+      window.JSONEditor.defaults.callbacks.template = {
+        "random_string": () => {
+          return Math.random() * 2
+        }
+      }
+
+      const editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        theme: 'bootstrap4'
+      })
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1491</title>
+    <link rel="stylesheet" id="theme-link" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/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">
+      <h1>Test</h1>
+      <a href="https://github.com/json-editor/json-editor/issues/1491">Link to issue</a>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      const value = document.querySelector('#value')
+      const defaultSchema = {
+        "options": {
+          "titleHidden": true
+        },
+        "type": "object",
+        "required": [
+          "betreff",
+          "text"
+        ],
+        "properties": {
+          "betreff": {
+            "title": "Betreff",
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 100
+          },
+          "text": {
+            "title": "Text",
+            "type": "string",
+            "format": "textarea",
+            "minLength": 1,
+            "maxLength": 500,
+            "options": {
+              "inputAttributes": {
+                "rows": 3
+              }
+            }
+          }
+        }
+      }
+
+      const editor = new JSONEditor(document.getElementById('editor_holder'), {
+        iconlib: 'fontawesome5',
+        schema: defaultSchema,
+        theme: 'bootstrap3'
+      })
+    </script>
+  </body>
+</html>