feat: add blockquote support for preview in message (#2929)

* feat: add blockquote support for preview in message

* fix: lint issues

* fix: lint issues

* fix: lint issues

Author: khushal87

package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts

@@ -15,7 +15,7 @@ describe('generateMarkdownText', () => {
       'Hi [[email protected]](mailto:[email protected]) @[email protected]',
     ],
     ['Hi @getstream.io getstream.io', 'Hi @getstream.io [getstream.io](http://getstream.io)'],
-    ['Hi <Stream>', 'Hi \\<Stream\\>'],
+    ['Hi <Stream>', 'Hi \\<Stream>'],
   ])('Returns the generated markdown text for %p and %p', (text, expected) => {
     const result = generateMarkdownText(text);
     expect(result).toBe(expected);

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -34,7 +34,7 @@ export const generateMarkdownText = (text?: string) => {
   }
 
   // Escape the " and ' characters, except in code blocks where we deem this allowed.
-  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|[<"'>]/g, (match, code) => {
+  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|[<"']/g, (match, code) => {
     if (code) return code;
     return `\\${match}`;
   });

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -200,6 +200,23 @@ export const renderText = <
       color: colors.accent_blue,
       ...markdownStyles?.autolink,
     },
+    blockQuoteSection: {
+      ...defaultMarkdownStyles.blockQuoteSection,
+      flexDirection: 'row',
+      padding: 8,
+      ...markdownStyles?.blockQuoteSection,
+    },
+    blockQuoteSectionBar: {
+      ...defaultMarkdownStyles.blockQuoteSectionBar,
+      backgroundColor: colors.grey_gainsboro,
+      marginRight: 8,
+      width: 2,
+      ...markdownStyles?.blockQuoteSectionBar,
+    },
+    blockQuoteText: {
+      ...defaultMarkdownStyles.blockQuoteText,
+      ...markdownStyles?.blockQuoteText,
+    },
     codeBlock: {
       ...defaultMarkdownStyles.codeBlock,
       backgroundColor: colors.code_block,
@@ -398,7 +415,18 @@ export const renderText = <
     </MarkdownReactiveScrollView>
   );
 
+  const blockQuoteReact: ReactNodeOutput = (node, output, state) => (
+    <View key={state.key} style={styles.blockQuoteSection}>
+      <View style={styles.blockQuoteSectionBar} />
+      <View style={styles.blockQuoteText}>{output(node.content, state)}</View>
+    </View>
+  );
+
   const customRules = {
+    blockQuote: {
+      react: blockQuoteReact,
+    },
+    codeBlock: { react: codeBlockReact },
     // do not render images, we will scrape them out of the message and show on attachment card component
     image: { match: () => null },
     link: { react: linkReact },
@@ -418,7 +446,6 @@ export const renderText = <
           },
         }
       : {}),
-    codeBlock: { react: codeBlockReact },
     table: { react: tableReact },
   };