fix: use new markdown library (BUG-555)

packages/react-chat/package.json

@@ -10,17 +10,19 @@
     "@stitches/react": "^1.2.8",
     "@voiceflow/base-types": "2.85.0",
     "@voiceflow/sdk-runtime": "1.7.0",
-    "@voiceflow/slate-serializer": "1.5.2",
+    "@voiceflow/slate-serializer": "1.5.3",
     "@voiceflow/voiceflow-types": "3.24.0",
     "bowser": "^2.11.0",
     "chroma-js": "2.4.2",
     "clsx": "1.2.1",
     "csstype": "3.1.0",
     "cuid": "^2.1.8",
     "dayjs": "^1.11.5",
-    "markdown-to-jsx": "^7.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^6.1.1",
+    "remark-gfm": "^3.0.1",
     "remeda": "^1.0.1",
     "slate": "^0.72.3",
     "ts-pattern": "^4.0.5",

packages/react-chat/src/components/Text/Markdown.tsx

@@ -1,11 +1,10 @@
-import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 
 import { styled } from '@/styles';
 
-const MarkdownText = styled(Markdown, {
-  '*': {
-    whiteSpace: 'pre-wrap',
-  },
+const MarkdownText = styled(ReactMarkdown, {
   blockquote: {
     marginLeft: 0,
     paddingLeft: '$4',
@@ -33,19 +32,10 @@ const MarkdownText = styled(Markdown, {
   },
 });
 
-const options: MarkdownToJSX.Options = {
-  forceWrapper: true,
-  overrides: {
-    a: ({ children, ...props }) => (
-      <a {...props} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    ),
-  },
-};
-
 MarkdownText.defaultProps = {
-  options,
+  rehypePlugins: [rehypeRaw],
+  remarkPlugins: [remarkGfm],
+  linkTarget: '_blank',
 };
 
 export default MarkdownText;