foot note

browser/components/MarkdownPreview.js

@@ -5,11 +5,6 @@ import hljsTheme from 'browser/lib/hljsThemes'
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
-const goExternal = function (e) {
-  e.preventDefault()
-  e.stopPropagation()
-  shell.openExternal(e.target.href)
-}
 
 const OSX = global.process.platform === 'darwin'
 
@@ -27,6 +22,22 @@ export default class MarkdownPreview extends React.Component {
     this.contextMenuHandler = (e) => this.handleContextMenu(e)
     this.mouseDownHandler = (e) => this.handleMouseDown(e)
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
+    this.goExternalHandler = (e) => this.handlePreviewAnchorClick(e)
+  }
+
+  handlePreviewAnchorClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    let href = e.target.getAttribute('href')
+    if (_.isString(href) && href.match(/^#/)) {
+      let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+    } else {
+      shell.openExternal(e.target.href)
+    }
   }
 
   handleContextMenu (e) {
@@ -34,10 +45,16 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleMouseDown (e) {
+    if (e.target != null && e.target.tagName === 'A') {
+      return null
+    }
     if (this.props.onMouseDown != null) this.props.onMouseDown(e)
   }
 
   handleMouseUp (e) {
+    if (e.target != null && e.target.tagName === 'A') {
+      return null
+    }
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
@@ -68,7 +85,7 @@ export default class MarkdownPreview extends React.Component {
 
   rewriteIframe () {
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', goExternal)
+      el.removeEventListener('click', this.goExternalHandler)
     })
 
     let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
@@ -111,7 +128,7 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
 
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.addEventListener('mousedown', goExternal)
+      el.addEventListener('click', this.goExternalHandler)
     })
   }
 
@@ -147,6 +164,7 @@ export default class MarkdownPreview extends React.Component {
         style={style}
         tabIndex={tabIndex}
         ref='root'
+        onClick={(e) => this.handleClick(e)}
       />
     )
   }

browser/lib/markdown.js

@@ -60,6 +60,7 @@ md.use(math, {
   }
 })
 md.use(require('markdown-it-checkbox'))
+md.use(require('markdown-it-footnote'))
 
 let originalRenderToken = md.renderer.renderToken
 md.renderer.renderToken = function renderToken (tokens, idx, options) {

package.json

@@ -48,6 +48,7 @@
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
+    "markdown-it-footnote": "^3.0.0",
     "md5": "^2.0.0",
     "moment": "^2.10.3",
     "sander": "^0.5.1",