Headers with html generate wrong slugs and do not work on Sidebar

[posva]

Bug report

This is something we use in vue-router docs, in the API Reference. The very first title has an incorrect link #, and the title on the Sidebar has an incorrect text /api/#router-link.

I gave this a shot but couldn't completely fix it. The function deeplyParseHeaders removes any html from titles, transforming <router-link> into an empty string. For the slug, I didn't dig enough

Version

0.11

Steps to reproduce

• Create a title

## `<text>`

What is expected?

Title to be <text> and link to be #text

What is actually happening?

Title is an empty string and the link is invalid in the rendered header but not in the sidebar

Other relevant information

• Your OS: os x
• Node.js version: 10
• Browser version: latest Chrome
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[ulivz]

Thanks, it's a long story, and there are two issues.

1. Unexpected slug at content

Since we want to support headers badge in headers (#540), it makes us be able to write HTML(Vue) tags at the end of the header, with built-in Badge component, it’s will be very convenient for us to add some status for some API.
 
So, the tail HTML at the headers should be erased under the build process, so we bundled removeTailHtml at the slugify and other header-related method.
 
In fact, we could remove it removeTailHtml from slugify. When generating slugs, markdown-it-anchor will omit the pure HTML part which is as expected, e.g.

• Input:

## Import Code Snippets <Badge text="beta" type="warn"/> <Badge text="0.10.1+" type="tip"/>

• Output anchor id: import-code-snippets

But markdown-it-table-of-contents will extract the all the sub tokens as the slug which brings the inconsistency, so it will cause links in TOC to be unable to navigate to the correct location. maybe we need to create a custom TOC component/plugin for it.

2. Unexpected slug at sidebar.

Sidebar's slugs used deeplyParseHeaders which combines parseHeaders and removeTailHtml, and we need remove tail HTML first, then passed the revised title to parseHeaders. So just adjusting the order, we can fix it.