enhance Editor UX again

browser/components/ModeSelect.js

@@ -95,10 +95,9 @@ export default class ModeSelect extends React.Component {
         break
       // esc
       case 27:
-        e.preventDefault()
+      case 9:
         e.stopPropagation()
-        this.handleBlur()
+        this.setIdle()
-        break
     }
     if (this.props.onKeyDown) this.props.onKeyDown(e)
   }

browser/main/HomePage/ArticleDetail/index.js

@@ -94,13 +94,13 @@ export default class ArticleDetail extends React.Component {
     }
     this.titleHandler = e => {
       if (isModalOpen()) return true
-      let titleEl = ReactDOM.findDOMNode(this.refs.title)
+      if (this.refs.title) {
-      titleEl.focus()
+        this.focusTitle()
-      titleEl.select()
+      }
     }
     this.editHandler = e => {
       if (isModalOpen()) return true
-      this.refs.editor.switchEditMode()
+      if (this.refs.editor) this.refs.editor.switchEditMode()
     }
 
     this.state = {
@@ -136,11 +136,10 @@ export default class ArticleDetail extends React.Component {
     if (this.props.activeArticle == null || prevProps.activeArticle == null || this.props.activeArticle.key !== prevProps.activeArticle.key) {
       if (this.refs.editor) this.refs.editor.resetCursorPosition()
     }
-  }
 
-  editArticle () {
+    if (prevProps.activeArticle == null && this.props.activeArticle) {
-    ReactDOM.findDOMNode(this.refs.title).focus()
+
-    ReactDOM.findDOMNode(this.refs.title).select()
+    }
   }
 
   renderEmpty () {
@@ -233,9 +232,14 @@ export default class ArticleDetail extends React.Component {
       e.preventDefault()
       this.switchEditMode()
     }
+
     if (e.keyCode === 9 && e.shiftKey) {
       e.preventDefault()
-      ReactDOM.findDOMNode(this.refs.title).focus()
+      this.focusTitle()
+    }
+
+    if (e.keyCode === 27) {
+      this.focusTitle()
     }
   }
 
@@ -243,6 +247,14 @@ export default class ArticleDetail extends React.Component {
     this.refs.editor.switchEditMode()
   }
 
+  focusTitle () {
+    if (this.refs.title) {
+      let titleEl = ReactDOM.findDOMNode(this.refs.title)
+      titleEl.focus()
+      titleEl.select()
+    }
+  }
+
   render () {
     let { folders, status, tags, activeArticle, modified, user } = this.props
     if (activeArticle == null) return this.renderEmpty()

browser/main/HomePage/ArticleTopBar.js

@@ -125,7 +125,6 @@ export default class ArticleTopBar extends React.Component {
   }
 
   focusInput () {
-    console.log('focinp')
     this.searchInput.focus()
   }
 
@@ -167,7 +166,7 @@ export default class ArticleTopBar extends React.Component {
 
     dispatch(saveArticle(newArticle.key, newArticle, true))
     if (isFolderFilterApplied) dispatch(switchFolder(targetFolders[0].name))
-    remote.getCurrentWebContents().send('detail-edit')
+    remote.getCurrentWebContents().send('detail-title')
   }
 
   handleTutorialButtonClick (e) {