auto scrolling for markdown preview

Author: Rokt33r

browser/main/HomePage/ArticleDetail/ArticleEditor.js

@@ -11,23 +11,50 @@ export default class ArticleEditor extends React.Component {
     super(props)
     this.isMouseDown = false
     this.state = {
-      status: PREVIEW_MODE
+      status: PREVIEW_MODE,
+      cursorPosition: null,
+      firstVisibleRow: null
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  resetCursorPosition () {
+    this.setState({
+      cursorPosition: null,
+      firstVisibleRow: null
+    }, function () {
+      let previewEl = ReactDOM.findDOMNode(this.refs.preview)
+      previewEl.scrollTop = 0
+    })
   }
 
   switchPreviewMode () {
+    let cursorPosition = this.refs.editor.getCursorPosition()
+    let firstVisibleRow = this.refs.editor.getFirstVisibleRow()
     this.setState({
-      status: PREVIEW_MODE
+      status: PREVIEW_MODE,
+      cursorPosition,
+      firstVisibleRow
+    }, function () {
+      let previewEl = ReactDOM.findDOMNode(this.refs.preview)
+      let anchors = previewEl.querySelectorAll('.lineAnchor')
+      for (let i = 0; i < anchors.length; i++) {
+        if (parseInt(anchors[i].dataset.key, 10) > cursorPosition.row || i === anchors.length - 1) {
+          var targetAnchor = anchors[i > 0 ? i - 1 : 0]
+          previewEl.scrollTop = targetAnchor.offsetTop - 100
+          break
+        }
+      }
     })
   }
 
   switchEditMode () {
     this.setState({
       status: EDIT_MODE
     }, function () {
+      if (this.state.cursorPosition != null) {
+        this.refs.editor.moveCursorTo(this.state.cursorPosition.row, this.state.cursorPosition.column)
+        this.refs.editor.scrollToLine(this.state.firstVisibleRow)
+      }
       this.refs.editor.editor.focus()
     })
   }
@@ -61,6 +88,7 @@ export default class ArticleEditor extends React.Component {
       return (
         <div className='ArticleEditor'>
           <MarkdownPreview
+            ref='preview'
             onMouseUp={e => this.handlePreviewMouseUp(e)}
             onMouseDown={e => this.handlePreviewMouseDown(e)}
             onMouseMove={e => this.handlePreviewMouseMove(e)}
@@ -73,7 +101,8 @@ export default class ArticleEditor extends React.Component {
 
     return (
       <div className='ArticleEditor'>
-        <CodeEditor ref='editor'
+        <CodeEditor
+          ref='editor'
           onBlur={e => this.handleBlurCodeEditor(e)}
           onChange={this.props.onChange}
           mode={this.props.mode}

browser/main/HomePage/ArticleDetail/index.js

@@ -164,6 +164,12 @@ export default class ArticleDetail extends React.Component {
     this.setState(nextState)
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (this.props.activeArticle == null || prevProps.activeArticle == null || this.props.activeArticle.key !== prevProps.activeArticle.key) {
+      this.refs.editor.resetCursorPosition()
+    }
+  }
+
   editArticle () {
     ReactDOM.findDOMNode(this.refs.title).focus()
     ReactDOM.findDOMNode(this.refs.title).select()