Extracts markdown rendering out of ChatMessageBox.tsx (#757)

assets/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import breaks from 'remark-breaks';
+import {Twemoji} from 'react-emoji-render';
+import {allowedNodeTypes} from './common';
+
+const renderers = {
+  text: (props: any) => {
+    return <Twemoji text={props.children} />;
+  },
+  image: (props: any) => {
+    // TODO: fix scroll behavior after image loads
+    return (
+      <img
+        alt={props.alt || ''}
+        src={props.src}
+        {...props}
+        style={{maxWidth: '100%', maxHeight: 400}}
+      />
+    );
+  },
+};
+
+type Props = {
+  className?: string;
+  source: string;
+};
+
+const MarkdownRenderer = ({className, source}: Props) => {
+  return (
+    <ReactMarkdown
+      className={`Text--markdown ${className}`}
+      source={source}
+      allowedTypes={allowedNodeTypes}
+      renderers={renderers}
+      plugins={[breaks]}
+    />
+  );
+};
+
+export default MarkdownRenderer;

assets/src/components/common.tsx

@@ -39,6 +39,7 @@ import {
 } from '@ant-design/colors';
 
 import DatePicker from './DatePicker';
+import MarkdownRenderer from './MarkdownRenderer';
 
 export type {UploadChangeParam} from 'antd/lib/upload';
 export type {UploadFile} from 'antd/lib/upload/interface';
@@ -122,6 +123,7 @@ export {
   Dropdown,
   Empty,
   Input,
+  MarkdownRenderer,
   Menu,
   Modal,
   notification,

assets/src/components/conversations/ChatMessageBox.tsx

@@ -1,29 +1,9 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import breaks from 'remark-breaks';
-import {Twemoji} from 'react-emoji-render';
 import {Box} from 'theme-ui';
-import {allowedNodeTypes} from '../common';
+import {MarkdownRenderer} from '../common';
 import {Attachment} from '../../types';
 import {PaperClipOutlined} from '../icons';
 
-const renderers = {
-  text: (props: any) => {
-    return <Twemoji text={props.children} />;
-  },
-  image: (props: any) => {
-    // TODO: fix scroll behavior after image loads
-    return (
-      <img
-        alt={props.alt || ''}
-        src={props.src}
-        {...props}
-        style={{maxWidth: '100%', maxHeight: 400}}
-      />
-    );
-  },
-};
-
 const ChatMessageAttachment = ({
   attachment,
   color,
@@ -78,13 +58,7 @@ const ChatMessageBox = ({
 
   return (
     <Box sx={parsedSx}>
-      <ReactMarkdown
-        className={`Text--markdown ${className}`}
-        source={content}
-        allowedTypes={allowedNodeTypes}
-        renderers={renderers}
-        plugins={[breaks]}
-      />
+      <MarkdownRenderer className={className} source={content} />
 
       {attachments && attachments.length > 0 && (
         <Box mt={2} className={className}>