[Feature] Support HTML-in-Markdown

[beyackle2]

Changelog Entry

Breaking changes

• HTML-in-Markdown is now supported. To disable this feature, set styleOptions.markdownRenderHTML to false

Added

• Added support of rendering HTML-in-Markdown, in PR #5161, by @compulim, @beyackle2, and @OEvgeny

Description

This enables rendering of HTML-based citations by porting our "better link" plug-in into a HTML mod. And providing a new styleOptions to disable this if needed.

Design

Porting "better link" plugin to a HTML mod

Today, the "better link" is a Markdown-It plugin. It can only apply to Markdown links but not <a>.

We are porting the "better link" into a HTML mod, so we can apply a few decorations to <a> in additional to Markdown links:

• Adds aria-label/title (accessibility)
• Changes link to a <button> (needed by citation)
• Adds rel="noopener noreferer" and target="_blank" (security)
• Adds "Open in external" icon (accessibility)

In future, we can apply "better link" and sanitization with a BYO Markdown engine. Today, the BYO engine need to do these job themselves.

Output of useRenderMarkdownAsHTML

Today, useRenderMarkdownAsHTML will emit <p>Hello, World!</p>.

As this HTML could be used in Adaptive Cards, and we are using CSS to apply "open in external" icon. We need to add a container around the emitted HTML to apply our CSS.

Tomorrow, it will emit <div class="webchat__render-markdown"><p>Hello, World!</p></div>.

The webchat__render-markdown is a "lightweight" container with CSS of display: contents.

Specific Changes

• Added new styleOptions.markdownRenderHTML and default to true
• Updated useRenderMarkdownAsHTML to emit HTML with a container
• Ported "better link" plug-in to HTML mod
• Updated snapshots related as links in Adaptive Cards will now have "open in external" icon

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)