@json-editor/json-editor 2.6.0 → 2.8.0

package/.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
         include:
           - selenium-browser: "chrome"
             build-env: "build.prod"
-          - build-nonmin: "chrome"
+          - selenium-browser: "chrome"
             build-env: "build.nonmin.travis"
           - selenium-browser: "firefox"
             build-env: "build.prod"
@@ -50,9 +50,18 @@ jobs:
       - name: Build
         run: docker-compose run -T --rm node npm run ${BUILD_ENV}
       - name: Test
-        run: docker-compose exec -T node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:${SELENIUM_BROWSER} --invert --grep  '@optional'
+        run: |
+          docker-compose exec -T node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:${SELENIUM_BROWSER} --invert --grep  '@optional'
+          pwd
+          ls -la codeceptjs/output
+      - name: Test Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: codeceptjs-output
+          path: tests/codeceptjs/output
+          retention-days: 30
       - name: Test (optional)
         continue-on-error: true
         run: docker-compose exec -T node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:${SELENIUM_BROWSER} --grep '@optional'
 
-

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 ### Unreleased
 
+### 2.7.1
+
+- Added feature: use_name_attributes option
+
+### 2.7.0
+
+- Fixed array uniqueItems sorting bug
+- Configurable icons for type button editors
+- Fixed autocomplete options rendering
+- Editor gets .je-ready class when ready
+- Regenerate unique UUID when copying arrays
+- Added infoText for checkbox on "Spectre" and "Bootstrap 3" Themes
+- Added configurable error messages at editor schema level feature
+- Added form submission case study and linked it in the readme
+- Fixed range output value rendering
+- Added automated test for references
+- Added SimpleMDE test page
+- JSON pointers support for definitions
+- Added infoText for multiselect enum
+- Updated packages and fixed npm audits
+- Using latest jquery in docs to resolve vulnerabilities
+- fixed bug in upload editor
+- Updated release-motes.md
+- Added feature: override error messages in schema options
+- fixed arbitrary JSON pointers not returning the schema at the pointer path
+- Add infoText for enums with format `checkbox` (default)
+- updated `jodit` devDependency (jodit markup changes)
+
+### 2.6.1
+
+- Fix for #900 to close the properties modal when we click outside modal
+- fix: Rework use of event.path to prevent a ReferenceError in Safari
+- Fix for dependencies when dependency is an array
+
 ### 2.6.0
 
 - set show_opt_in per object editor

package/README.md

@@ -11,6 +11,7 @@ Some pull requests added from the original repo.
 JSON Editor takes a JSON Schema and uses it to generate an HTML form.
 It has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, spectre, tailwind).
 
+Take a look at this [example](https://json-editor.github.io/json-editor/form-submission.html) for a simple form submission case study.
 ### Online Demo
 
 Check out an interactive demo: https://json-editor.github.io/json-editor/
@@ -294,6 +295,11 @@ Here are all the available options:
     <td>A callback function to resolve an undefined Uniform Resource Name (URN) for <code>$ref</code>. The function receives a URN and callback to pass back a serialized JSON response. The function should return a boolean (true if the URN can be resolved; false otherwise).</td>
     <td><code>false</code></td>
   </tr>
+  <tr>
+    <td>use_name_attributes</td>
+    <td>If <code>true</code>, control inputs <code>name</code> attributes will be set.</td>
+    <td><code>true</code></td>
+  </tr>
   </tbody>
 </table>
 
@@ -521,7 +527,7 @@ Some of The [hyper-schema][hyper] specification is supported as well.
 
 ### $ref and definitions
 
-JSON Editor supports schema references to external URLs and local definitions.  Here's an example showing both:
+JSON Editor supports schema references to external URLs and local definitions as well as JSON Pointers.  Here's an example:
 
 ```json
 {
@@ -533,6 +539,9 @@ JSON Editor supports schema references to external URLs and local definitions.
     },
     "location": {
       "$ref": "http://mydomain.com/geo.json"
+    },
+    "birthday": {
+      "$ref": "http://mydomain.com/person.json#/definitions/birthdate"
     }
   },
   "definitions": {
@@ -752,6 +761,33 @@ __SimpleMDE__ is a simple Markdown editor with live preview.  To use it, set the
 }
 ```
 
+To customize the editor, add the [configuration](https://github.com/sparksuite/simplemde-markdown-editor#configuration) in the `simplemde` option:
+
+```json
+{
+  "type": "string",
+  "format": "markdown",
+  "options": {
+    "simplemde": {
+      "toolbar": [
+        "bold",
+        "italic",
+        "heading",
+        "|",
+        "link",
+        "quote",
+        "|",
+        "preview",
+        "fullscreen",
+        "guide"
+      ],
+      "spellChecker": false
+    }
+  }
+}
+```
+      
+
 __Ace Editor__ is a syntax highlighting source code editor. You can use it by setting the format to any of the following:
 
 *  actionscript
@@ -840,6 +876,55 @@ You can enable [Ace editor options](https://github.com/ajaxorg/ace/wiki/Configur
 }
 ```
 
+### Special editors
+
+JSONEditor features specialized types of editors.
+
+#### Button editor
+
+Creates a button whose click callback can be defined in `JSONEditor.defaults.callbacks`. Options:
+
+- `icon`: Renders an icon into the button. Must be supported by the iconLib used.
+- `validated`: With `true` the button is disabled until the whole editor is valid.
+- `action`: the name of the callback that will be invoked when the button is clicked. Callbacks
+            must be defined in `JSONEditor.defaults.callbacks`.
+
+```js
+  JSONEditor.defaults.callbacks = {
+    "button" : {
+      "myAction" : function (jseditor, e) {
+        alert('Button action')
+      }
+    }
+  }
+```
+
+```json
+{
+  "type": "button",
+  "title": "Search",
+  "options": {
+    "button": {
+      "icon": "search",
+      "action": "myAction",
+      "validated": true
+    }
+  }
+}
+```
+
+#### Info editor
+
+Displays a label and a description text. 
+
+```json
+{
+  "type": "info",
+  "title": "Important:",
+  "description": "Lorem ipsum dolor"
+}
+```
+
 #### Booleans
 
 The default boolean editor is a select box with options "true" and "false".  To use a checkbox instead, set the format to `checkbox`.
@@ -1008,23 +1093,24 @@ Editor Options
 
 Editors can accept options which alter the behavior in some way.
 
-*  `collapsed` - If set to true, the editor will start collapsed (works for objects and arrays)
-*  `disable_array_add` - If set to true, the "add row" button will be hidden (works for arrays)
-*  `disable_array_delete` - If set to true, all of the "delete" buttons will be hidden (works for arrays)
-*  `disable_array_delete_all_rows` - If set to true, just the "delete all rows" button will be hidden (works for arrays)
-*  `disable_array_delete_last_row` - If set to true, just the "delete last row" buttons will be hidden (works for arrays)
-*  `disable_array_reorder` - If set to true, the "move up/down" buttons will be hidden (works for arrays)
-*  `disable_collapse` - If set to true, the collapse button will be hidden (works for objects and arrays)
-*  `disable_edit_json` - If set to true, the Edit JSON button will be hidden (works for objects)
-*  `disable_properties` - If set to true, the Edit Properties button will be hidden (works for objects)
-*  `array_controls_top` - If set to true, array controls (add, delete etc) will be displayed at top of list (works for arrays)
-*  `enum_titles` - An array of display values to use for select box options in the same order as defined with the `enum` keyword. Works with schema using enum values.
-*  `expand_height` - If set to true, the input will auto expand/contract to fit the content.  Works best with textareas.
-*  `grid_columns` - Explicitly set the number of grid columns (1-12) for the editor if it's within an object using a grid layout.
-*  `hidden` - If set to true, the editor will not appear in the UI (works for all types)
-*  `input_height` - Explicitly set the height of the input element. Should be a valid CSS width string (e.g. "100px").  Works best with textareas.
-*  `input_width` - Explicitly set the width of the input element. Should be a valid CSS width string (e.g. "100px").  Works for string, number, and integer data types.
-*  `remove_empty_properties` - If set to true for an object, empty object properties (i.e. those with falsy values) will not be returned by getValue().
+* `collapsed` - If set to true, the editor will start collapsed (works for objects and arrays)
+* `disable_array_add` - If set to true, the "add row" button will be hidden (works for arrays)
+* `disable_array_delete` - If set to true, all of the "delete" buttons will be hidden (works for arrays)
+* `disable_array_delete_all_rows` - If set to true, just the "delete all rows" button will be hidden (works for arrays)
+* `disable_array_delete_last_row` - If set to true, just the "delete last row" buttons will be hidden (works for arrays)
+* `disable_array_reorder` - If set to true, the "move up/down" buttons will be hidden (works for arrays)
+* `disable_collapse` - If set to true, the collapse button will be hidden (works for objects and arrays)
+* `disable_edit_json` - If set to true, the Edit JSON button will be hidden (works for objects)
+* `disable_properties` - If set to true, the Edit Properties button will be hidden (works for objects)
+* `array_controls_top` - If set to true, array controls (add, delete etc) will be displayed at top of list (works for arrays)
+* `enum` - See [Enum options](#enum-options)
+* `enum_titles` - An array of display values to use for select box options in the same order as defined with the `enum` keyword. Works with schema using enum values.
+* `expand_height` - If set to true, the input will auto expand/contract to fit the content.  Works best with textareas.
+* `grid_columns` - Explicitly set the number of grid columns (1-12) for the editor if it's within an object using a grid layout.
+* `hidden` - If set to true, the editor will not appear in the UI (works for all types)
+* `input_height` - Explicitly set the height of the input element. Should be a valid CSS width string (e.g. "100px").  Works best with textareas.
+* `input_width` - Explicitly set the width of the input element. Should be a valid CSS width string (e.g. "100px").  Works for string, number, and integer data types.
+* `remove_empty_properties` - If set to true for an object, empty object properties (i.e. those with falsy values) will not be returned by getValue().
 
 ```json
 {
@@ -1059,6 +1145,43 @@ Using the option `infoText`, will create a info button, displaying the text you
 }
 ```
 
+Enum options
+------------------
+
+Using the option `enum`, it is possible to modify how enums with format `checkbox` (default) are displayed in the editor.
+It is an array of objects (described below), which must be in the same order as defined with the `enum` keyword.
+
+Currently, the following is supported:
+
+* `title`: *Optional* Display value shown instead of the enum value
+* `infoText`: *Optional* Creates an info button next to the title, displaying the text you set, on hovering.
+
+It is possible also to set these options only for some enum values, to skip one enum value, define an empty object (`{}`).
+
+```json
+{
+  "type": "array",
+  "items": {
+    "type": "string",
+    "enum": ["1", "2", "3", "4"],
+    "options": {
+      "enum": [
+        {},
+        {
+          "title": "Title 2"
+        },
+        { "infoText": "InfoText 3" },
+        {
+          "title": "Title 4",
+          "infoText": "InfoText 4"
+        }
+      ]
+    }
+  }
+}
+```
+
+If both options `enum_titles[x]` and `enum[x].title` are set for the enum value `x`, than the title set under `enum[x].title` will be used.
 
 Dependencies
 ------------------
@@ -1515,6 +1638,28 @@ By default, all instances of JSON Editor will use the `en` language.  To overrid
 JSONEditor.defaults.language = "es";
 ```
 
+You can also override translations per editor in the it's schema options.
+
+````json
+"error_const": {
+  "type": "string",
+  "title": "error_const",
+  "const": "test",
+  "default": "something else",
+  "options": {
+    "error_messages": {
+      "en": {
+        "error_const": "CUSTOM EN: Value must be the constant value"
+      },
+      "es": {
+        "error_const": "CUSTOM ES: Value must be the constant value"
+      }
+    }
+  }
+}
+````
+
+
 Button Customization
 -----------------