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.

CodePudding user response：

I don't know neutrinorc.js, but I can explain the other aspects. Integrating Monaco in a React app requires 2 things:

1. A React wrapper for the Monaco editor. You can either write one yourself or use the react-monaco-editor node module.
2. You have to configure webpack to load the required files. This is where monaco-editor-webpack-plugin comes in.

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