fix: downgrade react-markdown to v8 that supports React version < v18 (#2461)

Author: MartinCupela

package.json

@@ -83,7 +83,7 @@
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
     "react-is": "^18.1.0",
-    "react-markdown": "9.0.1",
+    "react-markdown": "^8.0.7",
     "react-player": "2.10.1",
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",

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

@@ -260,8 +260,6 @@ Array [
   "
 ",
   <blockquote>
-    
-
     <p>
       b
     </p>
@@ -551,8 +549,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 2
     </p>
@@ -576,8 +572,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 3
     </p>
@@ -619,8 +613,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 2
     </p>
@@ -644,8 +636,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 3
     </p>

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

@@ -4,9 +4,9 @@ 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';
+import type { Element } from 'react-markdown/lib/ast-to-react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types';
 
 export const mentionsMarkdownPlugin = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics

src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts

@@ -1,6 +1,6 @@
 import { visit, Visitor } from 'unist-util-visit';
 
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 
 const visitor: Visitor = (node) => {
   if (node.type !== 'html') return;

src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts

@@ -2,12 +2,10 @@ import { visit, Visitor } from 'unist-util-visit';
 import { u } from 'unist-builder';
 
 import type { Break } from 'mdast';
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 
 const visitor: Visitor = (node, index, parent) => {
-  if (typeof index === 'undefined' || index === 0) return;
-  if (typeof parent === 'undefined') return;
-  if (!node.position) return;
+  if (!(index && parent && node.position)) return;
 
   const prevSibling = parent.children.at(index - 1);
   if (!prevSibling?.position) return;

src/components/Message/renderText/renderText.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import ReactMarkdown, { defaultUrlTransform, Options } from 'react-markdown';
+import ReactMarkdown, { Options, uriTransformer } from 'react-markdown';
 import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
@@ -9,7 +9,7 @@ import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
 
-import type { PluggableList } from 'react-markdown/lib';
+import type { PluggableList } from 'react-markdown/lib/react-markdown';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -51,7 +51,7 @@ function encodeDecode(url: string) {
   }
 }
 
-const urlTransform = (uri: string) => (uri.startsWith('app://') ? uri : defaultUrlTransform(uri));
+const urlTransform = (uri: string) => (uri.startsWith('app://') ? uri : uriTransformer(uri));
 
 const getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) => plugins;
 
@@ -167,8 +167,8 @@ export const renderText = <
       rehypePlugins={getRehypePlugins(rehypePlugins)}
       remarkPlugins={getRemarkPlugins(remarkPlugins)}
       skipHtml
+      transformLinkUri={urlTransform}
       unwrapDisallowed
-      urlTransform={urlTransform}
     >
       {newText}
     </ReactMarkdown>