Zhenjieruan/codemirror

app/components/CodeMirrorEditor/getMode.js

@@ -0,0 +1 @@
+

app/components/CodeMirrorEditor/index.jsx

@@ -0,0 +1,85 @@
+/*@flow weak*/
+import React, {Component} from 'react';
+import CodeMirror from 'codemirror';
+import CodeMirrorModeMeta from 'codemirror/mode/meta.js';
+import CodeMirrorLoadMode from 'codemirror/addon/mode/loadmode.js';
+import {} from 'codemirror/addon/hint/show-hint.js';
+import {connect} from 'react-redux';
+import * as TabActions from '../Tab/actions';
+
+class CodeMirrorEditor extends Component {
+  static defaultProps = {
+    theme: 'monokai',
+    height: '100%',
+    width: '100%',
+  };
+
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const {theme, tab, width, height} = this.props;
+    const editor = this.editor = CodeMirror(this.editorDOM, {
+      theme: theme,
+      autofocus: true
+    });
+    if (tab.content) {
+      const {body, path} = tab.content;
+      const modeInfo = this.getMode(path);
+      if (body) editor.setValue(body);
+      editor.setSize(width, height);
+      if (modeInfo) {
+        let mode = modeInfo.mode;
+        require([`codemirror/mode/${mode}/${mode}.js`], () => {
+          editor.setOption('mode', mode);
+        });
+      }
+    }
+    editor.focus();
+    // little hack to make codemirror work with legacy interface
+    editor.isFocused = editor.hasFocus;
+    tab.editor = editor;
+    editor.on('change', this.onChange);
+    editor.on('focus', () => {
+      this.props.dispatch(TabActions.activateTab(tab.id))
+    })
+  }
+
+  getMode(path) {
+    const m = /.+\.([^.]+)$/.exec(path);
+    if (m) {
+      const info = CodeMirror.findModeByExtension(m[1]);
+      if (info) {
+        return info
+      }
+    }
+  }
+
+  onChange = (e) => {
+    const {tab, dispatch} = this.props;
+    if (!tab.flags.modified) {
+      dispatch(TabActions.updateTabFlags(tab.id, 'modified', true))
+    }
+  };
+
+
+  render() {
+    const {width, height} = this.props;
+    const name = this.state.name;
+    const divStyle = {width, height};
+    return (
+      <div ref={ c => this.editorDOM = c }
+           id={name}
+           style={divStyle}
+      ></div>
+    );
+  }
+
+}
+
+CodeMirrorEditor = connect(state => ({setting: state.SettingState.views.tabs.EDITOR}), null)(CodeMirrorEditor);
+
+export default CodeMirrorEditor;

app/components/EditorWrapper/index.jsx

@@ -2,10 +2,12 @@ import React, { PropTypes } from 'react';
 import AceEditor from '../AceEditor';
 import MarkdownEditor from '../MarkdownEditor';
 import PictureEditor from '../PictureEditor';
+import CodeMirrorEditor from '../CodeMirrorEditor';
 
 
 
 const editors = {
+  CodeMirrorEditor,
   AceEditor,
   MarkdownEditor,
   PictureEditor,
@@ -19,7 +21,7 @@ const getEditorByName = ({
   path
 }) => {
   if (type === 'default') {
-    return React.createElement(editors.AceEditor, { tab });
+    return React.createElement(editors.CodeMirrorEditor, { tab });
   } else if (type === 'editorWithPreview') {
     return React.createElement(editors.MarkdownEditor, { content: body, tab });
   } else if (type === 'pictureEditor') {

app/components/Panel/index.jsx

@@ -5,8 +5,7 @@ import { Provider, connect } from 'react-redux'
 import cx from 'classnames'
 import * as PanelActions from './actions'
 
-const Panel = ({id, views, size, flexDirection, parentFlexDirection, resizingListeners, ..._props}) => {
-  var style = {
+const Panel = ({id, views, size, flexDirection, parentFlexDirection, resizingListeners, ..._props}) => { var style = {
     flexGrow: size,
     display: _props.display
   }

app/index.html

@@ -8,6 +8,8 @@
   <meta name="Description" content="Coding WebIDE 是Coding自主研发的在线集成开发环境。用户可以通过WebIDE创建项目的工作空间，进行在线开发，调试等操作。与此同时，WebIDE
     还提供了可分享的开发环境功能，用户可以保存当前的 Terminal 环境，分享给团队的其他成员。">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
+  <link rel="stylesheet" href="../node_modules/codemirror/theme/monokai.css">
   <script src="https://use.fontawesome.com/838df4727b.js"></script>
 </head>
 <body>

package.json

@@ -67,6 +67,7 @@
     "bootstrap-styl": "^5.0.7",
     "brace": "^0.8.0",
     "classnames": "^2.2.5",
+    "codemirror": "^5.21.0",
     "diff_match_patch": "^0.1.1",
     "fixed-data-table": "^0.6.3",
     "font-awesome": "^4.6.3",