@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/README.md

@@ -1,18 +1,33 @@
 JSON Editor
 ===========
 
-[![Build Status](https://travis-ci.org/json-editor/json-editor.svg?branch=master)](https://travis-ci.org/json-editor/json-editor)  
-Fork of the inactive [jdorn/json-editor](https://github.com/jdorn/json-editor) using the updated fork [json-editor/json-editor](https://github.com/json-editor/json-editor).  
+> **🔧 Maintenance Mode Notice**
+> 
+> This library is now in maintenance mode. While it remains stable and functional, active development has moved to [Jedison](https://github.com/germanbisurgi/jedison).
+> 
+> We will continue to:
+> - Accept and review community pull requests
+> - Address critical bugs and security issues
+> - Keep the library functional for existing users
+> 
+> For new projects or those seeking active development, consider using [Jedison](https://github.com/germanbisurgi/jedison).
+
+[![Actions Status](https://github.com/json-editor/json-editor/actions/workflows/build.yml/badge.svg)](https://github.com/json-editor/json-editor/actions)
+
+Fork of the inactive [jdorn/json-editor](https://github.com/jdorn/json-editor) using the updated fork [json-editor/json-editor](https://github.com/json-editor/json-editor).
 Some pull requests added from the original repo.
 
 ![JSON Schema -> HTML Editor -> JSON](./docs/images/jsoneditor.png)
 
-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, foundation, and jQueryUI).
+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/
 
-Or the JSON-Editor Interactive Playground: https://pmk65.github.io/jedemov2/dist/demo.html 
+Or the JSON-Editor Interactive Playground: https://pmk65.github.io/jedemov2/dist/demo.html
 
 Install
 -----------------
@@ -27,7 +42,7 @@ Using a CDN
 
 You can also access older releases from CDN, using the landing page: https://www.jsdelivr.com/package/npm/@json-editor/json-editor
 
-For local usage download the [production version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js) or the [development version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.js)
+For local usage download the [production version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.js) or the [development version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/nonmin/jsoneditor.js)
 
 Requirements
 -----------------
@@ -39,16 +54,21 @@ JSON Editor has no dependencies. It only needs a modern browser (tested in Chrom
 The following are not required, but can improve the style and usability of JSON Editor when present.
 
 *  A compatible JS template engine (Mustache, Underscore, Hogan, Handlebars, Lodash, Swig, Markup, or EJS)
-*  A compatible CSS framework for styling (bootstrap 2/3/4, foundation 3/4/5/6, materialize or jqueryui)
-*  A compatible icon library (bootstrap 2/3 glyphicons, foundation icons 2/3, jqueryui, materialicons or font awesome 3/4)
+*  A compatible CSS framework for styling (Spectre, Tailwind, Bootstrap4)
+*  A compatible icon library (Spectre, jQueryUI, Font Awesome 3/4/5)
 *  [SCEditor](http://www.sceditor.com/) for WYSIWYG editing of HTML or BBCode content
 *  [SimpleMDE](https://simplemde.com/) for editing of Markdown content
 *  [Ace Editor](http://ace.c9.io/) for editing code
+*  [Jodit](https://xdsoft.net/jodit/) Open Source WYSIWYG editor
+*  [Autocomplete](https://autocomplete.trevoreyre.com/#/javascript-component) Accessible autocomplete component
+*  [Choices](https://github.com/jshjohnson/Choices) for nicer Select & Array boxes
 *  [Select2](http://ivaynberg.github.io/select2/) for nicer Select boxes
 *  [Selectize](https://selectize.github.io/selectize.js/) for nicer Select & Array boxes
 *  [Flatpickr](https://flatpickr.js.org/) lightweight and powerful datetime picker
 *  [Signature Pad](https://github.com/szimek/signature_pad) HTML5 canvas based smooth signature drawing
+*  [Vanilla Picker](https://vanilla-picker.js.org/) A simple, easy to use vanilla JS color picker with alpha selection
 *  [Cleave.js](https://github.com/nosir/cleave.js) for formatting your **<input/>** content while you are typing
+*  [IMask.js](https://imask.js.org/) vanilla javascript input mask
 *  [math.js](http://mathjs.org/) for more accurate floating point math (multipleOf, divisibleBy, etc.)
 *  [DOMPurify](https://github.com/cure53/DOMPurify) DOM-only, super-fast, uber-tolerant XSS sanitizer. (If you want to use HTML format in titles/headers and descriptions.)
 
@@ -62,9 +82,12 @@ If you learn best by example, check these out:
 *  Advanced Usage Example - https://json-editor.github.io/json-editor/advanced.html
 *  CSS Integration Example - https://json-editor.github.io/json-editor/css_integration.html
 *  Base64 Editor Example (Muiltple Upload) - https://json-editor.github.io/json-editor/multiple_upload_base64.html
+*  Choices Editor Example - https://json-editor.github.io/json-editor/choices.html
 *  Cleave.js Editor Example - https://json-editor.github.io/json-editor/cleave.html
+*  Colorpicker Editor Example - https://json-editor.github.io/json-editor/colorpicker.html
 *  Datetime Editor Example - https://json-editor.github.io/json-editor/datetime.html
-*  DescribedBy Hyperlink Editor Example - https://json-editor.github.io/json-editor/describedby.html 
+*  DescribedBy Hyperlink Editor Example - https://json-editor.github.io/json-editor/describedby.html
+*  iMask.js Editor Example - https://json-editor.github.io/json-editor/imask.html
 *  Radio Button JSON Editor Example - https://json-editor.github.io/json-editor/radio.html
 *  Recursive JSON Editor Example - https://json-editor.github.io/json-editor/recursive.html
 *  Select2 Editor Example - https://json-editor.github.io/json-editor/select2.html
@@ -73,16 +96,18 @@ If you learn best by example, check these out:
 *  Star Rating Editor Example - https://json-editor.github.io/json-editor/starrating.html
 *  Upload Editor Example - https://json-editor.github.io/json-editor/upload.html
 *  WYSIWYG Editor Example - https://json-editor.github.io/json-editor/wysiwyg.html
+*  Meta schema (schema builder) Example - https://json-editor.github.io/json-editor/meta-schema.html
 
+More examples can be found at the [JSON-Editor Interactive Playground](https://pmk65.github.io/jedemov2/dist/demo.html)
 
 The rest of this README contains detailed documentation about every aspect of JSON Editor.  For more [under-the-hood documentation](https://github.com/json-editor/json-editor/wiki), check the wiki.
 
 ### Initialize
 
 ```js
-var element = document.getElementById('editor_holder');
+const element = document.getElementById('editor_holder');
 
-var editor = new JSONEditor(element, options);
+const editor = new JSONEditor(element, options);
 ```
 
 #### Options
@@ -91,12 +116,12 @@ Options can be set globally or on a per-instance basis during instantiation.
 
 ```js
 // Set an option globally
-JSONEditor.defaults.options.theme = 'bootstrap2';
+JSONEditor.defaults.options.theme = 'bootstrap4';
 
 // Set an option during instantiation
-var editor = new JSONEditor(element, {
+const editor = new JSONEditor(element, {
   //...
-  theme: 'bootstrap2'
+  theme: 'bootstrap4'
 });
 ```
 
@@ -126,6 +151,16 @@ Here are all the available options:
     <td>If <code>true</code>, JSON Editor will make ajax call with [credentials](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials).</td>
     <td><code>false</code></td>
   </tr>
+  <tr>
+    <td>ajax_cache_responses</td>
+    <td>If <code>true</code>, JSON Editor will cache external URLs' schemas in <code>localStorage</code> to avoid subsequent ajax calls.</td>
+    <td><code>false</code></td>
+  </tr>
+  <tr>
+    <td>ajax_cache_buster</td>
+    <td>If <code>ajax_cache_responses</code> is enabled, use this string to invalidate stale caches. E.g., this value should be changed when schemas are updated.</td>
+    <td>Current date in simplied ISO-8601 format (e.g., "2011-10-05" for October 5, 2011).</td>
+  </tr>
   <tr>
     <td>compact</td>
     <td>If <code>true</code>, the label will not be displayed/added.</td>
@@ -141,6 +176,16 @@ Here are all the available options:
     <td>If <code>true</code>, remove all "delete row" buttons from arrays.</td>
     <td><code>false</code></td>
   </tr>
+  <tr>
+    <td>disable_array_delete_all_rows</td>
+    <td>If <code>true</code>, remove all "delete all rows" buttons from arrays.</td>
+    <td><code>false</code></td>
+  </tr>
+  <tr>
+    <td>disable_array_delete_last_row</td>
+    <td>If <code>true</code>, remove all "delete last row" buttons from arrays.</td>
+    <td><code>false</code></td>
+  </tr>
   <tr>
     <td>disable_array_reorder</td>
     <td>If <code>true</code>, remove all "move up" and "move down" buttons from arrays.</td>
@@ -182,9 +227,14 @@ Here are all the available options:
     <td>The icon library to use for the editor.  See the <strong>CSS Integration</strong> section below for more info.</td>
     <td><code>null</code></td>
   </tr>
+  <tr>
+      <td>remove_button_labels</td>
+      <td>Display only icons in buttons. This works only if iconlib is set.</td>
+      <td><code>false</code></td>
+    </tr>
   <tr>
     <td>no_additional_properties</td>
-    <td>If <code>true</code>, objects can only contain properties defined with the <code>properties</code> keyword.</td>
+    <td>If <code>true</code>, objects can only contain properties defined with the <code>properties</code> keyword unless the property <code>additionalProperties: true</code> is specified in the object schema</td>
     <td><code>false</code></td>
   </tr>
   <tr>
@@ -202,6 +252,11 @@ Here are all the available options:
     <td>If <code>true</code>, makes oneOf copy properties over when switching.</td>
     <td><code>true</code></td>
   </tr>
+  <tr>
+      <td>keep_only_existing_values</td>
+      <td>If <code>true</code>, copy only existing properties over when switching.</td>
+      <td><code>false</code></td>
+    </tr>
   <tr>
     <td>schema</td>
     <td>A valid JSON Schema to use for the editor.  Version 3 and Version 4 of the draft specification are supported.</td>
@@ -242,6 +297,61 @@ Here are all the available options:
     <td>If <code>true</code>, displays a dialog box with a confirmation message before node deletion.</td>
     <td><code>true</code></td>
   </tr>
+  <tr>
+    <td>object_layout</td>
+    <td>The default value of `format` for objects. If set to <code>table</code> for example, objects will use table layout if `format` is not specified.</td>
+    <td><code>normal</code></td>
+  </tr>
+  <tr>
+    <td>enum_source_value_auto_select</td>
+    <td>Preserve value at Move Up or Down.(No value is selected automatically upon deletion.)</td>
+    <td><code>true</code></td>
+  </tr>
+  <tr>
+    <td>max_depth</td>
+    <td>Max depth of the nested properties to be rendered of provided json schema. The missing of this option could cause "maximum call stack size exceeded" in case of object properties with circular references. <code>0</code> value means "render all".</td>
+    <td><code>0</code></td>
+  </tr>
+  <tr>
+    <td>use_default_values</td>
+    <td>If true default values based on the "type" of the property will be used</td>
+    <td><code>true</code></td>
+  </tr>
+  <tr>
+    <td>urn_resolver</td>
+    <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>
+  <tr>
+    <td>button_state_mode</td>
+    <td>If <code>1</code>, inactive buttons are hidden. If <code>2</code>, inactive buttons are disabled.</td>
+    <td><code>1</code></td>
+  </tr>
+  <tr>
+    <td>case_sensitive_property_search</td>
+    <td>This property controls whether property searches in an object editor are case-sensitive</td>
+    <td><code>true</code></td>
+  </tr>
+  <tr>
+    <td>prompt_paste_max_length_reached</td>
+    <td>If <code>true</code>, an alert will be displayed when pasting a value in an input that exceeded maxLength</td>
+    <td><code>false</code></td>
+  </tr>
+  <tr>
+    <td>enforce_const</td>
+    <td>When set to <code>true</code>, the schema <code>const</code> will serve as the default value, and the editor will prevent any changes to it.</td>
+    <td><code>false</code></td>
+  </tr>
+  <tr>
+    <td>opt_in_widget</td>
+    <td>Which widget should be used for opt-in inputs. Possible values are <code>'checkbox'</code> and <code>'switch'</code></td>
+    <td><code>'checkbox'</code></td>
+  </tr>
   </tbody>
 </table>
 
@@ -249,7 +359,7 @@ __*Note__ If the `ajax` property is `true` and JSON Editor needs to fetch an ext
 Listen for the `ready` event before calling them.
 
 ```js
-editor.on('ready',function() {
+editor.on('ready',() => {
   // Now the api methods will be available
   editor.validate();
 });
@@ -260,7 +370,7 @@ editor.on('ready',function() {
 ```js
 editor.setValue({name: "John Smith"});
 
-var value = editor.getValue();
+const value = editor.getValue();
 console.log(value.name) // Will log "John Smith"
 ```
 
@@ -268,17 +378,16 @@ Instead of getting/setting the value of the entire editor, you can also work on
 
 ```js
 // Get a reference to a node within the editor
-var name = editor.getEditor('root.name');
+const name = editor.getEditor('root.name');
 
 // `getEditor` will return null if the path is invalid
-if(name) {
+if (name) {
   name.setValue("John Smith");
 
   console.log(name.getValue());
 }
 ```
 
-
 ### Validate
 
 When feasible, JSON Editor won't let users enter invalid data.  This is done by
@@ -290,9 +399,9 @@ You can use the `validate` method to check if the data is valid or not.
 
 ```javascript
 // Validate the editor's current value against the schema
-var errors = editor.validate();
+const errors = editor.validate();
 
-if(errors.length) {
+if (errors.length) {
   // errors is an array of objects, each with a `path`, `property`, and `message` parameter
   // `property` is the schema keyword that triggered the validation error (e.g. "minLength")
   // `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")
@@ -309,19 +418,25 @@ If you want to use a different value, you can pass it in as a parameter.
 
 ```javascript
 // Validate an arbitrary value against the editor's schema
-var errors = editor.validate({
+const errors = editor.validate({
   value: {
     to: "test"
   }
 });
 ```
 
+Display validation errors on demand
+
+```javascript
+editor.showValidationErrors();
+```
+
 ### Listen for Changes
 
 The `change` event is fired whenever the editor's value changes.
 
 ```javascript
-editor.on('change',function() {
+editor.on('change',() => {
   // Do something
 });
 
@@ -331,7 +446,7 @@ editor.off('change',function_reference);
 You can also watch a specific field for changes:
 
 ```javascript
-editor.watch('path.to.field',function() {
+editor.watch('path.to.field',() => {
   // Do something
 });
 
@@ -341,17 +456,34 @@ editor.unwatch('path.to.field',function_reference);
 Or watch all fields (Similar to the "onchange" event, but tracks the field changed)
 
 ```javascript
-var watcherCallback = function(path) {
-  console.log("field with path: [" + path + "] changed to [" + JSON.stringify(this.getEditor(path).getValue()) + "]");
+const watcherCallback = function (path) {
+  console.log(`field with path: [${path}] changed to [${JSON.stringify(this.getEditor(path).getValue())}]`);
   // Do something
 }
-for (var key in editor.editors) {
+for (let key in editor.editors) {
   if (editor.editors.hasOwnProperty(key) && key !== 'root') {
     editor.watch(key, watcherCallback.bind(editor, key));
   }
 }
 ```
 
+There are also `add` and `switch` events to track changes. 
+The `add` event fires when a new object property has just been added.
+
+```javascript
+editor.on('add',(property) => {
+  // Do something
+});
+```
+
+The `switch` event fires when the type of one of the object's properties is changed by a type switch on the form.
+
+```javascript
+editor.on('switch',(property) => {
+  // Do something
+});
+```
+
 ### Enable and Disable the Editor
 
 This lets you disable editing for the entire form or part of the form.
@@ -371,6 +503,12 @@ editor.getEditor('root.location').enable();
 
 // Check if form is currently enabled
 if(editor.isEnabled()) alert("It's editable!");
+
+// Activate part of the form
+editor.activate();
+
+// Deactivate part of the form
+editor.deactivate();
 ```
 
 ### Destroy
@@ -389,9 +527,16 @@ The currently supported themes are:
 
 *  barebones
 *  html (the default)
-*  bootstrap2
 *  bootstrap3
 *  bootstrap4
+*  bootstrap5 
+*  spectre
+*  tailwind
+
+Note: The following themes have NOT been updated to 2.x format and will be removed in final version unless there's someone willing to update those.
+Old 1.x themes displays the message **"This is an old JSON-Editor 1.x Theme and might not display elements correctly when used with the 2.x version"** at the bottom of the form output.
+
+*  bootstrap2
 *  foundation3
 *  foundation4
 *  foundation5
@@ -405,15 +550,15 @@ This default can be changed by setting the `JSONEditor.defaults.options.theme` v
 If you want to specify your own styles with CSS, you can use `barebones`, which includes almost no classes or inline styles.
 
 ```javascript
-JSONEditor.defaults.options.theme = 'foundation5';
+JSONEditor.defaults.options.theme = 'spectre';
 ```
 
 You can override this default on a per-instance basis by passing a `theme` parameter in when initializing:
 
 ```js
-var editor = new JSONEditor(element,{
+const editor = new JSONEditor(element,{
   schema: schema,
-  theme: 'jqueryui'
+  theme: 'tailwind'
 });
 ```
 
@@ -423,24 +568,22 @@ JSON Editor also supports several popular icon libraries.  The icon library must
 
 The supported icon libs are:
 
-*  bootstrap2 (glyphicons)
-*  bootstrap3 (glyphicons)
-*  foundation2
-*  foundation3
 *  jqueryui
 *  fontawesome3
 *  fontawesome4
 *  fontawesome5
-*  materialicons
+*  openiconic
+*  spectre
+*  bootstrap
 
 By default, no icons are used. Just like the CSS theme, you can set the icon lib globally or when initializing:
 
 ```js
 // Set the global default
-JSONEditor.defaults.options.iconlib = "bootstrap2";
+JSONEditor.defaults.options.iconlib = "spectre";
 
 // Set the icon lib during initialization
-var editor = new JSONEditor(element,{
+const editor = new JSONEditor(element,{
   schema: schema,
   iconlib: "fontawesome4"
 });
@@ -452,16 +595,16 @@ It's possible to create your own custom themes and/or icon libs as well.  Look a
 JSON Schema Support
 -----------------
 
-JSON Editor fully supports version 3 and 4 of the JSON Schema [core][core] and [validation][validation] specifications.  
+JSON Editor fully supports version 3 and 4 of the JSON Schema [core][core] and [validation][validation] specifications.
 Some of The [hyper-schema][hyper] specification is supported as well.
 
 [core]: http://json-schema.org/latest/json-schema-core.html
 [validation]: http://json-schema.org/latest/json-schema-validation.html
-[hyper]: http://json-schema.org/latest/json-schema-hypermedia.html
+[hyper]: https://json-schema.org/draft-07/json-hyper-schema-release-notes
 
 ### $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
 {
@@ -473,6 +616,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": {
@@ -496,8 +642,8 @@ Self-referential $refs are supported.  Check out `examples/recursive.html` for u
 
 The `links` keyword from the hyper-schema specification can be used to add links to related documents.
 
-JSON Editor will use the `mediaType` property of the links to determine how best to display them.  
-Image, audio, and video links will display the media inline as well as providing a text link.  
+JSON Editor will use the `mediaType` property of the links to determine how best to display them.
+Image, audio, and video links will display the media inline as well as providing a text link.
 
 Here are a couple examples:
 
@@ -550,6 +696,52 @@ Show a video preview (using HTML5 video)
 The `href` property is a template that gets re-evaluated every time the value changes.
 The variable `self` is always available.  Look at the __Dependencies__ section below for how to include other fields or use a custom template engine.
 
+### if-then-else
+The if-then-else keywords are used to express conditional validation logic based on the evaluation of a specified condition. The if keyword defines a condition, and depending on whether it evaluates to true or false, the schema specified under either the then or else keywords will be applied.
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "street_address": {
+      "type": "string"
+    },
+    "country": {
+      "type": "string",
+      "default": "United States of America",
+      "enum": [
+        "United States of America",
+        "Canada"
+      ]
+    },
+    "postal_code": {
+      "type": "string"
+    }
+  },
+  "if": {
+    "properties": {
+      "country": {
+        "const": "United States of America"
+      }
+    }
+  },
+  "then": {
+    "properties": {
+      "postal_code": {
+        "pattern": "[0-9]{5}(-[0-9]{4})?"
+      }
+    }
+  },
+  "else": {
+    "properties": {
+      "postal_code": {
+        "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]"
+      }
+    }
+  }
+}
+```
+
 ### Property Ordering
 
 There is no way to specify property ordering in JSON Schema (although this may change in v5 of the spec).
@@ -616,7 +808,6 @@ JSON Editor uses HTML5 input types, so some of these may render as basic text in
 
 *  color
 *  date
-*  datetime
 *  datetime-local
 *  email
 *  month
@@ -646,7 +837,8 @@ Here is an example that will show a color picker in browsers that support it:
 
 #### String Editors Input Attributes
 
-You can set custom attributes such as **placeholder**, **class** and **data-** on the input field using the special options keyword `inputAttributes`.
+You can set custom attributes such as **placeholder**, **class** and **data-** on the input field and on the editor container
+using the special options keyword `inputAttributes` and `containerAttributes`.
 
 Like this:
 
@@ -660,6 +852,10 @@ Like this:
         "inputAttributes": {
           "placeholder":  "your name here...",
           "class": "myclass"
+        },
+        "containerAttributes": {
+          "data-container":  "my-container",
+          "class": "my-container-class"
         }
       }
     }
@@ -671,23 +867,18 @@ Like this:
 
 In addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors.  These libraries are not included in JSON Editor and you must load them on the page yourself.
 
-__SCEditor__ provides WYSIWYG editing of HTML and BBCode.  To use it, set the format to `html` or `bbcode` and set the `wysiwyg` option to `true`:
+__SCEditor__ provides WYSIWYG editing of HTML and BBCode.  To use it, set the format to `xhtml` or `bbcode` and set the `wysiwyg` option to `true`:
 
 ```json
 {
   "type": "string",
-  "format": "html",
+  "format": "xhtml",
   "options": {
     "wysiwyg": true
   }
 }
 ```
 
-You can configure SCEditor by setting configuration options in `JSONEditor.plugins.sceditor`.  Here's an example:
-
-```js
-JSONEditor.plugins.sceditor.emoticonsEnabled = false;
-```
 
 __SimpleMDE__ is a simple Markdown editor with live preview.  To use it, set the format to `markdown`:
 
@@ -698,6 +889,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
@@ -736,8 +954,10 @@ __Ace Editor__ is a syntax highlighting source code editor. You can use it by se
 *  pgsql
 *  php
 *  python
+*  prql
 *  r
 *  ruby
+*  rust
 *  sass
 *  scala
 *  scss
@@ -745,10 +965,12 @@ __Ace Editor__ is a syntax highlighting source code editor. You can use it by se
 *  sql
 *  stylus
 *  svg
+*  typescript
 *  twig
 *  vbscript
 *  xml
 *  yaml
+*  zig
 
 ```json
 {
@@ -768,11 +990,6 @@ You can use the hyper-schema keyword `media` instead of `format` too if you pref
 }
 ```
 
-You can override the default Ace theme by setting the `JSONEditor.plugins.ace.theme` variable.
-
-```js
-JSONEditor.plugins.ace.theme = 'twilight';
-```
 
 You can enable [Ace editor options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) individually by setting the `options.ace` in schema.
 
@@ -791,6 +1008,57 @@ 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.
+
+> **Warning**
+> For the form to render properly all callbacks used in `action`s must also be defined in `JSONEditor.defaults.callbacks`.
+
+```js
+  JSONEditor.defaults.callbacks = {
+    "button" : {
+      "myAction" : function (jseditor, e) {
+        alert('Button action')
+      }
+    }
+  }
+```
+
+```json
+{
+  "format": "button",
+  "options": {
+    "button": {
+      "text": "Search",
+      "icon": "search",
+      "action": "myAction",
+      "validated": true
+    }
+  }
+}
+```
+
+#### Info editor
+
+Displays a label and a description text. 
+
+```json
+{
+  "format": "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`.
@@ -858,6 +1126,49 @@ You can override this default by passing in a format:
 }
 ```
 
+#### Array events
+
+When an array item is added, removed, moved up, moved or removed the json editor will trigger a relative event.
+
+```javascript
+editor.on('moveRow', editor => {
+  console.log('moveRow', editor)
+});
+
+editor.on('addRow', editor => {
+  console.log('addRow', editor)
+});
+
+editor.on('deleteRow', deletedValue => {
+  console.log('deleteRow', deletedValue)
+});
+
+editor.on('deleteAllRows', deletedValues => {
+  console.log('deleteAllRows', deletedValues)
+});
+```
+
+Drag and drop for array item is supported to perform a quick item moving.
+For array editor with format=`tabs` or `tabs-top`, you can drag the tab header directly.
+For the default array editor (or format=`table`), you have to drag the array item panel with Ctrl key pressed (to avoid side-effect of draggable panel), or drag any text in the input box to another item panel.
+
+#### Schema loader events
+
+When schemas are loaded via a request, the `schemaLoaded` event is triggered individually for each schema after its loading.
+Once the loading of all schemas is completed, the `allSchemasLoaded` event is triggered.
+
+```javascript
+editor.on('schemaLoaded', (payload) => {
+  console.log('schemasLoaded', payload.schemaUrl)
+  console.log('schemasLoaded', payload.schema)
+})
+
+editor.on('allSchemasLoaded', () => {
+  console.log('allSchemasLoaded')
+})
+```
+
+
 #### Objects
 
 The default object layout is one child editor per row.  The `grid` format will instead put multiple child editors per row.
@@ -916,7 +1227,7 @@ It introduces the new `grid-break` property to breaks the current row leaving a
 ```
 
 
-The `categories` format groups properties in top-tabbed panels, one for each object or array property plus one that groups all added or other types of properties.  
+The `categories` format groups properties in top-tabbed panels, one for each object or array property plus one that groups all added or other types of properties.
 Panel tabs titles came from object or array titles and for the grouping panel it defaults to "Basic", unless  `basicCategoryTitle` is defined.
 
 ```json
@@ -939,23 +1250,29 @@ 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().
+* `switcher` - If set to false and using oneOf or anyOf, a multiple editor is not created, but validation still applies. Should be used with schemas with same type.
+* `titleHidden` - If set to true, the editor title will be visually hidden
+* `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().
+* `remove_false_properties` - If set to `true` for an object, object properties with value `false` will not be returned by getValue().
+* `has_placeholder_option` - If set to true, a placeholder option will be added to the select editor input.
+* `placeholder_option_text` - Text displayed in select placeholder option.
 
 ```json
 {
@@ -990,6 +1307,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
 ------------------
@@ -1034,6 +1388,51 @@ Here's an example schema:
 }
 ```
 
+Keys can also be an absolute path like `root.property.nested_property` 
+ 
+```json
+{
+    "title": "Person",
+    "type": "object",
+    "required": [
+      "gender"
+    ],
+    "properties": {
+      "gender": {
+        "title": "Gender",
+        "type": "string",
+        "enum": [
+          "female",
+          "male"
+        ]
+      },
+      "age": {
+        "type": "object",
+        "properties": {
+          "maleSpecificAge": {
+            "type": "string",
+            "title": "Male specific age question?",
+            "options": {
+              "dependencies": {
+                "root.gender": "male"
+              }
+            }
+          },
+          "femaleSpecificAge": {
+            "type": "string",
+            "title": "Female specific age question?",
+            "options": {
+              "dependencies": {
+                "root.gender": "female"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+```
+
 The `dependencies` keyword from the JSON Schema specification is not nearly flexible enough to handle most use cases,
 so JSON Editor introduces a couple custom keywords that help in this regard.
 
@@ -1117,7 +1516,7 @@ JSONEditor.defaults.options.template = 'handlebars';
 You can set the template engine on a per-instance basis as well:
 
 ```js
-var editor = new JSONEditor(element,{
+const editor = new JSONEditor(element,{
   schema: schema,
   template: 'hogan'
 });
@@ -1147,6 +1546,40 @@ Here is the completed `full_name` example using the default barebones template e
 }
 ```
 
+It is also possible to set the "template" property to a JavaScript callback function, defined under `window.JSONEditor.defaults.callbacks.template`. Inside the JavaScript callback, you have access to all the variables defined under the `watch` property + the current editor.
+
+
+Example Schema:
+```js+jinja
+{
+  "type": "object",
+  "properties": {
+    "first_name": {
+      "type": "string"
+    },
+    "last_name": {
+      "type": "string"
+    },
+    "full_name": {
+      "type": "string",
+      "template": "callbackFunction",
+      "watch": {
+        "fname": "first_name",
+        "lname": "last_name"
+      }
+    }
+  }
+}
+```
+ Example Callback function:
+```js+jinja
+window.JSONEditor.defaults.callbacks.template = {
+  "callbackFunction": (jseditor,e) => {
+    return e.fname + " " + e.lname;
+  }
+};
+```
+
 ### Enum Values
 
 Another common dependency is a drop down menu whose possible values depend on other fields.  Here's an example:
@@ -1282,14 +1715,67 @@ also make it work with an array of objects.  Here's an example:
 
 All of the optional templates in the verbose form have the properties `item` and `i` passed into them. `item` refers to the array element.  `i` is the zero-based index.
 
+#### JavaScript callbacks
+It is also possible to use JavaScript callback functions instead of templates for the enumSource properties properties: `value`, `title` and `filter`.
+
+**Example Schema:**
+````json
+{
+  "type": "object",
+  "properties": {
+    "possible_colors": {
+      "type": "array",
+      "format": "table",
+      "items": {
+        "type": "object",
+        "properties": {
+          "text": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "primary_color": {
+      "type": "string",
+      "watch": {
+        "colors": "possible_colors"
+      },
+      "enumSource": [{
+        "source": "colors",
+        "filter": "enumFilterCB",
+        "title": "enumTitleCB",
+        "value": "enumValueCB"
+      }]
+    }
+  }
+}
+````
+
+**Example JavaScript callbacks:**
+````javascript
+window.JSONEditor.defaults.callbacks.template = {
+  "enumFilterCB": (jseditor, e) => {
+    if (e.item.text.toLowerCase() == 'red') return ""; // "red" is not allowed
+    return e.item.text;
+  },
+  "enumTitleCB": (jseditor, e) => e.item.text.toUpperCase(),
+  "enumValueCB": (jseditor, e) => e.item.text.toLowerCase()
+};
+````
+
+#### Sorting
+
+To sort the dynamic EnumSource, you can set the EnumSource property `sort` to either `asc` or `desc`.
+
+
 ### Dynamic Headers
 
 The `title` keyword of a schema is used to add user friendly headers to the editing UI.  Sometimes though, dynamic headers, which change based on other fields, are helpful.
 
-Consider the example of an array of children.  Without dynamic headers, the UI for the array elements would show `Child 1`, `Child 2`, etc..  
+Consider the example of an array of children.  Without dynamic headers, the UI for the array elements would show `Child 1`, `Child 2`, etc..
 It would be much nicer if the headers could be dynamic and incorporate information about the children, such as `1 - John (age 9)`, `2 - Sarah (age 11)`.
 
-To accomplish this, use the `headerTemplate` property.  All of the watched variables are passed into this template, along with the static title `title` (e.g. "Child"), the 0-based index `i0` (e.g. "0" and "1"), the 1-based index `i1`, and the field's value `self` (e.g. `{"name": "John", "age": 9}`).
+To accomplish this, use the `headerTemplate` property.  All of the watched variables are passed into this template, along with the static title `title` (e.g. "Child"), the 0-based index `i0` (e.g. "0" and "1"), the 1-based index `i1`, extra child variable `properties.${PROPERTY_NAME}.enumTitle` and the field's value `self` (e.g. `{"name": "John", "age": 9}`).
 
 ```js+jinja
 {
@@ -1298,10 +1784,18 @@ To accomplish this, use the `headerTemplate` property.  All of the watched varia
   "items": {
     "type": "object",
     "title": "Child",
-    "headerTemplate": "{{ i1 }} - {{ self.name }} (age {{ self.age }})",
+    "headerTemplate": "{{ i1 }} - {{ self.name }} (age {{ self.age }})  has a {{ properties.pet.enumTitle }}",
     "properties": {
       "name": { "type": "string" },
-      "age": { "type": "integer" }
+      "age": { "type": "integer" },
+      "pet": {
+          "title": "Pet",
+          "type": "string",
+          "enum": [ "pet_1", "pet_2" ],
+          "options": {
+            "enum_titles": [ "Dog", "Cat" ]
+          }
+        }
     }
   }
 }
@@ -1313,22 +1807,21 @@ If one of the included template engines isn't sufficient,
 you can use any custom template engine with a `compile` method.  For example:
 
 ```js
-var myengine = {
-  compile: function(template) {
+const myengine = {
+  compile: template =>
     // Compile should return a render function
-    return function(vars) {
+    vars => {
       // A real template engine would render the template here
-      var result = template;
+      const result = template;
       return result;
     }
-  }
 };
 
 // Set globally
 JSONEditor.defaults.options.template = myengine;
 
 // Set on a per-instance basis
-var editor = new JSONEditor(element,{
+const editor = new JSONEditor(element,{
   schema: schema,
   template: myengine
 });
@@ -1360,7 +1853,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.
@@ -1395,7 +1910,7 @@ Let's say you make a custom `location` editor for editing geo data.  You can add
 ```js
 // Add a resolver function to the beginning of the resolver list
 // This will make it run before any other ones
-JSONEditor.defaults.resolvers.unshift(function(schema) {
+JSONEditor.defaults.resolvers.unshift(schema => {
   if(schema.type === "object" && schema.format === "location") {
     return "location";
   }
@@ -1434,16 +1949,6 @@ The possibilities are endless.  Some ideas:
 *  Better editor for arrays of strings (tag editor)
 *  Canvas based image editor that produces Base64 data URLs
 
-Select2 & Selectize Support
-----------------
-Select2 support is enabled by default and will become active if the Select2 library is detected.
-
-Selectize support is enabled via the following snippet:
-```js
-JSONEditor.plugins.selectize.enable = true;
-```
-See the demo for an example of the `array` and `select` editor with Selectize support enabled.
-
 Custom Validation
 ----------------
 
@@ -1453,10 +1958,10 @@ Let's say you want to force all schemas with `format` set to `date` to match the
 
 ```js
 // Custom validators must return an array of errors or an empty array if valid
-JSONEditor.defaults.custom_validators.push(function(schema, value, path) {
-  var errors = [];
-  if(schema.format==="date") {
-    if(!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value)) {
+JSONEditor.defaults.custom_validators.push((schema, value, path) => {
+  const errors = [];
+  if (schema.format==="date") {
+    if (!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value)) {
       // Errors must be an object with `path`, `property`, and `message`
       errors.push({
         path: path,
@@ -1469,26 +1974,32 @@ JSONEditor.defaults.custom_validators.push(function(schema, value, path) {
 });
 ```
 
-jQuery Integration
--------------------
+Override Editors Methods
+----------------
 
-__*WARNING__: This style of usage is deprecated and may not be supported in future versions.
+```js
+// override class method
+JSONEditor.defaults.editors.integer.prototype.sanitize = function(value) {
+  return value
+}; 
+```
 
-When jQuery (or Zepto) is loaded on the page, you can use JSON Editor like a normal jQuery plugin if you prefer.
+or
 
 ```js
-$("#editor_holder")
-  .jsoneditor({
-    schema: {},
-    theme: 'bootstrap3'
-  })
-  .on('ready', function() {
-    // Get the value
-    var value = $(this).jsoneditor('value');
-
-    value.name = "John Smith";
-
-    // Set the value
-    $(this).jsoneditor('value',value);
-  });
+// override object method
+var path ="root.integerfield";
+editor.getEditor(path).sanitize = function(value) {
+  return value
+};
+```
+
+Support Legacy Browser (not tested)
+----------------------
+
+JSON Editor can be used with browsers that support ES5, but in order to use it with older browsers such as IE, it is necessary to use "core-js" as a polyfill.
+
+```
+<script src="https://unpkg.com/core-js-bundle@latest/minified.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
 ```