-
Notifications
You must be signed in to change notification settings - Fork 0
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
A new web component is needed to translate markdown into html sanitized #55
Comments
@UcDust Looks pretty good to me. My thinking is that we can have a few default |
IMHO, if you want flexible client side markdown rendering, just use the NPM packages. ie:
I would suggest the advantages of a custom element, that we put time into supporting, would be that there is an opinion layer. So we are saying; this is our renderer, this is our sanitize utility, this is our standard setup. Of course you can allow for a couple optional params. The question I would have, is that even helpful? Perhaps a little. Our standard setup with single npm install command. If we are going to implement a markdown element, the rendered markdown should be in the local dom. So if you have
And then the element hides the raw and inserts a new rendered tag as child element. You could also look to do something like:
Completely replacing the raw markdown with the rendered, however it doesn't provide a nice update cycle. ie it's rendered and done. |
Doesn't the I guess markdown can get really messy anyways but is it better to use a tag and avoid things like |
* start of markdown component, still needs sanitize and more element classes to be used from the brands site #293 * add ol class and ability to customize renderer #55 * update brand documentation site with new ucdlib-md component * add text sanitization to the md element #55 * update class documentation md * brand site updates, increment package version, remove commented out code Co-authored-by: Dusty Cartwright <[email protected]>
We use the marked npm package in the brands site to display class documentation. We need something similar in RP, to allow custom formatted markdown to be used to output people data. We could use another package like DOMPurify to sanitize the text.
<ucdlib-md ignore="H*"> - Means don't render it exclude="img" - Means excise it from the output subset?="core|full|parsimonious" - Specifies some common sets of ignores/excludes, that we use
The docs show the ability to override a list of renderer functions which would override the default renderer. We could use these to ignore specific tags if specified in the element attributes. From the docs-
const renderer = { heading(text, level) { return something; } };
Then
marked.use({ renderer });
with our list of overridden render functions. In our case, we would return an empty string or perhaps the default text, depending on the element attributes.We can override these functions:
Block-level renderer methods
Inline-level renderer methods
These elements shadowDOM styling needs to match the patternLabs styling.
The text was updated successfully, but these errors were encountered: