ace builds ace_builds npm library enabling example js css

example.css

.ace_editor {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.ace_editor_textarea {
    height: 500px;
}

.fixed-editor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

example.js

import ace from 'ace-builds/src-noconflict/ace';
import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/ext-language_tools"; // for autocompletion
import "ace-builds/src-noconflict/ext-keybinding_menu"; // for key binding

let editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/php_laravel_blade");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
});

// bind fullscreen mode on "F11" button
editor.commands.addCommand({
    name: "fullscreen",
    bindKey: "F11",
    exec: function (editor) {
        let textarea = document.getElementsByClassName('ace_editor_textarea')[0];
        if (hasClass(textarea, 'fixed-editor')) {
            textarea.classList.remove('fixed-editor')
        } else {
            textarea.classList.add('fixed-editor')
        }
        editor.resize(); // resize editor after fullscreen
    }
});

// super-duper mega option for sending value from editor session to hidden field...
let textarea = $("textarea[name=raw]").hide();
editor.session.setValue(textarea.val());
editor.session.on('change', function () {
    textarea.val(editor.session.getValue());
});