replacing the antique markdown lib with a newer one for fixing some issues

virdesai · virdesai · commit 91354970e4d5 · 2021-01-29T13:39:50.000-05:00
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/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>
   );
diff --git a/src/styles/themeConstants.ts b/src/styles/themeConstants.ts
@@ -1,4 +1,4 @@
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { CSSObject } from 'styled-components';
 
 export const BASE_FONT_SIZE = 16;
@@ -19,42 +19,49 @@ export type CSS = {
 };
 
 export type MarkdownStyle = Partial<{
-  blockQuoteBar: StyleProp<ViewStyle>;
-  blockQuoteSection: StyleProp<ViewStyle>;
-  blockQuoteSectionBar: StyleProp<ViewStyle>;
-  blockQuoteText: StyleProp<ViewStyle>;
-  codeBlock: StyleProp<TextStyle>;
-  del: StyleProp<TextStyle>;
-  em: StyleProp<TextStyle>;
-  heading: StyleProp<TextStyle>;
-  heading1: StyleProp<TextStyle>;
-  heading2: StyleProp<TextStyle>;
-  heading3: StyleProp<TextStyle>;
-  heading4: StyleProp<TextStyle>;
-  heading5: StyleProp<TextStyle>;
-  heading6: StyleProp<TextStyle>;
-  hr: StyleProp<ViewStyle>;
-  image: StyleProp<ImageStyle>;
-  inlineCode: StyleProp<TextStyle>;
-  link: StyleProp<TextStyle>;
-  listItem: StyleProp<ViewStyle>;
-  listItemBulletType: string;
-  listItemButton: StyleProp<TextStyle>;
-  listItemNumber: StyleProp<TextStyle>;
-  listItemText: StyleProp<TextStyle>;
-  mailTo: StyleProp<TextStyle>;
-  paragraph: StyleProp<ViewStyle>;
-  strong: StyleProp<TextStyle>;
-  table: StyleProp<ViewStyle>;
-  tableHeader: StyleProp<ViewStyle>;
-  tableHeaderCell: StyleProp<ViewStyle>;
-  tableRow: StyleProp<ViewStyle>;
-  tableRowCell: StyleProp<ViewStyle>;
-  tableRowLast: StyleProp<ViewStyle>;
-  text: StyleProp<TextStyle>;
-  u: StyleProp<TextStyle>;
-  video: StyleProp<ImageStyle>;
-  view: StyleProp<ViewStyle>;
+  autolink: TextStyle;
+  blockQuoteBar: ViewStyle;
+  blockQuoteSection: ViewStyle;
+  blockQuoteSectionBar: ViewStyle;
+  blockQuoteText: TextStyle | ViewStyle;
+  br: TextStyle;
+  codeBlock: TextStyle;
+  del: TextStyle;
+  em: TextStyle;
+  heading: TextStyle;
+  heading1: TextStyle;
+  heading2: TextStyle;
+  heading3: TextStyle;
+  heading4: TextStyle;
+  heading5: TextStyle;
+  heading6: TextStyle;
+  hr: ViewStyle;
+  image: ImageStyle;
+  inlineCode: TextStyle;
+  list: ViewStyle;
+  listItem: ViewStyle;
+  listItemBullet: TextStyle;
+  listItemNumber: TextStyle;
+  listItemText: TextStyle;
+  listRow: ViewStyle;
+  mailTo: TextStyle;
+  mentions: TextStyle;
+  newline: TextStyle;
+  noMargin: TextStyle;
+  paragraph: TextStyle;
+  paragraphCenter: TextStyle;
+  paragraphWithImage: ViewStyle;
+  strong: TextStyle;
+  sublist: ViewStyle;
+  table: ViewStyle;
+  tableHeader: ViewStyle;
+  tableHeaderCell: TextStyle;
+  tableRow: ViewStyle;
+  tableRowCell: ViewStyle;
+  tableRowLast: ViewStyle;
+  text: TextStyle;
+  u: TextStyle;
+  view: ViewStyle;
 }>;
 
 export type Theme = {
diff --git a/yarn.lock b/yarn.lock
