[[TOC]] links broken with Badges

[brindosch]

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

Bug report

If [[TOC]] is used in a page where a header has a badge, the link contains also the badge content.

Steps to reproduce

• Add header to page: ### TEXT <Badge text="TBA 2.1+"/>
• Add [[TOC]] to page
• The TOC link to ### TEXT will be #text-badge-text-tba-2-1 instead of #text

What is expected?

• Badges should not break the link

What is actually happening?

• TOC links to headers with badges are broken

Other relevant information

• Output of npx vuepress info in my VuePress project:

  System:
  OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
  CPU: (4) x64 Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz
  Binaries:
  Node: 12.11.1 - /usr/bin/node
  Yarn: 1.19.1 - /usr/bin/yarn
  npm: 6.11.3 - /usr/bin/npm
  Browsers:
  Chrome: Not Found
  Firefox: 70.0
  npmPackages:
  @vuepress/core: 1.2.0
  @vuepress/theme-default: 1.2.0
  vuepress: ^1.2.0 => 1.2.0
  npmGlobalPackages:
  vuepress: Not Found

[abernov]

Problem in markdown-it-table-of-contents plugin.

It needs to be replaced with a new one!
It’s not difficult to develop such a plugin

[kefranabg]

@abernov The problem is that VuePress and markdown-it-table-of-contents are not applying the slugify
function on the same header link.

VuePress will use TEXT and markdown-it-table-of-contents will use TEXT <Badge text="TBA 2.1+"/>

[kefranabg]

As a workaround, you can use a custom markdown slugify function.

[abernov]

@kefranabg
Vuepress passes to markdown-it-table-of-content its own slugify function.

It is possible to rewrite this function so that it removes the badge.

[kefranabg]

@abernov yes this is what I suggested in the last comment, but this is a workaround, not a fix.

Rewrite the slugify function we pass to markdown-it-table-of-content to remove badges will work, but later we'll have a new bug report saying it's not working with headers containing emojis and probably other things (so it will be hard to maintain).

The clean way to fix this would be to standardize the way vuepress and markdown-it-table-of-contents parse a header title.

[dlecan]

Here is the code I've used to fix this issue on my site:

In your config.js:

const { slugify: vuePressSlugify } = require("@vuepress/shared-utils");

function customSlugifyToHandleBadges(str) {
 // Remove badges and use original slugify function
  return vuePressSlugify(str.replace(/<Badge[^>]*\/>/, ""));
}
...
module.exports = {
...
  markdown: {
    slugify: customSlugifyToHandleBadges,
    toc: {
      slugify: customSlugifyToHandleBadges,
    },
  },
}