List of 2.x changes

2.x changes

• Build method now uses Webpack instead of Grunt. So be sure to read release-notes.md
• Editors refactored to remove redundant code and make output/functionality more uniform.
• New standardized options format for plugin based editors. Options can be set globally or in schema. (See README_ADDON.md)
• Editors can now use JavaScript callback functions in options.
• Select2 & Selectize is no longer applied globally to all elements, but can be enabled for a single field. (You can now use both Select2 and Selectize fields on the same form)
• All editors now respects the “compact” option and displays headers, description & infoText correctly (Output is Theme controlled, so might not work/look correctly with old 1.x Themes).
• All plugin based editors now creates JavaScript instances using window.requestAnimationFrame, to insure that field element have finished rendering completely. This speeds up the form rendering significantly as there is no wait for the plugin rendering to finish.
• Plugin based editors now fallback to standard editors if JavaScript library is not loaded/present.
• Testing can now be done locally using CodeceptJS/Puppeteer.
• Test cases have been updated.
• The schema “template” property can now be set to a JavaScript callback function. (Callback function is defined under window.JSONEditor.defaults.callbacks.template)
• The dynamic “enumSource” properties filter, title and value can now be set to a JavaScript callback function. (Callback function is defined under window.JSONEditor.defaults.callbacks.template)
• New sorting property sort added to dynamic “enumSource” properties. Accept values “asc” and “desc”
• Support for IMask library added to string based editors.
• IE9 Polyfill and jQuery wrapper have been removed.

New Theme format (Old themes can still be used, but might not display correctly in some cases.):

• Themes can now define Style Rules and use those instead of Inline Styles. (Style Rules can also be created from editor code.)
• Themes have own options for changing various aspects of the display.
• Functions added for creating radio, checkbox, button, range and other previously hadcoded elements.
• Old 1.x themes now 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.

Themes in 2.x format:

• Spectre (New Theme, created by @pmk65)
• Tailwind (Updated Theme, created by @mirannda)
• Bootstrap4 (Updated Theme, created by @stroebjo)
• HTML & Barebone themes Note: We still need someone to update/cleanup the Materialize and Foundation themes.

Refactored editors:

• String - Ace, SCEditor & SimpleMDE code moved to separate files that extends string editor.
• Select - Select2 & Selectize code moved to separate files that extends select editor.
• Radio - Output now created from Theme functions instead of hardcoded. Now extends select editor instead of string editor. Supports vertical and horizontal layout.
• Multiselect - Select2 & Selectize code moved to separate files that extends multiselect editor.
• Choices - Now extends select editor. (Rewritten code with extra functionality. Note: functionality might differ from old version.)
• Upload - Now supports Drag&Drop upload and can be restricted to only allow upload of specific file types.

New Editors:

• Select2 - Extracted from select/multiselect editors. (Rewritten code with extra functionality)
• Selectize - Extracted from select/multiselect editors. (Rewritten code with extra functionality)
• Ace - Extracted from string editor.
• SCEditor - Extracted from string editor.
• SimpleMDE - Extracted from string editor.
• Jodit - WYSIWYG Editor, using Jodit v.3
• Autocomplete - Autocomplete/Autosuggest using Autocomplete
• IP - IPv4/IPv6 and hostname fields with validation.
• ColorPicker - A simple, easy to use vanilla JS color picker with alpha selection.

New special editors: (Does not leave any footprint in form results)

• Button - Add buttons with JavaScript callbacks, to form.
• Info - Insert textual blocks in form. If DOMPurify is loaded, you can also use HTML tags.

Also various minor bugs and issues have been fixed during refactoring/cleanup.

ToDo:

• Refactor multiselect checkbox code ( @pmk65 )
• Webpack bulid ( @sirockin )
• Refactor/update Materialize Theme ( @lukzas ) (Looking for volunteers to help updating this)
• Refactor/update Foundation6 Theme (Looking for volunteers to help updating this)

[schmunk42]

@sirockin Issue #486 can be merged ASAP. I’d recommend to continue with develop/2.x, we had no big changes on master.

[sirockin]

Now submitted as https://github.com/json-editor/json-editor/pull/486