From 3105958afb881d606fe787b27e4050deaaab4f32 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 9 Jan 2016 23:17:33 +0900
Subject: [PATCH] enhance Editor UX again

---
 browser/components/ModeSelect.js             |  5 ++--
 browser/main/HomePage/ArticleDetail/index.js | 30 ++++++++++++++------
 browser/main/HomePage/ArticleTopBar.js       |  3 +-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/browser/components/ModeSelect.js b/browser/components/ModeSelect.js
index 3fd7735e..e8719b8d 100644
--- a/browser/components/ModeSelect.js
+++ b/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()
-        break
+        this.setIdle()
     }
     if (this.props.onKeyDown) this.props.onKeyDown(e)
   }
diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js
index cb75515a..32e8b56f 100644
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/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)
-      titleEl.focus()
-      titleEl.select()
+      if (this.refs.title) {
+        this.focusTitle()
+      }
     }
     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 () {
-    ReactDOM.findDOMNode(this.refs.title).focus()
-    ReactDOM.findDOMNode(this.refs.title).select()
+    if (prevProps.activeArticle == null && this.props.activeArticle) {
+
+    }
   }
 
   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()
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
index f2798064..0e59473e 100644
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/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) {