function initMonacoEditor() {
        if (monacoEditor === undefined) {
            document.getElementById('no-content').remove()
            document.getElementById('code-path').insertAdjacentHTML('afterend', `<div class="docs-summary"><b>Note:</b> Changes are saved automatically</div>`)
            monacoEditor = monaco.editor.create(document.querySelector('#editor'), {
                model: null,
                theme: 'vs-dark',
                fixedOverflowWidgets: true
            });

            // Create autocomplete models and providers only once
            monaco.editor.createModel(codeString, "javascript")
            createAutocompletionFor(tradingEngineObj)
            createAutocompletionFor(recordFormulasObj)
            createAutocompletionFor(chartMarketExchangeObj)

            monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true)
            monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
                allowNonTsExtensions: true
            });

        }

        createCurrentEditorModel()
        // Ensure proper code formatting
        monacoEditor.getAction('editor.action.formatDocument').run();


    }
The reason we are doing the monaco initialization here is simply because monaco will set his own width at the moment it's rendered
Rendering it earlier when the code panel is closed will result in a very narrow width
Therefore we choose to render it after the panel has his width set correctly
Probably there is a better way but at the time this has been coded, nothing else seemed to work