fix: wrong sidebar slugs and anchor link at content (close: #645)

Background: we want to support headers badge in headers (#540), it make us be able to write HTML tags at the end of the header. but it shouldn't be hidden at the title at the sidebar, and

lib/markdown/index.js

@@ -11,12 +11,11 @@ const emoji = require('markdown-it-emoji')
 const anchor = require('markdown-it-anchor')
 const toc = require('markdown-it-table-of-contents')
 const _slugify = require('./slugify')
-const { parseHeaders, removeTailHtml } = require('../util/parseHeaders')
-const { compose } = require('../util/shared')
+const { parseHeaders } = require('../util/parseHeaders')
 
 module.exports = ({ markdown = {}} = {}) => {
   // allow user config slugify
-  const slugify = markdown.slugify || compose(removeTailHtml, _slugify)
+  const slugify = markdown.slugify || _slugify
 
   const md = require('markdown-it')({
     html: true,

lib/util/parseHeaders.js

@@ -21,14 +21,16 @@ exports.removeTailHtml = (str) => {
   return String(str).replace(/\s*?<.*>\s*$/g, '')
 }
 
-// only remove some md tokens.
+// Only remove some md tokens.
 exports.parseHeaders = compose(
   unescapeHtml,
   parseEmojis,
   removeMarkdownToken
 )
 
-// also clean html in headers.
+// Also clean the tail html in headers.
+// Since we need to support tailed badge in headers.
+// See: https://vuepress.vuejs.org/guide/using-vue.html#badge
 exports.deeplyParseHeaders = compose(
   exports.parseHeaders,
   exports.removeTailHtml

test/markdown/slugify.spec.js

@@ -0,0 +1,32 @@
+import { Md } from './util'
+import anchor from 'markdown-it-anchor'
+import slugify from '@/markdown/slugify.js'
+
+const mdS = Md().use(anchor, {
+  slugify,
+  permalink: true,
+  permalinkBefore: true,
+  permalinkSymbol: '#'
+})
+
+const slugifyAsserts = {
+  /* markdown: id */
+  '# a b': 'a-b',
+  '# a-b': 'a-b',
+  '# `<a>`': 'a',
+  '# `<a>`b': 'a-b',
+  '# `<a>` b': 'a-b'
+}
+
+describe('slugify', () => {
+  test('should convert headers correctly', () => {
+    for (const input in slugifyAsserts) {
+      const output = mdS.render(input)
+      expect(getHeading(output)).toBe(slugifyAsserts[input])
+    }
+  })
+})
+
+function getHeading (output) {
+  return output.match(/id=\\?"([^"]*)\\?"/)[1]
+}

test/util/parseHeaders.spec.js

@@ -1,6 +1,7 @@
 import {
   parseHeaders,
-  removeTailHtml
+  removeTailHtml,
+  deeplyParseHeaders
 } from '@/util/parseHeaders'
 
 describe('parseHeaders', () => {
@@ -32,6 +33,14 @@ describe('parseHeaders', () => {
   })
 
   test('should remove tail html correctly', () => {
-    expect(removeTailHtml('# H1 <div></div>>')).toBe('# H1')
+    expect(removeTailHtml('# H1 <Comp></Comp>')).toBe('# H1')
+    expect(removeTailHtml('# H1 <Comp a="b"></Comp>')).toBe('# H1')
+    expect(removeTailHtml('# H1 <Comp/>')).toBe('# H1')
+    expect(removeTailHtml('# H1 <Comp a="b"/>')).toBe('# H1')
+  })
+
+  test('should deeplyParseHeaders transformed as expected', () => {
+    expect(deeplyParseHeaders('# `H1` <Comp></Comp>')).toBe('# H1')
+    expect(deeplyParseHeaders('# *H1* <Comp/>')).toBe('# H1')
   })
 })