fix(gatsby-transformer-remark): fix plugin conflict causing escaped H…

…TML in headings (#20024) * Fix plugin conflict causing escaped HTML in headings * The `gatsby-remark-prismjs` plugin was causing HTML code to be escaped and rendered as text in TOC entries generated by `gatsby-transformer-remark`. It generated HTML nodes which the `mdast-util-toc` module flattened into text. This was fixed upstream in a major version bump. * Update the version of `mdast-util-toc` used in `gatsby-transformer-remark` to the latest version in order to fix the issue * Set `{ allowDangerousHTML: true }` on calls to `hastToHTML()` and `toHAST()` when building the TOC. This is required in order to properly render the embedded HTML nodes. * Bump `mdast-util-to-hast` to its latest version as well * Update one snapshot test that was very slightly broken as a result of this * Slight refactor of code in `on-node-create.js` to reduce nesting and clean up control flow * Add two snapshot tests to verify that the fix was successful * Un-bump `mdast-util-to-hast` * This bump caused a small regression in one of the tests which was deemed unacceptable. This reverts it to its previous version and restores the original test behavior. * Revert the updated snapshot test as well * Undo refactoring changes in `extend-node-type.js` in order to produce a cleaner diff for the PR
gatsbyjs · Dec 16, 2019 · 1abcbb2 · 1abcbb2
1 parent 04dbcf7
commit 1abcbb2
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 5 deletions.
diff --git a/packages/gatsby-transformer-remark/package.json b/packages/gatsby-transformer-remark/package.json
@@ -16,7 +16,7 @@
     "lodash": "^4.17.15",
     "mdast-util-to-hast": "^3.0.4",
     "mdast-util-to-string": "^1.0.7",
-    "mdast-util-toc": "^2.1.0",
+    "mdast-util-toc": "^5.0",
     "remark": "^10.0.1",
     "remark-parse": "^6.0.3",
     "remark-retext": "^3.1.3",

diff --git a/packages/gatsby-transformer-remark/src/__tests__/__snapshots__/extend-node.js.snap b/packages/gatsby-transformer-remark/src/__tests__/__snapshots__/extend-node.js.snap
@@ -635,6 +635,48 @@ Object {
 }
 `;
 
+exports[`Table of contents properly handles headings containing inline code blocks <code> tags generated by \`gatsby-remark-prismjs\` are properly treated as unescaped HTML 1`] = `
+Object {
+  "frontmatter": Object {
+    "title": "My Blog Post",
+  },
+  "tableOfContents": "<ul>
+<li>
+<p><a href=\\"/My%20Blog%20Post/#my-blog-post\\">My Blog Post</a></p>
+<ul>
+<li>
+<p><a href=\\"/My%20Blog%20Post/#generating-tocs-with-code-classlanguage-textgatsby-transformer-remarkcode\\">Generating TOCs with <code class=\\"language-text\\">gatsby-transformer-remark</code></a></p>
+<ul>
+<li><a href=\\"/My%20Blog%20Post/#embedding-code-classlanguage-textltcodegtcode-tags\\">Embedding <code class=\\"language-text\\">&lt;code&gt;</code> Tags</a></li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>",
+}
+`;
+
+exports[`Table of contents properly handles headings containing inline code blocks Inline code blocks within headings are translated to <code> tags in generated TOC 1`] = `
+Object {
+  "frontmatter": Object {
+    "title": "My Blog Post",
+  },
+  "tableOfContents": "<ul>
+<li>
+<p><a href=\\"/My%20Blog%20Post/#my-blog-post\\">My Blog Post</a></p>
+<ul>
+<li>
+<p><a href=\\"/My%20Blog%20Post/#generating-tocs-with-gatsby-transformer-remark\\">Generating TOCs with <code>gatsby-transformer-remark</code></a></p>
+<ul>
+<li><a href=\\"/My%20Blog%20Post/#embedding-code-tags\\">Embedding <code>&#x3C;code></code> Tags</a></li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>",
+}
+`;
+
 exports[`Wordcount and timeToRead are generated correctly from schema correctly generate timeToRead for CJK 1`] = `
 Object {
   "timeToRead": 2,

diff --git a/packages/gatsby-transformer-remark/src/__tests__/extend-node.js b/packages/gatsby-transformer-remark/src/__tests__/extend-node.js
@@ -1086,6 +1086,71 @@ final text`,
   )
 })
 
+describe(`Table of contents properly handles headings containing inline code blocks`, () => {
+  bootstrapTest(
+    `Inline code blocks within headings are translated to <code> tags in generated TOC`,
+    `---
+title: "My Blog Post"
+date: "2019-12-09"
+---
+# My Blog Post
+
+text
+
+## Generating TOCs with \`gatsby-transformer-remark\`
+
+Content - content
+
+### Embedding \`<code>\` Tags
+
+It's easier than you may imagine`,
+    `tableOfContents(pathToSlugField: "frontmatter.title")
+    frontmatter {
+        title
+    }`,
+    node => expect(node).toMatchSnapshot()
+  )
+
+  bootstrapTest(
+    `<code> tags generated by \`gatsby-remark-prismjs\` are properly treated as unescaped HTML`,
+    `---
+title: "My Blog Post"
+date: "2019-12-09"
+---
+# My Blog Post
+
+text
+
+## Generating TOCs with \`gatsby-transformer-remark\`
+
+Content - content
+
+### Embedding \`<code>\` Tags
+
+It's easier than you may imagine`,
+    `tableOfContents(pathToSlugField: "frontmatter.title")
+    frontmatter {
+        title
+    }`,
+    node => expect(node).toMatchSnapshot(),
+    {
+      pluginOptions: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: `language-`,
+              inlineCodeMarker: null,
+              showLineNumbers: false,
+              noInlineHighlight: false,
+            },
+          },
+        ],
+      },
+    }
+  )
+})
+
 describe(`Relative links keep being relative`, () => {
   const assetPrefix = ``
   const basePath = `/prefix`

diff --git a/packages/gatsby-transformer-remark/src/extend-node-type.js b/packages/gatsby-transformer-remark/src/extend-node-type.js
@@ -305,7 +305,9 @@ module.exports = (
             tocAst.map = addSlugToUrl(tocAst.map)
           }
 
-          toc = hastToHTML(toHAST(tocAst.map))
+          toc = hastToHTML(toHAST(tocAst.map, { allowDangerousHTML: true }), {
+            allowDangerousHTML: true,
+          })
         } else {
           toc = ``
         }

diff --git a/packages/gatsby-transformer-remark/src/on-node-create.js b/packages/gatsby-transformer-remark/src/on-node-create.js
@@ -25,7 +25,7 @@ module.exports = async function onCreateNode(
   const content = await loadNodeContent(node)
 
   try {
-    let data = grayMatter(content, pluginOptions)
+    const data = grayMatter(content, pluginOptions)
 
     if (data.data) {
       data.data = _.mapValues(data.data, value => {
@@ -36,7 +36,7 @@ module.exports = async function onCreateNode(
       })
     }
 
-    let markdownNode = {
+    const markdownNode = {
       id: createNodeId(`${node.id} >>> MarkdownRemark`),
       children: [],
       parent: node.id,

diff --git a/yarn.lock b/yarn.lock
@@ -3806,6 +3806,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
+"@types/mdast@^3.0.3":
+  version "3.0.3"
+  resolved "https://nexus.stackline.com/repository/npm-group/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
+  integrity sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -15125,7 +15132,7 @@ mdast-util-to-string@^1.0.7:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.7.tgz#62d8e9c6b2113070d8b497c7dc35bf12796f06ee"
   integrity sha512-P+gdtssCoHOX+eJUrrC30Sixqao86ZPlVjR5NEAoy0U79Pfxb1Y0Gntei0+GrnQD4T04X9xA8tcugp90cSmNow==
 
-mdast-util-toc@^2.0.0, mdast-util-toc@^2.1.0:
+mdast-util-toc@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-toc/-/mdast-util-toc-2.1.0.tgz#82b6b218577bb0e67b23abf5c3f7ac73a4b5389f"
   dependencies:
@@ -15143,6 +15150,19 @@ mdast-util-toc@^3.1.0:
     unist-util-is "^2.1.2"
     unist-util-visit "^1.1.0"
 
+mdast-util-toc@^5.0:
+  version "5.0.0"
+  resolved "https://nexus.stackline.com/repository/npm-group/mdast-util-toc/-/mdast-util-toc-5.0.0.tgz#ca3808fb2c5e4afe897c1761043476be97d6e155"
+  integrity sha512-1ExJKC+85/+Q2LfuASOjdGTB7n/ikQperjiv+7OEVCpRbabr/DGZzEXEZfsZr/k4Pd3g/Gim9DV44/rPjczMAw==
+  dependencies:
+    "@types/mdast" "^3.0.3"
+    "@types/unist" "^2.0.3"
+    extend "^3.0.2"
+    github-slugger "^1.2.1"
+    mdast-util-to-string "^1.0.5"
+    unist-util-is "^4.0.0"
+    unist-util-visit "^2.0.0"
+
 [email protected]:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -22060,6 +22080,15 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0, unist
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+unist-util-visit@^2.0.0:
+  version "2.0.1"
+  resolved "https://nexus.stackline.com/repository/npm-group/unist-util-visit/-/unist-util-visit-2.0.1.tgz#b4e1c1cb414250c6b3cb386b8e461d79312108ae"
+  integrity sha512-bEDa5S/O8WRDeI1mLaMoKuFFi89AjF+UAoMNxO+bbVdo06q+53Vhq4iiv1PenL6Rx1ZxIpXIzqZoc5HD2I1oMA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 universal-url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universal-url/-/universal-url-2.0.0.tgz#35e7fc2c3374804905cee67ea289ed3a47669809"