When I embedded the Monaco editor in my Electron app following the electron-amd-sample, the editor behaves as intended.

However, the example demonstrates instantiating the editor inside a script tag within an HTML page, whereas I would like to access the editor within my projects Javascript files.

I added the following code to a JS file to instantiate the editor, and observed a few strange style issues with the editor:

1. When I click on the scroll-menu, it turns white rather than having a bit of transparency:
2. When I click go-to-references, the window appears and then starts to shrink until it disappears:

Note that I have other css defined for the page I have now embedded the editor in, whereas it was previously running in an isolated browser window. I'm not sure how to tell if this is an issue though.

/**
 * Sets up the Monaco code editor and links it to the code container div.
 *
 * @returns a Promise and passes the editor to resolve.
 */
async function setupMonacoEditor() {
    return new Promise((resolve, reject) => {
        amdRequire(['vs/editor/editor.main'], function () {
            const editor = monaco.editor.create(
                document.getElementById('ideCodeContainer'),
                {
                    language: 'javascript',
                    theme: vs-dark,
                    automaticLayout: true,
                }
            );
            resolve(editor);
        });
    });
}