GetStream · vishalnarkhede · Feb 2, 2021 · Jan 29, 2021 · Jan 29, 2021 · Jan 29, 2021
diff --git a/docs/build/bundle.7ded6173.js b/docs/build/bundle.7ded6173.js
diff --git a/docs/build/bundle.d56b9596.js b/docs/build/bundle.d56b9596.js
diff --git a/docs/build/bundle.7ded6173.js.LICENSE.txt → docs/build/bundle.d56b9596.js.LICENSE.txt b/docs/build/bundle.7ded6173.js.LICENSE.txt → docs/build/bundle.d56b9596.js.LICENSE.txt
@@ -47,6 +47,15 @@ object-assign
 
 /*! https://mths.be/regenerate v1.4.1 by @mathias | MIT license */
 
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
 /**
  * A better abstraction over CSS.
  *

diff --git a/docs/index.html b/docs/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.7ded6173.js"></script>
+    <script src="build/bundle.d56b9596.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -90,7 +90,6 @@
   },
   "dependencies": {
     "@babel/runtime": "7.11.2",
-    "@stream-io/react-native-simple-markdown": "1.2.1",
     "anchorme": "^1.1.2",
     "dayjs": "1.9.3",
     "file-loader": "6.1.1",
@@ -102,6 +101,7 @@
     "react-art": "^16.8.6",
     "react-native-actionsheet": "2.4.2",
     "react-native-image-zoom-viewer": "3.0.1",
+    "react-native-markdown-package": "1.8.1",
     "seamless-immutable": "7.1.4",
     "stream-chat": "2.9.0",
     "styled-components": "5.2.0",

diff --git a/src/components/Message/MessageSimple/MessageSimple.tsx b/src/components/Message/MessageSimple/MessageSimple.tsx
@@ -17,6 +17,7 @@ import type {
 
 import type { MessageActionSheetProps } from './MessageActionSheet';
 import type { MessageTextProps } from './MessageTextContainer';
+import type { MarkdownRules } from './utils/renderText';
 
 import type { ActionProps, MessageProps } from '../Message';
 
@@ -225,7 +226,7 @@ export type MessageSimpleProps<
     /** Boolean if current message is part of thread */
     isThreadList?: boolean;
     /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
-    markdownRules?: UnknownType;
+    markdownRules?: MarkdownRules;
     /**
      * Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply']
      * If all the actions need to be disabled, empty array or false should be provided as value of prop.

diff --git a/src/components/Message/MessageSimple/MessageTextContainer.tsx b/src/components/Message/MessageSimple/MessageTextContainer.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import { capitalize } from './utils/capitalize';
-import { renderText } from './utils/renderText';
+import { MarkdownRules, renderText } from './utils/renderText';
 
 import { styled, ThemeContext } from '../../../styles/styledComponents';
 
@@ -121,7 +121,7 @@ export type MessageTextContainerProps<
    */
   openThread: () => void;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
-  markdownRules?: UnknownType;
+  markdownRules?: MarkdownRules;
   /**
    * Custom UI component to display a message in MessageList component
    * Default component (accepts the same props): [MessageSimple](https://getstream.github.io/stream-chat-react-native/#messagesimple)
@@ -133,6 +133,8 @@ export type MessageTextContainerProps<
   MessageText?: React.ComponentType<
     MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>
   >;
+  /** Function specifying interaction of links in rendered text */
+  onLink?: (url: string) => Promise<void>;
 };
 
 export const MessageTextContainer = <
@@ -152,6 +154,7 @@ export const MessageTextContainer = <
     markdownRules = {},
     message,
     MessageText,
+    onLink,
   } = props;
   const theme = useContext(ThemeContext);
 
@@ -181,6 +184,7 @@ export const MessageTextContainer = <
           markdownRules,
           markdownStyles,
           message,
+          onLink,
         })
       )}
     </TextContainer>

diff --git a/...omponents/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.js.snap b/...omponents/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.js.snap
@@ -27,8 +27,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
     style={
       Array [
         Object {
-          "minHeight": 1,
-          "minWidth": 1,
+          "alignSelf": "stretch",
         },
         undefined,
       ]
@@ -41,17 +40,16 @@ exports[`MessageTextContainer should render message text container 1`] = `
           "flexDirection": "row",
           "flexWrap": "wrap",
           "justifyContent": "flex-start",
+          "marginBottom": 0,
+          "marginTop": 0,
         }
       }
     >
       <Text
         style={
-          Array [
-            Object {
-              "color": "#222222",
-            },
-            undefined,
-          ]
+          Object {
+            "color": "#222222",
+          }
         }
       >
         Hello World

diff --git a/src/components/Message/MessageSimple/utils/renderText.tsx b/src/components/Message/MessageSimple/utils/renderText.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
 import { Linking, Text } from 'react-native';
-// @ts-expect-error
-import Markdown from '@stream-io/react-native-simple-markdown';
 import anchorme from 'anchorme';
 import truncate from 'lodash/truncate';
-
-import type { ReactNodeOutput } from 'simple-markdown';
+// @ts-expect-error
+import Markdown from 'react-native-markdown-package';
+import {
+  DefaultRules,
+  defaultRules,
+  MatchFunction,
+  ParseFunction,
+  parseInline,
+  ReactNodeOutput,
+} from 'simple-markdown';
 
 import type { MarkdownStyle } from '../../../../styles/themeConstants';
 import type { Message } from '../../../MessageList/utils/insertDates';
@@ -20,7 +26,10 @@ import type {
   UnknownType,
 } from '../../../../types/types';
 
-const defaultMarkdownStyles = {
+const defaultMarkdownStyles: MarkdownStyle = {
+  autolink: {
+    textDecorationLine: 'underline',
+  },
   inlineCode: {
     backgroundColor: '#F3F3F3',
     borderColor: '#dddddd',
@@ -29,16 +38,27 @@ const defaultMarkdownStyles = {
     padding: 3,
     paddingHorizontal: 5,
   },
-  link: {
-    color: 'blue',
-    textDecorationLine: 'underline',
+  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
+  paragraph: {
+    marginBottom: 0,
+    marginTop: 0,
   },
-  url: {
-    color: 'blue',
-    textDecorationLine: 'underline',
+  paragraphCenter: {
+    marginBottom: 0,
+    marginTop: 0,
+  },
+  paragraphWithImage: {
+    marginBottom: 0,
+    marginTop: 0,
   },
 };
 
+const parse: ParseFunction = (capture, parser, state) => ({
+  content: parseInline(parser, capture[0], state),
+});
+
+export type MarkdownRules = Partial<DefaultRules>;
+
 export type RenderTextParams<
   At extends UnknownType = DefaultAttachmentType,
   Ch extends UnknownType = DefaultChannelType,
@@ -48,9 +68,10 @@ export type RenderTextParams<
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType
 > = {
-  markdownRules: UnknownType;
+  markdownRules: MarkdownRules;
   markdownStyles: MarkdownStyle;
   message: Message<At, Ch, Co, Ev, Me, Re, Us>;
+  onLink?: (url: string) => Promise<void>;
 };
 
 export const renderText = <
@@ -64,7 +85,12 @@ export const renderText = <
 >(
   params: RenderTextParams<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { markdownRules, markdownStyles, message } = params;
+  const {
+    markdownRules,
+    markdownStyles,
+    message,
+    onLink: onLinkParams,
+  } = params;
 
   // take the @ mentions and turn them into markdown?
   // translate links
@@ -86,48 +112,100 @@ export const renderText = <
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
-  if (mentioned_users.length) {
-    for (let i = 0; i < mentioned_users.length; i++) {
-      const username = mentioned_users[i].name || mentioned_users[i].id;
-      const markdown = `**@${username}**`;
-      const regEx = new RegExp(`@${username}`, 'g');
-      newText = newText.replace(regEx, markdown);
-    }
-  }
-
   newText = newText.replace(/[<&"'>]/g, '\\$&');
-  const styles = {
+  const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
+    autolink: {
+      ...defaultMarkdownStyles.autolink,
+      ...markdownStyles?.autolink,
+    },
+    inlineCode: {
+      ...defaultMarkdownStyles.inlineCode,
+      ...markdownStyles?.inlineCode,
+    },
+    mentions: {
+      ...defaultMarkdownStyles.mentions,
+      ...markdownStyles?.mentions,
+    },
+    text: {
+      ...defaultMarkdownStyles.text,
+      ...markdownStyles?.text,
+    },
   };
 
   const onLink = (url: string) =>
-    Linking.canOpenURL(url).then(
-      (canOpenUrl) => canOpenUrl && Linking.openURL(url),
-    );
+    onLinkParams
+      ? onLinkParams(url)
+      : Linking.canOpenURL(url).then(
+          (canOpenUrl) => canOpenUrl && Linking.openURL(url),
+        );
 
   const react: ReactNodeOutput = (node, output, { ...state }) => {
-    state.withinText = true;
-    state.stylesToApply = node.target.match(/@/) ? styles.mailTo : styles.link;
-    return React.createElement(
+    state.withinLink = true;
+    const link = React.createElement(
       Text,
       {
         key: state.key,
         onPress: () => onLink(node.target),
-        style: state.stylesToApply,
+        style: styles.autolink,
+        suppressHighlighting: true,
       },
       output(node.content, state),
     );
+    state.withinLink = false;
+    return link;
   };
 
+  const mentionedUsers = Array.isArray(mentioned_users)
+    ? mentioned_users.reduce((acc, cur) => {
+        const userName = cur.name || cur.id || '';
+        if (userName) {
+          acc += `${acc.length ? '|' : ''}@${userName}`;
+        }
+        return acc;
+      }, '')
+    : '';
+
+  const regEx = new RegExp(`^\\B(${mentionedUsers})`, 'g');
+  const match: MatchFunction = (source) => regEx.exec(source);
+  const mentionsReact: ReactNodeOutput = (node, output, { ...state }) =>
+    React.createElement(
+      Text,
+      {
+        key: state.key,
+        style: styles.mentions,
+      },
+      Array.isArray(node.content)
+        ? node.content[0]?.content || ''
+        : output(node.content, state),
+    );
+
   const customRules = {
     link: { react },
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
+    ...(mentionedUsers
+      ? {
+          mentions: {
+            match,
+            order: defaultRules.text.order - 0.5,
+            parse,
+            react: mentionsReact,
+          },
+        }
+      : {}),
   };
 
   return (
-    <Markdown rules={{ ...customRules, ...markdownRules }} styles={styles}>
+    <Markdown
+      onLink={onLink}
+      rules={{
+        ...customRules,
+        ...markdownRules,
+      }}
+      styles={styles}
+    >
       {newText}
     </Markdown>
   );