Skip to content

Commit 2337c19

Browse files
cicciodmcicciodm
committed
Merge branch 'master' of git://github.com/superRaytin/react-monaco-editor
2 parents 8f745b0 + 6ef5bbb commit 2337c19

File tree

8 files changed

+184
-153
lines changed

8 files changed

+184
-153
lines changed

‎.eslintrc

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
{
2-
"extends": "eslint-config-rackt",
2+
"parser": "babel-eslint",
3+
"extends": "eslint-config-airbnb",
34
"rules": {
45
"array-bracket-spacing": 0,
56
"comma-dangle": 0,
67
"valid-jsdoc": 2,
78
// Disable until Flow supports let and const
89
"no-var": 0,
910
"semi": 0,
11+
"no-underscore-dangle": 0,
1012
"react/jsx-uses-react": 1,
1113
"react/jsx-no-undef": 2,
12-
"react/wrap-multilines": 2
14+
"react/jsx-filename-extension": 0,
15+
"react/forbid-prop-types": 0,
16+
"jsx-a11y/href-no-hash": 0
1317
},
1418
"plugins": [
1519
"react"
1620
],
17-
"ecmaFeatures": {
18-
"jsx": true
19-
},
2021
"globals": {
2122
"monaco": true
23+
},
24+
"env": {
25+
"browser": true
2226
}
2327
}

‎README.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ class App extends React.Component {
6262
width="800"
6363
height="600"
6464
language="javascript"
65+
theme="vs-dark"
6566
value={code}
6667
options={options}
6768
onChange={::this.onChange}
@@ -93,7 +94,7 @@ module.exports = {
9394
};
9495
```
9596

96-
Fill `from` field with the actual path of `monaco-editor` package in node_modules.
97+
Fill `from` field with the actual path of `monaco-editor` package in node_modules.
9798

9899
### Using with require.config (do not need Webpack)
99100

@@ -130,6 +131,8 @@ class App extends React.Component {
130131

131132
Both them are valid ways to config loader url and relative path of module.
132133

134+
The default value for `requriedConfig.url` is `vs/loader.js`.
135+
133136
> You may need to note the [cross domain case](https://github.com/Microsoft/monaco-editor#integrate-cross-domain).
134137
135138
## Properties
@@ -138,11 +141,12 @@ If you specify `value` property, the component behaves in controlled mode.
138141
Otherwise, it behaves in uncontrolled mode.
139142

140143
- `width` width of editor. Defaults to `100%`.
141-
- `height` height of editor. Defaults to `500`.
144+
- `height` height of editor. Defaults to `100%`.
142145
- `value` value of the auto created model in the editor.
143146
- `defaultValue` the initial value of the auto created model in the editor.
144147
- `language` the initial language of the auto created model in the editor.
145-
- `options` refer to [Monaco interface IEditorOptions](https://github.com/Microsoft/monaco-editor/blob/master/website/playground/monaco.d.ts.txt#L1029).
148+
- `theme` the theme of the editor
149+
- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html).
146150
- `onChange(newValue, event)` an event emitted when the content of the current model has changed.
147151
- `editorWillMount(monaco)` an event emitted before the editor mounted (similar to `componentWillMount` of React).
148152
- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).
@@ -151,7 +155,7 @@ Otherwise, it behaves in uncontrolled mode.
151155

152156
## Events & Methods
153157

154-
Refer to [Monaco interface IEditor](https://github.com/Microsoft/monaco-editor/blob/master/website/playground/monaco.d.ts.txt#L2813).
158+
Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditor.html).
155159

156160
## Q & A
157161

@@ -202,6 +206,10 @@ class App extends React.Component {
202206
}
203207
```
204208

209+
### Use multiple themes
210+
211+
[Monaco only supports one theme](https://github.com/Microsoft/monaco-editor/issues/338).
212+
205213
# License
206214

207215
MIT, see the [LICENSE](/LICENSE.md) file for detail.

‎examples/index.html

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
5-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
6-
</head>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
5+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
6+
</head>
77

8-
<body>
9-
<div id="root" style="display: inline-block; border:1px solid grey"></div>
10-
<!-- loader -->
11-
<!--
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
13-
-->
14-
<script>
15-
//require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
16-
</script>
17-
<script src="./common.js"></script>
18-
<script src="./index.js"></script>
19-
</body>
8+
<body>
9+
<div id="root" style="display: inline-block; border:1px solid grey"></div>
10+
<script src="./index.js"></script>
11+
</body>
2012
</html>

‎examples/index.js

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import React from 'react';
23
import { render } from 'react-dom';
4+
// eslint-disable-next-line import/no-unresolved, import/extensions
35
import MonacoEditor from 'react-monaco-editor';
6+
/* eslint-enable import/no-extraneous-dependencies */
47

58
// Using with webpack
69
class CodeEditor extends React.Component {
@@ -10,86 +13,92 @@ class CodeEditor extends React.Component {
1013
code: '// type your code... \n',
1114
}
1215
}
13-
editorDidMount(editor) {
16+
17+
onChange = (newValue, e) => {
18+
console.log('onChange', newValue, e); // eslint-disable-line no-console
19+
}
20+
21+
editorDidMount = (editor) => {
22+
// eslint-disable-next-line no-console
1423
console.log('editorDidMount', editor, editor.getValue(), editor.getModel());
1524
this.editor = editor;
1625
}
17-
onChange(newValue, e) {
18-
console.log('onChange', newValue, e);
19-
}
20-
changeEditorValue() {
26+
27+
changeEditorValue = () => {
2128
if (this.editor) {
2229
this.editor.setValue('// code changed! \n');
2330
}
2431
}
25-
changeBySetState() {
26-
this.setState({code: '// code changed by setState! \n'});
32+
33+
changeBySetState = () => {
34+
this.setState({ code: '// code changed by setState! \n' });
2735
}
36+
2837
render() {
2938
const code = this.state.code;
3039
const options = {
3140
selectOnLineNumbers: true,
3241
roundedSelection: false,
3342
readOnly: false,
34-
theme: 'vs',
3543
cursorStyle: 'line',
3644
automaticLayout: false,
3745
};
3846
return (
47+
<div>
3948
<div>
40-
<div>
41-
<button onClick={::this.changeEditorValue}>Change value</button>
42-
<button onClick={::this.changeBySetState}>Change by setState</button>
43-
</div>
44-
<hr />
45-
<MonacoEditor
46-
height="500"
47-
language="javascript"
48-
value={code}
49-
options={options}
50-
onChange={::this.onChange}
51-
editorDidMount={::this.editorDidMount}
52-
/>
49+
<button onClick={this.changeEditorValue}>Change value</button>
50+
<button onClick={this.changeBySetState}>Change by setState</button>
5351
</div>
52+
<hr />
53+
<MonacoEditor
54+
height="500"
55+
language="javascript"
56+
value={code}
57+
options={options}
58+
onChange={this.onChange}
59+
editorDidMount={this.editorDidMount}
60+
/>
61+
</div>
5462
);
5563
}
5664
}
5765

5866
// Using with require.config
59-
class AnotherEditor extends React.Component {
67+
class AnotherEditor extends React.Component { // eslint-disable-line react/no-multi-comp
6068
constructor(props) {
6169
super(props);
6270
const jsonCode = [
6371
'{',
6472
' "$schema": "http://myserver/foo-schema.json"',
65-
"}"
73+
'}'
6674
].join('\n');
6775
this.state = {
6876
code: jsonCode,
6977
}
7078
}
71-
editorWillMount(monaco) {
79+
80+
editorWillMount = (monaco) => {
7281
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
7382
schemas: [{
74-
uri: "http://myserver/foo-schema.json",
83+
uri: 'http://myserver/foo-schema.json',
7584
schema: {
76-
type: "object",
85+
type: 'object',
7786
properties: {
7887
p1: {
79-
enum: [ "v1", "v2"]
88+
enum: [ 'v1', 'v2']
8089
},
8190
p2: {
82-
$ref: "http://myserver/bar-schema.json"
91+
$ref: 'http://myserver/bar-schema.json'
8392
}
8493
}
8594
}
86-
},{
87-
uri: "http://myserver/bar-schema.json",
95+
}, {
96+
uri: 'http://myserver/bar-schema.json',
8897
schema: {
89-
type: "object",
98+
type: 'object',
9099
properties: {
91100
q1: {
92-
enum: [ "x1", "x2"]
101+
enum: [ 'x1', 'x2']
93102
}
94103
}
95104
}
@@ -101,39 +110,36 @@ class AnotherEditor extends React.Component {
101110
const requireConfig = {
102111
url: 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js',
103112
paths: {
104-
'vs': 'https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min/vs'
113+
vs: 'https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min/vs'
105114
}
106115
};
107116
return (
108-
<div>
109-
<MonacoEditor
110-
width="800"
111-
height="600"
112-
language="json"
113-
defaultValue={code}
114-
requireConfig={requireConfig}
115-
editorWillMount={::this.editorWillMount}
116-
/>
117-
</div>
117+
<div>
118+
<MonacoEditor
119+
width="800"
120+
height="600"
121+
language="json"
122+
defaultValue={code}
123+
requireConfig={requireConfig}
124+
editorWillMount={this.editorWillMount}
125+
/>
126+
</div>
118127
);
119128
}
120129
}
121130

122-
class App extends React.Component {
123-
render() {
124-
return (
125-
<div>
126-
<h2>Monaco Editor Sample (controlled mode)</h2>
127-
<CodeEditor />
128-
<hr />
129-
<h2>Another editor (uncontrolled mode)</h2>
130-
<AnotherEditor />
131-
</div>
132-
);
133-
}
134-
}
131+
// eslint-disable-next-line react/no-multi-comp
132+
const App = () => (
133+
<div>
134+
<h2>Monaco Editor Sample (controlled mode)</h2>
135+
<CodeEditor />
136+
<hr />
137+
<h2>Another editor (uncontrolled mode)</h2>
138+
<AnotherEditor />
139+
</div>
140+
)
135141

136142
render(
137-
<App />,
138-
document.getElementById('root')
143+
<App />,
144+
document.getElementById('root')
139145
);

‎examples/package.json

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,23 @@
1818
],
1919
"license": "MIT",
2020
"devDependencies": {
21-
"babel": "^6.5.2",
2221
"babel-cli": "^6.10.1",
2322
"babel-core": "^6.10.4",
24-
"babel-eslint": "^6.0.5",
2523
"babel-loader": "^6.2.4",
2624
"babel-preset-es2015": "^6.9.0",
2725
"babel-preset-react": "^6.5.0",
2826
"babel-preset-stage-0": "^6.5.0",
29-
"rimraf": "^2.5.2",
27+
"copy-webpack-plugin": "~3.0.1",
28+
"file-loader": "^0.11.2",
3029
"react-hot-loader": "^1.3.0",
31-
"webpack": "^1.13.1",
30+
"rimraf": "^2.5.2",
3231
"webpack-dev-server": "^1.14.1",
33-
"copy-webpack-plugin": "~3.0.1"
32+
"webpack": "^1.13.1"
33+
},
34+
"dependencies": {
35+
"monaco-editor": "^0.9.0",
36+
"react": "~15.6.1",
37+
"react-dom": "^15.6.1",
38+
"react-monaco-editor": "latest"
3439
}
3540
}

‎examples/webpack.config.js

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
1-
'use strict';
2-
31
const webpack = require('webpack');
42
const CopyWebpackPlugin = require('copy-webpack-plugin');
53
const path = require('path');
64

75
const MonacoEditorSrc = path.join(__dirname, '..', 'src');
86

97
module.exports = {
10-
entry: {
11-
jsx: './index.js',
12-
html: './index.html',
13-
vendor: [
14-
'react',
15-
'react-dom',
16-
],
17-
},
8+
entry: './index.js',
189
output: {
1910
path: path.join(__dirname, './lib/t'),
2011
filename: 'index.js',
@@ -47,7 +38,6 @@ module.exports = {
4738
},
4839
plugins: [
4940
new webpack.optimize.OccurenceOrderPlugin(),
50-
new webpack.optimize.CommonsChunkPlugin('vendor', 'common.js'),
5141
new webpack.DefinePlugin({
5242
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') },
5343
}),
@@ -56,7 +46,7 @@ module.exports = {
5646
}),
5747
new CopyWebpackPlugin([
5848
{
59-
from: '../node_modules/monaco-editor/min/vs',
49+
from: 'node_modules/monaco-editor/min/vs',
6050
to: 'vs',
6151
}
6252
]),
@@ -65,4 +55,4 @@ module.exports = {
6555
contentBase: './',
6656
hot: true,
6757
},
68-
}
58+
}

0 commit comments

Comments
 (0)