Use markdown-toc (#524)

facebook · Apr 4, 2018 · c437f7b · c437f7b
1 parent 632ccfb
commit c437f7b
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 26 deletions.
diff --git a/lib/core/getTOC.js b/lib/core/getTOC.js
@@ -6,6 +6,7 @@
  */
 
 const Remarkable = require('remarkable');
+const mdToc = require('markdown-toc');
 const toSlug = require('./toSlug');
 
 const tagToLevel = tag => Number(tag.slice(1));
@@ -14,7 +15,7 @@ const tagToLevel = tag => Number(tag.slice(1));
  * Returns a table of content from the headings
  *
  * @return array
- * Array of heading objects with `hashLink`, `text` and `children` fields
+ * Array of heading objects with `hashLink`, `content` and `children` fields
  *
  */
 module.exports = (content, headingTags = 'h2', subHeadingTags = 'h3') => {
@@ -24,30 +25,22 @@ module.exports = (content, headingTags = 'h2', subHeadingTags = 'h3') => {
     : [];
 
   const md = new Remarkable();
-  const tokens = md.parse(content, {});
-  const headings = [];
-  for (let i = 0; i < tokens.length; i++) {
-    if (
-      tokens[i].type == 'heading_open' &&
-      headingLevels.concat(subHeadingLevels).includes(tokens[i].hLevel)
-    ) {
-      headings.push({
-        hLevel: tokens[i].hLevel,
-        text: tokens[i + 1].content,
-      });
-    }
-  }
+  const headings = mdToc(content, {
+    filter: function(str, ele) {
+      return headingLevels.concat(subHeadingLevels).includes(ele.lvl);
+    },
+  }).json;
 
   const toc = [];
   let current;
   headings.forEach(heading => {
     const entry = {
-      hashLink: toSlug(heading.text),
-      text: heading.text,
+      hashLink: toSlug(heading.content),
+      content: md.renderInline(mdToc.titleize(heading.content)),
       children: [],
     };
 
-    if (headingLevels.includes(heading.hLevel)) {
+    if (headingLevels.includes(heading.lvl)) {
       toc.push(entry);
       current = entry;
     } else {

diff --git a/lib/core/nav/OnPageNav.js b/lib/core/nav/OnPageNav.js
@@ -10,15 +10,22 @@ const React = require('react');
 const siteConfig = require(process.cwd() + '/siteConfig.js');
 const getTOC = require('../getTOC');
 
-const Link = ({hashLink, text}) => <a href={`#${hashLink}`}>{text}</a>;
+const Link = ({hashLink, content}) => (
+  <a
+    href={`#${hashLink}`}
+    dangerouslySetInnerHTML={{
+      __html: content,
+    }}
+  />
+);
 
 const Headings = ({headings}) => {
   if (!headings.length) return null;
   return (
     <ul className="toc-headings">
       {headings.map((heading, i) => (
         <li key={i}>
-          <Link hashLink={heading.hashLink} text={heading.text} />
+          <Link hashLink={heading.hashLink} content={heading.content} />
           <Headings headings={heading.children} />
         </li>
       ))}

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1549,16 +1549,16 @@ nav.toc .toggleNav .navBreadcrumb h2 {
 
     .onPageNav ul li {
       font-size: 12px;
-      line-height: 14px;
-      padding-bottom: 12px;
+      line-height: 17px;
+      padding-bottom: 9px;
     }
 
     .onPageNav ul ul {
       padding: 8px 0 0 20px;
     }
 
     .onPageNav ul ul li {
-      padding-bottom: 8px;
+      padding-bottom: 5px;
     }
   }
 }

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "fs-extra": "^5.0.0",
     "glob": "^7.1.2",
     "highlight.js": "^9.12.0",
+    "markdown-toc": "^1.2.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-dom-factories": "^1.0.1",