Closed saul-data closed 2 years ago
OK I managed to get it to work but I can't get it to work with React Hooks
I don't know how to load the configuration for use with this:
const monaco2 = useMonaco();
It does work for this:
loader.init().then((monaco) => {
const wrapper = document.getElementById("root");
wrapper.style.height = "100vh";
const properties = {
value: "function hello() {\n\talert('Hello world!');\n}",
language: "javascript"
};
monaco.editor.create(wrapper, properties);
});
@saul-data
1) if you want to load it with AMD you should do the following:
in package.json
"scripts": {
...,
"postinstall": "cp -R node_modules/monaco-editor/min/vs/ public/vs"
},
in App.js
import React, {useEffect} from 'react';
import Editor, { loader, useMonaco } from "@monaco-editor/react";
loader.config({ paths: {vs: "/vs"} });
function App() {
const monaco = useMonaco();
useEffect(() => {
if (monaco) {
console.log("here is the monaco instance:", monaco);
}
}, [monaco]);
return <Editor language='javascript' height="90vh" />
}
export default App;
2) if you want to import it from npm, you should do the following:
in App.js
import React, {useEffect} from 'react';
import Editor, { loader, useMonaco } from "@monaco-editor/react";
import * as monaco from 'monaco-editor';
loader.config({ monaco });
function App() {
const monaco = useMonaco();
useEffect(() => {
if (monaco) {
console.log("here is the monaco instance:", monaco);
}
}, [monaco]);
return <Editor language='javascript' height="90vh" />
}
export default App;
NOTE: (ONLY FOR SECOND OPTION) React.StrictMode
in development mode renders everything two times, this may lead to some issues in monaco (I am investigating it), as a temporary solution you can remove React.StrictMode
from index.js
@saul-data could you please check the latest version?
I have read many issues that relate to loading from NPM. I think this might be resolved for Electron but we have a situation where we need a React web app in an air tight environment that cannot communicate to a CDN.
I have created a repo to demonstrate the issue. I have tried many things but can't seem to get it to work.
https://github.com/dataplane-app/dataplane-monaco