-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: cannot properly slugify badge with children #3511
Comments
This probably never supported badges with slots. For example - https://stackblitz.com/edit/vite-2j5pug?file=package.json (we added badge in alpha.27 which was using mdit-vue@0.11.0) We can probably fix that though. PS: I think it might have worked with very old vitepress versions when markdown-it-anchor didn't had this - https://github.com/valeriangalliat/markdown-it-anchor/blob/69cbf727367c6b10a553a8549790a6d6df917342/index.js#L56 You can do something like this in meantime: markdown: {
anchor: {
getTokensText(tokens) {
let text = ''
for (const t of tokens) {
if (t.type === 'text' || t.type === 'code_inline') text += t.content
if (t.type === 'html_inline' && /<badge/i.test(t.content)) return text
}
return text
}
}
} |
The code snippet you gave works perfectly, thanks a lot!
Maybe the behaviors between badge with props and badge with children should be aligned, but other elements shouldn't necessarily. From your perspective, what is the expected behavior here? |
Actually, it's a bit more complicated. Let me explain:
This behavior is unrelated to vitepress - https://markdown-it.github.io/#md3=%7B%22source%22%3A%22%23%23%20foo%20%3Cbadge%3Ebar%3C%2Fbadge%3E%22%2C%22defaults%22%3A%7B%22html%22%3Afalse%2C%22xhtmlOut%22%3Afalse%2C%22breaks%22%3Afalse%2C%22langPrefix%22%3A%22language-%22%2C%22linkify%22%3Afalse%2C%22typographer%22%3Afalse%2C%22_highlight%22%3Afalse%2C%22_strict%22%3Atrue%2C%22_view%22%3A%22debug%22%7D%7D And markdown-it-anchor keeps the content of only text and code_inline nodes - https://github.com/valeriangalliat/markdown-it-anchor/blob/69cbf727367c6b10a553a8549790a6d6df917342/index.js#L7 Your slugify is redundant here, as the badge will already be stripped if you're using props, and if you're using slots it won't work because it will receive just "foo bar" as argument. So slugify doesn't do anything either way and is not required.
From the DX perspective, we can have some opinionated default for |
Describe the bug
## Powered by Vite <Badge>HERE</Badge>
This header
powered-by-vite
, actualpowered-by-vite-here
),Reproduction
https://stackblitz.com/edit/vite-hnczhc
or the official doc: https://vitepress.dev/reference/default-theme-badge#title-custom-element ← see this anchor
Expected behavior
It is working alright in the past, but not working for now. Actually the
str
received isPowered by Vite HERE
, without tag information.I believe this is a regression from vitepress or mdit-vue.
System Info
Additional context
Why don't you use props instead of children?
Because this is an i18n doc site. The children can be translated via Crowdin, but props cannot.
With such inconsistencies, at least I don't think the designers of the badge component fully considered the i18n experience. Vitepress is an excellent project and I hope it gets better.
Validations
The text was updated successfully, but these errors were encountered: