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