I have a react application, and I want to embed Monaco Editor into my application mainly for SQL validation and AutoComplete scenarios. I use neutrinorc.js to configure plugins or direct install using npm install plugin-name in the application.
My webpack.config.js looks like,
// Whilst the configuration object can be modified here, the recommended way of making
// changes is via the presets' options or Neutrino's API in `.neutrinorc.js` instead.
// Neutrino's inspect feature can be used to view/export the generated configuration.
const neutrino = require('neutrino');
module.exports = neutrino().webpack();
I noticed that there is, https://github.com/react-monaco-editor/react-monaco-editor https://github.com/jaywcjlove/react-monacoeditor
And Microsoft ones, https://github.com/microsoft/monaco-editor-webpack-plugin https://github.com/Microsoft/monaco-editor
I don't understand that if I want to embed a Monaco Editor into my React application which of the above packages do I need and do I need to configure them in neutrinorc.js?
It would be great if someone can explain this in detail.
I don't know neutrinorc.js, but I can explain the other aspects. Integrating Monaco in a React app requires 2 things:
Especially the second point is a bit tricky, depending on your app. If you created that using CRA (create-react-app) you will not have access to the webpack config file, unless you "eject" the app. This is usually not desirable, hence add another node module to the mix, called react-app-rewired. This module allows you to add another webpack config file (config-overrides.js) to the root of your project and add configuration data there. Something like:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const webpack = require("webpack");
module.exports = function override(config, env) {
config.plugins.push(new MonacoWebpackPlugin({
languages: ["typescript", "javascript", "sql", "mysql", "python", "json", "markdown", "ini", "xml"]
})
return config;
}
With that webpack plugin you can decide which language you want to support in Monaco and distribute only those files required by them (especially TS + JS require quite large files to be there).