Remove markdown-it (#5825)

* Remove markdown-it

* Fix type error

* Fix undefined author name

* Add TODO

* Refactor internalRenderMarkdownInline

* Add component-better-link to npm start

* Add dataset options to better link

* Remove trailing </p>

* Fix localize spread args

* Fix Prettier

* Add entry

* Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: compulim

CHANGELOG.md

@@ -19,6 +19,10 @@ Legends:
 
 ## [Unreleased]
 
+### Changed
+
+- Removed `markdown-it` and completed migration to `micromark`, in PR [#5825](https://github.com/microsoft/BotFramework-WebChat/pull/5825), by [@compulim](https://github.com/compulim)
+
 ## [4.19.0] - 2026-05-25
 
 Breaking changes in this release:

lint-staged.config.js

@@ -17,6 +17,7 @@ module.exports = {
   'packages/base/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:base'],
   'packages/bundle/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:bundle'],
   'packages/component/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:component'],
+  'packages/component-better-link/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:component-better-link'],
   'packages/core/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:core'],
   'packages/core-debug-api/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:core-debug-api'],
   'packages/core-graph/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:core-graph'],

package-lock.json

@@ -35,6 +35,7 @@
     "packages/api",
     "packages/isomorphic-react",
     "packages/isomorphic-react-dom",
+    "packages/component-better-link",
     "packages/component",
     "packages/repack/adaptivecards",
     "packages/repack/base64-js",
@@ -83,6 +84,7 @@
     "precommit:eslint:base": "cd packages && cd base && npm run precommit:eslint",
     "precommit:eslint:bundle": "cd packages && cd bundle && npm run precommit:eslint",
     "precommit:eslint:component": "cd packages && cd component && npm run precommit:eslint",
+    "precommit:eslint:component-better-link": "cd packages && cd component-better-link && npm run precommit:eslint",
     "precommit:eslint:core": "cd packages && cd core && npm run precommit:eslint",
     "precommit:eslint:core-debug-api": "cd packages && cd core-debug-api && npm run precommit:eslint",
     "precommit:eslint:core-graph": "cd packages && cd core-graph && npm run precommit:eslint",
@@ -121,6 +123,7 @@
     "precommit:typecheck:base": "cd packages && cd base && npm run precommit:typecheck",
     "precommit:typecheck:bundle": "cd packages && cd bundle && npm run precommit:typecheck",
     "precommit:typecheck:component": "cd packages && cd component && npm run precommit:typecheck",
+    "precommit:typecheck:component-better-link": "cd packages && cd component-better-link && npm run precommit:typecheck",
     "precommit:typecheck:core": "cd packages && cd core && npm run precommit:typecheck",
     "precommit:typecheck:core-debug-api": "cd packages && cd core-debug-api && npm run precommit:typecheck",
     "precommit:typecheck:core-graph": "cd packages && cd core-graph && npm run precommit:typecheck",
@@ -151,6 +154,7 @@
     "start:base": "cd packages && cd base && npm start",
     "start:bundle": "cd packages && cd bundle && npm start",
     "start:component": "cd packages && cd component && npm start",
+    "start:component-better-link": "cd packages && cd component-better-link && npm start",
     "start:core": "cd packages && cd core && npm start",
     "start:core-debug-api": "cd packages && cd core-debug-api && npm start",
     "start:core-graph": "cd packages && cd core-graph && npm start",

package.json

@@ -1,10 +1,10 @@
 import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import { useCallback } from 'react';
 
+import { isPlainObject } from '@msinternal/botframework-webchat-base/utils';
 import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
 import useLocalizedGlobalize from './internal/useLocalizedGlobalize';
 import useLocalizedStrings from './internal/useLocalizedStrings';
-import { isPlainObject } from '@msinternal/botframework-webchat-base/utils';
 
 const DEFAULT_STRINGS = getAllLocalizedStrings()['en-US'];
 
@@ -17,12 +17,18 @@ type Plural = {
   other: string;
 };
 
-export default function useLocalizer({ plural }: { plural?: boolean } = {}) {
+type PluralLocalizer = (id: Plural, arg0: number, ...argRest: readonly string[]) => string;
+type SingularLocalizer = (id: string, ...argRest: readonly string[]) => string;
+
+function useLocalizer(init: { plural: true }): PluralLocalizer;
+function useLocalizer(init?: { plural?: false } | undefined): SingularLocalizer;
+
+function useLocalizer({ plural }: { plural?: boolean } = {}): PluralLocalizer | SingularLocalizer {
   const [globalize] = useLocalizedGlobalize();
   const localizedStrings = useLocalizedStrings();
 
   return useCallback(
-    (id: string | Plural, ...args: [(number | string)?, ...string[]]) => {
+    (id: string | Plural, arg0: number | string, ...argRest: readonly string[]) => {
       let stringId = id as string;
 
       if (plural) {
@@ -32,7 +38,7 @@ export default function useLocalizer({ plural }: { plural?: boolean } = {}) {
           throw new Error('useLocalizer: Plural string must pass "id" as a plain object instead of string.');
         } else if (typeof pluralId.other !== 'string') {
           throw new Error('useLocalizer: Plural string must have "id.other" of string.');
-        } else if (typeof args[0] !== 'number') {
+        } else if (typeof arg0 !== 'number') {
           throw new Error('useLocalizer: Plural string must have first argument as a number.');
         }
 
@@ -58,12 +64,12 @@ export default function useLocalizer({ plural }: { plural?: boolean } = {}) {
           );
         }
 
-        stringId = pluralId[globalize.plural(args[0])] || pluralId.other;
+        stringId = pluralId[globalize.plural(arg0)] || pluralId.other;
       } else if (typeof id !== 'string') {
         throw new Error('useLocalizer: "id" must be a string.');
       }
 
-      return Object.entries(args).reduce(
+      return Object.entries(typeof arg0 === 'undefined' ? argRest : [arg0, ...argRest]).reduce(
         (str, [index, arg]) => str.replace(`$${+index + 1}`, arg),
         // Mitigation through denylisting.
         // eslint-disable-next-line security/detect-object-injection
@@ -73,3 +79,5 @@ export default function useLocalizer({ plural }: { plural?: boolean } = {}) {
     [globalize, localizedStrings, plural]
   );
 }
+
+export default useLocalizer;

packages/api/src/hooks/useLocalizer.ts

@@ -3,12 +3,12 @@ import katex from 'katex';
 import { compile, parse, postprocess, preprocess } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import type { Event, Options } from 'micromark-util-types';
+import { betterLinkDocumentMod } from 'botframework-webchat-component/internal.js';
 
 import { math, mathHtml } from './mathExtension';
-import betterLinkDocumentMod from './private/betterLinkDocumentMod';
+import { createDecorate } from './private/createDecorate';
 import extractDefinitionsFromEvents, { type MarkdownLinkDefinition } from './private/extractDefinitionsFromEvents';
 import { pre as respectCRLFPre } from './private/respectCRLF';
-import { createDecorate } from './private/createDecorate';
 
 type StreamingRenderInit = Readonly<{
   externalLinkAlt: string;

packages/bundle/src/markdown/createStreamingRenderer.ts

@@ -1,7 +1,7 @@
+import type { BetterLinkDocumentModDecoration } from 'botframework-webchat-component/internal.js';
 import { onErrorResumeNext } from 'botframework-webchat-core';
-import type { BetterLinkDocumentModDecoration } from './betterLinkDocumentMod';
-import type { MarkdownLinkDefinition } from './extractDefinitionsFromEvents';
 import { sanitizeUri } from 'micromark-util-sanitize-uri';
+import type { MarkdownLinkDefinition } from './extractDefinitionsFromEvents';
 
 export const ALLOWED_SCHEMES = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'];
 

packages/bundle/src/markdown/private/createDecorate.ts

@@ -1,4 +1,5 @@
 import {
+  betterLinkDocumentMod,
   parseDocumentFragmentFromString,
   serializeDocumentFragmentIntoString,
   type HighlightCodeFn
@@ -14,10 +15,9 @@ import createStreamingRenderer, {
   type StreamingRenderOptions
 } from './createStreamingRenderer';
 import { math, mathHtml } from './mathExtension';
-import betterLinkDocumentMod from './private/betterLinkDocumentMod';
+import { createDecorate } from './private/createDecorate';
 import iterateLinkDefinitions from './private/iterateLinkDefinitions';
 import { pre as respectCRLFPre } from './private/respectCRLF';
-import { createDecorate } from './private/createDecorate';
 
 type RenderInit = Readonly<{
   codeBlockCopyButtonTagName: string;

packages/bundle/src/markdown/renderMarkdown.ts

@@ -0,0 +1,14 @@
+extends:
+  - ../../.eslintrc.production.yml
+  - ../../.eslintrc.react.yml
+
+# This package is compatible with web browser.
+env:
+  browser: true
+
+rules:
+  # React functional component is better in function style than arrow style.
+  prefer-arrow-callback: off
+
+  # React already deprecated default props.
+  react/require-default-props: off

packages/component-better-link/.eslintrc.yml

@@ -0,0 +1,4 @@
+/*.tgz
+/dist/
+/node_modules/
+/tsup.config.bundled_*.mjs