sandy/static/script/editor.js

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
window.code = '';

let proxy = URL.createObjectURL(new Blob([`
    self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
    };
    importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {

    /** @type {string[]} */
    const supported_langs = get_langs();

    const code_key = 'sandy-cached-code';
    const lang_key = 'sandy-cached-lang';
    const storage = window.localStorage;

    const init_lang = storage.getItem(lang_key) ?? 'python';
    const init_code = storage.getItem(code_key) ?? '# put code here';

    let editor = monaco.editor.create(document.getElementById('container'), {
        value: init_code,
        language: init_lang,
        theme: 'vs-dark' 
    });

    let model = editor.getModel();

    function upd_code() {
        window.code = editor.getValue();
        storage.setItem(code_key, window.code);
    }
    function timer_code() {
        setTimeout(() => {
            timer_code()
            upd_code();
        }, 500);
    }

    editor.addListener('didType', () => upd_code);
    timer_code();

    monaco.languages.getLanguages().forEach(x => {
        if (supported_langs.indexOf(x.id) === -1) return
        
        let el = document.createElement('option');
        el.id = x.id;
        el.innerText = x.id;

        if (x.id == init_lang) el.selected = true;

        document.getElementById('lang').appendChild(el);
    })

    document.getElementById('lang').onchange = (e) => {
        e = e.target;
        const lang = e.options[e.selectedIndex].id;
        monaco.editor.setModelLanguage(editor.getModel(), lang);
        storage.setItem(lang_key, lang);
    }

    document.getElementById('run').onclick = (e) => {
        executeCode(window.code, editor.getModel().getLanguageIdentifier().language)
    }

    document.getElementById('reset').onclick = (_) => {
        storage.removeItem(lang_key);
        storage.removeItem(code_key);

        lang = 'python';
        monaco.editor.setModelLanguage(editor.getModel(), 'python');

        window.code = init_code;
        model.setValue(init_code);
    }
});