Add tag link handling with :tag:#tag syntax

browser/components/MarkdownPreview.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { connect } from 'react-redux'
 import Markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
@@ -20,6 +21,7 @@ import { escapeHtmlCharacters } from 'browser/lib/utils'
 import yaml from 'js-yaml'
 import { render } from 'react-dom'
 import Carousel from 'react-image-carousel'
+import { push } from 'connected-react-router'
 import ConfigManager from '../main/lib/ConfigManager'
 import uiThemes from 'browser/lib/ui-themes'
 import i18n from 'browser/lib/i18n'
@@ -239,7 +241,7 @@ function getSourceLineNumberByElement(element) {
   return parent.dataset.line !== undefined ? parseInt(parent.dataset.line) : -1
 }
 
-export default class MarkdownPreview extends React.Component {
+class MarkdownPreview extends React.Component {
   constructor(props) {
     super(props)
 
@@ -1103,13 +1105,16 @@ export default class MarkdownPreview extends React.Component {
     e.stopPropagation()
 
     const rawHref = e.target.getAttribute('href')
+    const { dispatch } = this.props
     if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
 
     const parser = document.createElement('a')
     parser.href = rawHref
     const isStartWithHash = rawHref[0] === '#'
     const { href, hash } = parser
 
+    if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
+
     const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
 
     const extractIdRegex = /file:\/\/.*main.?\w*.html#/ // file://path/to/main(.development.)html
@@ -1156,6 +1161,13 @@ export default class MarkdownPreview extends React.Component {
       return
     }
 
+    const regexIsTagLink = /^:tag:([\w]+)$/
+    if (regexIsTagLink.test(rawHref)) {
+      const tag = rawHref.match(regexIsTagLink)[1]
+      dispatch(push(`/tags/${encodeURIComponent(tag)}`))
+      return
+    }
+
     // other case
     this.openExternal(href)
   }
@@ -1200,3 +1212,5 @@ MarkdownPreview.propTypes = {
   smartArrows: PropTypes.bool,
   breaks: PropTypes.bool
 }
+
+export default connect()(MarkdownPreview)

extra_scripts/codemirror/addon/hyperlink/hyperlink.js

@@ -16,7 +16,7 @@
   const modifier = macOS ? 'metaKey' : 'ctrlKey'
 
   class HyperLink {
-    constructor(cm) {
+    constructor (cm) {
       this.cm = cm
       this.lineDiv = cm.display.lineDiv
 
@@ -47,7 +47,7 @@
         passive: true
       })
     }
-    getUrl(el) {
+    getUrl (el) {
       const className = el.className.split(' ')
 
       if (className.indexOf('cm-url') !== -1) {
@@ -60,7 +60,7 @@
 
       return null
     }
-    onMouseDown(e) {
+    onMouseDown (e) {
       const { target } = e
       if (!e[modifier]) {
         return
@@ -73,39 +73,37 @@
         shell.openExternal(url)
       }
     }
-    onMouseEnter(e) {
+    onMouseEnter (e) {
       const { target } = e
 
       const url = this.getUrl(target)
       if (url) {
         if (e[modifier]) {
           target.classList.add('CodeMirror-activeline-background', 'CodeMirror-hyperlink')
-        }
-        else {
+        } else {
           target.classList.add('CodeMirror-activeline-background')
         }
 
         this.showInfo(target)
       }
     }
-    onMouseLeave(e) {
+    onMouseLeave (e) {
       if (this.tooltip.parentElement === this.lineDiv) {
         e.target.classList.remove('CodeMirror-activeline-background', 'CodeMirror-hyperlink')
 
         this.lineDiv.removeChild(this.tooltip)
       }
     }
-    onMouseMove(e) {
+    onMouseMove (e) {
       if (this.tooltip.parentElement === this.lineDiv) {
         if (e[modifier]) {
           e.target.classList.add('CodeMirror-hyperlink')
-        }
-        else {
+        } else {
           e.target.classList.remove('CodeMirror-hyperlink')
         }
       }
     }
-    showInfo(relatedTo) {
+    showInfo (relatedTo) {
       const b1 = relatedTo.getBoundingClientRect()
       const b2 = this.lineDiv.getBoundingClientRect()
       const tdiv = this.tooltip
@@ -117,8 +115,7 @@
       const top = b1.top - b2.top - b3.height - yOffset
       if (top < 0) {
         tdiv.style.top = (b1.top - b2.top + b1.height + yOffset) + 'px'
-      }
-      else {
+      } else {
         tdiv.style.top = top + 'px'
       }
     }
@@ -127,4 +124,4 @@
   CodeMirror.defineOption('hyperlink', true, (cm) => {
     const addon = new HyperLink(cm)
   })
-})
+})