@json-editor/json-editor 2.5.4 → 2.7.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,19 +1,56 @@
-### 2.5.4
-
+### Unreleased
+
+### 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
+- stepper manual set init fix
+- don't validate dependant editors when not visible (dependency not fulfilled)
+- hardened tests
+- bootstra3 tabs fix
+- removed datetime from metaschema and readmy (deprecated)
+- not forced required for radios
+- audit fixes
 - pass additional pathDepth parameter to getHeader() to allow themes to render headings hierarchically
 - add Open Iconic iconlib
-- read-only base64 editors respect enum values when calling setValue()
-- Added autocomplete example
-- fix #976 falsy values and use_default_values = false
-- Updated CONTRIBUTING.md
-- Added URN support
-- Added support for multiple values in dependencies
-- Added support for const
-- fix #848 oneOf and anyOf error messages
-- fixes #379 and #923 - strip #fragment from URI so json pointers resolve correctly
-- Human readable error_required message #914
 - switched CI to Github Actions
-- npm audit fix #956
+- read-only base64 editors respect enum values when calling setValue()
+- fix bug in validator.fitTest where anyOf schemata were not handled correctly
+- fixes accessibility support for thead that consist of an empty string
+- fix bug in validation where invalid schemata with a good fitTestResult were preferred to valid schemata
+
+### 2.5.4
+
+- fixes #997 add accessibility support for string input types
 
 ### 2.5.3
 
@@ -81,7 +118,7 @@
 - Fix of #701 - editors/number.js and editors/integer.js don't change values when validation is failed
 - Fix of #716 - add ignore for allOf to fall in line with existing ignores of anyOf/oneOf for additionalProperties validation
 - Fix of #714 - Checkboxes inside object tables duplicate labels from heading
-- Added copy button to arrays in table format 
+- Added copy button to arrays in table format
 
 ### 2.1.0
  - fixed vulnerability in "http-server" package (origin/feature/merges-20200227, feature/merges-20200227) - using latest node LTS

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/
@@ -521,7 +522,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 +534,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": {
@@ -676,7 +680,6 @@ JSON Editor uses HTML5 input types, so some of these may render as basic text in
 
 *  color
 *  date
-*  datetime
 *  datetime-local
 *  email
 *  month
@@ -753,6 +756,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
@@ -841,6 +871,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`.
@@ -1009,23 +1088,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
 {
@@ -1060,6 +1140,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
 ------------------
@@ -1516,7 +1633,29 @@ By default, all instances of JSON Editor will use the `en` language.  To overrid
 JSONEditor.defaults.language = "es";
 ```
 
-Button Custimization
+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
 -----------------
 
 All buttons have classnames in the format `json-editor-btntype-*`. Using these classnames you can choose if the button should have icon or label hidden. The icon is wrapped in an `I` tag, the label is wrapped in a `SPAN` tag.