feat(utils): markdown callouts #2298
Conversation
|
|
I've moved to lucide icons, however the rounded bar is a bit harder. We are currently using
I don't think it looks terrible, but if we want to make the whole bar rounded we will have to take a difference approach. What are your thoughts? |
|
to make the whole bar rounded, can just use a pseudoelement |
|
I love this so much, thank you! |
Signed-off-by: Erb3 <49862976+Erb3@users.noreply.github.com>
Done
|
|
nice! thanks for contributing this, been meaning to add it for a very long time |
| @@ -24,6 +25,19 @@ export const configuredXss = new FilterXSS({ | |||
| source: ['media', 'sizes', 'src', 'srcset', 'type'], | |||
| p: [...(whiteList.p || []), 'align'], | |||
| div: [...(whiteList.p || []), 'align'], | |||
| svg: [ | |||
There was a problem hiding this comment.
this has me a little concerned as I know there's a bunch of random things you can do with svgs. it doesn't necessarily look like this allows anything bad but I don't know if I am knowledgable enough about svg vulnerabilities to approve this confidently.
it also seems to me like the elements added as part of the markdown renderer should not be subject to the xss/whitelisted elements as the raw html input. I wonder if there is a different way to do this?
There was a problem hiding this comment.
This was also a concern for me, but I frankly found no other way to do it. From my testing the jsxss was executed based on the output from markdown-it, not the description itself. We can probably change it to be pre-html, but that sounds insecure.
| @@ -75,6 +89,28 @@ export const configuredXss = new FilterXSS({ | |||
| } | |||
| return `${name}="${escapeAttrValue(allowedClasses.join(' '))}"` | |||
| } | |||
|
|
|||
| // For markdown callouts | |||
| if (name === 'class' && ['div', 'p'].includes(tag)) { | |||
There was a problem hiding this comment.
again it seems weird that this is being whitelisted within the input, as someone could put these classes on their own html elements and have weird styles happen
packages/utils/parse.ts
Outdated
| @@ -129,6 +165,19 @@ export const md = (options = {}) => { | |||
| ...options, | |||
| }) | |||
|
|
|||
| md.use(MarkdownItGitHubAlerts, { | |||
| icons: { | |||
| note: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>', | |||
There was a problem hiding this comment.
I think it should be possible to import the relevant icons from @modrinth/assets instead of hardcoding them here? A couple of them might need to be added to the library though
There was a problem hiding this comment.
I've added them to the modrinth/assets locally, however how would I go about using these? Markdown-it-github-alerts requires a string, can't take a component afaik. I guess I could import and export it as a string in assets, but it feels a bit jank
I've added markdown callouts, with the same syntax as GitHub alerts. Behind the scenes it uses markdown-it-github-alerts. It currently uses octicons as that is default in markdown-it-github-alerts, however they can be replaced if we have replacements.
Syntax
Screenshot
Tasks