Adjust renderText documentation

Author: arnautov-anton

docusaurus/docs/React/components/message-components/render-text.mdx

@@ -3,7 +3,7 @@ id: render-text
 title: renderText function
 ---
 
-The `renderText` function is a core piece of functionality, which handles how the text of our message is going to be formatted/look like. The default [`renderText`](#render-text) function parses a markdown string and outputs a `ReactElement`. Under the hood, the output is generated by the `ReactMarkdown` component from [react-markdown library](https://github.com/remarkjs/react-markdown). The component transforms the markdown to `ReactElement` by using [`remark` parser](https://github.com/remarkjs/remark/tree/main) and [`remark`](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) and [`rehype`](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) plugins.
+The `renderText` function is a core piece of functionality, which handles how the text of our message is going to be formatted/look like. The default `renderText` function parses a markdown string and outputs a `ReactElement`. Under the hood, the output is generated by the `ReactMarkdown` component from [react-markdown library](https://github.com/remarkjs/react-markdown). The component transforms the markdown to `ReactElement` by using [`remark` parser](https://github.com/remarkjs/remark/tree/main) and [`remark`](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) and [`rehype`](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) plugins.
 
 The default `remark` plugins used by SDK are:
 
@@ -14,53 +14,41 @@ The default `rehype` plugins (both specific to this SDK) are:
 1. plugin to render user mentions
 2. plugin to render emojis
 
-## Overriding defaults
+## Overriding Defaults
 
-### Custom `renderText` function
+### Custom `renderText` Function
 
-If you don't want your chat implementation to support markdown syntax by default you can override the default behaviour by creating a custom `renderText` function which returns a React node and passing it down to the `MessageList` or `MessageSimple` component via `renderText` property.
+If you don't want your chat implementation to support markdown syntax by default you can override the default behaviour by creating a custom `renderText` function which returns a React node and passing it down to the [`MessageList`](../core-components/message-list.mdx) or [`MessageSimple`](../message-components/message-ui.mdx) component via `renderText` property.
 
 For this particular example we'll create a very primitive one which takes the message text passed down to it as a first argument and returns it wrapped in `span` element:
 
 ```tsx
+import { MessageList } from 'stream-chat-react';
+
 const customRenderText = (text) => {
   return <span>{text}</span>;
 };
 
-const App = () => (
-  <Chat client={client}>
-    <Channel>
-      <Window>
-        <MessageList renderText={customRenderText} />
-      </Window>
-    </Channel>
-  </Chat>
-);
+export const WrappedMessageList = () => <MessageList renderText={customRenderText} />;
 ```
 
-Here's also an example with `VirtualizedMessageList` which currently does not accept `renderText` directly:
+Here's also an example with [`VirtualizedMessageList`](../core-components/virtualized-list.mdx) which currently does not accept `renderText` directly:
 
 ```tsx
-import { MessageSimple } from 'stream-chat-react';
+import { VirtualizedMessageList, MessageSimple } from 'stream-chat-react';
 
 const customRenderText = (text) => {
   return <span>{text}</span>;
 };
 
 const CustomMessage = (props) => <MessageSimple {...props} renderText={customRenderText} />;
 
-const App = () => (
-  <Chat client={client}>
-    <Channel>
-      <Window>
-        <VirtualizedMessageList Message={CustomMessage} />
-      </Window>
-    </Channel>
-  </Chat>
+export const WrappedVirtualizedMessageList = () => (
+  <VirtualizedMessageList Message={CustomMessage} />
 );
 ```
 
-### Custom element rendering
+### Custom Element Rendering
 
 If you feel like the default output is sufficient, but you'd like to adjust how certain [ReactMarkdown components](https://github.com/remarkjs/react-markdown#appendix-b-components) look like (like `strong` element generated by typing \*\*strong\*\*) you can do so by passing down options to a third argument of the default `renderText` function:
 
@@ -71,37 +59,33 @@ Types `mention` and `emoji` are special case component types generated by our SD
 ```tsx
 import { renderText } from 'stream-chat-react';
 
-const StrongComponent = ({ children }) => <b className='custom-strong-class-name'>{children}</b>;
+const CustomStrongComponent = ({ children }) => (
+  <b className='custom-strong-class-name'>{children}</b>
+);
 
-const MentionComponent = ({ children, node: { mentionedUser } }) => (
+const CustomMentionComponent = ({ children, node: { mentionedUser } }) => (
   <a data-user-id={mentionedUser.id} href={`/user-profile/${mentionedUser.id}`}>
     {children}
   </a>
 );
 
-const App = () => (
-  <Chat client={client}>
-    <Channel>
-      <Window>
-        <MessageList
-          renderText={(text, mentionedUsers) =>
-            renderText(text, mentionedUsers, {
-              customMarkDownRenderers: { strong: StrongComponent, mention: MentionComponent },
-            })
-          }
-        />
-      </Window>
-    </Channel>
-  </Chat>
+export const WrappedMessageList = () => (
+  <MessageList
+    renderText={(text, mentionedUsers) =>
+      renderText(text, mentionedUsers, {
+        customMarkDownRenderers: { strong: CustomStrongComponent, mention: CustomMentionComponent },
+      })
+    }
+  />
 );
 ```
 
-### Custom remark and rehype plugins
+### Custom Remark and Rehype Plugins
 
-If you would like to extend the array of plugins used to parse the markdown, you can provide your own lists of remark resp. rehype plugins. The logic that determines what plugins are used and in which order can be specified in custom `getRehypePlugins` and `getRemarkPlugins` functions. These receive the default array of rehype and remark plugins for further customization. Both custom functions ought to be passed to the third `renderText()` parameter. An example follows:
+If you would like to extend the array of plugins used to parse the markdown, you can provide your own lists of remark resp. rehype plugins. The logic that determines what plugins are used and in which order can be specified in custom `getRehypePlugins` and `getRemarkPlugins` functions. These receive the default array of rehype and remark plugins for further customization. Both custom functions ought to be passed to the third `renderText` parameter. An example follows:
 
 :::note
-It is important to understand what constitutes a rehype or remark plugin. A good start is to learn about the library called [`react-remark`](https://github.com/remarkjs/react-remark) which is used under the hood in our `renderText()` function.
+It is important to understand what constitutes a rehype or remark plugin. A good start is to learn about the library called [`react-remark`](https://github.com/remarkjs/react-remark) which is used under the hood in our `renderText` function.
 :::
 
 ```tsx
@@ -122,7 +106,7 @@ const customRenderText = (text, mentionedUsers) =>
     getRemarkPlugins,
   });
 
-const CustomMessageList = () => <MessageList renderText={customRenderText} />;
+const WrappedMessageList = () => <MessageList renderText={customRenderText} />;
 ```
 
 It is also possible to define your custom set of allowed tag names for the elements rendered from the parsed markdown. To perform the tree transformations, you will need to use libraries like [`unist-builder`](https://github.com/syntax-tree/unist-builder) to build the trees and [`unist-util-visit`](https://github.com/syntax-tree/unist-util-visit-parents) or [`hast-util-find-and-replace`](https://github.com/syntax-tree/hast-util-find-and-replace) to traverse the tree:
@@ -151,5 +135,5 @@ const customRenderText = (text, mentionedUsers) =>
     getRehypePlugins,
   });
 
-const CustomMessageList = () => <MessageList renderText={customRenderText} />;
+const WrappedMessageList = () => <MessageList renderText={customRenderText} />;
 ```