[native] Replace hyperlink with custom markdown (#104)

* Add markdown components [native] Add custom markdown with simple rules [native] Refactor markdown [web] Remove unused react-markdown [native] Import types from simple-markdown [native] Requested changes [native] Add emojiOnly rule and comments for rules Update markdown-styles.js [native] Some refactoring after review [native] Small fix Ashoat's revisions [native] Replace hyperlink with markdown with splitted rules * [native] Small changes after rebase * [native] Sync Entry text style with TextHeightMeasurer style * Some cleanup and updates from upstream branch * [native] Fix robotext markdown style * [native] Remove react-native-hyperlink * [native] Small fix after removing hyperlink Co-authored-by: Ashoat Tevosyan <[email protected]>
CommE2E · Jul 19, 2020 · ca584a0 · ca584a0
1 parent 6ff240e
commit ca584a0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 106 deletions.
diff --git a/native/calendar/calendar.react.js b/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,
@@ -749,7 +749,7 @@ class Calendar extends React.PureComponent<Props, State> {
         <TextHeightMeasurer
           textToMeasure={this.state.textToMeasure}
           allHeightsMeasuredCallback={this.allHeightsMeasured}
-          style={[entryStyles.entry, entryStyles.text]}
+          style={combinedEntryStyle}
         />
         <SafeAreaView style={this.props.styles.container} edges={safeAreaEdges}>
           <DisconnectedBar visible={this.props.calendarActive} />

diff --git a/native/calendar/entry.react.js b/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
+                  textStyle={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,12 @@ const styles = {
 };
 const stylesSelector = styleSelector(styles);
 
+const combinedEntryStyle: FlattenedTextStyle = (StyleSheet.flatten([
+  styles.textContainer,
+  styles.text,
+  styles.entry,
+]): any);
+
 registerFetchKey(saveEntryActionTypes);
 registerFetchKey(deleteEntryActionTypes);
 const activeThreadPickerSelector = createIsForegroundSelector(
@@ -763,4 +761,4 @@ const Entry = connectNav((context: ?NavContextType) => ({
   )(InternalEntry),
 );
 
-export { InternalEntry, Entry, styles as entryStyles };
+export { InternalEntry, Entry, combinedEntryStyle };
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
@@ -11,11 +11,11 @@ import {
 } from '../keyboard/keyboard-state';
 import { messageListNavPropType } from './message-list-types';
 import type { ChatNavigationProp } from './chat.react';
+import { type GlobalTheme, globalThemePropType } from '../types/themes';
 
 import * as React from 'react';
 import { Text, TouchableWithoutFeedback, View } from 'react-native';
 import PropTypes from 'prop-types';
-import Hyperlink from 'react-native-hyperlink';
 import invariant from 'invariant';
 
 import {
@@ -29,6 +29,8 @@ import { connect } from 'lib/utils/redux-utils';
 import { MessageListRouteName } from '../navigation/route-names';
 import { Timestamp } from './timestamp.react';
 import { styleSelector } from '../themes/colors';
+import Markdown from '../markdown/markdown.react';
+import { inlineMarkdownRules } from '../markdown/rules.react';
 
 export type ChatRobotextMessageInfoItemWithHeight = {|
   itemType: 'message',
@@ -57,6 +59,7 @@ type Props = {|
   keyboardState: ?KeyboardState,
   // Redux state
   styles: typeof styles,
+  activeTheme: ?GlobalTheme,
   ...React.ElementProps<typeof View>,
 |};
 class RobotextMessage extends React.PureComponent<Props> {
@@ -67,6 +70,7 @@ class RobotextMessage extends React.PureComponent<Props> {
     toggleFocus: PropTypes.func.isRequired,
     keyboardState: keyboardStatePropType,
     styles: PropTypes.objectOf(PropTypes.object).isRequired,
+    activeTheme: globalThemePropType,
   };
 
   render() {
@@ -77,6 +81,7 @@ class RobotextMessage extends React.PureComponent<Props> {
       toggleFocus,
       keyboardState,
       styles,
+      activeTheme,
       ...viewProps
     } = this.props;
     let timestamp = null;
@@ -100,12 +105,23 @@ class RobotextMessage extends React.PureComponent<Props> {
     const robotext = item.robotext;
     const robotextParts = splitRobotext(robotext);
     const textParts = [];
+    let keyIndex = 0;
     for (let splitPart of robotextParts) {
       if (splitPart === '') {
         continue;
       }
       if (splitPart.charAt(0) !== '<') {
-        textParts.push(decodeURI(splitPart));
+        const darkColor = this.props.activeTheme === 'dark';
+        textParts.push(
+          <Markdown
+            textStyle={this.props.styles.robotext}
+            key={`text${keyIndex++}`}
+            useDarkStyle={darkColor}
+            rules={inlineMarkdownRules}
+          >
+            {decodeURI(splitPart)}
+          </Markdown>,
+        );
         continue;
       }
 
@@ -131,13 +147,9 @@ class RobotextMessage extends React.PureComponent<Props> {
       { height: item.contentHeight },
     ];
     return (
-      <Hyperlink
-        linkDefault={true}
-        linkStyle={this.props.styles.link}
-        style={this.props.styles.robotextContainer}
-      >
+      <View style={this.props.styles.robotextContainer}>
         <Text style={textStyle}>{textParts}</Text>
-      </Hyperlink>
+      </View>
     );
   }
 
@@ -153,6 +165,7 @@ class RobotextMessage extends React.PureComponent<Props> {
 
 const WrappedRobotextMessage = connect((state: AppState) => ({
   styles: stylesSelector(state),
+  activeTheme: state.globalThemeInfo.activeTheme,
 }))(withKeyboardState(RobotextMessage));
 
 type InnerThreadEntityProps = {

diff --git a/native/package.json b/native/package.json
@@ -61,7 +61,6 @@
     "react-native-floating-action": "^1.19.1",
     "react-native-fs": "2.15.2",
     "react-native-gesture-handler": "^1.6.1",
-    "react-native-hyperlink": "git+https://[email protected]/ashoat/react-native-hyperlink.git#both",
     "react-native-in-app-message": "^1.0.2",
     "react-native-keyboard-input": "^6.0.0",
     "react-native-keychain": "^4.0.0",

diff --git a/patches/react-native-hyperlink+0.0.12.patch b/patches/react-native-hyperlink+0.0.12.patch
diff --git a/yarn.lock b/yarn.lock
@@ -9112,13 +9112,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-linkify-it@^1.2.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-1.2.4.tgz#0773526c317c8fd13bd534ee1d180ff88abf881a"
-  integrity sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=
-  dependencies:
-    uc.micro "^1.0.1"
-
 lint-staged@^10.0.8:
   version "10.0.8"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.0.8.tgz#0f7849cdc336061f25f5d4fcbcfa385701ff4739"
@@ -9549,11 +9542,6 @@ mdn-data@~1.1.0:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
   integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
 
-mdurl@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
 [email protected]:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -12130,13 +12118,6 @@ react-native-gesture-handler@^1.6.1:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-"react-native-hyperlink@git+https://[email protected]/ashoat/react-native-hyperlink.git#both":
-  version "0.0.12"
-  resolved "git+https://[email protected]/ashoat/react-native-hyperlink.git#0c872d5be30ba6382c926e78ad1545a97f586f85"
-  dependencies:
-    linkify-it "^1.2.0"
-    mdurl "^1.0.0"
-
 react-native-in-app-message@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-native-in-app-message/-/react-native-in-app-message-1.0.2.tgz#e971c039bcd0e238306f73fbea43fc866aa94a69"
@@ -14444,11 +14425,6 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
   integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
 
-uc.micro@^1.0.1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"