Fix text missing after HTML tags (#5320)

* Fix text missing after HTML tags * Move to DocumentFragment * Fix tests * Fold multiple newlines * Revert "Fix tests" This reverts commit 9b04af8. * Use `createDocumentFragment` * Fix tests * Fix tests * Fix tests
microsoft · Oct 7, 2024 · 1d59ded · 1d59ded
1 parent 141a09b
commit 1d59ded
Show file tree

Hide file tree

Showing 34 changed files with 326 additions and 254 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -78,6 +78,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixes [#5294](https://github.com/microsoft/BotFramework-WebChat/issues/5294). Fixed copy button animation reset to "Copied" after hiding and showing Web Chat, in PR [#5295](https://github.com/microsoft/BotFramework-WebChat/pull/5295), by [@compulim](https://github.com/compulim)
 -  Fixes [#5147](https://github.com/microsoft/BotFramework-WebChat/issues/5147). Added `punycode` to our dependencies as `markdown-it` requires it but did not have it in their `package.json`, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Fixes [#5306](https://github.com/microsoft/BotFramework-WebChat/issues/5306). Title and subtitle in pre-chat message activity should wrap, in PR [#5307](https://github.com/microsoft/BotFramework-WebChat/pull/5307), by [@compulim](https://github.com/compulim)
+-  Fixes [#5319](https://github.com/microsoft/BotFramework-WebChat/issues/5319). Some Markdown text are not rendered after HTML tags, in PR [#5320](https://github.com/microsoft/BotFramework-WebChat/pull/5320), by [@compulim](https://github.com/compulim)
 
 # Removed
 

diff --git a/__tests__/hooks/useRenderMarkdownAsHTML.js b/__tests__/hooks/useRenderMarkdownAsHTML.js
@@ -16,7 +16,7 @@ test('renderMarkdown should use Markdown-It if not set in props', async () => {
       'webchat--css-xxxxx-xxxxx'
     )
   ).toBe(
-    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>\n'
+    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>'
   );
 });
 
@@ -33,7 +33,7 @@ test('renderMarkdown should use custom Markdown transform function from props',
       'webchat--css-xxxxx-xxxxx'
     )
   ).toBe(
-    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>\n'
+    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>'
   );
 });
 
@@ -57,7 +57,7 @@ test('renderMarkdown should add accessibility text for external links', async ()
       )
     ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
   ).toBe(
-    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>\n`
+    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>`
   );
 });
 
@@ -71,6 +71,6 @@ test('renderMarkdown should add accessibility text for external links with yue',
       )
     ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
   ).toBe(
-    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>\n`
+    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>`
   );
 });
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.html b/__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.html
@@ -35,7 +35,7 @@
 
         await pageConditions.numActivitiesShown(1);
 
-        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Hello, World!\n');
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Hello, World!');
 
         const pushButton1 = document.querySelector('.ac-pushButton');
 
@@ -53,7 +53,7 @@
           type: 'message'
         });
 
-        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Aloha!\n');
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Aloha!');
 
         const pushButton2 = document.querySelector('.ac-pushButton');
 

diff --git a/__tests__/html/accessibility.adaptiveCard.hack.persistValuesMod.html b/__tests__/html/accessibility.adaptiveCard.hack.persistValuesMod.html
@@ -45,7 +45,7 @@
 
         await pageConditions.numActivitiesShown(1);
 
-        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Hello, World!\n');
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Hello, World!');
 
         const textInput1 = document.querySelector('.ac-textInput');
 
@@ -62,7 +62,7 @@
           type: 'message'
         });
 
-        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Aloha!\n');
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Aloha!');
 
         const textInput2 = document.querySelector('.ac-textInput');
 

diff --git a/__tests__/html/markdownRenderHTML/false.adaptiveCards.html b/__tests__/html/markdownRenderHTML/false.adaptiveCards.html
@@ -59,7 +59,7 @@
 
         const markdownElement = firstActivityElement.querySelectorAll('.webchat__render-markdown')[1];
 
-        expect(markdownElement.textContent.startsWith('Header<p>This is some text')).toBe(true);
+        expect(markdownElement.innerHTML.startsWith('<h2>Header</h2>\n<p>&lt;p&gt;This is some text')).toBe(true);
 
         await host.snapshot();
       });

diff --git a/__tests__/html/markdownRenderHTML/false.citationModal.html b/__tests__/html/markdownRenderHTML/false.citationModal.html
@@ -97,7 +97,7 @@
 
         const markdownElement = document.querySelectorAll('dialog .webchat__render-markdown')[1];
 
-        expect(markdownElement.textContent.startsWith('Header<p>This is some text')).toBe(true);
+        expect(markdownElement.innerHTML.startsWith('<h2>Header</h2>\n<p>&lt;p&gt;This is some text')).toBe(true);
 
         await host.snapshot();
       });

diff --git a/__tests__/html/markdownRenderHTML/false.messageActivity.html b/__tests__/html/markdownRenderHTML/false.messageActivity.html
@@ -32,7 +32,7 @@
 
         const markdownElement = firstActivityElement.querySelector('.webchat__render-markdown');
 
-        expect(markdownElement.textContent.startsWith('Header<p>This is some text')).toBe(true);
+        expect(markdownElement.innerHTML.startsWith('<h2>Header</h2>\n<p>&lt;p&gt;This is some text')).toBe(true);
 
         await host.snapshot();
       });

diff --git a/__tests__/html/typing/activityOrder.html b/__tests__/html/typing/activityOrder.html
@@ -75,9 +75,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys.
@@ -102,12 +102,12 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
         expect(pageElements.activityContents()[2]).toHaveProperty(
           'textContent',
-          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.\n'
+          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.'
         );
         await host.snapshot();
 
@@ -134,12 +134,12 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox');
         expect(pageElements.activityContents()[2]).toHaveProperty(
           'textContent',
-          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.\n'
+          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.'
         );
         await host.snapshot();
 
@@ -166,12 +166,12 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
         expect(pageElements.activityContents()[2]).toHaveProperty(
           'textContent',
-          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.\n'
+          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.'
         );
         await host.snapshot();
 
@@ -197,15 +197,15 @@
         await pageConditions.numActivitiesShown(3);
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
         expect(pageElements.activityContents()[1]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         expect(pageElements.activityContents()[2]).toHaveProperty(
           'textContent',
-          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.\n'
+          'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.'
         );
         expect(pageElements.typingIndicator()).toBeFalsy();
         await host.snapshot();

diff --git a/__tests__/html/typing/chunk.html b/__tests__/html/typing/chunk.html
@@ -75,9 +75,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys.
@@ -102,9 +102,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys only.
@@ -129,9 +129,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys.
@@ -154,11 +154,11 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
         expect(pageElements.activityContents()[1]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         await host.snapshot();
 

diff --git a/__tests__/html/typing/concludedLivestream.html b/__tests__/html/typing/concludedLivestream.html
@@ -69,7 +69,7 @@
         // THEN: Should display 1 message.
         await pageConditions.numActivitiesShown(1);
         expect(pageElements.typingIndicator()).toBeFalsy();
-        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'A quick\n');
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'A quick');
         await host.snapshot();
 
         // THEN: Should have 1 activity key.
@@ -102,7 +102,7 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         await host.snapshot();
 
@@ -131,7 +131,7 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         await host.snapshot();
 
@@ -160,7 +160,7 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         await host.snapshot();
 

diff --git a/__tests__/html/typing/informative.html b/__tests__/html/typing/informative.html
@@ -58,9 +58,9 @@
         // THEN: Should render the informative message.
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'Nisi elit quis nisi consectetur.\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'Nisi elit quis nisi consectetur.');
 
         await pageConditions.numActivitiesShown(2);
         await host.snapshot();

diff --git a/__tests__/html/typing/layout.html b/__tests__/html/typing/layout.html
@@ -102,7 +102,7 @@
         await pageConditions.numActivitiesShown(1);
         await pageConditions.became(
           'informative message show up',
-          () => pageElements.activityContents()[0].textContent === 'Searching your document library…\n',
+          () => pageElements.activityContents()[0].textContent === 'Searching your document library…',
           1_000
         );
 
@@ -131,7 +131,7 @@
         await pageConditions.numActivitiesShown(1);
         await pageConditions.became(
           'interim activity show up',
-          () => pageElements.activityContents()[0].textContent === 'A quick brown fox\n',
+          () => pageElements.activityContents()[0].textContent === 'A quick brown fox',
           1_000
         );
 
@@ -159,7 +159,7 @@
         await pageConditions.numActivitiesShown(1);
         await pageConditions.became(
           'final activity show up',
-          () => pageElements.activityContents()[0].textContent === 'A quick brown fox jumped over the lazy dogs.\n',
+          () => pageElements.activityContents()[0].textContent === 'A quick brown fox jumped over the lazy dogs.',
           1_000
         );
 

diff --git a/__tests__/html/typing/outOfOrder.html b/__tests__/html/typing/outOfOrder.html
@@ -81,9 +81,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys.
@@ -120,9 +120,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys only.
@@ -159,9 +159,9 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over\n');
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
         await host.snapshot();
 
         // THEN: Should have 2 activity keys.
@@ -197,11 +197,11 @@
         expect(pageElements.typingIndicator()).toBeFalsy();
         expect(pageElements.activityContents()[0]).toHaveProperty(
           'textContent',
-          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.\n'
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
         );
         expect(pageElements.activityContents()[1]).toHaveProperty(
           'textContent',
-          'A quick brown fox jumped over the lazy dogs.\n'
+          'A quick brown fox jumped over the lazy dogs.'
         );
         await host.snapshot();