add right click to switch edit/preview option to app settings

browser/components/CodeEditor.js

@@ -191,8 +191,8 @@ CodeEditor.propTypes = {
     key: PropTypes.string
   }),
   className: PropTypes.string,
-  onChange: PropTypes.func,
   onBlur: PropTypes.func,
+  onChange: PropTypes.func,
   readOnly: PropTypes.bool
 }
 

browser/main/HomePage/ArticleDetail/ArticleEditor.js

@@ -3,21 +3,42 @@ import ReactDOM from 'react-dom'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import CodeEditor from 'browser/components/CodeEditor'
 import activityRecord from 'browser/lib/activityRecord'
+import fetchConfig from 'browser/lib/fetchConfig'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
 
 export const PREVIEW_MODE = 'PREVIEW_MODE'
 export const EDIT_MODE = 'EDIT_MODE'
 
+let config = fetchConfig()
+ipc.on('config-apply', function (e, newConfig) {
+  config = newConfig
+})
+
 export default class ArticleEditor extends React.Component {
   constructor (props) {
     super(props)
+
+    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
     this.isMouseDown = false
     this.state = {
       status: PREVIEW_MODE,
       cursorPosition: null,
-      firstVisibleRow: null
+      firstVisibleRow: null,
+      switchPreview: config['switch-preview']
     }
   }
 
+  componentDidMount () {
+    console.log(this.state.switchPreview)
+    ipc.on('config-apply', this.configApplyHandler)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('config-apply', this.configApplyHandler)
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.article.key !== this.props.article.key) {
       this.setState({
@@ -26,6 +47,12 @@ export default class ArticleEditor extends React.Component {
     }
   }
 
+  handleConfigApply (e, newConfig) {
+    this.setState({
+      switchPreview: newConfig['switch-preview']
+    })
+  }
+
   resetCursorPosition () {
     this.setState({
       cursorPosition: null,
@@ -70,14 +97,15 @@ export default class ArticleEditor extends React.Component {
   }
 
   handlePreviewMouseDown (e) {
-    if (e.button === 2) return true
+    if (this.state.switchPreview === 'blur' && e.button === 0) {
       this.isDrag = false
       this.isMouseDown = true
       this.moveCount = 0
     }
+  }
 
   handlePreviewMouseMove () {
-    if (this.isMouseDown) {
+    if (this.state.switchPreview === 'blur' && this.isMouseDown) {
       this.moveCount++
       if (this.moveCount > 5) {
         this.isDrag = true
@@ -86,17 +114,32 @@ export default class ArticleEditor extends React.Component {
   }
 
   handlePreviewMouseUp (e) {
-    if (e.button === 2) return true
+    if (this.state.switchPreview === 'blur' && e.button === 0) {
       this.isMouseDown = false
       this.moveCount = 0
       if (!this.isDrag) {
         this.switchEditMode()
       }
     }
+  }
+
+  handleRightClickPreview (e) {
+    let { article } = this.props
+    if (this.state.switchPreview !== 'rightclick' || article.mode !== 'markdown') return true
+
+    this.switchEditMode()
+  }
+
+  handleRightClickCodeEditor (e) {
+    let { article } = this.props
+    if (this.state.switchPreview !== 'rightclick' || article.mode !== 'markdown') return true
+
+    this.switchPreviewMode()
+  }
 
   handleBlurCodeEditor (e) {
     let isFocusingToThis = e.relatedTarget === ReactDOM.findDOMNode(this)
-    if (isFocusingToThis) {
+    if (isFocusingToThis || this.state.switchPreview !== 'blur') {
       return
     }
 
@@ -115,7 +158,7 @@ export default class ArticleEditor extends React.Component {
     let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
     if (showPreview) {
       return (
-        <div className='ArticleEditor'>
+        <div onContextMenu={e => this.handleRightClickPreview(e)} className='ArticleEditor'>
           <MarkdownPreview
             ref='preview'
             onMouseUp={e => this.handlePreviewMouseUp(e)}
@@ -123,13 +166,18 @@ export default class ArticleEditor extends React.Component {
             onMouseMove={e => this.handlePreviewMouseMove(e)}
             content={article.content}
           />
-          <div className='ArticleDetail-panel-content-tooltip'>Click to Edit</div>
+          <div className='ArticleDetail-panel-content-tooltip' children={
+              this.state.switchPreview === 'blur'
+                ? 'Click to Edit'
+                : 'Right Click to Edit'
+            }
+          />
         </div>
       )
     }
 
     return (
-      <div tabIndex='5' className='ArticleEditor'>
+      <div onContextMenu={e => this.handleRightClickCodeEditor(e)} tabIndex='5' className='ArticleEditor'>
         <CodeEditor
           ref='editor'
           onBlur={e => this.handleBlurCodeEditor(e)}
@@ -138,7 +186,13 @@ export default class ArticleEditor extends React.Component {
         />
         {article.mode === 'markdown'
           ? (
-            <div className='ArticleDetail-panel-content-tooltip'>Press ESC to watch Preview</div>
+            <div className='ArticleDetail-panel-content-tooltip'
+              children={
+                this.state.switchPreview === 'blur'
+                  ? 'Press ESC to Watch Preview'
+                  : 'Right Click to Watch Preview'
+              }
+            />
           )
           : null
         }

browser/main/modal/Preference/AppSettingTab.js

@@ -138,9 +138,9 @@ export default class AppSettingTab extends React.Component {
             <label>Editor Font Family</label>
             <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
           </div>
-          <div className='sectionSelect'>
+          <div className='sectionMultiSelect'>
             <label>Editor Indent Style</label>
-            <div className='sectionSelect-input'>
+            <div className='sectionMultiSelect-input'>
               type
               <select valueLink={this.linkState('config.editor-indent-type')}>
                 <option value='space'>Space</option>
@@ -162,8 +162,15 @@ export default class AppSettingTab extends React.Component {
             <label>Preview Font Family</label>
             <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
           </div>
+          <div className='sectionSelect'>
+            <label>Switching Preview</label>
+            <select valueLink={this.linkState('config.switch-preview')}>
+              <option value='blur'>When Editor Blurred</option>
+              <option value='rightclick'>When Right Clicking</option>
+            </select>
+          </div>
           {
-            true// !OSX
+            global.process.platform === 'win32'
             ? (
               <div className='sectionCheck'>
                 <label><input onClick={e => this.handleDisableDirectWriteClick(e)} checked={this.state.config['disable-direct-write']} disabled={OSX} type='checkbox'/>Disable Direct Write<span className='sectionCheck-warn'>It will be applied after restarting</span></label>

browser/styles/main/modal/Preferences.styl

@@ -60,7 +60,7 @@ iptFocusBorderColor = #369DCD
     left 180px
     overflow-y auto
     &>.section
-      padding 10px
+      padding 10px 20px
       border-bottom 1px solid borderColor
       overflow-y auto
       &:nth-last-child(1)
@@ -102,7 +102,6 @@ iptFocusBorderColor = #369DCD
           &:focus
             border-color iptFocusBorderColor
       &>.sectionSelect
-
         margin-bottom 5px
         clearfix()
         height 33px
@@ -111,7 +110,28 @@ iptFocusBorderColor = #369DCD
           padding-left 15px
           float left
           line-height 33px
-        .sectionSelect-input
+        select
+          float left
+          width 200px
+          height 25px
+          margin-top 4px
+          border-radius 5px
+          border 1px solid borderColor
+          padding 0 10px
+          font-size 14px
+          outline none
+          &:focus
+            border-color iptFocusBorderColor
+      &>.sectionMultiSelect
+        margin-bottom 5px
+        clearfix()
+        height 33px
+        label
+          width 150px
+          padding-left 15px
+          float left
+          line-height 33px
+        .sectionMultiSelect-input
           float left
           select
             width 80px

lib/config.js

@@ -11,6 +11,7 @@ const defaultConfig = {
   'editor-indent-size': '4',
   'preview-font-size': '14',
   'preview-font-family': 'Lato',
+  'switch-preview': 'blur',
   'disable-direct-write': false
 }
 const configFile = 'config.json'