-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
Move to micromark #5330
Move to micromark #5330
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see any difference, I assume our snapshot matcher knows better
}, | ||
logLevel: 'info', | ||
// Generate stats.json. | ||
metafile: true, | ||
// Minified file is smaller and load faster from GitHub Codespaces. | ||
minify: true, | ||
outdir: resolveFromProjectRoot('./dist'), | ||
outdir: resolveFromProjectRoot('./dist/dev'), | ||
plugins: [isomorphicReactResolvePlugin], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So we now ship both:
- internal markdown-it, non configurable from the outside, used in component
- micromark, configurable from the outside, used in bundle
@@ -145,7 +140,14 @@ export default function render( | |||
return decoration; | |||
}; | |||
|
|||
const htmlAfterMarkdown = ariaLabelPost(new MarkdownIt(MARKDOWN_IT_INIT).use(ariaLabel).render(markdown)); | |||
const htmlAfterMarkdown = micromark(markdown, { | |||
allowDangerousHtml: markdownRenderHTML ?? true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume it is true by default as we still have sanitize after it.
Changelog Entry
Breaking changes
micromark
for rendering Markdown, instead ofmarkdown-it
Changed
micromark
for rendering Markdown, instead ofmarkdown-it
, in PR #5330, by @compulimDescription
Moving from
markdown-it
tomicromark
so we can support MathML and TeX (viamicromark-extension-math
andkatex
) in short future.We are still using
markdown-it
for internal localization and will evaluate if we should move to ICU/MessageFormat ormicromark
.Design
One-pager
'
would become´
in some cases,"
would become‶
and″
, and...
would become…
www.bing.com
andhttps://bing.com
into linksbing.com
<iframe>
into<iframe>
aria-label
attribute via{aria-label=""}
<a aria-label="">
directly<p>
Corner cases
Oneliner:
micromark
with "allow dangerous HTML" requires a separate sanitization process to make sure HTML code rendered are safe to use.[Link](javascript:alert(1))
<a href="javascript:alert(1)">Link</a>
[Link](javascript:alert(1))
(as text)<a href="">Link</a>
(withoutallowDangerousProtocol
)<a href="">Link</a>
(withoutallowDangerousProtocol
)<iframe>ABC</iframe>
<iframe>ABC</iframe>
<iframe>ABC</iframe>
<iframe>ABC</iframe>
<iframe>ABC</iframe>
<script>alert(0)</script>
<script>alert(0)</script>
<script>alert(0)</script>
<script>alert(0)</script>
<script>alert(0)</script>
<img onerror="javascript:alert(0)" />
<img onerror="javascript:alert(0)" />
<img onerror="javascript:alert(0)" />
<img onerror="javascript:alert(0)" />
<img onerror="javascript:alert(0)" />
The content of
<iframe>
tag is treated similar to CDATA. When usingmarkdown-it
,<iframe>abc<b>def</b>xyz</iframe>
will become<iframe>abc<b>def</b>xyz</iframe>
, where<b>
become<b>
.This caused slight deviation when using GFM tagfilter extension where
<iframe>
will turn into<iframe>
. The content of<iframe>
would not processed as CDATA but as-is.Thus, using
micromark-extension-gfm
, the<iframe>abc<b>def</b>xyz</iframe>
would become<iframe>abc<b>def</b>xyz</iframe>
and "def" will be bold.Allowing dangerous protocol
micromark
default set of URL protocol is limited to a handful.As we are always do HTML sanitization, with
micromark
, we should setallowDangerousProtocol: true
and let all protocol to fellthrough. So we only need to configure one rule for sanitization. Also, the protocol selection for links inmicromark
is limited and it don't allow URL handlers and links likecite:1
.Later on down the pipe, the final step is sanitizer and it will remove "javascript:" properly.
Furthermore in our better link mod, all disallowed schemes will be turned into
<button value="javascript:">
, which is mostly harmless.To enable sanitizing "javascript:" in links, we are skipping better link mod for "javascript:" protocol, so it continue to be
<a href="javascript:">
and will be stripped by the final sanitizer.Injecting
aria-label
As we introduced HTML-in-Markdown support recently, we encourage web devs to use HTML instead of
markdown-it-attrs
.markdown-it
[Link](https://bing.com/){aria-label="Bing homepage"}
micromark
<a aria-label="Bing homepage" href="https://bing.com/">Link</a>
Auto-link
markdown-it
turnwww.bing.com
,bing.com
, andhttps://bing.com
into a link.micromark-extension-gfm-autolink-literal
will ignorebing.com
. Instead ofbing.com
, bot author should usehttps://bing.com
instead.Smart quote
"Typographer" plugin, or "smart quote" was not introduced in
micromark
as it may cause issues with localization. For example,'
would become´
in some cases,"
would become‶
and″
, and...
would become…
.Math/TeX support
TODO: We are evaluating
micromark-extension-math
, which use KaTeX. However, it is a huge dependency as it also include fonts, we are looking for ways to adopt it.Disabling HTML
Note: CommonMark spec did not specify how HTML code should look when HTML is disabled.
Given
<abc>
as input Markdown text.markdown-it
micromark
<abc>
<abc>
<p><abc></p>
<abc>
Given
<abc>123</abc>
as input Markdown text.markdown-it
micromark
<abc>123</abc>
<abc>123</abc>
<p><abc>123</abc></p>
<p><abc>123</abc></p>
Given
<a href="https://bing.com">
.markdown-it
:<a href="<a href="https://bing.com">https://bing.com</a>">
https://bing.com
micromark
:<a href="https://bing.com">Bing.com</a>
https://bing.com
Specific Changes
renderMarkdown
to usemicromark
instead ofmarkdown-it
markdown-it
frombundle
, we still use it inapi
npm start
, which was broken from PR Build: add entry points without top level side-effects #5329.CHANGELOG.md
I have updated documentationReview Checklist
Accessibility reviewed (tab order, content readability, alt text, color contrast)Browser and platform compatibilities reviewedCSS styles reviewed (minimal rules, noz-index
)Documents reviewed (docs, samples, live demo)Internationalization reviewed (strings, unit formatting)package.json
andpackage-lock.json
reviewedSecurity reviewed (no data URIs, check for nonce leak)