Merge pull request #3173 from hikerpig/feature/toc

Suppport auto generating toc content for the [TOC] tag

Author: Rokt33r

browser/lib/markdown.js

@@ -4,6 +4,7 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import mdurl from 'mdurl'
 import smartArrows from 'markdown-it-smartarrows'
+import markdownItTocAndAnchor from '@hikerpig/markdown-it-toc-and-anchor'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
@@ -127,6 +128,12 @@ class Markdown {
     this.md.use(require('markdown-it-abbr'))
     this.md.use(require('markdown-it-sub'))
     this.md.use(require('markdown-it-sup'))
+    this.md.use(markdownItTocAndAnchor, {
+      toc: true,
+      tocPattern: /\[TOC\]/i,
+      anchorLink: false,
+      appendIdToHeading: false
+    })
     this.md.use(require('./markdown-it-deflist'))
     this.md.use(require('./markdown-it-frontmatter'))
 

package.json

@@ -50,6 +50,7 @@
   "homepage": "https://boostnote.io",
   "dependencies": {
     "@enyaxu/markdown-it-anchor": "^5.0.2",
+    "@hikerpig/markdown-it-toc-and-anchor": "^4.5.0",
     "@rokt33r/js-sequence-diagrams": "^2.0.6-2",
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",

tests/fixtures/markdowns.js

@@ -109,6 +109,14 @@ const footnote = `
 hello-world: https://github.com/BoostIO/Boostnote/
 `
 
+const tocPlaceholder = `
+[TOC]
+# H1
+## H2
+### H3
+###$ H4
+`
+
 const plantUmlMindMap = `
 @startmindmap
 * Debian
@@ -192,6 +200,7 @@ export default {
   deflists,
   shortcuts,
   footnote,
+  tocPlaceholder,
   plantUmlMindMap,
   plantUmlGantt,
   plantUmlWbs,

tests/lib/markdown-test.js

@@ -74,6 +74,11 @@ test('Markdown.render() should render footnote correctly', t => {
   t.snapshot(rendered)
 })
 
+test('Markdown.render() should renders [TOC] placholder correctly', t => {
+  const rendered = md.render(markdownFixtures.tocPlaceholder)
+  t.snapshot(rendered)
+})
+
 test('Markdown.render() should render PlantUML MindMaps correctly', t => {
   const rendered = md.render(markdownFixtures.plantUmlMindMap)
   t.snapshot(rendered)

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

@@ -83,6 +83,28 @@ Generated by [AVA](https://ava.li).
     `<span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>c</mi><mo>=</mo><mi>p</mi><mi>m</mi><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mrow></mrow><annotation encoding="application/x-tex">c = pmsqrt{a^2 + b^2}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.43056em;vertical-align:0em;"></span><span class="mord mathdefault">c</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:1.0585479999999998em;vertical-align:-0.19444em;"></span><span class="mord mathdefault">p</span><span class="mord mathdefault">m</span><span class="mord mathdefault">s</span><span class="mord mathdefault" style="margin-right:0.03588em;">q</span><span class="mord mathdefault" style="margin-right:0.02778em;">r</span><span class="mord mathdefault">t</span><span class="mord"><span class="mord"><span class="mord mathdefault">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord"><span class="mord mathdefault">b</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span></span>␊
     `
 
+## Markdown.render() should renders [TOC] placholder correctly
+
+> Snapshot 1
+
+    `<p data-line="1"><ul class="markdownIt-TOC">␊
+    <li><a href="#H1">H1</a>␊
+    <ul>␊
+    <li><a href="#H2">H2</a>␊
+    <ul>␊
+    <li><a href="#H3">H3</a></li>␊
+    </ul>␊
+    </li>␊
+    </ul>␊
+    </li>␊
+    </ul>␊
+    </p>␊
+    <h1 id="H1" data-line="2">H1</h1>␊
+    <h2 id="H2" data-line="3">H2</h2>␊
+    <h3 id="H3" data-line="4">H3</h3>␊
+    <p data-line="5">###$ H4</p>␊
+    `
+
 ## Markdown.render() should renders abbrevations correctly
 
 > Snapshot 1
@@ -204,4 +226,39 @@ Generated by [AVA](https://ava.li).
 > Snapshot 2
 
     `<p data-line="0">This is a &quot;QUOTE&quot;.</p>␊
+    
+
+## Markdown.render() should render PlantUML Ditaa correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00" alt="uml diagram" />␊
     `
+
+## Markdown.render() should render PlantUML Gantt correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML MindMaps correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML Umls correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML WBS correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0" alt="uml diagram" />␊
+    `

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

@@ -74,6 +74,14 @@
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@enyaxu/markdown-it-anchor/-/markdown-it-anchor-5.0.2.tgz#d173f7b60b492aabc17dfba864c4d071f5595f72"
 
+"@hikerpig/markdown-it-toc-and-anchor@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/@hikerpig/markdown-it-toc-and-anchor/-/markdown-it-toc-and-anchor-4.5.0.tgz#c1652bdebfd07d41c9738254891515d759b054f0"
+  integrity sha512-PaYl/v9/ViceXm+fC+WoQOD/8lvYf76SnA3s8b/BQ6s3NpZdk/W/aW0dg5YHquQNcdaLfz3lmQTt6iafbe5tbg==
+  dependencies:
+    clone "^2.1.0"
+    uslug "^1.0.4"
+
 "@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"
@@ -1814,6 +1822,11 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
+clone@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 co-with-promise@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co-with-promise/-/co-with-promise-4.6.0.tgz#413e7db6f5893a60b942cf492c4bec93db415ab7"
@@ -9557,6 +9570,11 @@ universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
 
+"unorm@>= 1.0.0":
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz#029b289661fba714f1a9af439eb51d9b16c205af"
+  integrity sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==
+
 [email protected], unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -9634,6 +9652,13 @@ user-home@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
+uslug@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz#b9a22f0914e0a86140633dacc302e5f4fa450677"
+  integrity sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=
+  dependencies:
+    unorm ">= 1.0.0"
+
 utf8-byte-length@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"