Add a feature which enables to link between notes

browser/components/MarkdownPreview.js

@@ -108,6 +108,8 @@ export default class MarkdownPreview extends React.Component {
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
+
+    this.linkClickHandler = this.handlelinkClick.bind(this)
   }
 
   handlePreviewAnchorClick (e) {
@@ -249,6 +251,11 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.checkboxClickHandler)
     })
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.linkClickHandler)
+    })
+
+
     let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
@@ -273,6 +280,10 @@ export default class MarkdownPreview extends React.Component {
       el.addEventListener('click', this.checkboxClickHandler)
     })
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.linkClickHandler)
+    })
+
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
@@ -373,6 +384,14 @@ export default class MarkdownPreview extends React.Component {
     return new window.Notification(title, options)
   }
 
+  handlelinkClick (e) {
+    const noteHash = e.target.hash
+    const regexIsNoteLink = /^#(.{20})-(.{20})$/
+    if (regexIsNoteLink.test(noteHash)) {
+      eventEmitter.emit('list:jump', noteHash.replace(/^#/, ''))
+    }
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/main/NoteList/index.js

@@ -47,6 +47,7 @@ class NoteList extends React.Component {
       this.alertIfSnippet()
     }
     this.importFromFileHandler = this.importFromFile.bind(this)
+    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
 
     this.jumpToTopHandler = () => {
       this.jumpToTop()
@@ -65,6 +66,7 @@ class NoteList extends React.Component {
     ee.on('list:top', this.jumpToTopHandler)
     ee.on('list:jumpToTop', this.jumpToTopHandler)
     ee.on('import:file', this.importFromFileHandler)
+    ee.on('list:jump', this.jumpNoteByHash)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -87,6 +89,7 @@ class NoteList extends React.Component {
     ee.off('list:top', this.jumpToTopHandler)
     ee.off('list:jumpToTop', this.jumpToTopHandler)
     ee.off('import:file', this.importFromFileHandler)
+    ee.off('list:jump', this.jumpNoteByHash)
   }
 
   componentDidUpdate (prevProps) {
@@ -179,6 +182,32 @@ class NoteList extends React.Component {
     ee.emit('list:moved')
   }
 
+  jumpNoteByHashHandler (event, noteHash) {
+    // first argument event isn't used.
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+
+    const { router } = this.context
+    const { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      console.log(note.storage+'-'+note.key)
+      return note.storage + '-' + note.key === noteHash
+    })
+
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+
+    ee.emit('list:moved')
+  }
+
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 

browser/main/StatusBar/StatusBar.styl

@@ -35,6 +35,13 @@
 .update-icon
   color $brand-color
 
+.note-hash
+  display inline
+  line-height 24px
+  padding-left 5px
+  font-size 11px
+  color $ui-button-color
+
 body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor

browser/main/StatusBar/index.js

@@ -48,6 +48,7 @@ class StatusBar extends React.Component {
 
   render () {
     let { config, status } = this.context
+    const { location } = this.props
 
     return (
       <div className='StatusBar'
@@ -60,6 +61,7 @@ class StatusBar extends React.Component {
           {Math.floor(config.zoom * 100)}%
         </button>
 
+        <div styleName='note-hash'>#{location.query.key}</div>
         <div styleName='blank' />
 
         {status.updateReady