1 | <p align="center"><img src="https://user-images.githubusercontent.com/2723376/55211710-2f76e000-5228-11e9-887b-67faca78c4b9.png" width="150" height="150" /></p>
|
2 |
|
3 | <h1 align="center">react-monaco-editor</h1>
|
4 |
|
5 | <div align="center">
|
6 |
|
7 | [Monaco Editor](https://github.com/Microsoft/monaco-editor) for React.
|
8 |
|
9 | [![NPM version][npm-image]][npm-url]
|
10 | [![Downloads][downloads-image]][npm-url]
|
11 | [![Build Status](https://travis-ci.com/react-monaco-editor/react-monaco-editor.svg?branch=master)](https://travis-ci.com/react-monaco-editor/react-monaco-editor)
|
12 |
|
13 | [![react-monaco-editor](https://nodei.co/npm/react-monaco-editor.png)](https://npmjs.org/package/react-monaco-editor)
|
14 |
|
15 | [npm-url]: https://npmjs.org/package/react-monaco-editor
|
16 | [downloads-image]: http://img.shields.io/npm/dm/react-monaco-editor.svg
|
17 | [npm-image]: http://img.shields.io/npm/v/react-monaco-editor.svg
|
18 |
|
19 | </div>
|
20 |
|
21 | ## Examples
|
22 |
|
23 | To build the examples locally, run:
|
24 |
|
25 | ```bash
|
26 | yarn
|
27 | cd example
|
28 | yarn
|
29 | yarn start
|
30 | ```
|
31 |
|
32 | Then open `http://localhost:8886` in a browser.
|
33 |
|
34 | ## Installation
|
35 |
|
36 | ```bash
|
37 | yarn add react-monaco-editor
|
38 | ```
|
39 |
|
40 | ## Using with Webpack
|
41 |
|
42 | ```js
|
43 | import React from 'react';
|
44 | import { render } from 'react-dom';
|
45 | import MonacoEditor from 'react-monaco-editor';
|
46 |
|
47 | class App extends React.Component {
|
48 | constructor(props) {
|
49 | super(props);
|
50 | this.state = {
|
51 | code: '// type your code...',
|
52 | }
|
53 | }
|
54 | editorDidMount(editor, monaco) {
|
55 | console.log('editorDidMount', editor);
|
56 | editor.focus();
|
57 | }
|
58 | onChange(newValue, e) {
|
59 | console.log('onChange', newValue, e);
|
60 | }
|
61 | render() {
|
62 | const code = this.state.code;
|
63 | const options = {
|
64 | selectOnLineNumbers: true
|
65 | };
|
66 | return (
|
67 | <MonacoEditor
|
68 | width="800"
|
69 | height="600"
|
70 | language="javascript"
|
71 | theme="vs-dark"
|
72 | value={code}
|
73 | options={options}
|
74 | onChange={::this.onChange}
|
75 | editorDidMount={::this.editorDidMount}
|
76 | />
|
77 | );
|
78 | }
|
79 | }
|
80 |
|
81 | render(
|
82 | <App />,
|
83 | document.getElementById('root')
|
84 | );
|
85 | ```
|
86 |
|
87 | Add the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:
|
88 |
|
89 | ```js
|
90 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
91 | module.exports = {
|
92 | plugins: [
|
93 | new MonacoWebpackPlugin({
|
94 | // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
|
95 | languages: ['json']
|
96 | })
|
97 | ]
|
98 | };
|
99 | ```
|
100 |
|
101 | Sidenote: Monaco Editor uses CSS imports internally, so if you're using CSS Modules in your project - you're likely to get conflict by default. In order to avoid that - separate css-loader for app and monaco-editor package:
|
102 |
|
103 | ```js
|
104 | // Specify separate paths
|
105 | const path = require('path');
|
106 | const APP_DIR = path.resolve(__dirname, './src');
|
107 | const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
|
108 |
|
109 | {
|
110 | test: /\.css$/,
|
111 | include: APP_DIR,
|
112 | use: [{
|
113 | loader: 'style-loader',
|
114 | }, {
|
115 | loader: 'css-loader',
|
116 | options: {
|
117 | modules: true,
|
118 | namedExport: true,
|
119 | },
|
120 | }],
|
121 | }, {
|
122 | test: /\.css$/,
|
123 | include: MONACO_DIR,
|
124 | use: ['style-loader', 'css-loader'],
|
125 | }
|
126 | ```
|
127 |
|
128 | ## Properties
|
129 |
|
130 | All the properties below are optional.
|
131 |
|
132 | - `width` width of editor. Defaults to `100%`.
|
133 | - `height` height of editor. Defaults to `100%`.
|
134 | - `value` value of the auto created model in the editor.
|
135 | - `defaultValue` the initial value of the auto created model in the editor.
|
136 | - `language` the initial language of the auto created model in the editor.
|
137 | - `theme` the theme of the editor
|
138 | - `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html).
|
139 | - `overrideServices` refer to [Monaco Interface IEditorOverrideServices](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroverrideservices.html). It depends on monaco's internal implementations and may change over time, check github [issue](https://github.com/Microsoft/monaco-editor/issues/935#issuecomment-402174095) for more details.
|
140 |
|
141 | - `onChange(newValue, event)` an event emitted when the content of the current model has changed.
|
142 | - `editorWillMount(monaco)` an event emitted before the editor mounted (similar to `componentWillMount` of React).
|
143 | - `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).
|
144 | - `context` allow to pass a different context then the global window onto which the Monaco instance will be loaded. Useful if you want to load the editor in an iframe.
|
145 |
|
146 | ## Events & Methods
|
147 |
|
148 | Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditor.html).
|
149 |
|
150 | ## Q & A
|
151 |
|
152 | ### I don't get syntax highlighting / autocomplete / validation.
|
153 |
|
154 | Make sure to use the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) or follow the [instructions on how to load the ESM version of Monaco](https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md).
|
155 |
|
156 | ### How to interact with the MonacoEditor instance
|
157 |
|
158 | Using the first parameter of `editorDidMount`, or using a `ref` (e.g. `<MonacoEditor ref="monaco">`) after `editorDidMount` event has fired.
|
159 |
|
160 | Then you can invoke instance methods via `this.refs.monaco.editor`, e.g. `this.refs.monaco.editor.focus()` to focuses the MonacoEditor instance.
|
161 |
|
162 | ### How to get value of editor
|
163 |
|
164 | Using `this.refs.monaco.editor.getValue()` or via method of `Model` instance:
|
165 |
|
166 | ```js
|
167 | const model = this.refs.monaco.editor.getModel();
|
168 | const value = model.getValue();
|
169 | ```
|
170 |
|
171 | ### Do something before editor mounted
|
172 |
|
173 | For example, you may want to configure some JSON schemas before editor mounted, then you can go with `editorWillMount(monaco)`:
|
174 |
|
175 | ```js
|
176 | class App extends React.Component {
|
177 | editorWillMount(monaco) {
|
178 | monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
179 | validate: true,
|
180 | schemas: [{
|
181 | uri: "http://myserver/foo-schema.json",
|
182 | fileMatch: ['*'],
|
183 | schema: {
|
184 | type: "object",
|
185 | properties: {
|
186 | p1: {
|
187 | enum: [ "v1", "v2"]
|
188 | },
|
189 | p2: {
|
190 | $ref: "http://myserver/bar-schema.json"
|
191 | }
|
192 | }
|
193 | }
|
194 | }]
|
195 | });
|
196 | }
|
197 | render() {
|
198 | return (
|
199 | <MonacoEditor language="json" editorWillMount={this.editorWillMount} />
|
200 | );
|
201 | }
|
202 | }
|
203 | ```
|
204 |
|
205 | ### Use multiple themes
|
206 |
|
207 | [Monaco only supports one theme](https://github.com/Microsoft/monaco-editor/issues/338).
|
208 |
|
209 | ### How to use the diff editor
|
210 |
|
211 | ```js
|
212 | import React from 'react';
|
213 | import { MonacoDiffEditor } from 'react-monaco-editor';
|
214 |
|
215 | class App extends React.Component {
|
216 | render() {
|
217 | const code1 = "// your original code...";
|
218 | const code2 = "// a different version...";
|
219 | const options = {
|
220 | //renderSideBySide: false
|
221 | };
|
222 | return (
|
223 | <MonacoDiffEditor
|
224 | width="800"
|
225 | height="600"
|
226 | language="javascript"
|
227 | original={code1}
|
228 | value={code2}
|
229 | options={options}
|
230 | />
|
231 | );
|
232 | }
|
233 | }
|
234 | ```
|
235 |
|
236 | ### Usage with `create-react-app`
|
237 |
|
238 | The easiest way to use the `react-monaco-editor` with `create-react-app` is to use the [react-app-rewired](https://github.com/timarney/react-app-rewired) project. For setting it up, the following steps are required:
|
239 |
|
240 | 1. Install `react-app-rewired`: `npm install -D react-app-rewired`
|
241 | 2. Replace `react-scripts` by `react-app-rewired` in the scripts section of your `packages.json`
|
242 | 2. Create a `config-overrides.js` in the root directory of your project with the following content:
|
243 |
|
244 | ```javascript
|
245 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
246 |
|
247 | module.exports = function override(config, env) {
|
248 | config.plugins.push(new MonacoWebpackPlugin({
|
249 | languages: ['json']
|
250 | }));
|
251 | return config;
|
252 | }
|
253 | ```
|
254 |
|
255 | For more information checkout the documentation of `react-app-rewired` [here](https://github.com/timarney/react-app-rewired).
|
256 |
|
257 | # License
|
258 |
|
259 | MIT, see the [LICENSE](/LICENSE.md) file for detail.
|