enhance editor UX

Author: Rokt33r

browser/components/ModeSelect.js

@@ -43,7 +43,6 @@ export default class ModeSelect extends React.Component {
   }
 
   handleModeOptionClick (modeName) {
-    console.log(modeName)
     return e => {
       this.props.onChange(modeName)
       this.setState({
@@ -90,7 +89,7 @@ export default class ModeSelect extends React.Component {
           let targetMode = filteredModes[this.state.focusIndex]
           if (targetMode != null) {
             this.props.onChange(targetMode.name)
-            this.handleBlur()
+            this.setIdle()
           }
         }
         break
@@ -113,16 +112,18 @@ export default class ModeSelect extends React.Component {
 
   handleBlur (e) {
     if (e.target !== ReactDOM.findDOMNode(this.refs.search)) {
-      this.setState({
-        mode: IDLE_MODE,
-        search: '',
-        focusIndex: 0
-      }, function () {
-        if (this.props.onBlur) this.props.onBlur()
-      })
+      this.setIdle()
     }
   }
 
+  setIdle () {
+    this.setState({
+      mode: IDLE_MODE,
+      search: '',
+      focusIndex: 0
+    })
+  }
+
   render () {
     let className = this.props.className != null
       ? `ModeSelect ${this.props.className}`
@@ -168,6 +169,5 @@ ModeSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onBlur: PropTypes.func
+  onKeyDown: PropTypes.func
 }

browser/main/HomePage/ArticleDetail/index.js

@@ -92,6 +92,12 @@ export default class ArticleDetail extends React.Component {
       if (isModalOpen()) return true
       this.handleUncache()
     }
+    this.titleHandler = e => {
+      if (isModalOpen()) return true
+      let titleEl = ReactDOM.findDOMNode(this.refs.title)
+      titleEl.focus()
+      titleEl.select()
+    }
     this.editHandler = e => {
       if (isModalOpen()) return true
       this.refs.editor.switchEditMode()
@@ -112,6 +118,7 @@ export default class ArticleDetail extends React.Component {
     // ipc.on('detail-save', this.saveHandler)
     ipc.on('detail-delete', this.deleteHandler)
     ipc.on('detail-uncache', this.uncacheHandler)
+    ipc.on('detail-title', this.titleHandler)
     ipc.on('detail-edit', this.editHandler)
   }
 
@@ -121,6 +128,7 @@ export default class ArticleDetail extends React.Component {
     // ipc.removeListener('detail-save', this.saveHandler)
     ipc.removeListener('detail-delete', this.deleteHandler)
     ipc.removeListener('detail-uncache', this.uncacheHandler)
+    ipc.removeListener('detail-title', this.titleHandler)
     ipc.removeListener('detail-edit', this.editHandler)
   }
 
@@ -192,6 +200,7 @@ export default class ArticleDetail extends React.Component {
     })
 
     dispatch(updateArticle(article))
+    this.switchEditMode()
   }
 
   handleContentChange (value) {
@@ -222,14 +231,18 @@ export default class ArticleDetail extends React.Component {
   handleModeSelectKeyDown (e) {
     if (e.keyCode === 9 && !e.shiftKey) {
       e.preventDefault()
-      this.refs.editor.switchEditMode()
+      this.switchEditMode()
     }
     if (e.keyCode === 9 && e.shiftKey) {
       e.preventDefault()
       ReactDOM.findDOMNode(this.refs.title).focus()
     }
   }
 
+  switchEditMode () {
+    this.refs.editor.switchEditMode()
+  }
+
   render () {
     let { folders, status, tags, activeArticle, modified, user } = this.props
     if (activeArticle == null) return this.renderEmpty()

browser/main/HomePage/ArticleList.js

@@ -21,6 +21,7 @@ export default class ArticleList extends React.Component {
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
     ipc.on('list-focus', this.focusHandler)
+    this.focus()
   }
 
   componentWillUnmount () {
@@ -102,6 +103,11 @@ export default class ArticleList extends React.Component {
       remote.getCurrentWebContents().send('detail-delete')
     }
 
+    if (e.keyCode === 84) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-title')
+    }
+
     if (e.keyCode === 69) {
       e.preventDefault()
       remote.getCurrentWebContents().send('detail-edit')