function buildEditor(text) {
    
    const container = document.getElementById('container');
    
    const editor = monaco.editor.create(container, {
        theme: 'vs-light',
        value: text,
        language: 'csharp',
        name: 'monacoEditor',
        automaticLayout: true
    });

    editor.getModel().onDidChangeContent((event) => {
        window.chrome.webview.postMessage(editor.getValue());
    });

    // we need the parent of the editor
    const parent = container.parentElement

    window.addEventListener('resize', () => {
        // make editor as small as possible
        editor.layout({ width: 0, height: 0 })

        // wait for next frame to ensure last layout finished
        window.requestAnimationFrame(() => {
            // get the parent dimensions and re-layout the editor
            const rect = parent.getBoundingClientRect()
            editor.layout({ width: rect.width, height: rect.height })
        })
    })
}

function doAction(action) {
    editor.focus()
    editor.trigger('dunno', action);
}