Add code block copy button

[compulim]

Fixes #

Changelog Entry

Added

• Added copy button to code blocks, in PR #5334, by @compulim

Description

For code blocks inside Markdown (via triple-backtick or <pre>), we will add a copy button on the top right corner of it.

Design

We are introducing internal-use Web Components.

As we go through sanitization, DOM become string and it lose event handler. In other words, we cannot listen to "click" event on the button after sanitization.

Our solution is to use Web Components so we can preserve logic during sanitization.

Alternatively, we could have a catch-all click handler on Markdown, but it is not trivial as Adaptive Cards requires a HTML string instead of DOM too. That means, we will need to put a catch-all container in 2+ different places.

Specific Changes

• Added new CustomElementsProvider to host internal-use hash-secured Web Components
• Added new code block copy button <webchat-xxxxx--code-block-copy-button> where xxxxx is a random hash
• Chaining package.json via touch so changes to core will trigger rebuild of api, and so on

• 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)