TOC links to header with badge fail

[nklayman]

• I confirm that this is a issue rather than a question.

Bug report

When a header includes a badge, a TOC will report an incorrect scroll link for that header.

Version

0.14.8

Steps to reproduce

1. go to https://v0.vuepress.vuejs.org/guide/markdown.html#table-of-contents
2. click "Import Code Snippets"

What is expected?

It should scroll to the header link

What is actually happening?

nothing happens

Other relevant information

• Your OS: Ubuntu 18.10
• Node.js version: 10.15.1
• Browser version: chrome 72
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[ulivz]

This is known issue, see: #645 (comment)

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.

We can create a Vue component <TOC /> to replace current [[ TOC ]], you can use $page.headers to access current page's headers.

Contribution welcome!

[shigma]

We can create a Vue component <TOC /> to replace current [[ TOC ]], you can use $page.headers to access current page's headers.

Since TOC plugin is included in @vuepress/markdown, which was depended on by @vuepress/core, do you mean @vuepress/markdown should provide a global component <TOC />?

[ulivz]

@shigma What I meant is to write a VuePress plugin that implements a Vue SFC named TOC to help users to create table of contents, it can be used to replace the default toc but works better.

[shigma]

@ulivz I mean since [[TOC]] is supported by default, we should also support <TOC/> as a global component by default. Introducting a new plugin may result in breaking changes.

[shigma]

I have tried to implement it and here is the pr: #1307.