Move to micromark (#5330)

* Move to micromark

* Transform micromark-extension-gfm*

* Fix strikethrough test

* Fix npm start

* Fallthrough for javascript: protocol and sanitize it

* Update test case

* Remove markdown-it

* Remove comment about markdown-it

* Update for removing typographer

* Adapt screenshots

* Remove tests related to markdown-it-attrs

* Adapt tests without <p>

* Fix tests related to markdown-it-attrs

* Not autolinking in micromark

* Fix for typographer

* Fix tests

* Fix snapshots

* Fix typographer

* Fix typographer

* Fix snapshots

* Fix snapshots

* Fix snapshots

* Fix snapshots

* Fix tests

* Fix snapshots

* Add entry

CHANGELOG.md

@@ -28,6 +28,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 
 -  `styleOptions.bubbleImageHeight` is being deprecated in favor of `styleOptions.bubbleImageMaxHeight` and `styleOptions.bubbleImageMinHeight`. The option will be removed on or after 2026-07-05
 -  `styleOptions.bubbleMaxWidth`/`bubbleMinWidth` is being deprecated in favor of `styleOptions.bubbleAttachmentMaxWidth`/`bubbleAttachmentMinWidth` and `styleOptions.bubbleMessageMaxWidth`/`bubbleMessageMinWidth`. The option will be removed on or after 2026-10-08
+-  Moved to `micromark` for rendering Markdown, instead of `markdown-it`
+   -  Please refer to PR [#5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330) for details
 
 ### Added
 
@@ -74,6 +76,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Improved message bubble layout in Fluent theme to allow growth beyond 450px up to 75% of container width, in PR [#5324](https://github.com/microsoft/BotFramework-WebChat/pull/5324), by [@OEvgeny](https://github.com/OEvgeny)
 -  Improved drop zone behavior and styling in Fluent theme, in PR [#5328](https://github.com/microsoft/BotFramework-WebChat/pull/5328), by [@OEvgeny](https://github.com/OEvgeny)
 -  Excluded side effects from module entry points to prevent global scope modifications, in PR [#5329](https://github.com/microsoft/BotFramework-WebChat/pull/5329), by [@OEvgeny](https://github.com/OEvgeny)
+-  Moved to `micromark` for rendering Markdown, instead of `markdown-it`, in PR [#5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330), by [@compulim](https://github.com/compulim)
 
 ### Fixed
 

__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html

@@ -72,7 +72,7 @@
         // The last activity have "webchat:fallback-text" field set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
         expect(screenReaderTexts).toEqual([
           'connecting',
-          'Bot said:\nNo “webchat:fallback-text” field.\nA text: Hello.\nA text: World!',
+          'Bot said:\nNo \"webchat:fallback-text\" field.\nA text: Hello.\nA text: World!',
           'Bot said:\nWith \"webchat:fallback-text\" field.',
           'Bot said:\nA text: Hello.\nA text: World!'
         ]);
@@ -85,7 +85,7 @@
         expect(screenReaderTexts).toEqual([
           'connecting',
           // In interactive transcript, this is narrated as "2 attachments".
-          'Bot said:\nNo “webchat:fallback-text” field.\nA text: Hello.\nA text: World!',
+          'Bot said:\nNo \"webchat:fallback-text\" field.\nA text: Hello.\nA text: World!',
           'Bot said:\nWith "webchat:fallback-text" field.',
           'Bot said:\nA text: Hello.\nA text: World!'
         ]);

__tests__/html/fluentTheme/side-by-side.wide.dark.html

@@ -123,7 +123,7 @@
           channelData: { state: 'sent' },
           from: { role: 'user' },
           id: '2.1',
-          text: 'sharepoint.contoso.com/newhires/',
+          text: 'https://sharepoint.contoso.com/newhires/',
           type: 'message'
         },
         {

__tests__/html/fluentTheme/side-by-side.wide.html

@@ -132,7 +132,7 @@
           channelData: { state: 'sent' },
           from: { role: 'user' },
           id: '2.1',
-          text: 'sharepoint.contoso.com/newhires/',
+          text: 'https://sharepoint.contoso.com/newhires/',
           type: 'message'
         },
         {

__tests__/html/markdownRenderHTML/false.adaptiveCards.html

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

__tests__/html/markdownRenderHTML/false.citationModal.html

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

__tests__/html/markdownRenderHTML/false.messageActivity.html

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

jest.legacy.config.js

@@ -10,6 +10,13 @@ const TRANSFORM_IGNORE_PACKAGES = [
   'mdast-util-from-markdown',
   'mdast-util-to-string',
   'micromark-core-commonmark',
+  'micromark-extension-gfm',
+  'micromark-extension-gfm-autolink-literal',
+  'micromark-extension-gfm-footnote',
+  'micromark-extension-gfm-strikethrough',
+  'micromark-extension-gfm-table',
+  'micromark-extension-gfm-tagfilter',
+  'micromark-extension-gfm-task-list-item',
   'micromark-factory-destination',
   'micromark-factory-label',
   'micromark-factory-space',