@json-editor/json-editor 2.6.1 → 2.7.0

package/tests/codeceptjs/editors/uuid_test.js

@@ -12,10 +12,37 @@ Scenario('should have initial value matching uuid @uuid', async (I) => {
 })
 
 Scenario('should have initial value matching uuid in arrays @uuid', async (I) => {
-  I.click('Add item')
-  I.click('Add item')
-  const value0 = await I.grabValueFrom('[name="root[uuidArray][0][uuid]"]')
+  I.click('Add uuid string array item')
+  I.click('Add uuid string array item')
+  const value0 = await I.grabValueFrom('[name="root[uuidStringArray][0]"]')
   assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value0)), true)
-  const value1 = await I.grabValueFrom('[name="root[uuidArray][1][uuid]"]')
+  const value1 = await I.grabValueFrom('[name="root[uuidStringArray][1]"]')
   assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value1)), true)
 })
+
+Scenario('should have initial value matching uuid in arrays of objects with @uuid', async (I) => {
+  I.click('Add uuid object array item')
+  I.click('Add uuid object array item')
+  const value0 = await I.grabValueFrom('[name="root[uuidObjectArray][0][uuid]"]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value0)), true)
+  const value1 = await I.grabValueFrom('[name="root[uuidObjectArray][1][uuid]"]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value1)), true)
+})
+
+Scenario('should have initial value matching uuid in arrays (table) of strings with @uuid', async (I) => {
+  I.click('Add uuid string table item')
+  I.click('Add uuid string table item')
+  const value0 = await I.grabValueFrom('[name="root[uuidStringTable][0]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value0)), true)
+  const value1 = await I.grabValueFrom('[name="root[uuidStringTable][1]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value1)), true)
+})
+
+Scenario('should have initial value matching uuid in arrays (table) of objects with @uuid', async (I) => {
+  I.click('Add uuid object table item')
+  I.click('Add uuid object table item')
+  const value0 = await I.grabValueFrom('[name="root[uuidObjectTable][0][uuid]"]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value0)), true)
+  const value1 = await I.grabValueFrom('[name="root[uuidObjectTable][1][uuid]"]')
+  assert.equal((/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value1)), true)
+})

package/tests/docker-compose.yml

@@ -11,7 +11,7 @@ services:
     expose:
       - '9001'
   firefox:
-    image: selenium/standalone-firefox-debug:3.141.59-20200525
+    image: selenium/standalone-firefox-debug:3.141.59-20210929
     depends_on:
       - node
     environment:

package/tests/fixtures/definitions.json

@@ -0,0 +1,22 @@
+{
+    "$schema": "https://json-schema.org/draft-04/schema",
+    "title": "Reusable Definitions",
+    "type": "object",
+    "id": "https://raw.githubusercontent.com/json-editor/json-editor/master/tests/fixtures/definitions.json",
+    "definitions": {
+        "address": {
+            "title": "Address",
+            "type": "object",
+            "properties": {
+                "street_address": { "type": "string" },
+                "city":           { "type": "string" },
+                "state":          { "type": "string" }
+            },
+            "required": ["street_address"]
+        },
+        "link" : {"$refs": "./properties.json#/properties/title"}
+    },
+    "properties": {
+        "address" : {"$refs": "#/definitions/address"}
+    }
+  }

package/tests/fixtures/properties.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "http://json-schema.org/draft-04/schema#",
+    "category": "atom",
+    "title": "Link",
+    "entity": "link",
+    "type": "object",
+    "format": "grid",
+    "properties": {
+      "href": {
+        "title": "URL",
+        "type": "string",
+        "format": "url"
+      },
+      "title": {
+        "title": "Title attribute",
+        "description": "Shown on mouseover.",
+        "type": "string"
+      }
+    }
+  }

package/tests/pages/array-checkboxes-infotext.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<textarea class="debug" cols="30" rows="10"></textarea>
+<button class='get-value'>Get Value</button>
+<div class='container'></div>
+
+<script>
+  var container = document.querySelector('.container')
+  var debug = document.querySelector('.debug')
+  var schema = {
+    'title': 'Checkbox with Infotext',
+    'type': 'array',
+    'uniqueItems': true,
+    'items': {
+      'type': 'string',
+      'enum': ['1', '2', '3', '4', '5'],
+      'options': {
+        'enum_titles': ['old a', 'old b'],
+        'enum': [
+          {},
+          {
+            'title': 'b',
+          },
+          {},
+          { 'infoText': 'dd' },
+          {
+            'title': 'e',
+            'infoText': 'ee'
+          }
+        ]
+      }
+    }
+  }
+
+  var editor = new JSONEditor(container, {
+    schema: schema
+  })
+
+  document.querySelector('.get-value').addEventListener('click', function () {
+    debug.value = JSON.stringify(editor.getValue())
+  })
+
+</script>
+
+</body>
+</html>

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

@@ -27,8 +27,8 @@
   var editor = new JSONEditor(container, {
     schema: schema
   });
-
-  document.querySelector('.get-value').addEventListener('click', function () {
+  editor.promise.then(() => {
+    document.querySelector('.get-value').addEventListener('click', function () {
     debug.value = JSON.stringify(editor.getValue());
   });
 
@@ -53,6 +53,8 @@
     action.value = 'deleteAllRows'
     console.log('deleteAllRows')
   });
+  })
+  
 
 
 </script>

package/tests/pages/array-unique-items-sort.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<textarea class="debug" cols="30" rows="10"></textarea>
+<button class='get-value'>Get Value</button>
+<div class='container'></div>
+
+<script>
+  var container = document.querySelector('.container');
+  var debug = document.querySelector('.debug');
+  var schema = {
+    "properties": {
+      "items": {
+        "title": "items",
+        "name": "ageband",
+        "type": "array",
+        "uniqueItems": true,
+        "format": "checkbox",
+        "items": {
+          "type": "string",
+          "enum": [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15"
+          ],
+          "options": {
+            "enum_titles": [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15"
+            ]
+          }
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(container, {
+    schema: schema
+  });
+
+  document.querySelector('.get-value').addEventListener('click', function () {
+    debug.value = JSON.stringify(editor.getValue());
+  });
+
+</script>
+
+</body>
+</html>

package/tests/pages/autocomplete.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Autocomplete</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">
+    <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
+    <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<div class="container">
+    <textarea class="value form-control" rows="10"></textarea>
+    <div class='json-editor-container'></div>
+</div>
+
+
+<script>
+  window.addEventListener('load', function () {
+    var jsonEditorContainer = document.querySelector('.json-editor-container')
+    var value = document.querySelector('.value')
+
+    JSONEditor.defaults.callbacks = {
+      'autocomplete': {
+        'search': function (editor, input) {
+          var countries = [
+            'germany',
+            'iran',
+            'iraq',
+            'spain'
+          ]
+
+          if (input.length < 1) { return [] }
+
+          return countries.filter(country => {
+            return country.toLowerCase().startsWith(input.toLowerCase())
+          })
+        }
+      }
+    }
+
+    var schema = {
+      'title': 'Test',
+      'type': 'string',
+      'format': 'autocomplete',
+      'options': {
+        'autocomplete': {
+          'search': 'search',
+          'autoSelect': true
+        }
+      }
+    }
+
+    var editor = new JSONEditor(jsonEditorContainer, {
+      schema: schema,
+      theme: 'bootstrap4',
+      required_by_default: true,
+      show_errors: 'always'
+    })
+
+    editor.on('change', function () {
+      value.value = JSON.stringify(editor.getValue())
+    })
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/button-icons.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Button Callbacks</title>
+  <script src="../../dist/jsoneditor.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class='container'></div>
+
+<script>
+  var container = document.querySelector('.container');
+  var schema = {
+    'type': 'object',
+    'title': 'test',
+    'properties': {
+      'search': {
+        'type': 'button',
+        'title': 'Search',
+        'options': {
+          'button': {
+            'icon': 'search'
+          }
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(container, {
+    iconlib: 'fontawesome5',
+    schema: schema,
+  });
+</script>
+
+</body>
+</html>

package/tests/pages/core.html

@@ -58,8 +58,8 @@
   var editor = new JSONEditor(container, {
     schema: schema
   });
-
-  var changeCallback = function () {
+  editor.promise.then(() => {
+    var changeCallback = function () {
     if (this.getCount()>1) formChanged.style.display = 'block'
   }.bind({
     count:0,
@@ -111,6 +111,8 @@
   destroy.addEventListener('click', function () {
     editor.destroy();
   });
+  })
+  
 
 </script>
 

package/tests/pages/error-messages.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>JSONEditor with forms</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+<div class="container">
+    <button id="switch-es">Switch to ES</button>
+    <div id='editor-container'></div>
+</div>
+<script src="../../dist/jsoneditor.js"></script>
+<script>
+  JSONEditor.defaults.languages.es = {}
+
+  var switchEs = document.querySelector('#switch-es')
+  var editor = null
+
+  var initEditor = function () {
+    if (editor) {
+      editor.destroy()
+    }
+
+    editor = new JSONEditor(document.querySelector('#editor-container'), {
+      theme: 'bootstrap4',
+      disable_edit_json: true,
+      disable_properties: true,
+      disable_collapse: true,
+      ajax: true,
+      show_errors: 'always',
+      schema: {
+        $ref: './validation-messages.json',
+      }
+    })
+  }
+
+  switchEs.addEventListener('click', function () {
+    JSONEditor.defaults.language = 'es'
+    initEditor()
+  })
+
+  initEditor()
+
+</script>
+</body>
+</html>

package/tests/pages/grid-strict.html

@@ -34,7 +34,6 @@
 <script>
   var container = document.querySelector('.json-editor-container');
   var editor = document.querySelector('.value');
-
   var schema = {
     "type": "object",
     "title": "range",
@@ -291,19 +290,16 @@
       schema: schema,
       theme: theme
     });
+    document.getElementById('theme_switcher').addEventListener('change',function() {
+        setTheme(this.value);
+      });
+    
+    
   };
-
-  document.getElementById('theme_switcher').addEventListener('change',function() {
-    setTheme(this.value);
-  });
-
   window.addEventListener('load',function() {
-    editor = new JSONEditor(container, {
-      schema: schema,
-      theme: 'bootstrap4'
-    });
     setTheme(this.value);
   });
+  
 
 </script>
 

package/tests/pages/grid.html

@@ -268,10 +268,6 @@
   });
 
   window.addEventListener('load',function() {
-    editor = new JSONEditor(container, {
-      schema: schema,
-      theme: 'bootstrap4'
-    });
     setTheme(this.value);
   });
 

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

@@ -59,8 +59,8 @@
           }
         },
       });
-
-      // Hook up the submit button to log to the console
+      editor.promise.then(() => {
+        // Hook up the submit button to log to the console
       document.getElementById('submit').addEventListener('click',function() {
         // Get the value from the editor
         console.log(editor.getValue());
@@ -105,6 +105,8 @@
           }
         ]
       });
+      })
+      
     </script>
   </body>
 </html>

package/tests/pages/meta_schema.json

@@ -625,6 +625,20 @@
                 "tilte":"title"
               }
             },
+            "enum": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "title": {
+                    "type": "string"
+                  },
+                  "infoText":{
+                    "type": "string"
+                  }
+                }
+              }
+            },
             "grid_columns":{
               "type":"integer",
               "default": 1,

package/tests/pages/object-required-properties.html

@@ -162,7 +162,7 @@
     }
   };
 
-  var setTheme = function(theme) {
+  var setTheme = async function(theme) {
     theme = theme || '';
 
     var mapping = {
@@ -210,30 +210,30 @@
     document.getElementById('theme_stylesheet').href = mapping[theme];
     document.getElementById('theme_switcher').value = JSONEditor.defaults.options.theme;
 
-
+    console.log(editor)
     if (editor) {
       editor.destroy();
     }
 
-    initJsonEditor();
+    await initJsonEditor();
 
   };
 
-  initJsonEditor = function () {
+  initJsonEditor = async function () {
     editor = new JSONEditor(container, {
       schema: schema,
       theme: 'bootstrap4',
       show_opt_in: true
     });
+    await editor.promise;
   }
 
   document.getElementById('theme_switcher').addEventListener('change',function() {
     setTheme(this.value);
   });
 
-  window.addEventListener('load',function() {
-
-    initJsonEditor();
+  window.addEventListener('load', async function() {
+    await initJsonEditor();
 
     getValue.addEventListener('click', function () {
       value.value = JSON.stringify(editor.getValue());

package/tests/pages/range.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Range</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">
+  <script src="https://cdn.jsdelivr.net/npm/mathjs@5.3.1/dist/math.min.js" class="external_mathjs"></script>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<div class="container">
+  <textarea class="value form-control" rows="10"></textarea>
+  <button class='get-value'>Get Value</button>
+  <button class='set-value'>Set Value</button>
+  <div class='json-editor-container'></div>
+</div>
+
+
+<script>
+  var jsonEditorContainer = document.querySelector('.json-editor-container');
+  var value = document.querySelector('.value');
+
+  var schema = {
+    "title": "Settings",
+    "type": "object",
+    "properties": {
+      "speed": {
+        "title": "speed",
+        "description": "1 - Slowest, 10 - Fastest",
+        "type": "integer",
+        "minimum": 1,
+        "maximum": 10,
+        "format": "range"
+      }
+    }
+  }
+
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    use_default_values: false,
+    required_by_default: true,
+    show_errors: 'always'
+  });
+
+  document.querySelector('.get-value').addEventListener('click', function () {
+    value.value = JSON.stringify(editor.getValue());
+    console.log(editor.getValue());
+  });
+
+  document.querySelector('.set-value').addEventListener('click', function () {
+    editor.setValue({number_range: 2})
+  });
+
+</script>
+
+</body>
+</html>

package/tests/pages/ready.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Ready</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">
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<div class="container">
+  <div class='json-editor-container'></div>
+</div>
+
+
+<script>
+  var jsonEditorContainer = document.querySelector('.json-editor-container');
+
+  var schema = {
+    "title": "Test",
+    "type": "object",
+    "properties": {
+      "test": {
+        "title": "test",
+        "type": "string",
+        "default": "lorem ipsum"
+      }
+    }
+  }
+
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    use_default_values: false,
+    required_by_default: true,
+    show_errors: 'always'
+  });
+
+</script>
+
+</body>
+</html>