将monaco-editor作为在线IDE编辑器

ui/components/scratchpad/ScratchpadEditorContainer.js

@@ -1,26 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import CodeMirror from 'react-codemirror';
-
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/mode/pascal/pascal';
-import 'codemirror/mode/python/python';
-import 'codemirror/mode/php/php';
-import 'codemirror/mode/rust/rust';
-import 'codemirror/mode/haskell/haskell';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/go/go';
-import 'codemirror/mode/ruby/ruby';
+import MonacoEditor from 'react-monaco-editor';
 
 import * as languageEnum from 'vj/constant/language';
 
 const getOptions = lang => ({
   lineNumbers: true,
-  tabSize: 4,
-  indentUnit: 4,
-  indentWithTabs: true,
-  mode: languageEnum.LANG_CODEMIRROR_MODES[lang],
+  mode: languageEnum.LANG_MONACO_MODES[lang],
 });
 
 const mapStateToProps = state => ({
@@ -39,17 +25,15 @@ const mapDispatchToProps = dispatch => ({
 
 @connect(mapStateToProps, mapDispatchToProps)
 export default class ScratchpadEditorContainer extends React.PureComponent {
-  componentDidMount() {
-    this.refs.editor.getCodeMirror().setOption('theme', 'vjcm');
-  }
-
   render() {
     return (
-      <CodeMirror
+      <MonacoEditor
+        language={languageEnum.LANG_MONACO_MODES[this.props.lang]}
+        theme="vs-dark"
         value={this.props.code}
-        onChange={code => this.props.handleUpdateCode(code)}
         options={getOptions(this.props.lang)}
         ref="editor"
+        onChange={code => this.props.handleUpdateCode(code)}
       />
     );
   }