Merge pull request #2592 from enyaxu/bug-2581

Fixed duplicate TOC Title jump error

browser/lib/markdown-toc-generator.js

@@ -5,6 +5,7 @@
 import toc from 'markdown-toc'
 import diacritics from 'diacritics-map'
 import stripColor from 'strip-color'
+import mdlink from 'markdown-link'
 
 const EOL = require('os').EOL
 
@@ -42,6 +43,12 @@ function caseSensitiveSlugify (str) {
   return str
 }
 
+function linkify (tok, text, slug, opts) {
+  var uniqeID = opts.num === 0 ? '' : '-' + opts.num
+  tok.content = mdlink(text, '#' + slug + uniqeID)
+  return tok
+}
+
 const TOC_MARKER_START = '<!-- toc -->'
 const TOC_MARKER_END = '<!-- tocstop -->'
 
@@ -84,7 +91,7 @@ export function generateInEditor (editor) {
  * @returns generatedTOC String containing generated TOC
  */
 export function generate (markdownText) {
-  const generatedToc = toc(markdownText, {slugify: caseSensitiveSlugify})
+  const generatedToc = toc(markdownText, {slugify: caseSensitiveSlugify, linkify: linkify})
   return TOC_MARKER_START + EOL + EOL + generatedToc.content + EOL + EOL + TOC_MARKER_END
 }
 

browser/lib/markdown.js

@@ -7,7 +7,7 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
 import { lastFindInArray } from './utils'
-import ee from 'browser/main/lib/eventEmitter'
+import anchor from '@enyaxu/markdown-it-anchor'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -118,12 +118,13 @@ class Markdown {
     this.md.use(require('markdown-it-imsize'))
     this.md.use(require('markdown-it-footnote'))
     this.md.use(require('markdown-it-multimd-table'))
-    this.md.use(require('markdown-it-named-headers'), {
-      slugify: (header) => {
-        return encodeURI(header.trim()
+    this.md.use(anchor, {
+      slugify: (title) => {
+        var slug = encodeURI(title.trim()
           .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
           .replace(/\s+/g, '-'))
           .replace(/\-+$/, '')
+        return slug
       }
     })
     this.md.use(require('markdown-it-kbd'))

package.json

@@ -48,6 +48,7 @@
   },
   "homepage": "https://boostnote.io",
   "dependencies": {
+    "@enyaxu/markdown-it-anchor": "^5.0.2",
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
     "@susisu/mte-kernel": "^2.0.0",
@@ -81,7 +82,6 @@
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-kbd": "^1.1.1",
     "markdown-it-multimd-table": "^2.0.1",
-    "markdown-it-named-headers": "^0.0.4",
     "markdown-it-plantuml": "^1.1.0",
     "markdown-it-smartarrows": "^1.0.1",
     "markdown-it-sub": "^1.0.0",
@@ -105,11 +105,11 @@
     "sander": "^0.5.1",
     "sanitize-html": "^1.18.2",
     "striptags": "^2.2.1",
+    "turndown": "^4.0.2",
+    "turndown-plugin-gfm": "^1.0.2",
     "typo-js": "^1.0.3",
     "unique-slug": "2.0.0",
-    "uuid": "^3.2.1",
-    "turndown":"^4.0.2",
-    "turndown-plugin-gfm":"^1.0.2"
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "ava": "^0.25.0",

tests/lib/snapshots/markdown-test.js.md

@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<h2 data-line="1" id="abbr">abbr</h2>␊
+    `<h2 id="abbr" data-line="1">abbr</h2>␊
     <p data-line="3">The <abbr title="Hyper Text Markup Language">HTML</abbr> specification<br />␊
     is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>␊
     `
@@ -67,8 +67,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<h2 data-line="1" id="definition-list">definition list</h2>␊
-    <h3 data-line="3" id="list-1">list 1</h3>␊
+    `<h2 id="definition-list" data-line="1">definition list</h2>␊
+    <h3 id="list-1" data-line="3">list 1</h3>␊
     <dl>␊
     <dt data-line="5">Term 1</dt>␊
     <dd data-line="6">Definition 1</dd>␊
@@ -78,7 +78,7 @@ Generated by [AVA](https://ava.li).
     </dl>␊
     <p data-line="12">Term 3<br />␊
     ~</p>␊
-    <h3 data-line="16" id="list-2">list 2</h3>␊
+    <h3 id="list-2" data-line="16">list 2</h3>␊
     <dl>␊
     <dt data-line="18">Term 1</dt>␊
     <dd data-line="20">␊
@@ -98,10 +98,10 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<h1 data-line="1" id="Welcome-to-Boostnote">Welcome to Boostnote!</h1>␊
-    <h2 data-line="2" id="Click-here-to-edit-markdown-%F0%9F%91%8B">Click here to edit markdown 👋</h2>␊
+    `<h1 id="Welcome-to-Boostnote" data-line="1">Welcome to Boostnote!</h1>␊
+    <h2 id="Click-here-to-edit-markdown" data-line="2">Click here to edit markdown 👋</h2>␊
     <iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>␊
-    <h2 data-line="6" id="Docs-%F0%9F%93%9D">Docs 📝</h2>␊
+    <h2 id="Docs" data-line="6">Docs 📝</h2>␊
     <ul>␊
     <li data-line="7"><a href="https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe">Boostnote | Boost your happiness, productivity and creativity.</a></li>␊
     <li data-line="8"><a href="https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup">Cloud Syncing &amp; Backups</a></li>␊
@@ -112,7 +112,7 @@ Generated by [AVA](https://ava.li).
     <li data-line="13"><a href="https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting">How to set syntax highlight in Snippet note</a></li>␊
     </ul>␊
     <hr />␊
-    <h2 data-line="17" id="Article-Archive-%F0%9F%93%9A">Article Archive 📚</h2>␊
+    <h2 id="Article-Archive" data-line="17">Article Archive 📚</h2>␊
     <ul>␊
     <li data-line="18"><a href="http://bit.ly/2mOJPu7">Reddit English</a></li>␊
     <li data-line="19"><a href="https://www.reddit.com/r/boostnote_es/">Reddit Spanish</a></li>␊
@@ -120,7 +120,7 @@ Generated by [AVA](https://ava.li).
     <li data-line="21"><a href="https://www.reddit.com/r/boostnote_jp/">Reddit Japanese</a></li>␊
     </ul>␊
     <hr />␊
-    <h2 data-line="25" id="Community-%F0%9F%8D%BB">Community 🍻</h2>␊
+    <h2 id="Community" data-line="25">Community 🍻</h2>␊
     <ul>␊
     <li data-line="26"><a href="http://bit.ly/2AWWzkD">GitHub</a></li>␊
     <li data-line="27"><a href="http://bit.ly/2z8BUJZ">Twitter</a></li>␊
@@ -132,7 +132,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<h2 data-line="1" id="sub">sub</h2>␊
+    `<h2 id="sub" data-line="1">sub</h2>␊
     <p data-line="3">H<sub>2</sub>0</p>␊
     `
 
@@ -140,7 +140,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<h2 data-line="1" id="sup">sup</h2>␊
+    `<h2 id="sup" data-line="1">sup</h2>␊
     <p data-line="3">29<sup>th</sup></p>␊
     `
 

yarn.lock

@@ -58,6 +58,11 @@
   dependencies:
     arrify "^1.0.1"
 
+"@enyaxu/markdown-it-anchor@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@enyaxu/markdown-it-anchor/-/markdown-it-anchor-5.0.2.tgz#d173f7b60b492aabc17dfba864c4d071f5595f72"
+  integrity sha512-HBQ+by3IFHh2i5nw8fzn9qrdA+6uwzre68EzHpBX/WrwgnKrfvckPzdi7MphKp2C617edfpeibucslHDNPYkvQ==
+
 "@ladjs/time-require@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@ladjs/time-require/-/time-require-0.1.4.tgz#5c615d75fd647ddd5de9cf6922649558856b21a1"
@@ -5878,12 +5883,6 @@ markdown-it-multimd-table@^2.0.1:
   dependencies:
     markdown-it "^5.0.3"
 
-markdown-it-named-headers@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-it-named-headers/-/markdown-it-named-headers-0.0.4.tgz#82efc28324240a6b1e77b9aae501771d5f351c1f"
-  dependencies:
-    string "^3.0.1"
-
 markdown-it-plantuml@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it-plantuml/-/markdown-it-plantuml-1.1.0.tgz#9ab8bfa09a02d80845e16e60f87a488edb50fdde"
@@ -8454,10 +8453,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string@^3.0.1:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/string/-/string-3.3.3.tgz#5ea211cd92d228e184294990a6cc97b366a77cb0"
-
 string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"