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,13 @@ class TagSelect extends React.Component {
   componentDidMount () {
     this.value = this.props.value
     ee.on('editor:add-tag', this.addtagHandler)
+
+    this.awesomplete = new Awesomplete(this.refs.newTag, {
+      minChars: 1,
+      autoFirst: true,
+      list: '#datalist',
+      filter: (text, input) => !_.includes(this.value, text.value) && Awesomplete.FILTER_CONTAINS(text, input)
+    })
   }
 
   componentDidUpdate () {
@@ -28,6 +35,8 @@ class TagSelect extends React.Component {
 
   componentWillUnmount () {
     ee.off('editor:add-tag', this.addtagHandler)
+
+    this.awesomplete.destroy()
   }
 
   handleAddTag () {
@@ -119,7 +128,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) => {
@@ -138,6 +147,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 key={tag.name}>{tag.name}</li>
+    )
+
     return (
       <div className={_.isString(className)
           ? 'TagSelect ' + className
@@ -154,6 +171,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'

browser/styles/awesomplete.styl

@@ -0,0 +1,117 @@
+.awesomplete
+  display inline-block
+  position relative
+
+  .visually-hidden
+    position absolute
+    clip rect(0, 0, 0, 0)
+
+  ul
+    position fixed
+    z-index 1
+    box-sizing border-box
+    list-style none
+    padding 0
+    margin 0
+
+    border-radius 4px
+    margin .2em 0 0
+    background-color $ui-noteList-backgroundColor
+    border 1px solid rgba(0,0,0,.3)
+    box-shadow .05em .2em .6em rgba(0,0,0,.2)
+    text-shadow none
+
+    &:empty,
+    &[hidden]
+      display none
+
+    &:before
+      content ""
+      position absolute
+      top -.43em
+      left 1em
+      width 0 height 0
+      padding .4em
+      background-color $ui-noteList-backgroundColor
+      border inherit
+      border-right 0
+      border-bottom 0
+      -webkit-transform rotate(45deg)
+      transform rotate(45deg)
+
+    li
+      position relative
+      padding 6px 18px 6px 10px
+      cursor pointer
+
+	  li:hover
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      color $ui-text-color
+
+	  li[aria-selected="true"]
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  mark
+    background-color rgba(255, 255, 0, 0.8)
+
+body[data-theme="dark"]
+  .awesomplete ul
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    color $ui-dark-text-color
+
+    &:before
+      background-color $ui-dark-noteList-backgroundColor
+
+    li:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+
+    li[aria-selected="true"]
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+
+body[data-theme="white"]
+  .awesomplete ul
+    background-color $ui-white-noteList-backgroundColor
+
+    li:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
+    li[aria-selected="true"]
+      background-color $ui-button--active-backgroundColor
+
+body[data-theme="solarized-dark"]
+  .awesomplete ul
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    color $ui-solarized-dark-text-color
+
+    &:before
+      background-color $ui-solarized-dark-noteList-backgroundColor
+
+    li:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+
+    li[aria-selected="true"]
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .awesomplete ul
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    color $ui-monokai-text-color
+
+    &:before
+      background-color $ui-dark-noteList-backgroundColor
+
+    li:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-monokai-text-color
+
+    li[aria-selected="true"]
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color

lib/main.html

@@ -118,6 +118,8 @@
   <script>
     window._ = require('lodash')
   </script>
+
+  <script src="../node_modules/awesomplete/awesomplete.min.js" async></script>
 
   <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
   <script src="../node_modules/react/dist/react.min.js"></script>

package.json

@@ -50,6 +50,7 @@
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
     "@susisu/mte-kernel": "^2.0.0",
+    "awesomplete": "^1.1.2",
     "aws-sdk": "^2.48.0",
     "aws-sdk-mobile-analytics": "^0.9.2",
     "chart.js": "^2.7.2",

yarn.lock

@@ -568,6 +568,10 @@ ava@^0.25.0:
     unique-temp-dir "^1.0.0"
     update-notifier "^2.3.0"
 
+awesomplete@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/awesomplete/-/awesomplete-1.1.2.tgz#b6e253f73474e46278bba5ae7f81d4262160fb75"
+
 aws-sdk-mobile-analytics@^0.9.2:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/aws-sdk-mobile-analytics/-/aws-sdk-mobile-analytics-0.9.2.tgz#b56a6e5206fc8c3975a19170b41536c53f6d5d91"