One-click to edit

browser/main/HomePage/ArticleDetail/ArticleEditor.js

@@ -0,0 +1,91 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import CodeEditor from 'browser/components/CodeEditor'
+
+export const PREVIEW_MODE = 'PREVIEW_MODE'
+export const EDIT_MODE = 'EDIT_MODE'
+
+export default class ArticleEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    this.isMouseDown = false
+    this.state = {
+      status: PREVIEW_MODE
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+  }
+
+  switchPreviewMode () {
+    this.setState({
+      status: PREVIEW_MODE
+    })
+  }
+
+  switchEditMode () {
+    this.setState({
+      status: EDIT_MODE
+    }, function () {
+      this.refs.editor.editor.focus()
+    })
+  }
+
+  handlePreviewMouseDown (e) {
+    if (e.button === 2) return true
+    this.isDrag = false
+    this.isMouseDown = true
+  }
+
+  handlePreviewMouseMove () {
+    if (this.isMouseDown) this.isDrag = true
+  }
+
+  handlePreviewMouseUp () {
+    this.isMouseDown = false
+    if (!this.isDrag) {
+      this.switchEditMode()
+    }
+  }
+
+  handleBlurCodeEditor () {
+    if (this.props.mode === 'markdown') {
+      this.switchPreviewMode()
+    }
+  }
+
+  render () {
+    if (this.props.mode === 'markdown' && this.state.status === PREVIEW_MODE) {
+      return (
+        <div className='ArticleEditor'>
+          <MarkdownPreview
+            onMouseUp={e => this.handlePreviewMouseUp(e)}
+            onMouseDown={e => this.handlePreviewMouseDown(e)}
+            onMouseMove={e => this.handlePreviewMouseMove(e)}
+            content={this.props.content}
+          />
+          <div className='ArticleDetail-panel-content-tooltip'>Click to Edit</div>
+        </div>
+      )
+    }
+
+    return (
+      <div className='ArticleEditor'>
+        <CodeEditor ref='editor'
+          onBlur={e => this.handleBlurCodeEditor(e)}
+          onChange={this.props.onChange}
+          mode={this.props.mode}
+          code={this.props.content}
+        />
+        <div className='ArticleDetail-panel-content-tooltip'>Press ESC to watch Preview</div>
+      </div>
+    )
+  }
+}
+
+ArticleEditor.propTypes = {
+  content: PropTypes.string,
+  mode: PropTypes.string,
+  onChange: PropTypes.func
+}

browser/main/HomePage/ArticleDetail/index.js

@@ -2,8 +2,6 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import moment from 'moment'
 import _ from 'lodash'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import CodeEditor from 'browser/components/CodeEditor'
 import {
   switchFolder,
   cacheArticle,
@@ -16,7 +14,7 @@ import ModeSelect from 'browser/components/ModeSelect'
 import ShareButton from './ShareButton'
 import { openModal, isModalOpen } from 'browser/lib/modal'
 import DeleteArticleModal from '../../modal/DeleteArticleModal'
-
+import ArticleEditor from './ArticleEditor'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const remote = electron.remote
@@ -275,9 +273,7 @@ export default class ArticleDetail extends React.Component {
   handleModeSelectKeyDown (e) {
     if (e.keyCode === 9 && !e.shiftKey) {
       e.preventDefault()
-      this.setState({previewMode: false}, function () {
-        this.refs.code.editor.focus()
-      })
+      this.refs.editor.switchEditMode()
     }
     if (e.keyCode === 9 && e.shiftKey) {
       e.preventDefault()
@@ -285,14 +281,6 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
-  handlePreviewDoubleClick (e) {
-    this.setState({
-      previewMode: false
-    }, function () {
-      this.refs.code.editor.focus()
-    })
-  }
-
   render () {
     let { folders, status, tags, activeArticle, modified, user } = this.props
     if (activeArticle == null) return this.renderEmpty()
@@ -369,27 +357,12 @@ export default class ArticleDetail extends React.Component {
             />
           </div>
           {status.isTutorialOpen ? modeSelectTutorialElement : null}
-          <div className='ArticleDetail-panel-content'>
-            {this.state.article.mode === 'markdown' && this.state.previewMode
-              ? (<MarkdownPreview
-                  ref='preview'
-                  onDoubleClick={e => this.handlePreviewDoubleClick(e)}
-                  content={this.state.article.content}
-                />)
-              : (<CodeEditor
-                  ref='code'
-                  onChange={(e, value) => this.handleContentChange(e, value)}
-                  onBlur={e => this.handleCodeEditorBlur(e)}
-                  readOnly={false}
-                  mode={this.state.article.mode}
-                  code={this.state.article.content}
-                />)}
-            {
-              this.state.article.mode === 'markdown' && this.state.previewMode
-              ? <div className='ArticleDetail-panel-content-tooltip'>Double click to edit post</div>
-              : null
-            }
-          </div>
+          <ArticleEditor
+            ref='editor'
+            content={this.state.article.content}
+            mode={this.state.article.mode}
+            onChange={(e, content) => this.handleContentChange(e, content)}
+          />
         </div>
       </div>
     )