vito/resources/js/ace-editor/ace-editor.js

import ace from "brace";
import "brace/mode/javascript";
import "brace/mode/plain_text";
import "brace/mode/sh";
import "brace/mode/ini";
import "brace/ext/searchbox";
import "./theme-vito";
import "./mode-env";
import "./mode-nginx";

window.initAceEditor = function (options = {}) {
    const editorValue = JSON.parse(options.value || "");
    const editor = ace.edit(options.id);
    editor.setTheme("ace/theme/vito");
    editor.setValue(editorValue, -1);
    editor.clearSelection();
    editor.focus();
    editor.setOptions({
        // enableBasicAutocompletion: true,
        // enableSnippets: true,
        // enableLiveAutocompletion: true,
        printMargin: false,
    });

    editor.renderer.setScrollMargin(15, 15, 0, 0);
    editor.renderer.setPadding(15);

    editor.getSession().on("change", function () {
        document.getElementById(`textarea-${options.id}`).value =
            editor.getValue();
    });

    window.addEventListener("resize", function () {
        editor.resize();
    });

    document.getElementById(`textarea-${options.id}`).innerHTML = editorValue;

    return editor;
};