ACE is a great code editor, but in some scenarios it's not desirable to integrate it in the project:

• it's webpack unfriendly
  • Way too much files are generated when using webpack ajaxorg/ace#4073
  • Using ace-builds with webpack ajaxorg/ace#4782
• it requires the web worker scripts to be hosted in the root path of your website

One way to overcome these difficulties is to use brace instead, which is our workaround right now, however brace is based on a rather old version of ACE (1.2.9) and stagnated for years. Brace does not work with JSONEditor, namely because it does not support passing the options in the ace.edit function. As a workaround we can set the options manually in the next animation frame:

const editor = new JSONEditor(/*...*/);
requestAnimationFrame(fixAceEditors);

function fixAceEditors() {
    const fieldEditors = editor.editors;
    for (const key in fieldEditors) {
        if (!Object.prototype.hasOwnProperty.call(fieldEditors, key)) {
            continue;
        }

        const fieldEditor = fieldEditors[key];

        if ("ace_editor_instance" in fieldEditor) {
            fieldEditor.ace_editor_instance.setOptions(
                {
                    selectionStyle: "text",
                    minLines: 30,
                    maxLines: 30,
                    mode: `ace/mode/${fieldEditor.input_type}`,
                });

        }
    }
}

On the other hand, Monaco, the editor component backing Visual Studio Code, is a great alternative to ACE. It would be wonderful if JSONEditor supports it too.