no more line anchors

Author: Rokt33r

browser/components/MarkdownPreview.js

@@ -141,11 +141,11 @@ export default class MarkdownPreview extends React.Component {
   }
 
   scrollTo (targetRow) {
-    let lineAnchors = this.getWindow().document.querySelectorAll('a.lineAnchor')
+    let lineAnchors = this.getWindow().document.querySelectorAll('[data-line]')
 
     for (let index = 0; index < lineAnchors.length; index++) {
       let lineAnchor = lineAnchors[index]
-      let row = parseInt(lineAnchor.getAttribute('data-key'))
+      let row = parseInt(lineAnchor.getAttribute('data-line'))
       if (row > targetRow) {
         let targetAnchor = lineAnchors[index - 1]
         targetAnchor != null && this.getWindow().scrollTo(0, targetAnchor.offsetTop)

browser/components/markdown.styl

@@ -102,13 +102,6 @@ a
     background-color alpha(#FFC95C, 0.3)
   &:visited
     color brandColor
-  &.lineAnchor
-    padding 0
-    margin 0
-    display inline-block
-    font-size 0
-    height 0
-    width 0
 hr
   border-top none
   border-bottom solid 1px borderColor
@@ -148,9 +141,6 @@ h6
   line-height 1.4em
   margin 1em 0 1em
   color #777
-
-*:not(a.lineAnchor) + p, *:not(a.lineAnchor) + blockquote, *:not(a.lineAnchor) + ul, *:not(a.lineAnchor) + ol, *:not(a.lineAnchor) + pre
-  margin-top 1em
 p
   line-height 1.6em
   margin 0 0 1em
@@ -196,8 +186,6 @@ code
   font-size 0.85em
   text-decoration none
   margin-right 2px
-*:not(a.lineAnchor) + code
-  margin-left 2px
 pre
   padding 0.5em !important
   border solid 1px alpha(borderColor, 0.5)

browser/lib/markdown.js

@@ -2,6 +2,7 @@ import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import hljs from 'highlight.js'
+import _ from 'lodash'
 
 const katex = window.katex
 
@@ -61,16 +62,24 @@ md.use(math, {
 })
 md.use(require('markdown-it-footnote'))
 
+let originalRender = md.renderer.render
+md.renderer.render = function render (tokens, options, env) {
+  tokens.forEach((token) => {
+    switch (token.type) {
+      case 'heading_open':
+      case 'paragraph_open':
+      case 'blockquote_open':
+      case 'table_open':
+        token.attrPush(['data-line', token.map[0]])
+    }
+  })
+  let result = originalRender.call(md.renderer, tokens, options, env)
+  return result
+}
 window.md = md
 
 export default function markdown (content) {
-  if (content == null) content = ''
-  content = content.toString()
-    .split('\n')
-    .map((line, index) => {
-      if (line.trim().length === 0) return ''
-      return line + '<a class=\'lineAnchor\' data-key=\'' + (index + 1) + '\'></a>'
-    })
-    .join('\n')
+  if (!_.isString(content)) content = ''
+
   return md.render(content)
 }