Make markdown rendering load async

Author: rebeccaalpert

jest.config.js

@@ -30,7 +30,8 @@ module.exports = {
   modulePathIgnorePatterns: [
     '<rootDir>/packages/*.*/dist/*.*',
     '<rootDir>/packages/*.*/public/*.*',
-    '<rootDir>/packages/*.*/.cache/*.*'
+    '<rootDir>/packages/*.*/.cache/*.*',
+    '<rootDir>/packages/tree-shaking-demo/*.*'
   ],
   moduleNameMapper: {
     '\\.(css|scss)$': 'identity-obj-proxy',

packages/module/src/DeepThinking/DeepThinking.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import DeepThinking from './DeepThinking';
+import { expectBoldMarkdownText } from '../test-utils/markdownTestUtils';
 
 describe('DeepThinking', () => {
   const defaultProps = {
@@ -120,11 +121,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('Thinking content')).not.toBeVisible();
   });
 
-  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', async () => {
     const toggleContent = '**Bold thinking**';
-    const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold thinking')).toBeTruthy();
+    render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
+    await expectBoldMarkdownText('Bold thinking');
   });
 
   it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
@@ -134,11 +134,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold thinking**')).toBeTruthy();
   });
 
-  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+  it('should render subheading as markdown when isSubheadingMarkdown is true', async () => {
     const subheading = '**Bold subheading**';
-    const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold subheading')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    await expectBoldMarkdownText('Bold subheading');
   });
 
   it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
@@ -147,11 +146,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold subheading**')).toBeTruthy();
   });
 
-  it('should render body as markdown when isBodyMarkdown is true', () => {
+  it('should render body as markdown when isBodyMarkdown is true', async () => {
     const body = '**Bold body**';
-    const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold body')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
+    await expectBoldMarkdownText('Bold body');
   });
 
   it('should not render body as markdown when isBodyMarkdown is false', () => {

packages/module/src/MarkdownContent/MarkdownContent.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import MarkdownContent from './MarkdownContent';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { expectBoldMarkdownText } from '../test-utils/markdownTestUtils';
 
 const BOLD_TEXT = '**Bold text**';
 const ITALIC_TEXT = '*Italic text*';
@@ -37,10 +38,9 @@ describe('MarkdownContent', () => {
     jest.clearAllMocks();
   });
 
-  it('should render bold text correctly', () => {
-    const { container } = render(<MarkdownContent content={BOLD_TEXT} />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold text')).toBeTruthy();
+  it('should render bold text correctly', async () => {
+    render(<MarkdownContent content={BOLD_TEXT} />);
+    await expectBoldMarkdownText('Bold text');
   });
 
   it('should render italic text correctly', () => {

packages/module/src/MarkdownContent/MarkdownContent.tsx

@@ -1,35 +1,18 @@
 // ============================================================================
 // Markdown Content - Shared component for rendering markdown
 // ============================================================================
-import { type FunctionComponent, ReactNode } from 'react';
-import Markdown, { Options } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { lazy, Suspense, type FunctionComponent, type ReactNode } from 'react';
+import type { Options } from 'react-markdown';
 import { ContentVariants } from '@patternfly/react-core';
-import CodeBlockMessage, { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import type { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import type { TableProps } from '@patternfly/react-table';
+import type { PluggableList } from 'unified';
+import type { ButtonProps } from '@patternfly/react-core';
 import TextMessage from '../Message/TextMessage/TextMessage';
-import ListItemMessage from '../Message/ListMessage/ListItemMessage';
-import UnorderedListMessage from '../Message/ListMessage/UnorderedListMessage';
-import OrderedListMessage from '../Message/ListMessage/OrderedListMessage';
-import TableMessage from '../Message/TableMessage/TableMessage';
-import TrMessage from '../Message/TableMessage/TrMessage';
-import TdMessage from '../Message/TableMessage/TdMessage';
-import TbodyMessage from '../Message/TableMessage/TbodyMessage';
-import TheadMessage from '../Message/TableMessage/TheadMessage';
-import ThMessage from '../Message/TableMessage/ThMessage';
-import { TableProps } from '@patternfly/react-table';
-import ImageMessage from '../Message/ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
-import 'highlight.js/styles/vs2015.css';
-import { PluggableList } from 'unified';
-import LinkMessage from '../Message/LinkMessage/LinkMessage';
-import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
-import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
-import { ButtonProps } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
+const MarkdownRenderer = lazy(() => import('./MarkdownRenderer'));
+
 /**
  * MarkdownContent renders content either as plain text or with content with markdown support.
  *
@@ -69,32 +52,10 @@ export interface MarkdownContentProps {
 export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
   content,
   isMarkdownDisabled,
-  codeBlockProps,
-  tableProps,
-  openLinkInNewTab = true,
-  additionalRehypePlugins = [],
-  additionalRemarkPlugins = [],
-  linkProps,
-  reactMarkdownProps,
-  remarkGfmProps,
-  hasNoImages = false,
   isPrimary,
   textComponent,
-  shouldRetainStyles
+  ...markdownProps
 }: MarkdownContentProps) => {
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-  if (openLinkInNewTab) {
-    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-  }
-  if (additionalRehypePlugins) {
-    rehypePlugins.push(...additionalRehypePlugins);
-  }
-
-  const disallowedElements = hasNoImages ? ['img'] : [];
-  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-    disallowedElements.push(...reactMarkdownProps.disallowedElements);
-  }
-
   if (isMarkdownDisabled) {
     if (textComponent) {
       return <>{textComponent}</>;
@@ -107,176 +68,9 @@ export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
   }
 
   return (
-    <Markdown
-      components={{
-        section: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <section
-              {...rest}
-              className={css('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest?.className)}
-            />
-          );
-        },
-        p: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <TextMessage
-              shouldRetainStyles={shouldRetainStyles}
-              component={ContentVariants.p}
-              {...rest}
-              isPrimary={isPrimary}
-            />
-          );
-        },
-        code: ({ children, ...props }) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...codeProps } = props;
-          return (
-            <CodeBlockMessage
-              {...codeProps}
-              {...codeBlockProps}
-              isPrimary={isPrimary}
-              shouldRetainStyles={shouldRetainStyles}
-            >
-              {children}
-            </CodeBlockMessage>
-          );
-        },
-        h1: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h1} {...rest} />;
-        },
-        h2: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h2} {...rest} />;
-        },
-        h3: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h3} {...rest} />;
-        },
-        h4: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h4} {...rest} />;
-        },
-        h5: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h5} {...rest} />;
-        },
-        h6: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h6} {...rest} />;
-        },
-        blockquote: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.blockquote} {...rest} />
-          );
-        },
-        ul: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <UnorderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
-        },
-        ol: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <OrderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
-        },
-        li: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ListItemMessage {...rest} />;
-        },
-        // table requires node attribute for calculating headers for mobile breakpoint
-        table: (props) => (
-          <TableMessage shouldRetainStyles={shouldRetainStyles} {...props} {...tableProps} isPrimary={isPrimary} />
-        ),
-        tbody: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TbodyMessage {...rest} />;
-        },
-        thead: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TheadMessage {...rest} />;
-        },
-        tr: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TrMessage {...rest} />;
-        },
-        td: (props) => {
-          // Conflicts with Td type
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, width, ...rest } = props;
-          return <TdMessage {...rest} />;
-        },
-        th: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ThMessage {...rest} />;
-        },
-        img: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ImageMessage {...rest} />;
-        },
-        a: (props) => {
-          // node is just the details of the document structure - not needed
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            // some a types conflict with ButtonProps, but it's ok because we are using an a tag
-            // there are too many to handle manually
-            <LinkMessage shouldRetainStyles={shouldRetainStyles} {...(rest as any)} {...linkProps}>
-              {props.children}
-            </LinkMessage>
-          );
-        },
-        // used for footnotes
-        sup: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <SuperscriptMessage {...rest} />;
-        }
-      }}
-      remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
-      rehypePlugins={rehypePlugins}
-      {...reactMarkdownProps}
-      remarkRehypeOptions={{
-        // removes sr-only class from footnote labels applied by default
-        footnoteLabelProperties: { className: [''] },
-        // omit default ↩ text; backref icon is rendered in LinkMessage
-        footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
-          if (rereferenceIndex > 1) {
-            return [
-              {
-                type: 'element',
-                tagName: 'sup',
-                properties: {},
-                children: [{ type: 'text', value: String(rereferenceIndex) }]
-              }
-            ];
-          }
-          return [];
-        },
-        ...reactMarkdownProps?.remarkRehypeOptions
-      }}
-      disallowedElements={disallowedElements}
-    >
-      {content}
-    </Markdown>
+    <Suspense fallback={<span className={css('pf-chatbot__message-text')}>{content}</span>}>
+      <MarkdownRenderer {...markdownProps} content={content} isPrimary={isPrimary} />
+    </Suspense>
   );
 };