add a markdownRules object option to be passed into MessageContent and MessageTextContainer to pass through to renderText and allow overriding or adding any custom rules to the markdown lib

Author: Vir Desai

native-package/yarn.lock

@@ -6266,10 +6266,10 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-[email protected].3:
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.12.3.tgz#d180d51a1661d578dbb6253791fa59dc23f71b6e"
-  integrity sha512-/uE95FKsct9jghHw29JVLVZxlq/IodQOjES29aIJh3XfqKyOS9MPtu/wKJpBPDGpxrr2Xc+H8XU0Ocs3UgjMZA==
+[email protected].4:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.12.4.tgz#8cf1e01fe3b178eb12932e6a88b4c4a8106d363d"
+  integrity sha512-YEWJ333pHrXXFE7MLwMfyk6zXDVTmqEEKrUubQ9rwkPICx3WpVT/dwsVV2xDun9UZpTyAOIitFLdv7Mdn6SJiQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
     "@stream-io/react-native-simple-markdown" "^1.1.3"
@@ -6289,13 +6289,13 @@ [email protected]:
     react-native-actionsheet "^2.4.2"
     react-native-image-zoom-viewer "^2.2.25"
     seamless-immutable "^7.1.4"
-    stream-chat "^1.11.1"
+    stream-chat "^1.12.1"
     uuid "^3.3.2"
 
-stream-chat@^1.11.1:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-1.11.3.tgz#b29fe3d410e203416de49109422acaee0a04a80f"
-  integrity sha512-QC8uKB1GQBfJE1wHswbAP4lgluR6+g2rP0GPRxJ2HSOh/EpTZFwWaFwRrl+1oDdzLHCOchcHsfFe2t70z9FC/A==
+stream-chat@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-1.12.1.tgz#a4bc0ee973e28c5eaabd98be35f476980bff4fac"
+  integrity sha512-+FRk1Z9sR+mGTbXgC0RKAnDp+1IG8N6NAwrWI/GZhNQthR70PbQoG7KI4y28su8PMCpRN1+9bl/pkXDGG8ILiw==
   dependencies:
     "@babel/runtime" "^7.3.1"
     "@types/seamless-immutable" "7.1.10"

package.json

@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@stream-io/react-native-simple-markdown": "^1.1.3",
+    "@stream-io/react-native-simple-markdown": "^1.2.0",
     "@stream-io/styled-components": "^4.2.1",
     "anchorme": "^1.1.2",
     "babel-plugin-macros": "^2.5.1",

src/components/MessageSimple/MessageContent.js

@@ -372,6 +372,8 @@ class MessageContent extends React.PureComponent {
     readOnly: PropTypes.bool,
     /** Disables the message UI. Which means, message actions, reactions won't work. */
     disabled: PropTypes.bool,
+    /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
+    markdownRules: PropTypes.object,
   };
 
   static defaultProps = {
@@ -502,6 +504,7 @@ class MessageContent extends React.PureComponent {
       FileAttachmentGroup,
       t,
       tDateTimeParser,
+      markdownRules,
     } = this.props;
 
     const Attachment = this.props.Attachment;
@@ -702,6 +705,7 @@ class MessageContent extends React.PureComponent {
               Message={Message}
               openThread={this.openThread}
               handleReaction={handleReaction}
+              markdownRules={markdownRules}
             />
           </ContainerInner>
           {repliesEnabled ? (

src/components/MessageSimple/MessageTextContainer.js

@@ -58,6 +58,7 @@ export const MessageTextContainer = withTheme((props) => {
   const markdownStyles = props.theme
     ? props.theme.message.content.markdown
     : {};
+  const markdownRules = props.markdownRules || {};
   return (
     <React.Fragment>
       <TextContainer
@@ -67,7 +68,7 @@ export const MessageTextContainer = withTheme((props) => {
         type={message.type}
       >
         {!MessageText ? (
-          renderText(message, markdownStyles)
+          renderText(message, markdownStyles, markdownRules)
         ) : (
           <MessageText {...props} renderText={renderText} />
         )}
@@ -96,4 +97,6 @@ MessageTextContainer.propTypes = {
   MessageText: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
   /** Complete theme object. Its a [defaultTheme](https://github.com/GetStream/stream-chat-react-native/blob/master/src/styles/theme.js#L22) merged with customized theme provided as prop to Chat component */
   theme: PropTypes.object,
+  /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
+  markdownRules: PropTypes.object,
 };

src/components/docs/renderText.md

@@ -8,3 +8,4 @@ It accepts following params:
 
 - message { object } Message object
 - style { object } - https://github.com/GetStream/react-native-simple-markdown#styles-1
+- markdownRules { object } - https://github.com/GetStream/react-native-simple-markdown#rules

src/utils/renderText.js

@@ -1,9 +1,9 @@
+import React from 'react';
 import Markdown from '@stream-io/react-native-simple-markdown';
-import { truncate } from 'lodash-es';
 import anchorme from 'anchorme';
-import React from 'react';
+import { truncate } from 'lodash-es';
 
-export const renderText = (message, styles) => {
+export const renderText = (message, styles, markdownRules) => {
   // take the @ mentions and turn them into markdown?
   // translate links
   let { text } = message;
@@ -40,7 +40,11 @@ export const renderText = (message, styles) => {
     ...styles,
   };
 
-  return <Markdown styles={markdownStyles}>{newText}</Markdown>;
+  return (
+    <Markdown rules={markdownRules} styles={markdownStyles}>
+      {newText}
+    </Markdown>
+  );
 };
 
 const defaultMarkdownStyles = {
@@ -58,7 +62,6 @@ const defaultMarkdownStyles = {
     color: 'red',
     fontSize: 13,
     padding: 3,
-    paddingLeft: 5,
-    paddingRight: 5,
+    paddingHorizontal: 5,
   },
 };

types/index.d.ts

@@ -801,6 +801,7 @@ export interface MessageUIComponentProps
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
   formatDate(date: string): string;
   additionalTouchableProps?: object;
+  markdownRules?: object; // TODO: typescript the markdown lib
 }
 
 export interface MessageHeaderUIComponentProps

yarn.lock

@@ -1165,14 +1165,13 @@
   dependencies:
     type-detect "4.0.8"
 
-"@stream-io/react-native-simple-markdown@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@stream-io/react-native-simple-markdown/-/react-native-simple-markdown-1.1.3.tgz#690cac9236d28eab3b0e4b896714c81254258c2d"
-  integrity sha512-O0/v3mlTaD9+eAVxThreC0sX1eOgcJRR7N1FOZ9zpf3IFYVr4VU+S7tYZHqmNzyh1N3VUi4+Fao+ZxEb/YToXw==
+"@stream-io/react-native-simple-markdown@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@stream-io/react-native-simple-markdown/-/react-native-simple-markdown-1.2.0.tgz#f1ea7db1e16712a3428b79fdd522464ae2caccdb"
+  integrity sha512-rqs625+3v+Nz4yUocmMr/Ar6Jb31HZWXDOqEi4MjU3IDLCRi9XaIeH7FlCD4GrabqUEYjq8EY709fxpVBjaSxw==
   dependencies:
-    lodash "^4.15.0"
-    prop-types "^15.6.0"
-    simple-markdown "^0.4.4"
+    lodash "^4.17.15"
+    simple-markdown "^0.7.2"
 
 "@stream-io/styled-components@^4.2.1":
   version "4.2.1"
@@ -1321,6 +1320,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@>=16.0.0":
+  version "16.9.41"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.41.tgz#925137ee4d2ff406a0ecf29e8e9237390844002e"
+  integrity sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/[email protected]":
   version "7.1.10"
   resolved "https://registry.yarnpkg.com/@types/seamless-immutable/-/seamless-immutable-7.1.10.tgz#4c4313ad5069c881f38a19c7df20b7b694bf0f57"
@@ -6334,7 +6341,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
-lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.6.1:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.6.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9085,10 +9092,12 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
-simple-markdown@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/simple-markdown/-/simple-markdown-0.4.4.tgz#9bd597bdd5c2f5a789e56a4dbf06427d76c3834f"
-  integrity sha512-ZmlNUGR1KI12sPHeQ7dQY1qM5KfOgFqClNNVO8zQ9Pg6u7gHLCPFGD+VC7MCwpGDMd1uw3Bb2TfFfR8d6bB34A==
+simple-markdown@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/simple-markdown/-/simple-markdown-0.7.2.tgz#896cc3e3dd9acd068d30e696bce70b0b97655665"
+  integrity sha512-XfCvqqzMyzRj4L7eIxJgGaQ2Gaxr20GhTFMB+1yuY8q3xffjzmOg4Q5tC0kcaJPV42NNUHCQDaRK6jzi3/RhrA==
+  dependencies:
+    "@types/react" ">=16.0.0"
 
 sisteransi@^1.0.4:
   version "1.0.4"