How to integrate a custom language's web worker into this library?
See original GitHub issueIs your feature request related to a problem? Please describe. Recently i wanna custom a language, and trying to add web worker with it as well. However it seems like on the doc there is nothing related to custom web worker.
Describe the solution you’d like
There is a related issue about integrate monaco-editor with create-react-app, the solution is using react-app-rewired
and then add monaco-editor-webpack-plugin
.
Also on the monaco editor official doc, there are two general solutions for adding web worker.
Since this lib does not require any webpack config, but on the other hand there is no related web worker api exposed. I am currently not sure how to handle it.
Describe alternatives you’ve considered The pseudocode might look like this:
// this is what @monaco-editor/react provided
// App.js
function App() {
// ...
return (
<Editor
height="90vh"
language="myLang"
value=""
editorDidMount={handleEditorDidMount}
/>
)
}
// this is the web worker i want customize
// myLang.worker.js
self.onmessagee = () => {
// ...
}
// this is the config for web worker
// config.js
self.MonacoEnvironment = {
getWorkerUrl(moduleId, label) {
if (label === "myLang") {
return "./myLang.worker.js"
}
return "./editor.worker.js"
}
}
// this is still using webpack to distinguish web worker, not sure how to integrate it with CRA
// webpack.config.js
module.exports = {
entry: {
"myLang.worker": './src/myLang.worker.js'
}
}
Additional context I am really new to monaco editor and english is not my first language, hope i explained my confusion clearly.
Cheers
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (3 by maintainers)
Top GitHub Comments
The solution for getting custom web worker running is to bundle them for the output. Therefore you have to use react-app-rewired and the monaco-editor-webpack-plugin to be able to override webpack config without ejecting the project. See https://github.com/suren-atoyan/monaco-react/issues/68#issuecomment-770205419 for more details
自己写一个monaco editor for react , 用monaco-editor-webpack-plugin这个插件,配置超级简单。