Hackape/codemirror

app/components/CodeMirrorEditor/addons.js

@@ -0,0 +1,22 @@
+// mode detect
+import 'codemirror/mode/meta.js'
+import 'codemirror/addon/mode/loadmode.js'
+// diaglog
+import 'codemirror/addon/dialog/dialog.js'
+import 'codemirror/addon/dialog/dialog.css'
+// search
+import 'codemirror/addon/search/search.js'
+
+// comment
+import 'codemirror/addon/comment/comment.js'
+
+// bracket
+import 'codemirror/addon/edit/matchbrackets.js'
+import 'codemirror/addon/edit/closebrackets.js'
+
+// code fold
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+
+// hint
+import 'codemirror/addon/hint/show-hint.js'

app/components/CodeMirrorEditor/getMode.js

@@ -0,0 +1 @@
+

app/components/CodeMirrorEditor/index.jsx

@@ -0,0 +1,86 @@
+/*@flow weak*/
+import React, {Component} from 'react';
+import CodeMirror from 'codemirror';
+import './addons';
+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,
+      lineNumbers: true,
+      matchBrackets: true,
+      autoCloseBrackets: true,
+    });
+
+    // 1. resize
+    editor.setSize(width, height);
+
+    if (tab.content) {
+      const {body, path} = tab.content;
+      const modeInfo = this.getMode(path);
+      if (body) editor.setValue(body);
+      if (modeInfo) {
+        let mode = modeInfo.mode;
+        require([`codemirror/mode/${mode}/${mode}.js`], () => {
+          editor.setOption('mode', mode);
+        });
+      }
+    }
+    editor.focus();
+    editor.isFocused = editor.hasFocus; // little hack to make codemirror work with legacy interface
+    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,8 +2,10 @@ 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
@@ -16,7 +18,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') {