fix(markdown): do not escape extracted headers (close #117)

Author: meteorlxy

packages/@vuepress/markdown/__tests__/plugins/extractHeadersPlugin.spec.ts

@@ -1,15 +1,15 @@
 import * as MarkdownIt from 'markdown-it'
-import { extractHeadersPlugin } from '@vuepress/markdown'
-import type { MarkdownEnv } from '@vuepress/markdown'
+import { anchorPlugin, extractHeadersPlugin, slugify } from '@vuepress/markdown'
+import type { MarkdownEnv, MarkdownHeader } from '@vuepress/markdown'
 
 const fixtures = {
   simpleTree: `\
-  # h1
-  ## h2
-  ### h3
-  #### h4
-  ##### h5
-  ###### h6
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
 `,
   complexTree: `\
 # s1
@@ -76,4 +76,71 @@ describe('@vuepress/markdown > plugins > extractHeadersPlugin', () => {
       })
     })
   })
+
+  describe('should not include html elements and should not escape texts', () => {
+    const md = MarkdownIt({
+      html: true,
+    })
+      .use(anchorPlugin, { slugify })
+      .use(extractHeadersPlugin, { slugify })
+
+    const testCases: [string, MarkdownHeader[]][] = [
+      // html element should be ignored
+      [
+        '## foo <bar />',
+        [
+          {
+            level: 2,
+            title: 'foo',
+            slug: 'foo',
+            children: [],
+          },
+        ],
+      ],
+      // inline code should not be escaped
+      [
+        '## foo <bar/> `<code />`',
+        [
+          {
+            level: 2,
+            title: 'foo  <code />',
+            slug: 'foo-code',
+            children: [],
+          },
+        ],
+      ],
+      // text should not be escaped
+      [
+        '## foo <bar/> "baz"',
+        [
+          {
+            level: 2,
+            title: 'foo  "baz"',
+            slug: 'foo-baz',
+            children: [],
+          },
+        ],
+      ],
+      // text should not be escaped
+      [
+        '## < test >',
+        [
+          {
+            level: 2,
+            title: '< test >',
+            slug: 'test',
+            children: [],
+          },
+        ],
+      ],
+    ]
+
+    testCases.forEach(([source, expected], i) =>
+      it(`case ${i}`, () => {
+        const env: MarkdownEnv = {}
+        md.render(source, env)
+        expect(env.headers).toEqual(expected)
+      })
+    )
+  })
 })

packages/@vuepress/markdown/__tests__/plugins/tocPlugin.spec.ts

@@ -1,5 +1,5 @@
 import * as MarkdownIt from 'markdown-it'
-import { tocPlugin } from '@vuepress/markdown'
+import { anchorPlugin, tocPlugin, slugify } from '@vuepress/markdown'
 
 const fixtures = {
   simpleTree: `\
@@ -75,4 +75,72 @@ describe('@vuepress/markdown > plugins > tocPlugin', () => {
       })
     })
   })
+
+  describe('should include html elements and should escape texts', () => {
+    const md = MarkdownIt({
+      html: true,
+    })
+      .use(anchorPlugin, { slugify })
+      .use(tocPlugin, { slugify })
+
+    const testCases: [string, { slug: string; title: string; h2: string }][] = [
+      // html element should be kept as is
+      [
+        `\
+[[toc]]
+## foo <bar />
+`,
+        {
+          slug: 'foo',
+          title: 'foo <bar />',
+          h2: 'foo <bar />',
+        },
+      ],
+      // inline code should be escaped
+      [
+        `\
+[[toc]]
+## foo <bar /> \`<code />\`
+`,
+        {
+          slug: 'foo-code',
+          title: 'foo <bar /> &lt;code /&gt;',
+          h2: 'foo <bar /> <code>&lt;code /&gt;</code>',
+        },
+      ],
+      // text should be escaped
+      [
+        `\
+[[toc]]
+## foo <bar/> "baz"
+`,
+        {
+          slug: 'foo-baz',
+          title: 'foo <bar/> &quot;baz&quot;',
+          h2: 'foo <bar/> &quot;baz&quot;',
+        },
+      ],
+      // text should be escaped
+      [
+        `\
+[[toc]]
+## < test >
+`,
+        {
+          slug: 'test',
+          title: '&lt; test &gt;',
+          h2: '&lt; test &gt;',
+        },
+      ],
+    ]
+
+    testCases.forEach(([source, expected], i) =>
+      it(`case ${i}`, () => {
+        expect(md.render(source)).toEqual(`\
+<nav class="table-of-contents"><ul><li><a href="#${expected.slug}">${expected.title}</a></li></ul></nav>
+<h2 id="${expected.slug}">${expected.h2}</h2>
+`)
+      })
+    )
+  })
 })

packages/@vuepress/markdown/src/plugins/extractHeadersPlugin.ts

@@ -46,6 +46,7 @@ export const extractHeadersPlugin: PluginWithOptions<ExtractHeadersPluginOptions
     headers = resolveHeadersFromTokens(state.tokens, {
       level,
       allowHtml: false,
+      escapeText: false,
       slugify,
       format,
     })

packages/@vuepress/markdown/src/plugins/tocPlugin/tocPlugin.ts

@@ -105,6 +105,7 @@ export const tocPlugin: PluginWithOptions<TocPluginOptions> = (
     headers = resolveHeadersFromTokens(state.tokens, {
       level,
       allowHtml: true,
+      escapeText: true,
       slugify,
       format,
     })

packages/@vuepress/markdown/src/utils/resolveHeadersFromTokens.ts

@@ -10,11 +10,13 @@ export const resolveHeadersFromTokens = (
   {
     level,
     allowHtml,
+    escapeText,
     slugify,
     format,
   }: {
     level: number[]
     allowHtml: boolean
+    escapeText: boolean
     slugify: (str: string) => string
     format?: (str: string) => string
   }
@@ -84,9 +86,11 @@ export const resolveHeadersFromTokens = (
     // get title from tokens
     const title = titleTokens
       .reduce((result, item) => {
-        // escape content of 'code_inline' and 'text'
-        if (item.type === 'code_inline' || item.type === 'text') {
-          return `${result}${htmlEscape(item.content)}`
+        if (escapeText) {
+          // escape the content of 'code_inline' and 'text'
+          if (item.type === 'code_inline' || item.type === 'text') {
+            return `${result}${htmlEscape(item.content)}`
+          }
         }
 
         // keep the content of 'emoji' and 'html_inline'