Add markdown component with simple rules for native

native/calendar/calendar.react.js

@@ -70,7 +70,7 @@ import {
 import { connect } from 'lib/utils/redux-utils';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 
-import { Entry, InternalEntry, entryStyles } from './entry.react';
+import { Entry, InternalEntry, combinedEntryStyle } from './entry.react';
 import { calendarListData } from '../selectors/calendar-selectors';
 import {
   createIsForegroundSelector,
@@ -248,7 +248,7 @@ class Calendar extends React.PureComponent<Props, State> {
         continue;
       }
       const text = item.entryInfo.text === '' ? ' ' : item.entryInfo.text;
-      const node = <Text style={entryStyles.text}>{text}</Text>;
+      const node = <Text style={combinedEntryStyle}>{text}</Text>;
       nodesToMeasure.push({
         id: entryKey(item.entryInfo),
         node,

native/calendar/entry.react.js

@@ -21,6 +21,7 @@ import type {
 import type { LoadingStatus } from 'lib/types/loading-types';
 import type { LayoutEvent } from '../types/react-native';
 import type { TabNavigationProp } from '../navigation/app-navigator.react';
+import type { TextStyle as FlattenedTextStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import * as React from 'react';
 import {
@@ -32,14 +33,14 @@ import {
   Alert,
   LayoutAnimation,
   Keyboard,
+  StyleSheet,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import invariant from 'invariant';
 import shallowequal from 'shallowequal';
 import _omit from 'lodash/fp/omit';
 import _isEqual from 'lodash/fp/isEqual';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import Hyperlink from 'react-native-hyperlink';
 import tinycolor from 'tinycolor2';
 
 import { colorIsDark } from 'lib/shared/thread-utils';
@@ -75,6 +76,8 @@ import {
   type NavContextType,
 } from '../navigation/navigation-context';
 import { waitForInteractions } from '../utils/interactions';
+import Markdown from '../markdown/markdown.react';
+import { inlineMarkdownRules } from '../markdown/rules.react';
 
 function hueDistance(firstColor: string, secondColor: string): number {
   const firstHue = tinycolor(firstColor).toHsv().h;
@@ -370,12 +373,11 @@ class InternalEntry extends React.Component<Props, State> {
     if (rawText === '' || rawText.slice(-1) === '\n') {
       rawText += ' ';
     }
-    const textStyle = {};
-    textStyle.color = textColor;
-    if (textInput) {
-      textStyle.opacity = 0;
-    }
-    const linkStyle = darkColor ? styles.lightLinkText : styles.darkLinkText;
+    const textStyle = {
+      ...this.props.styles.text,
+      color: textColor,
+      opacity: textInput ? 0 : 1,
+    };
     // We use an empty View to set the height of the entry, and then position
     // the Text and TextInput absolutely. This allows to measure height changes
     // to the Text while controlling the actual height of the entry.
@@ -393,18 +395,18 @@ class InternalEntry extends React.Component<Props, State> {
           >
             <View>
               <View style={heightStyle} />
-              <Hyperlink
-                linkDefault={true}
-                linkStyle={linkStyle}
+              <View
                 style={this.props.styles.textContainer}
+                onLayout={this.onTextContainerLayout}
               >
-                <Text
-                  style={[this.props.styles.text, textStyle]}
-                  onLayout={this.onTextLayout}
+                <Markdown
+                  style={textStyle}
+                  useDarkStyle={darkColor}
+                  rules={inlineMarkdownRules}
                 >
                   {rawText}
-                </Text>
-              </Hyperlink>
+                </Markdown>
+              </View>
               {textInput}
             </View>
             {actionLinks}
@@ -477,7 +479,7 @@ class InternalEntry extends React.Component<Props, State> {
     this.dispatchSave(this.props.entryInfo.id, this.state.text);
   };
 
-  onTextLayout = (event: LayoutEvent) => {
+  onTextContainerLayout = (event: LayoutEvent) => {
     this.guardedSetState({
       height: Math.ceil(event.nativeEvent.layout.height),
     });
@@ -675,10 +677,6 @@ const styles = {
   container: {
     backgroundColor: 'listBackground',
   },
-  darkLinkText: {
-    color: colors.light.link,
-    textDecorationLine: 'underline',
-  },
   entry: {
     borderRadius: 8,
     margin: 5,
@@ -695,10 +693,6 @@ const styles = {
     fontWeight: 'bold',
     paddingLeft: 5,
   },
-  lightLinkText: {
-    color: colors.dark.link,
-    textDecorationLine: 'underline',
-  },
   pencilIcon: {
     lineHeight: 13,
     paddingTop: 1,
@@ -716,16 +710,14 @@ const styles = {
   text: {
     fontFamily: 'System',
     fontSize: 16,
-    paddingBottom: 6,
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingTop: 5,
   },
   textContainer: {
-    margin: 0,
-    padding: 0,
     position: 'absolute',
     top: 0,
+    paddingBottom: 6,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 5,
   },
   textInput: {
     fontFamily: 'System',
@@ -740,6 +732,11 @@ const styles = {
 };
 const stylesSelector = styleSelector(styles);
 
+const combinedEntryStyle: FlattenedTextStyle = (StyleSheet.flatten([
+  styles.textContainer,
+  styles.text,
+]): any);
+
 registerFetchKey(saveEntryActionTypes);
 registerFetchKey(deleteEntryActionTypes);
 const activeThreadPickerSelector = createIsForegroundSelector(
@@ -763,4 +760,4 @@ const Entry = connectNav((context: ?NavContextType) => ({
   )(InternalEntry),
 );
 
-export { InternalEntry, Entry, styles as entryStyles };
+export { InternalEntry, Entry, combinedEntryStyle };

native/chat/inner-text-message.react.js

@@ -8,10 +8,8 @@ import type { AppState } from '../redux/redux-setup';
 import * as React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
-import Hyperlink from 'react-native-hyperlink';
 
 import { colorIsDark } from 'lib/shared/thread-utils';
-import { onlyEmojiRegex } from 'lib/shared/emojis';
 import { connect } from 'lib/utils/redux-utils';
 
 import {
@@ -25,6 +23,8 @@ import {
   colorsSelector,
   colors,
 } from '../themes/colors';
+import Markdown from '../markdown/markdown.react';
+import { fullMarkdownRules } from '../markdown/rules.react';
 
 type Props = {|
   item: ChatTextMessageInfoItemWithHeight,
@@ -49,7 +49,7 @@ class InnerTextMessage extends React.PureComponent<Props> {
     const { isViewer } = creator;
 
     let messageStyle = {},
-      textCustomStyle = {},
+      textStyle = { ...styles.text },
       darkColor;
     if (isViewer) {
       const threadColor = item.threadInfo.color;
@@ -59,39 +59,31 @@ class InnerTextMessage extends React.PureComponent<Props> {
       messageStyle.backgroundColor = this.props.colors.listChatBubble;
       darkColor = this.props.activeTheme === 'dark';
     }
-    textCustomStyle.height = item.contentHeight;
-
-    const linkStyle = darkColor ? styles.lightLinkText : styles.darkLinkText;
-    textCustomStyle.color = darkColor
+    textStyle.color = darkColor
       ? colors.dark.listForegroundLabel
       : colors.light.listForegroundLabel;
-    const textStyle = onlyEmojiRegex.test(text)
-      ? styles.emojiOnlyText
-      : styles.text;
 
     const cornerStyle = getRoundedContainerStyle(
       filterCorners(allCorners, item),
     );
 
+    const outerTextStyle = { height: item.contentHeight };
     const message = (
       <TouchableOpacity
         onPress={this.props.onPress}
         onLongPress={this.props.onPress}
         activeOpacity={0.6}
+        style={[styles.message, messageStyle, cornerStyle]}
       >
-        <Hyperlink
-          linkDefault={true}
-          style={[styles.message, messageStyle, cornerStyle]}
-          linkStyle={linkStyle}
-        >
-          <Text
-            onPress={this.props.onPress}
-            onLongPress={this.props.onPress}
-            style={[textStyle, textCustomStyle]}
+        <Text style={outerTextStyle}>
+          <Markdown
+            style={textStyle}
+            useDarkStyle={darkColor}
+            rules={fullMarkdownRules}
           >
             {text}
-          </Text>
-        </Hyperlink>
+          </Markdown>
+        </Text>
       </TouchableOpacity>
     );
 
@@ -107,22 +99,11 @@ class InnerTextMessage extends React.PureComponent<Props> {
     );
   }
 
+  // We need to set onLayout in order to allow .measure() to be on the ref
   onLayout = () => {};
 }
 
 const styles = StyleSheet.create({
-  darkLinkText: {
-    color: colors.light.link,
-    textDecorationLine: 'underline',
-  },
-  emojiOnlyText: {
-    fontFamily: 'Arial',
-    fontSize: 36,
-  },
-  lightLinkText: {
-    color: colors.dark.link,
-    textDecorationLine: 'underline',
-  },
   message: {
     overflow: 'hidden',
     paddingHorizontal: 12,

native/chat/message-list-container.react.js

@@ -30,7 +30,6 @@ import {
   messageID,
   robotextToRawString,
 } from 'lib/shared/message-utils';
-import { onlyEmojiRegex } from 'lib/shared/emojis';
 
 import MessageList from './message-list.react';
 import NodeHeightMeasurer from '../components/node-height-measurer.react';
@@ -52,6 +51,8 @@ import {
   styleSelector,
 } from '../themes/colors';
 import ContentLoading from '../components/content-loading.react';
+import Markdown from '../markdown/markdown.react';
+import { fullMarkdownRules } from '../markdown/rules.react';
 
 export type ChatMessageItemWithHeight =
   | {| itemType: 'loader' |}
@@ -111,12 +112,18 @@ class MessageListContainer extends React.PureComponent<Props, State> {
       const { messageInfo } = item;
       if (messageInfo.type === messageTypes.TEXT) {
         const style = [
-          onlyEmojiRegex.test(messageInfo.text)
-            ? this.props.styles.emojiOnlyText
-            : this.props.styles.text,
+          this.props.styles.text,
           { width: this.props.textMessageMaxWidth },
         ];
-        const node = <Text style={style}>{messageInfo.text}</Text>;
+        const node = (
+          <Markdown
+            style={style}
+            useDarkStyle={false}
+            rules={fullMarkdownRules}
+          >
+            {messageInfo.text}
+          </Markdown>
+        );
         nodesToMeasure.push({
           id: messageKey(messageInfo),
           node,
@@ -313,10 +320,6 @@ const styles = {
     backgroundColor: 'listBackground',
     flex: 1,
   },
-  emojiOnlyText: {
-    fontFamily: 'Arial',
-    fontSize: 36,
-  },
   robotext: {
     fontFamily: 'Arial',
     fontSize: 15,