自動的にスクロールを合わせてくれる

lib/components/CodeEditor.js

@@ -30,6 +30,7 @@ module.exports = React.createClass({
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
     editor.clearSelection()
+    editor.moveCursorTo(0, 0)
 
     editor.setReadOnly(!!this.props.readOnly)
 
@@ -50,16 +51,14 @@ module.exports = React.createClass({
         this.props.onChange(e, value)
       }
     }.bind(this))
-
-    this.setState({editor: editor})
   },
   componentDidUpdate: function (prevProps) {
-    if (this.state.editor.getValue() !== this.props.code) {
-      this.state.editor.setValue(this.props.code)
-      this.state.editor.clearSelection()
+    if (this.editor.getValue() !== this.props.code) {
+      this.editor.setValue(this.props.code)
+      this.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      var session = this.state.editor.getSession()
+      var session = this.editor.getSession()
       let mode = _.findWhere(modes, {name: this.props.mode})
       let syntaxMode = mode != null
         ? mode.mode
@@ -67,6 +66,18 @@ module.exports = React.createClass({
       session.setMode('ace/mode/' + syntaxMode)
     }
   },
+  getFirstVisibleRow: function () {
+    return this.editor.getFirstVisibleRow()
+  },
+  getCursorPosition: function () {
+    return this.editor.getCursorPosition()
+  },
+  moveCursorTo: function (row, col) {
+    this.editor.moveCursorTo(row, col)
+  },
+  scrollToLine: function (num) {
+    this.editor.scrollToLine(num, false, false)
+  },
   render: function () {
     return (
       <div ref='target' className={this.props.className == null ? 'CodeEditor' : 'CodeEditor ' + this.props.className}></div>