chore(deps): upgrade react-markdown to v9 (#2643)

Author: MartinCupela

package.json

@@ -122,15 +122,15 @@
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^9.0.3",
     "react-player": "2.10.1",
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.1",
     "textarea-caret": "^3.1.0",
     "tslib": "^2.6.2",
-    "unist-builder": "^3.0.0",
+    "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "use-sync-external-store": "^1.4.0"
   },

src/components/Message/renderText/__tests__/__snapshots__/renderText.test.js.snap

@@ -266,6 +266,8 @@ exports[`keepLineBreaksPlugin present keeps line breaks around a blockquote 1`]
   
 
   <blockquote>
+    
+
     <p>
       b
     </p>
@@ -556,6 +558,8 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
     
 
     <li>
+      
+
       <p>
         item 2
       </p>
@@ -579,6 +583,8 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
     
 
     <li>
+      
+
       <p>
         item 3
       </p>
@@ -622,6 +628,8 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
     
 
     <li>
+      
+
       <p>
         item 2
       </p>
@@ -645,6 +653,8 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
     
 
     <li>
+      
+
       <p>
         item 3
       </p>

src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts

@@ -4,7 +4,7 @@ import { u } from 'unist-builder';
 import { visit } from 'unist-util-visit';
 
 import type { Nodes } from 'hast-util-find-and-replace/lib';
-import type { Element } from 'react-markdown/lib/ast-to-react';
+import type { Element } from 'hast';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types';
 

src/components/Message/renderText/renderText.tsx

@@ -1,18 +1,19 @@
 import React, { ComponentType } from 'react';
-import ReactMarkdown, { Options, uriTransformer } from 'react-markdown';
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
 
-import type { PluggableList } from 'react-markdown/lib/react-markdown';
-import type { UserResponse } from 'stream-chat';
-
 import { Anchor, Emoji, Mention, MentionProps } from './componentRenderers';
 import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
 import { ErrorBoundary } from '../../UtilityComponents';
 
+import type { Options } from 'react-markdown/lib';
+import type { UserResponse } from 'stream-chat';
+import type { PluggableList } from 'unified'; // A subdependency of react-markdown. The type is not declared or re-exported from anywhere else
+
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type RenderTextPluginConfigurator = (
@@ -65,7 +66,7 @@ function encodeDecode(url: string) {
 }
 
 const urlTransform = (uri: string) =>
-  uri.startsWith('app://') ? uri : uriTransformer(uri);
+  uri.startsWith('app://') ? uri : defaultUrlTransform(uri);
 
 const getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) =>
   plugins;
@@ -189,8 +190,8 @@ export const renderText = <
         rehypePlugins={getRehypePlugins(rehypePlugins)}
         remarkPlugins={getRemarkPlugins(remarkPlugins)}
         skipHtml
-        transformLinkUri={urlTransform}
         unwrapDisallowed
+        urlTransform={urlTransform}
       >
         {newText}
       </ReactMarkdown>