add tag autocomplete

browser/main/Detail/MarkdownNoteDetail.js

@@ -363,6 +363,7 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          data={data}
           onChange={this.handleUpdateTag.bind(this)}
         />
         <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />

browser/main/Detail/NoteDetailInfo.styl

@@ -13,6 +13,7 @@ $info-margin-under-border = 30px
   display flex
   align-items center
   padding 0 20px
+  z-index 99
 
 .info-left
   padding 0 10px

browser/main/Detail/TagSelect.js

@@ -20,6 +20,12 @@ class TagSelect extends React.Component {
   componentDidMount () {
     this.value = this.props.value
     ee.on('editor:add-tag', this.addtagHandler)
+    
+    new Awesomplete(this.refs.newTag, {
+      minChars: 1,
+      autoFirst: true,
+      list: '#datalist'
+    })
   }
 
   componentDidUpdate () {
@@ -119,7 +125,7 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className } = this.props
+    const { value, className, data } = this.props
 
     const tagList = _.isArray(value)
       ? value.map((tag) => {
@@ -137,6 +143,14 @@ class TagSelect extends React.Component {
         )
       })
       : []
+    
+    const datalist = _.sortBy(data.tagNoteMap.map(
+      (tag, name) => ({ name, size: tag.size })
+    ).filter(
+      tag => tag.size > 0
+    ), ['name']).map(
+      tag => <li>{tag.name}</li>
+    )
 
     return (
       <div className={_.isString(className)
@@ -154,6 +168,9 @@ class TagSelect extends React.Component {
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
           onBlur={(e) => this.handleNewTagBlur(e)}
         />
+        <ul id='datalist' styleName='datalist'>
+          {datalist}
+        </ul>
       </div>
     )
   }

browser/main/Detail/TagSelect.styl

@@ -50,6 +50,9 @@
   padding 0 4px
   font-size 13px
 
+.datalist
+  display none
+
 body[data-theme="dark"]
   .tag
     background-color alpha($ui-dark-tag-backgroundColor, 60%)

browser/main/global.styl

@@ -156,3 +156,5 @@ body[data-theme="monokai"]
 body[data-theme="default"]
   .SideNav ::-webkit-scrollbar-thumb
     background-color rgba(255, 255, 255, 0.3)
+
+@import '../styles/awesomplete.styl'