botframework-webchat-component 4.19.0 → 4.19.1-main.20260529.6bcfcee

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-component",
-  "version": "4.19.0",
+  "version": "4.19.1-main.20260529.6bcfcee",
   "description": "React component of botframework-webchat",
   "main": "./dist/botframework-webchat-component.js",
   "types": "./dist/botframework-webchat-component.d.ts",
@@ -126,7 +126,7 @@
     "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
     "preversion": "../../scripts/npm/preversion.sh",
-    "start": "../../scripts/npm/notify-build.sh \"src\" \"../react-hooks/package.json\" \"../react-valibot/package.json\" \"../styles/package.json\""
+    "start": "../../scripts/npm/notify-build.sh \"src\" \"../component-better-link/package.json\" \"../react-hooks/package.json\" \"../react-valibot/package.json\" \"../styles/package.json\""
   },
   "pinDependencies": {
     "@types/jest": [
@@ -141,10 +141,6 @@
       "1",
       "@>=2 does not support IE Mode"
     ],
-    "markdown-it": [
-      "13",
-      "markdown-it@14.1.0 has module field and it is breaking Webpack 4 because cross loading CJS and ESM"
-    ],
     "react": [
       "16.8.6",
       "using react@16.8.6 to make sure this is the minimum supported version"
@@ -166,6 +162,7 @@
   },
   "localDependencies": {
     "@msinternal/botframework-webchat-base": "development",
+    "@msinternal/botframework-webchat-component-better-link": "development",
     "@msinternal/botframework-webchat-react-hooks": "development",
     "@msinternal/botframework-webchat-react-valibot": "development",
     "@msinternal/botframework-webchat-styles": "development",
@@ -176,11 +173,12 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@msinternal/botframework-webchat-base": "4.19.0",
-    "@msinternal/botframework-webchat-react-hooks": "4.19.0",
-    "@msinternal/botframework-webchat-react-valibot": "4.19.0",
-    "@msinternal/botframework-webchat-styles": "4.19.0",
-    "@msinternal/botframework-webchat-tsconfig": "4.19.0",
+    "@msinternal/botframework-webchat-base": "4.19.1-main.20260529.6bcfcee",
+    "@msinternal/botframework-webchat-component-better-link": "4.19.1-main.20260529.6bcfcee",
+    "@msinternal/botframework-webchat-react-hooks": "4.19.1-main.20260529.6bcfcee",
+    "@msinternal/botframework-webchat-react-valibot": "4.19.1-main.20260529.6bcfcee",
+    "@msinternal/botframework-webchat-styles": "4.19.1-main.20260529.6bcfcee",
+    "@msinternal/botframework-webchat-tsconfig": "4.19.1-main.20260529.6bcfcee",
     "@types/dom-speech-recognition": "^0.0.9",
     "@types/jest": "^29.5.14",
     "@types/mdast": "^4.0.4",
@@ -196,16 +194,16 @@
   "dependencies": {
     "@emotion/css": "11.13.5",
     "base64-js": "1.5.1",
-    "botframework-webchat-api": "4.19.0",
-    "botframework-webchat-core": "4.19.0",
+    "botframework-webchat-api": "4.19.1-main.20260529.6bcfcee",
+    "botframework-webchat-core": "4.19.1-main.20260529.6bcfcee",
     "classnames": "2.5.1",
     "compute-scroll-into-view": "1.0.20",
     "deep-freeze-strict": "1.1.1",
-    "markdown-it": "13.0.2",
     "math-random": "2.0.1",
     "mdast-util-from-markdown": "2.0.3",
     "memoize-one": "6.0.0",
     "merge-refs": "2.0.0",
+    "micromark": "4.0.2",
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
     "react-chain-of-responsibility": "0.4.2",

package/src/ActivityStatus/SendStatus/private/SendFailedRetry.tsx

@@ -0,0 +1,31 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useLocalizer } from 'botframework-webchat-api/hook.js';
+import React, { useCallback } from 'react';
+import { function_, object, pipe, readonly, type InferInput } from 'valibot';
+
+import InlineMarkdown from '../../../Utils/InlineMarkdown';
+
+const MARKDOWN_REFERENCES = ['RETRY'];
+
+const sendFailedRetryPropsSchema = pipe(
+  object({
+    onRetryClick: function_()
+  }),
+  readonly()
+);
+
+type SendFailedRetryProps = InferInput<typeof sendFailedRetryPropsSchema>;
+
+const SendFailedRetry = (props: SendFailedRetryProps) => {
+  const { onRetryClick } = validateProps(sendFailedRetryPropsSchema, props);
+
+  const handleReference = useCallback(({ data }) => data === 'RETRY' && onRetryClick(), [onRetryClick]);
+  const localize = useLocalizer();
+
+  const sendFailedText = localize('ACTIVITY_STATUS_SEND_FAILED_RETRY');
+
+  return <InlineMarkdown markdown={sendFailedText} onReference={handleReference} references={MARKDOWN_REFERENCES} />;
+};
+
+export default SendFailedRetry;
+export { sendFailedRetryPropsSchema, type SendFailedRetryProps };

package/src/BasicToast.js

@@ -6,13 +6,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
 
+import ScreenReaderText from './ScreenReaderText';
 import DismissIcon from './Toast/DismissIcon';
 import NotificationIcon from './Toast/NotificationIcon';
 import randomId from './Utils/randomId';
-import ScreenReaderText from './ScreenReaderText';
-import useInternalRenderMarkdownInline from './hooks/internal/useInternalRenderMarkdownInline';
-import useStyleSet from './hooks/useStyleSet';
 import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
+import useStyleSet from './hooks/useStyleSet';
+import renderMarkdownInline from './private/renderMarkdownInline';
 
 const { useDismissNotification, useLocalizer } = hooks;
 
@@ -29,11 +29,10 @@ const BasicToast = ({ notification: { alt, id, level, message = '' } }) => {
   const contentId = useMemo(() => `webchat__toast__${randomId()}`, []);
   const localize = useLocalizer();
   const dismissNotification = useDismissNotification();
-  const renderMarkdownInline = useInternalRenderMarkdownInline();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const handleDismiss = useCallback(() => dismissNotification(id), [dismissNotification, id]);
-  const html = useMemo(() => ({ __html: renderMarkdownInline(message) }), [message, renderMarkdownInline]);
+  const html = useMemo(() => ({ __html: renderMarkdownInline(message) }), [message]);
 
   return (
     <div

package/src/BasicToaster.js

@@ -9,9 +9,9 @@ import CollapseIcon from './Toast/CollapseIcon';
 import ExpandIcon from './Toast/ExpandIcon';
 import NotificationIcon from './Toast/NotificationIcon';
 import randomId from './Utils/randomId';
-import useInternalRenderMarkdownInline from './hooks/internal/useInternalRenderMarkdownInline';
 import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useStyleSet from './hooks/useStyleSet';
+import renderMarkdownInline from './private/renderMarkdownInline';
 import { useLiveRegion } from './providers/LiveRegionTwin';
 
 const { useDebouncedNotifications, useLocalizer, useRenderToast } = hooks;
@@ -77,7 +77,6 @@ const BasicToaster = ({ className }) => {
   const [expanded, setExpanded] = useState(false);
   const localizeWithPlural = useLocalizer({ plural: true });
   const renderToast = useRenderToast();
-  const renderMarkdownInline = useInternalRenderMarkdownInline();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const handleToggleExpand = useCallback(() => setExpanded(!expanded), [expanded, setExpanded]);
@@ -142,7 +141,7 @@ const BasicToaster = ({ className }) => {
     }
 
     return toAnnounce.length > 0 && <Fragment>{toAnnounce}</Fragment>;
-  }, [renderMarkdownInline, sortedNotifications]);
+  }, [sortedNotifications]);
 
   return (
     <div

package/src/Composer.tsx

@@ -24,7 +24,6 @@ import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webcha
 import { type LegacyActivityMiddleware, type Polymiddleware } from 'botframework-webchat-api/middleware.js';
 import { StoreDebugAPIRegistry, type StoreDebugAPI } from 'botframework-webchat-core/internal.js';
 import classNames from 'classnames';
-import MarkdownIt from 'markdown-it';
 import PropTypes from 'prop-types';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { Composer as SayComposer } from 'react-say';
@@ -65,7 +64,6 @@ import CSSCustomPropertiesContainer from './Styles/CSSCustomPropertiesContainer'
 import ComponentStylesheet from './stylesheet/ComponentStylesheet';
 import { type ContextOf } from './types/ContextOf';
 import { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';
-import addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import mapMap from './Utils/mapMap';
 
@@ -188,23 +186,9 @@ const ComposerCore = ({
   const [referenceGrammarID] = useReferenceGrammarID();
   const [styleOptions] = useStyleOptions();
   const focusTranscriptCallbacksRef = useRef<((init: FocusTranscriptInit) => Promise<void>)[]>([]);
-  const internalMarkdownIt = useMemo(() => new MarkdownIt(), []);
   const scrollToCallbacksRef = useRef([]);
   const scrollToEndCallbacksRef = useRef([]);
 
-  const internalRenderMarkdownInline = useMemo(
-    () => markdown => {
-      const tree = internalMarkdownIt.parseInline(markdown);
-
-      // TODO: Use "betterLink" plugin.
-      // We should add rel="noopener noreferrer" and target="_blank"
-      const patchedTree = addTargetBlankToHyperlinksMarkdown(tree);
-
-      return internalMarkdownIt.renderer.render(patchedTree);
-    },
-    [internalMarkdownIt]
-  );
-
   const styleToEmotionObject = useStyleToEmotionObject();
 
   const patchedStyleSet = useMemo(
@@ -289,8 +273,6 @@ const ComposerCore = ({
       dispatchScrollPosition,
       dispatchTranscriptFocusByActivityKey,
       focusTranscriptCallbacksRef,
-      internalMarkdownItState: [internalMarkdownIt],
-      internalRenderMarkdownInline,
       nonce,
       numTranscriptFocusObservers,
       observeScrollPosition,
@@ -308,8 +290,6 @@ const ComposerCore = ({
       dispatchScrollPosition,
       dispatchTranscriptFocusByActivityKey,
       focusTranscriptCallbacksRef,
-      internalMarkdownIt,
-      internalRenderMarkdownInline,
       nonce,
       numTranscriptFocusObservers,
       observeScrollPosition,

package/src/Utils/InlineMarkdown.tsx

@@ -0,0 +1,121 @@
+/* eslint react/no-danger: "off" */
+
+import {
+  betterLinkDocumentMod,
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString,
+  stripParagraphContainer
+} from '@msinternal/botframework-webchat-component-better-link';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyleOptions } from 'botframework-webchat-api/hook.js';
+import { micromark } from 'micromark';
+import React, { useCallback, useMemo } from 'react';
+import {
+  args,
+  array,
+  function_,
+  instance,
+  object,
+  optional,
+  parse,
+  pipe,
+  readonly,
+  string,
+  tuple,
+  union,
+  type InferInput
+} from 'valibot';
+
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import createCustomEvent from './createCustomEvent';
+
+const referenceEventSchema = union([instance(Event), object({ data: string() })]);
+
+const inlineMarkdownPropsSchema = pipe(
+  object({
+    markdown: string(),
+    onReference: pipe(function_(), args(tuple([referenceEventSchema]))),
+    references: optional(array(string()))
+  }),
+  readonly()
+);
+
+type InlineMarkdownProps = InferInput<typeof inlineMarkdownPropsSchema>;
+
+const InlineMarkdown = (props: InlineMarkdownProps) => {
+  const { markdown, onReference, references } = validateProps(inlineMarkdownPropsSchema, props);
+
+  const [{ accent }] = useStyleOptions();
+  const styleToClassName = useStyleToEmotionObject();
+
+  // We inlined the style here because this style is:
+  // 1. Internal to Web Chat
+  // 2. Not customizable from developers (other than setting `styleOptions.accent`)
+  const className = useMemo(
+    () =>
+      styleToClassName({
+        '& button[data-markdown-href]': {
+          appearance: 'none',
+          backgroundColor: 'transparent',
+          border: 0,
+          color: accent,
+          cursor: 'pointer',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          padding: 0
+        },
+        '@media screen and (forced-colors: active)': {
+          '& button[data-markdown-href]': {
+            color: 'LinkText',
+            textDecoration: 'underline'
+          }
+        }
+      }) + '',
+    [accent, styleToClassName]
+  );
+
+  const html = useMemo(() => {
+    let markdownWithLinkReferenceDefinitions = markdown;
+
+    if (references?.length) {
+      markdownWithLinkReferenceDefinitions += '\n\n';
+    }
+
+    for (const reference of references || []) {
+      markdownWithLinkReferenceDefinitions += `[${reference}]: #${reference}\n`;
+    }
+
+    const documentFragment = parseDocumentFragmentFromString(micromark(markdownWithLinkReferenceDefinitions));
+
+    // Turn "<a href="#retry">Retry</a>" into "<button type="button" data-markdown-ref="#retry">Retry</button>"
+    betterLinkDocumentMod(documentFragment, href => {
+      if (href?.startsWith('#')) {
+        return { asButton: true, dataset: { markdownHref: href } };
+      }
+    });
+
+    return { __html: stripParagraphContainer(serializeDocumentFragmentIntoString(documentFragment)) };
+  }, [markdown, references]);
+
+  const handleClick = useCallback(
+    event => {
+      event.stopPropagation();
+
+      const href = event.target.getAttribute('value') ?? undefined;
+      const reference = href?.startsWith('#') ? href.slice(1) : href;
+
+      if (reference) {
+        const event = createCustomEvent('reference', { data: reference });
+
+        parse(referenceEventSchema, event);
+        onReference?.(event);
+      }
+    },
+    [onReference]
+  );
+
+  return <span className={className} dangerouslySetInnerHTML={html} onClick={handleClick} />;
+};
+
+export default InlineMarkdown;
+export { inlineMarkdownPropsSchema, type InlineMarkdownProps };

package/src/Utils/LocalizedString.tsx

@@ -1,143 +1,142 @@
-/* eslint react/no-danger: "off" */
-
-import { hooks } from 'botframework-webchat-api';
+import {
+  betterLinkDocumentMod,
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString,
+  stripParagraphContainer,
+  type BetterLinkDocumentModDecoration
+} from '@msinternal/botframework-webchat-component-better-link';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useLocalizer } from 'botframework-webchat-api/hook.js';
 import { onErrorResumeNext } from 'botframework-webchat-core';
-import MarkdownIt from 'markdown-it';
+import { micromark } from 'micromark';
 import React, { memo, useMemo } from 'react';
-import betterLinks, { type BetterLinkEnv, type LinkOptions } from './betterLinks';
+import {
+  array,
+  intersect,
+  is,
+  number,
+  object,
+  optional,
+  pipe,
+  readonly,
+  string,
+  tupleWithRest,
+  union,
+  type InferInput,
+  type InferOutput
+} from 'valibot';
 
 const allowedSchemes = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'];
 
-const linkDefinitions = [];
-
-const externalLinkAlt = '';
-
-const defaultDecorateLink = (href: string, textContent: string, linkOptions?: LinkOptions): LinkOptions | undefined => {
-  const decoration: LinkOptions = {
-    rel: 'noopener noreferrer',
-    target: '_blank',
-    wrapZeroWidthSpace: true,
-    ...linkOptions
-  };
-
-  const ariaLabelSegments: string[] = [textContent];
-  const classes: Set<string> = new Set();
-  const linkDefinition = linkDefinitions.find(({ url }) => url === href);
-  const protocol = onErrorResumeNext(() => new URL(href).protocol);
-
-  if (linkDefinition) {
-    ariaLabelSegments.push(
-      linkDefinition.title || onErrorResumeNext(() => new URL(linkDefinition.url).host) || linkDefinition.url
-    );
-
-    // linkDefinition.identifier is uppercase, while linkDefinition.label is as-is.
-    linkDefinition.label === textContent && classes.add('render-markdown__pure-identifier');
-  }
-
-  // For links that would be sanitized out, let's turn them into a button so we could handle them later.
-  if (!allowedSchemes.map(scheme => `${scheme}:`).includes(protocol)) {
-    decoration.asButton ??= true;
-
-    classes.add('render-markdown__citation');
-  } else if (protocol === 'http:' || protocol === 'https:') {
-    decoration.iconClassName = [decoration.iconClassName, 'render-markdown__external-link-icon']
-      .filter((className: string | undefined) => className)
-      .join(' ');
-
-    ariaLabelSegments.push(externalLinkAlt);
-  }
-
-  // The first segment is textContent. Putting textContent is aria-label is useless.
-  if (ariaLabelSegments.length > 1) {
-    // If "aria-label" is already applied, do not overwrite it.
-    decoration.ariaLabel ??= (value: string) => value || ariaLabelSegments.join(' ');
-  }
-
-  if (typeof linkOptions?.className === 'string') {
-    classes.add(linkOptions.className);
-  }
-
-  // Resolve className
-  const classNamesString = Array.from(classes).join(' ');
-  if (linkOptions?.className && linkOptions?.className instanceof Function) {
-    decoration.className = linkOptions.className(classNamesString);
-  } else {
-    decoration.className = classNamesString;
-  }
-
-  // By default, Markdown-It will set "title" to the link title in link definition.
-
-  // However, "title" may be narrated by screen reader:
-  // - Edge
-  //   - <a> will narrate "aria-label" but not "title"
-  //   - <button> will narrate both "aria-label" and "title"
-  // - NVDA
-  //   - <a> will narrate both "aria-label" and "title"
-  //   - <button> will narrate both "aria-label" and "title"
-
-  // Title makes it very difficult to control narrations by the screen reader. Thus, we are disabling it in favor of "aria-label".
-  // This will not affect our accessibility compliance but UX. We could use a non-native tooltip or other forms of visual hint.
-
-  decoration.title ??= false;
-
-  return decoration;
-};
+const pluralPropsSchema = pipe(
+  object({
+    stringIds: object({
+      zero: optional(string()),
+      one: optional(string()),
+      two: optional(string()),
+      few: optional(string()),
+      many: optional(string()),
+      other: string()
+    }),
+    values: pipe(tupleWithRest([number()], union([string()])), readonly())
+  }),
+  readonly()
+);
+
+const singularPropsSchema = pipe(
+  object({
+    stringIds: string(),
+    values: optional(pipe(array(string()), readonly()))
+  }),
+  readonly()
+);
+
+const localizedStringPropsSchema = intersect([
+  pipe(
+    object({
+      className: optional(string()),
+      linkClassName: optional(string())
+    }),
+    readonly()
+  ),
+  union([pluralPropsSchema, singularPropsSchema])
+]);
 
-const { useLocalizer } = hooks;
+type LocalizedStringProps = InferInput<typeof localizedStringPropsSchema>;
+type PluralProps = InferOutput<typeof pluralPropsSchema>;
 
-type Plural = {
-  zero?: string;
-  one?: string;
-  two?: string;
-  few?: string;
-  many?: string;
-  other: string;
-};
+function isPlural(props: InferOutput<typeof localizedStringPropsSchema>): props is PluralProps {
+  return is(pluralPropsSchema, props);
+}
 
-const markdownIt = new MarkdownIt().use(betterLinks);
+const LocalizedString = (props: LocalizedStringProps) => {
+  const { className, linkClassName } = validateProps(localizedStringPropsSchema, props);
 
-type PluralProps = Readonly<{
-  stringIds: Plural;
-  values: readonly [number, ...(number | string)[]] | undefined;
-}>;
+  const localizePlural = useLocalizer({ plural: true });
+  const localizeSingular = useLocalizer();
 
-type SingularProps = Readonly<{
-  stringIds: string;
-  values?: readonly (number | string)[] | undefined;
-}>;
+  // TODO: Add test.
+  const externalLinkAlt = localizeSingular('MARKDOWN_EXTERNAL_LINK_ALT');
 
-type Props = Readonly<{
-  className?: string | undefined;
-  linkClassName?: string | undefined;
-  onDecorateLink?: ((href: string, textContent: string) => LinkOptions | undefined) | undefined;
-}> &
-  (SingularProps | PluralProps);
+  const html = useMemo(() => {
+    let localized: string;
 
-function isPlural(props: Props): props is PluralProps {
-  return typeof props.stringIds !== 'string';
-}
+    if (isPlural(props)) {
+      const { stringIds, values } = props;
 
-const LocalizedString = (props: Props) => {
-  const { className, linkClassName, onDecorateLink = defaultDecorateLink, stringIds, values } = props;
-  const localize = useLocalizer(isPlural(props) && { plural: true });
-  const env = useMemo<BetterLinkEnv>(
-    () => ({
-      linkOptions: {
-        className: linkClassName
-      },
-      decorateLink: onDecorateLink
-    }),
-    [linkClassName, onDecorateLink]
-  );
+      localized = localizePlural(stringIds, ...values);
+    } else {
+      const { stringIds, values } = props;
 
-  const html = useMemo(
-    () => ({
-      __html: markdownIt.renderer.render(markdownIt.parseInline(localize(stringIds, ...(values ?? [])), env), env)
-    }),
-    [env, localize, stringIds, values]
-  );
+      localized = localizeSingular(stringIds, ...(values || []));
+    }
+
+    const documentFragment = parseDocumentFragmentFromString(micromark(localized));
+
+    betterLinkDocumentMod(documentFragment, (href, textContent) => {
+      const decoration: BetterLinkDocumentModDecoration = {
+        rel: 'noopener noreferrer',
+        target: '_blank',
+        wrapZeroWidthSpace: true
+      };
+
+      const classNames = new Set<string>([linkClassName]);
+      const protocol = onErrorResumeNext<string>(() => new URL(href).protocol);
+
+      // For links that would be sanitized out, let's turn them into a button so we could handle them later.
+      if (!allowedSchemes.map(scheme => `${scheme}:`).includes(protocol)) {
+        // TODO: Add test.
+        decoration.asButton = true;
+      } else if (protocol === 'http:' || protocol === 'https:') {
+        // TODO: Add test.
+        decoration.ariaLabel = value => [value || textContent, externalLinkAlt].filter(Boolean).join(' ');
+        decoration.iconClassName = 'render-markdown__external-link-icon';
+      }
+
+      decoration.className = Array.from(classNames).join(' ');
+
+      // However, "title" may be narrated by screen reader:
+      // - Edge
+      //   - <a> will narrate "aria-label" but not "title"
+      //   - <button> will narrate both "aria-label" and "title"
+      // - NVDA
+      //   - <a> will narrate both "aria-label" and "title"
+      //   - <button> will narrate both "aria-label" and "title"
+
+      // Title makes it very difficult to control narrations by the screen reader. Thus, we are disabling it in favor of "aria-label".
+      // This will not affect our accessibility compliance but UX. We could use a non-native tooltip or other forms of visual hint.
+
+      decoration.title = false;
+
+      return decoration;
+    });
+
+    return Object.freeze({ __html: stripParagraphContainer(serializeDocumentFragmentIntoString(documentFragment)) });
+  }, [externalLinkAlt, linkClassName, localizePlural, localizeSingular, props]);
 
+  // eslint-disable-next-line react/no-danger
   return <span className={className} dangerouslySetInnerHTML={html} />;
 };
 
 export default memo(LocalizedString);
+export { localizedStringPropsSchema, type LocalizedStringProps };

package/src/Utils/addTargetBlankToHyperlinks.spec.ts

@@ -0,0 +1,52 @@
+/** @jest-environment @happy-dom/jest-environment */
+/// <reference types="jest" />
+
+import { micromark } from 'micromark';
+
+import {
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString
+} from '@msinternal/botframework-webchat-component-better-link';
+import addTargetBlankToHyperlinks from './addTargetBlankToHyperlinks';
+
+test('add to external links', () => {
+  const documentFragment = parseDocumentFragmentFromString(micromark('Hello, [Microsoft](https://microsoft.com/)!'));
+
+  addTargetBlankToHyperlinks(documentFragment);
+
+  const actual = serializeDocumentFragmentIntoString(documentFragment);
+
+  expect(actual).toBe(
+    '<p xmlns="http://www.w3.org/1999/xhtml">Hello, <a href="https://microsoft.com/" rel="noopener noreferrer" target="_blank">Microsoft</a>!</p>'
+  );
+});
+
+test("don't add for hashes", () => {
+  const documentFragment = parseDocumentFragmentFromString(micromark('Hello, [Microsoft](#microsoft)!'));
+
+  addTargetBlankToHyperlinks(documentFragment);
+
+  const actual = serializeDocumentFragmentIntoString(documentFragment);
+
+  expect(actual).toBe(`<p xmlns="http://www.w3.org/1999/xhtml">Hello, <a href="#microsoft">Microsoft</a>!</p>`);
+});
+
+test("don't add for searches", () => {
+  const documentFragment = parseDocumentFragmentFromString(micromark('Hello, [Microsoft](?q=microsoft)!'));
+
+  addTargetBlankToHyperlinks(documentFragment);
+
+  const actual = serializeDocumentFragmentIntoString(documentFragment);
+
+  expect(actual).toBe(`<p xmlns="http://www.w3.org/1999/xhtml">Hello, <a href="?q=microsoft">Microsoft</a>!</p>`);
+});
+
+test("don't add for cross references", () => {
+  const documentFragment = parseDocumentFragmentFromString(micromark('Hello, [Microsoft]!\n\n[Microsoft]: #microsoft'));
+
+  addTargetBlankToHyperlinks(documentFragment);
+
+  const actual = serializeDocumentFragmentIntoString(documentFragment);
+
+  expect(actual).toBe(`<p xmlns="http://www.w3.org/1999/xhtml">Hello, <a href="#microsoft">Microsoft</a>!</p>\n`);
+});