Fine tune codemirror style. Problems remaining: 1) rule for including css, becuase every theme for codemirror is essetially a css file 2) autocompletion, looks like we need to implement this ourself, even the basic one(eg. completion in the same file).

zhenjier · zhenjier · commit 8198ed103a00 · 2016-12-12T00:17:38.000-05:00
diff --git a/app/components/CodeMirrorEditor/index.jsx b/app/components/CodeMirrorEditor/index.jsx
@@ -3,22 +3,34 @@ 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 {tab} = this.props;
-    const editor = this.editor = CodeMirror(this.editorDOM);
+    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`], () => {
@@ -30,19 +42,30 @@ class CodeMirrorEditor extends Component {
     // 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);
-    const info = CodeMirror.findModeByExtension(m[1]);
-    if (info) {
-      return info
+    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;
diff --git a/app/config.js b/app/config.js
@@ -1,6 +1,6 @@
 /* @flow weak */
 export default {
   projectName: '',
-  baseURL: 'http://localhost:3000' || window.location.origin,
+  baseURL: '' || window.location.origin,
   spaceKey: ''
 }
diff --git a/app/index.html b/app/index.html
@@ -9,6 +9,7 @@
     还提供了可分享的开发环境功能，用户可以保存当前的 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>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`/* @flow weak */`
`2`	`2`	`export default {`
`3`	`3`	`projectName: '',`
`4`		`- baseURL: 'http://localhost:3000' \|\| window.location.origin,`
	`4`	`+ baseURL: '' \|\| window.location.origin,`
`5`	`5`	`spaceKey: ''`
`6`	`6`	`}`