CRNS-36: Adding custom style support for markdown

Author: vishalnarkhede

src/components/MessageSimple/MessageContent.js

@@ -33,14 +33,16 @@ const Container = styled.TouchableOpacity`
       : theme.colors.transparent};
   border-bottom-left-radius: ${({ alignment, theme }) =>
     alignment === 'left'
-      ? theme.message.text.borderRadiusS
-      : theme.message.text.borderRadiusL};
+      ? theme.message.content.container.borderRadiusS
+      : theme.message.content.container.borderRadiusL};
   border-bottom-right-radius: ${({ alignment, theme }) =>
     alignment === 'left'
-      ? theme.message.text.borderRadiusL
-      : theme.message.text.borderRadiusS};
-  border-top-left-radius: ${({ theme }) => theme.message.text.borderRadiusL};
-  border-top-right-radius: ${({ theme }) => theme.message.text.borderRadiusL};
+      ? theme.message.content.container.borderRadiusL
+      : theme.message.content.container.borderRadiusS};
+  border-top-left-radius: ${({ theme }) =>
+    theme.message.content.container.borderRadiusL};
+  border-top-right-radius: ${({ theme }) =>
+    theme.message.content.container.borderRadiusL};
   ${({ theme }) => theme.message.content.container.css};
 `;
 

src/components/MessageSimple/MessageTextContainer.js

@@ -1,25 +1,25 @@
 import React from 'react';
-import styled from '@stream-io/styled-components';
+import styled, { withTheme } from '@stream-io/styled-components';
 
 import { renderText, capitalize } from '../../utils';
 
 const TextContainer = styled.View`
   border-bottom-left-radius: ${({ theme, groupStyle }) =>
     groupStyle.indexOf('left') !== -1
-      ? theme.message.text.borderRadiusS
-      : theme.message.text.borderRadiusL};
+      ? theme.message.content.textContainer.borderRadiusS
+      : theme.message.content.textContainer.borderRadiusL};
   border-bottom-right-radius: ${({ theme, groupStyle }) =>
     groupStyle.indexOf('right') !== -1
-      ? theme.message.text.borderRadiusS
-      : theme.message.text.borderRadiusL};
+      ? theme.message.content.textContainer.borderRadiusS
+      : theme.message.content.textContainer.borderRadiusL};
   border-top-left-radius: ${({ theme, groupStyle }) =>
     groupStyle === 'leftBottom' || groupStyle === 'leftMiddle'
-      ? theme.message.text.borderRadiusS
-      : theme.message.text.borderRadiusL};
+      ? theme.message.content.textContainer.borderRadiusS
+      : theme.message.content.textContainer.borderRadiusL};
   border-top-right-radius: ${({ theme, groupStyle }) =>
     groupStyle === 'rightBottom' || groupStyle === 'rightMiddle'
-      ? theme.message.text.borderRadiusS
-      : theme.message.text.borderRadiusL};
+      ? theme.message.content.textContainer.borderRadiusS
+      : theme.message.content.textContainer.borderRadiusL};
   margin-top: 2;
   padding: 5px;
   padding-left: 8;
@@ -28,20 +28,20 @@ const TextContainer = styled.View`
     alignment === 'left' ? 'flex-start' : 'flex-end'};
   border-width: ${({ theme, alignment }) =>
     alignment === 'left'
-      ? theme.message.text.leftBorderWidth
-      : theme.message.text.rightBorderWidth};
+      ? theme.message.content.textContainer.leftBorderWidth
+      : theme.message.content.textContainer.rightBorderWidth};
   border-color: ${({ theme, alignment }) =>
     alignment === 'left'
-      ? theme.message.text.leftBorderColor
-      : theme.message.text.rightBorderColor};
+      ? theme.message.content.textContainer.leftBorderColor
+      : theme.message.content.textContainer.rightBorderColor};
   background-color: ${({ theme, alignment, type, status }) =>
     alignment === 'left' || type === 'error' || status === 'failed'
       ? theme.colors.transparent
       : theme.colors.light};
-  ${({ theme }) => theme.message.text.css}
+  ${({ theme }) => theme.message.content.textContainer.css}
 `;
 
-export const MessageTextContainer = (props) => {
+export const MessageTextContainer = withTheme((props) => {
   const {
     message,
     groupStyles = ['bottom'],
@@ -56,7 +56,9 @@ export const MessageTextContainer = (props) => {
     capitalize(hasAttachment ? 'bottom' : groupStyles[0]);
 
   if (!message.text) return false;
-
+  const markdownStyles = props.theme
+    ? props.theme.message.content.markdown
+    : {};
   return (
     <React.Fragment>
       <TextContainer
@@ -66,11 +68,11 @@ export const MessageTextContainer = (props) => {
         type={message.type}
       >
         {!MessageText ? (
-          renderText(message)
+          renderText(message, markdownStyles)
         ) : (
           <MessageText {...props} renderText={renderText} />
         )}
       </TextContainer>
     </React.Fragment>
   );
-};
+});

src/components/docs/MessageSimple.md

@@ -53,3 +53,31 @@ const data = require('./data');
   {...data.channelContext}
 />;
 ```
+
+We use [markdown](https://github.com/CharlesMangwa/react-native-simple-markdown) to render the text in message.
+
+You can customize the styles of message text by providing custom styles in theme object:
+
+Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1
+
+```json
+const theme = {
+  message: {
+    content: {
+      markdown: {
+        text: {
+          fontFamily: 'AppleSDGothicNeo-Bold'
+        },
+        link: {
+          color: 'pink'
+        }
+      }
+    }
+  }
+}
+
+...
+<Chat client={client} style={theme}>
+  ...
+</Chat>
+```

src/styles/theme.js

@@ -58,7 +58,10 @@ export const defaultTheme = {
   message: {
     container: {},
     content: {
-      container: {},
+      container: {
+        borderRadiusL: 16,
+        borderRadiusS: 2,
+      },
       containerInner: {},
       metaContainer: {},
       metaText: {},
@@ -67,6 +70,16 @@ export const defaultTheme = {
       },
       deletedContainer: {},
       deletedText: {},
+      textContainer: {
+        borderRadiusL: 16,
+        borderRadiusS: 2,
+        leftBorderWidth: 0.5,
+        leftBorderColor: 'rgba(0,0,0,0.08)',
+        rightBorderWidth: 0,
+        rightBorderColor: 'transparent',
+      },
+      // Available options for styling text: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1
+      markdown: {},
     },
     status: {
       spacer: {},
@@ -87,14 +100,6 @@ export const defaultTheme = {
       messageRepliesText: {},
       image: {},
     },
-    text: {
-      borderRadiusL: 16,
-      borderRadiusS: 2,
-      leftBorderWidth: 0.5,
-      leftBorderColor: 'rgba(0,0,0,0.08)',
-      rightBorderWidth: 0,
-      rightBorderColor: 'transparent',
-    },
     file: {
       container: {},
       details: {},

src/utils.js

@@ -6,7 +6,7 @@ import { CommandsItem } from './components/CommandsItem';
 
 import Markdown from '@stream-io/react-native-simple-markdown';
 
-export const renderText = (message) => {
+export const renderText = (message, styles) => {
   // take the @ mentions and turn them into markdown?
   // translate links
   let { text } = message;
@@ -38,11 +38,15 @@ export const renderText = (message) => {
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');
+  const markdownStyles = {
+    ...defaultMarkdownStyles,
+    ...styles,
+  };
 
   return <Markdown styles={markdownStyles}>{newText}</Markdown>;
 };
 
-const markdownStyles = {
+const defaultMarkdownStyles = {
   link: {
     color: 'blue',
     textDecorationLine: 'underline',