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.
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);

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.

Uh oh!

Always load when used in electron #48

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions