microsoft · compulim · May 3, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+-  Renders HTML-based citation text, including within Markdown. HTML display should be sanitized and correctly formatted, by [@compulim](https://github.com/compulim), [@beyackle2](https://github.com/beyackle2), and [@OEvgeny](https://github.com/OEvgeny) in PR [#5161](https://github.com/microsoft/BotFramework-WebChat/pull/5161)
 -  Resolves [#5083](https://github.com/microsoft/BotFramework-WebChat/issues/5083). Added `sendAttachmentOn` style option to send attachments and text in a single activity, by [@ms-jb](https://github.com/ms-jb) and [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123)
    -  `useSendMessage` hook is updated to support sending attachments with a message
    -  `useSendBoxAttachments` hook is added to get/set attachments in the send box
@@ -65,6 +66,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 -  Added `moduleFormat` and `transpiler` build info to `<meta>` tag, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Added support of rendering HTML-in-Markdown in citation modal, in PR [#5161](https://github.com/microsoft/BotFramework-WebChat/pull/5161), by [@compulim](https://github.com/compulim), [@beyackle2](https://github.com/beyackle2), and [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

diff --git a/...ion-js-markdown-render-html-renders-sanitized-html-in-citation-modal-1-snap.png b/...ion-js-markdown-render-html-renders-sanitized-html-in-citation-modal-1-snap.png
diff --git a/__tests__/html/markdownRenderHTML/renderHTML.citation.html b/__tests__/html/markdownRenderHTML/renderHTML.citation.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              citation: [
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    url: 'https://example.com/1/',
+                    usageInfo: {
+                      '@id': '_:1',
+                      '@type': 'CreativeWork',
+                      description:
+                        'Nisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.',
+                      keywords: ['encrypted-content'],
+                      name: 'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'orange'
+                      }
+                    }
+                  },
+                  position: 1
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: 'Incididunt amet dolore anim commodo fugiat occaecat elit nulla do consequat. Quis incididunt occaecat labore adipisicing. Cillum sunt velit consequat irure ipsum ullamco sint ea aute. Sunt et eu ut enim aliqua cupidatat non adipisicing dolore commodo dolor magna enim. Commodo reprehenderit excepteur ad nostrud ex id aliquip deserunt eiusmod. Esse non labore nulla voluptate.',
+                    usageInfo: {
+                      '@type': 'CreativeWork',
+                      name: 'Velit exercitation',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'Yellow'
+                      }
+                    }
+                  },
+                  position: 3
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: atob('PGgyPkhlYWRlcjwvaDI+CjxwPlRoaXMgaXMgc29tZSB0ZXh0IHdpdGggYSA8YSBocmVmPSJodHRwOi8vZXhhbXBsZS5jb20iIHRpdGxlPSJldmVuIGhhY2tlcnMgcmVzcGVjdCBhMTF5Ij5saW5rIGluIGl0PC9hPi4gQWxzbyA8c3Ryb25nPnNvbWUgdGV4dDwvc3Ryb25nPiA8ZW0+d2l0aCBmb3JtYXR0aW5nPC9lbT4uPC9wPgo8dWw+CjxsaT5Vbm9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+CjwvdWw+CjxvbD4KPGxpPk9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+Cjwvb2w+Cjx1bD4KPGxpPkJlbG93IGFyZSBzb21lIHVuc2FmZSB0aGluZ3MgdGhhdCBzaG91bGQgZ2V0IHNhbml0aXplZDoKPGxpPjxzY3JpcHQ+VGhpcyBpc24ndCBhbGxvd2VkITwvc2NyaXB0Pgo8bGk+PGltZyBzcmM9IiIgYWx0PSJJIGFtIGEgZHVtbXkgaW1hZ2UgdHJ5aW5nIHRvIGhhY2sgeW91IiBvbmVycm9yPWFsZXJ0KDEpIC8+CjxsaT48c3ZnIGFyaWEtbGFiZWw9Im1hbGljaW91cyBzdmcgaGVyZSI+PGcvb25sb2FkPWFsZXJ0KDIpLy88cD4KPGxpPjxwPmFiYzxpZnJhbWUvL3NyYz1qQXZhJlRhYjtzY3JpcHQ6YWxlcnQoMyk+ZGVmPC9wPgo8bGk+PG1hdGg+PG1pLy94bGluazpocmVmPSJkYXRhOngsPHNjcmlwdD5hbGVydCg0KTwvc2NyaXB0Pgo8bGk+CjwvdWw+')
+                  },
+                  position: 4
+                }
+              ],
+              type: 'https://schema.org/Message',
+              usageInfo: { '@id': '_:1' }
+            }
+          ],
+          text: 'Ipsum[1] dolore[2] cupidatat[3] magna[4] consectetur[5] do tempor est excepteur.\n\n[1]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[2]: https://example.com/2/ "Laboris cupidatat voluptate"\n[3]: _:3 "Velit nulla culpa eu ea consectetur consectetur dolore velit"\n[4]: _:4 "Adipisicing enim nulla"\n[5]: https://example.com/5',
+          type: 'message'
+        });
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+
+        expect(linkDefinitions).toHaveProperty('length', 5);
+
+        linkDefinitions[3].querySelector('button').click();
+        const link = document.querySelector('[href="http://example.com"]');
+        const linkImg = link.querySelector('.webchat__render-markdown__external-link-icon')
+        expect(link.getAttribute('aria-label')).toBe('link in it Opens in a new window; external.');
+        expect(link.getAttribute('target')).toBe('_blank');
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(linkImg.title).toBe('Opens in a new window; external.');
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/markdownRenderHTML/renderHTML.citation.js b/__tests__/html/markdownRenderHTML/renderHTML.citation.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('markdownRenderHTML', () => {
+  test('renders sanitized html in citation modal', () => runHTML('markdownRenderHTML/renderHTML.citation'));
+});
@@ -210,6 +210,11 @@ type StyleOptions = {
    */
   markdownRespectCRLF?: boolean;
 
+  /**
+   * Render HTML alongside Markdown
+   */
+
+  markdownRenderHTML?: boolean;
   /**
    * Assign new image for anchor links to indicate external
    */

@@ -82,6 +82,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   markdownExternalLinkIconImage:
     'url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjMjEyMTIxIiAvPjwvc3ZnPg==)',
   markdownRespectCRLF: true,
+  markdownRenderHTML: true,
 
   // Scroll behavior
   hideScrollToEndButton: undefined, // Deprecated as of 4.14.0. Use "scrollToEndButtonBehavior" instead. Remove on or after 2023-06-02.

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import MarkdownIt from 'markdown-it';
+import betterLink from '../markdownItPlugins/betterLink';
+import betterLinkDocumentMod, { type BetterLinkDocumentModDecoration } from './betterLinkDocumentMod';
+import parseDocumentFromString from './parseDocumentFromString';
+import serializeDocumentIntoString from './serializeDocumentIntoString';
+
+const BASE_MARKDOWN = '[Example](https://example.com)';
+const BASE_HTML = new MarkdownIt().render(BASE_MARKDOWN);
+
+describe('When passing "ariaLabel" option with "Hello, World!"', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { ariaLabel: 'Hello, World!' };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should have "aria-label" attribute set to "Hello, World!"', () =>
+    expect(actual.querySelector('a').getAttribute('aria-label')).toBe('Hello, World!'));
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><a href="https://example.com" aria-label="Hello, World!">Example</a></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});
+
+describe('When passing "ariaLabel" option with false', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { ariaLabel: false };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(
+      parseDocumentFromString('<a href="https://example.com" aria-label="Hello, World!">Example</a>'),
+      () => decoration
+    );
+  });
+
+  test('should have "aria-label" attribute removed', () =>
+    expect(actual.querySelector('a').hasAttribute('aria-label')).toBe(false));
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe('<a href="https://example.com">Example</a>'));
+});
@@ -0,0 +1,136 @@
+/** @jest-environment jsdom */
+
+import MarkdownIt from 'markdown-it';
+import betterLink from '../markdownItPlugins/betterLink';
+import betterLinkDocumentMod, { type BetterLinkDocumentModDecoration } from './betterLinkDocumentMod';
+import parseDocumentFromString from './parseDocumentFromString';
+import serializeDocumentIntoString from './serializeDocumentIntoString';
+
+const BASE_MARKDOWN = '[Example](https://example.com)';
+const BASE_HTML = new MarkdownIt().render(BASE_MARKDOWN);
+
+describe('When passing "asButton" option with true', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { asButton: true };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should replace with <button type="button">', () =>
+    expect(actual.querySelector('button').getAttribute('type')).toBe('button'));
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><button type="button" value="https://example.com">Example</button></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});
+
+describe('When passing "asButton" option with true and "iconClassName" with "my-icon"', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { asButton: true, iconClassName: 'my-icon' };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should replace with <button type="button">', () =>
+    expect(actual.querySelector('button').getAttribute('type')).toBe('button'));
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><button type="button" value="https://example.com">Example<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="my-icon" /></button></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});
+
+describe('When passing "asButton" option with true and "title" with "Hello, World!"', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { asButton: true, title: 'Hello, World!' };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should replace with <button type="button" title="Hello, World!">', () => {
+    expect(actual.querySelector('button').getAttribute('type')).toBe('button');
+    expect(actual.querySelector('button').getAttribute('title')).toBe('Hello, World!');
+  });
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><button title="Hello, World!" type="button" value="https://example.com">Example</button></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});
+
+describe('When passing "asButton" option with true and "className" with "my-link"', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { asButton: true, className: 'my-link' };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should replace with <button type="button" class="my-link">', () => {
+    expect(actual.querySelector('button').getAttribute('type')).toBe('button');
+    expect(actual.querySelector('button').getAttribute('class')).toBe('my-link');
+  });
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><button class="my-link" type="button" value="https://example.com">Example</button></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});
+
+describe('When passing "asButton" option with true and "aria-label" with "Hello, World!"', () => {
+  let actual: Document;
+  const decoration: BetterLinkDocumentModDecoration = { asButton: true, ariaLabel: 'Hello, World!' };
+
+  beforeEach(() => {
+    actual = betterLinkDocumentMod(parseDocumentFromString(BASE_HTML), () => decoration);
+  });
+
+  test('should replace with <button type="button" aria-label="Hello, World!">', () => {
+    expect(actual.querySelector('button').getAttribute('type')).toBe('button');
+    expect(actual.querySelector('button').getAttribute('aria-label')).toBe('Hello, World!');
+  });
+
+  test('should match snapshot', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      '<p><button aria-label="Hello, World!" type="button" value="https://example.com">Example</button></p>\n'
+    ));
+
+  test('should match baseline', () =>
+    expect(serializeDocumentIntoString(actual)).toBe(
+      serializeDocumentIntoString(
+        parseDocumentFromString(new MarkdownIt().use(betterLink, () => decoration).render(BASE_MARKDOWN))
+      )
+    ));
+});