Refactor internalRenderMarkdownInline

Author: compulim

packages/component/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

packages/component/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

packages/component/src/Composer.tsx

@@ -1,11 +1,6 @@
 /* eslint-disable react/require-default-props */
 
 import { singleToArray } from '@msinternal/botframework-webchat-base/utils';
-import {
-  parseDocumentFragmentFromString,
-  serializeDocumentFragmentIntoString,
-  stripParagraphContainer
-} from '@msinternal/botframework-webchat-component-better-link';
 import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
 import {
   Composer as APIComposer,
@@ -29,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 { micromark } from 'micromark';
 import PropTypes from 'prop-types';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { Composer as SayComposer } from 'react-say';
@@ -70,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 addTargetBlankToHyperlinks from './Utils/addTargetBlankToHyperlinks';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import mapMap from './Utils/mapMap';
 
@@ -196,19 +189,6 @@ const ComposerCore = ({
   const scrollToCallbacksRef = useRef([]);
   const scrollToEndCallbacksRef = useRef([]);
 
-  const internalRenderMarkdownInline = useMemo(
-    () => markdown => {
-      const documentFragment = parseDocumentFragmentFromString(micromark(markdown));
-
-      addTargetBlankToHyperlinks(documentFragment);
-
-      const html = serializeDocumentFragmentIntoString(documentFragment);
-
-      return stripParagraphContainer(html);
-    },
-    []
-  );
-
   const styleToEmotionObject = useStyleToEmotionObject();
 
   const patchedStyleSet = useMemo(
@@ -293,7 +273,6 @@ const ComposerCore = ({
       dispatchScrollPosition,
       dispatchTranscriptFocusByActivityKey,
       focusTranscriptCallbacksRef,
-      internalRenderMarkdownInline,
       nonce,
       numTranscriptFocusObservers,
       observeScrollPosition,
@@ -311,7 +290,6 @@ const ComposerCore = ({
       dispatchScrollPosition,
       dispatchTranscriptFocusByActivityKey,
       focusTranscriptCallbacksRef,
-      internalRenderMarkdownInline,
       nonce,
       numTranscriptFocusObservers,
       observeScrollPosition,

packages/component/src/Utils/InlineMarkdown.tsx

@@ -78,7 +78,7 @@ const InlineMarkdown = (props: InlineMarkdownProps) => {
       }
     });
 
-    // TODO: [P*] Instead of <button value="">, it need to be <button data-markdown-href=""> to trigger the CSS.
+    // TODO: [P*] Instead of <button value="">, it need to be <button data-markdown-href="a1b2c"> to trigger the CSS.
     // TODO: [P*] Remove trailing <p></p>.
 
     return { __html: stripParagraphContainer(serializeDocumentFragmentIntoString(documentFragment)) };

packages/component/src/hooks/internal/WebChatUIContext.ts

@@ -10,7 +10,6 @@ export type ContextType = {
   dictateAbortable: any;
   dispatchScrollPosition: any;
   dispatchTranscriptFocusByActivityKey: any;
-  internalRenderMarkdownInline: any;
   numTranscriptFocusObservers: any;
   observeScrollPosition: any;
   observeTranscriptFocus: any;

packages/component/src/hooks/internal/useInternalRenderMarkdownInline.js

@@ -0,0 +1,19 @@
+import {
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString,
+  stripParagraphContainer
+} from '@msinternal/botframework-webchat-component-better-link';
+import { micromark } from 'micromark';
+import addTargetBlankToHyperlinks from '../Utils/addTargetBlankToHyperlinks';
+
+function renderMarkdownInline(markdown: string): string {
+  const documentFragment = parseDocumentFragmentFromString(micromark(markdown));
+
+  addTargetBlankToHyperlinks(documentFragment);
+
+  const html = serializeDocumentFragmentIntoString(documentFragment);
+
+  return stripParagraphContainer(html);
+}
+
+export default renderMarkdownInline;