es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problemas de estilo extraños con Monaco Editor en Electron.

16 Jun, 2023 Programación

Cuando incrusté el editor Monaco en mi app de Electron siguiendo el ejemplo “electron-amd-sample” de GitHub, el editor funcionó correctamente.

Sin embargo, el ejemplo muestra cómo instanciar el editor dentro de una etiqueta de script en una página HTML, mientras que yo quisiera acceder al editor dentro de los archivos Javascript de mi proyecto.

Añadí el siguiente código a un archivo JS para instanciar el editor y noté algunos problemas extraños de estilo con el editor:

  1. Cuando hago clic en el menú de desplazamiento, se vuelve blanco en lugar de tener un poco de transparencia.
  2. Cuando presiono “go-to-references”, la ventana aparece y luego comienza a encogerse hasta que desaparece.

Nota que tengo otros estilos CSS definidos para la página en la que he incrustado el editor, mientras que antes funcionaba en una ventana de navegador aislada. No estoy seguro de si esto es un problema.

/**
 * Configura el editor de código Monaco y lo vincula al div del contenedor de código.
 *
 * @returns una promesa que pasa el editor a resolver.
 */
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);
        });
    });
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problemas al incrustar el editor Monaco en una aplicación Electron

    Como experto en TI especializado en javascript, css, electron y monaco-editor, me he encontrado con algunos problemas extraños de estilo al incrustar el editor Monaco en una aplicación Electron utilizando mis propios archivos Javascript, en lugar de instanciarlo dentro de una etiqueta de script en una página HTML como se muestra en electron-amd-sample.

    Los problemas que he observado son:

    1. Cuando hago clic en el menú de desplazamiento, se vuelve blanco en lugar de tener un poco de transparencia.
    2. Cuando hago clic en ir a referencias, aparece la ventana y luego comienza a encogerse hasta desaparecer.

    Sospecho que estos problemas podrían ser causados ​​por otro CSS definido para la página en la que se incrusta el editor, ya que se ejecuta de manera diferente a cuando anteriormente estaba aislado en una ventana del navegador, pero no estoy seguro de cómo confirmarlo.

    Para instanciar el editor en mis archivos de proyecto javascript, agregué el siguiente bloque de código:

    /**
* Configura el editor de código Monaco y lo vincula al contenedor de código div.
*
* @returns una Promesa y pasa el editor para resolver.
*/
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);
        });
    });
}

    En general, a pesar de los problemas de estilo que encontré, el editor funciona como se pretende.

Comments are closed.