Always load when used in electron

[vaemc]

Hi brother ，Always load when used in electron，Can't find the reason

[suren-atoyan]

Hello @vaemc, sure, we will try!

Could you please show the console?

[vaemc]

I'm sorry to have kept you waiting for a long time and found that the console has no important information

[suren-atoyan]

Hello @vaemc. Sorry for the late answer.

Could you please provide me a minimal code snippet, so I can reproduce your problem.

I have already created an electron app with minimal config and used this library and it works very well so far. Also, we have "users" of this library who are using electron and there were no issues.

Thank you!

[LiamRiddell]

@SurenAt93 I've got the same problem and I'm using this electron base.
Github

Steps:

1. Include @monaco-editor/react in package.json
2. Run yarn install
3. Include the sample code
4. Run yarn dev

Edit:
Looks like monaco.init() promise is never returned and it return removeEditor

[suren-atoyan]

Thank you @LiamRiddell. I will check it right now.

[suren-atoyan]

@LiamRiddell you are completely right, monaco.init() never ends. And the problem is that it can't load sources from CDN. The only thing is missing here is error handling during loading sources from cdn, which I will add in the next version.

@vaemc @LiamRiddell So, we have already faced this, and there is a solution for that, please read this discussion and let me know if there are still questions.

Thank you for your support!

[LiamRiddell]

@SurenAt93 Thanks for taking a look so fast!

I was close to solving last night then... since I changed loader config using monaco.config() but I was still using CDN.

Nonetheless this is by far cleanest implementation of Monaco, Thanks :)

[suren-atoyan]

Glad to hear that, will keep it open yet; to wait also @vaemc.

[LiamRiddell]

@SurenAt93 Just testing now. I still can't get this working. Here's the config below:

monaco.config({
  urls: {
    monacoLoader: '../node_modules/monaco-editor/min/vs/loader.js',
    monacoBase: '../node_modules/monaco-editor/min/vs'
  }
});

It finds the loader JS file and then just sits loading still. I've tried copying the file into the app

[LiamRiddell]

Okay, so I've managed to find the issue. It HAS to be an absolute data URI or it will fail to load. See below:

import Editor, { monaco } from '@monaco-editor/react';
const path = require('path')

// https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html
function uriFromPath(_path) {
  let pathName = path.resolve(_path).replace(/\\/g, '/');

  if (pathName.length > 0 && pathName.charAt(0) !== '/') {
    pathName = `/${pathName}`;
  }
  return encodeURI(`file://${pathName}`);
}

monaco.config({
  urls: {
    monacoLoader: uriFromPath(
      path.join(__dirname, '../node_modules/monaco-editor/min/vs/loader.js')
    ),
    monacoBase: uriFromPath(
      path.join(__dirname, '../node_modules/monaco-editor/min/vs')
    )
  }
});

export default function MonacoEditorComponent() {
  const [isEditorReady, setIsEditorReady] = useState(false);
  const valueGetter = useRef(null);

  function handleEditorDidMount(_valueGetter) {
    setIsEditorReady(true);
    valueGetter.current = _valueGetter;
  }

  return (
    <>
      <Editor
        height="100%"
        width="100%"
        language="javascript"
        theme="dark"
        value="// write your code here"
        editorDidMount={handleEditorDidMount}
      />
    </>
  );
}

[suren-atoyan]

Ah, I see. Huh, it takes a long, but now everything is clear.

So, two things I need to do in the near future;

1. Add a section about possible problems while using this package with electron.
2. Handle error while loading monaco files from CDN or other places.

@LiamRiddell Again, thank you for your support.

[LiamRiddell]

@SurenAt93 I think your two action points are good idea.

I'm currently struggling to try to get underlying Monaco instance from Editor component. We can use the monaco.init() utility but then I have to handle the creation of the whole component.

Editor.js

// Original   
editorDidMount(editorRef.current.getValue.bind(editorRef.current), editorRef.current);
// Extended
editorDidMount(editorRef.current.getValue.bind(editorRef.current), monacoRef.current, editorRef.current);

The reason behind it is so people can register themes and languages without having to do lots of heavy lifting.

If you're happy I could make PR?

[suren-atoyan]

1. It's not a right from a logical point of view. Let me explain; editorDidMount is in single editor instance, maximum it can give you should be editorInstance. It isn't allowed to give you access to monacoInstance, you shouldn't be able to change global things from inside of a single instance <- technically you can do it (I'll show it bellow) as you can do something with window object, but things should be clear, it's out of responsibilities of editorDidMount.
2. We can use the monaco.init() utility but then I have to handle the creation of the whole component <- maybe there is a misunderstanding? You do not need to handle the creation of component. For example, if you need to do something with monaco instance:

import React from "react";
import ReactDOM from "react-dom";

import Editor, { monaco } from "@monaco-editor/react";

monaco
  .config({
    // ...
  })
  .init()
  .then(monacoInstance => {
    /* here is the instance of monaco, so you can use the `monaco.languages` or whatever you want */
    console.log("Log ::: Monaco ::: ", monacoInstance);
  })
  .catch(error =>
    console.error("An error occurred during initialization of Monaco: ", error)
  );

const App = _ => <Editor height="90vh" language="javascript" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

or, if you really need to use it from inside of component, it's also possible:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import Editor, { monaco } from "@monaco-editor/react";

const App = _ => {
  useEffect(_ => {
    monaco
      .init()
      .then(monacoInstance => {
        /* here is the instance of monaco, so you can use the `monaco.languages` or whatever you want */
        console.log("Log ::: Monaco ::: ", monacoInstance);
      });
  }, []);

  return <Editor height="90vh" language="javascript" />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3. Themes and languages are global things, they can be made separately;

import { monaco } from "@monaco-editor/react";

monaco
  .init()
  .then(monacoInstance => {
    monacoInstance.editor.defineTheme('my-super-theme', {
      // ...
    });
  });

The same for language creation.

Note that monaco.init() will work once and will return the same instance in further calls.

[LiamRiddell]

@SurenAt93 Yep, I've misunderstood the utility. Thanks for clarifying, I've fixed it in my code too :)

[5cript]

LiamRiddell's Solution #48 (comment) only works (for me), if I disable webSecurity in Electron, or it refuses to load the resources.
"Not allowed to load local resource".
I dont know how to feel about that.

mainWindow = new BrowserWindow({
	webPreferences: {
		webSecurity: false, // <- here
		nodeIntegration: true,
	},
})