From d6143868a46c712b9d3fb5bb70127a00d7169629 Mon Sep 17 00:00:00 2001 From: Endi Date: Fri, 29 Nov 2019 12:33:51 +0700 Subject: [PATCH] fix(v2): toc should not be broken for heading with html inline code (#2067) --- packages/docusaurus-mdx-loader/package.json | 1 + .../__snapshots__/index.test.js.snap | 42 +++++++++++++++++++ .../__tests__/fixtures/inline-code.md | 9 ++++ .../remark/rightToc/__tests__/index.test.js | 5 +++ .../src/remark/rightToc/search.js | 3 +- yarn.lock | 2 +- 6 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/fixtures/inline-code.md diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json index 814cb86a82..3339ec05fe 100644 --- a/packages/docusaurus-mdx-loader/package.json +++ b/packages/docusaurus-mdx-loader/package.json @@ -12,6 +12,7 @@ "@babel/traverse": "^7.7.4", "@mdx-js/mdx": "^1.5.1", "@mdx-js/react": "^1.5.1", + "escape-html": "^1.0.3", "github-slugger": "^1.2.1", "gray-matter": "^4.0.2", "loader-utils": "^1.2.3", diff --git a/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/__snapshots__/index.test.js.snap b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/__snapshots__/index.test.js.snap index b0e205519f..56cfc085d5 100644 --- a/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/__snapshots__/index.test.js.snap +++ b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,47 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`inline code should be escaped 1`] = ` +"export const rightToc = [ + { + value: '<Head />', + id: 'head-', + children: [ + { + value: '<Head>Test</Head>', + id: 'headtesthead', + children: [] + } + ] + }, + { + value: '<div />', + id: 'div-', + children: [] + }, + { + value: '<div> Test </div>', + id: 'div-test-div', + children: [] + }, + { + value: '<div><i>Test</i></div>', + id: 'divitestidiv', + children: [] + } +]; + +## \`\` + +### \`Test\` + +## \`
\` + +## \`
Test
\` + +## \`
Test
\` +" +`; + exports[`non text phrasing content 1`] = ` "export const rightToc = [ { diff --git a/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/fixtures/inline-code.md b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/fixtures/inline-code.md new file mode 100644 index 0000000000..b5a89c3b2f --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/fixtures/inline-code.md @@ -0,0 +1,9 @@ +## `` + +### `Test` + +## `
` + +## `
Test
` + +## `
Test
` \ No newline at end of file diff --git a/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/index.test.js b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/index.test.js index 9535ad1564..2031e2c8b7 100644 --- a/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/index.test.js +++ b/packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/index.test.js @@ -27,6 +27,11 @@ test('non text phrasing content', async () => { expect(result).toMatchSnapshot(); }); +test('inline code should be escaped', async () => { + const result = await processFixture('inline-code'); + expect(result).toMatchSnapshot(); +}); + test('text content', async () => { const result = await processFixture('just-content'); expect(result).toMatchInlineSnapshot(` diff --git a/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js b/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js index b8d36029ea..400530a62b 100644 --- a/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js +++ b/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js @@ -7,6 +7,7 @@ const toString = require('mdast-util-to-string'); const visit = require('unist-util-visit'); +const escapeHtml = require('escape-html'); const slugs = require('github-slugger')(); // https://github.com/syntax-tree/mdast#heading @@ -18,7 +19,7 @@ function toValue(node) { case 'heading': return node.children.map(toValue).join(''); case 'inlineCode': - return `${node.value}`; + return `${escapeHtml(node.value)}`; case 'emphasis': return `${node.children.map(toValue).join('')}`; case 'strong': diff --git a/yarn.lock b/yarn.lock index c4855e2c11..1e54ecd96f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5939,7 +5939,7 @@ es6-promisify@^5.0.0: dependencies: es6-promise "^4.0.3" -escape-html@~1.0.3: +escape-html@^1.0.3, escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=