Merge pull request #34292 from software-mansion-labs/@tomekzaw/live-m…

…arkdown Live Markdown Preview
Expensify · Feb 1, 2024 · 63ba91f · 63ba91f
2 parents 5007450 + e8c51e2
commit 63ba91f
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 2 deletions.
diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj
@@ -615,6 +615,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipPreferenceCenterResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleSignIn/GoogleSignIn.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_ROOT}/../../node_modules/@expensify/react-native-live-markdown/parser/react-native-live-markdown-parser.js",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -625,6 +626,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipPreferenceCenterResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleSignIn.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/react-native-live-markdown-parser.js",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -784,6 +786,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipPreferenceCenterResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleSignIn/GoogleSignIn.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_ROOT}/../../node_modules/@expensify/react-native-live-markdown/parser/react-native-live-markdown-parser.js",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -794,6 +797,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipPreferenceCenterResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleSignIn.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/react-native-live-markdown-parser.js",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1178,6 +1178,10 @@ PODS:
     - React-Core
   - react-native-launch-arguments (4.0.2):
     - React
+  - react-native-live-markdown (0.1.0):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - react-native-netinfo (11.2.1):
     - React-Core
   - react-native-pager-view (6.2.2):
@@ -1525,6 +1529,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-key-command (from `../node_modules/react-native-key-command`)
   - react-native-launch-arguments (from `../node_modules/react-native-launch-arguments`)
+  - "react-native-live-markdown (from `../node_modules/@expensify/react-native-live-markdown`)"
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
@@ -1720,6 +1725,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-key-command"
   react-native-launch-arguments:
     :path: "../node_modules/react-native-launch-arguments"
+  react-native-live-markdown:
+    :path: "../node_modules/@expensify/react-native-live-markdown"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-pager-view:
@@ -1915,6 +1922,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
   react-native-key-command: 5af6ee30ff4932f78da6a2109017549042932aa5
   react-native-launch-arguments: 5f41e0abf88a15e3c5309b8875d6fd5ac43df49d
+  react-native-live-markdown: 1ca4275d4dba8eebb736a005148f24a8224f54d9
   react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d
   react-native-pager-view: 02a5c4962530f7efc10dd51ee9cdabeff5e6c631
   react-native-pdf: b4ca3d37a9a86d9165287741c8b2ef4d8940c00e

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
+    "@expensify/react-native-live-markdown": "git+ssh://[email protected]/Expensify/react-native-live-markdown.git#c316611781f19815caebfed5540e0faf2a274785",
     "@expo/metro-runtime": "~3.1.1",
     "@formatjs/intl-datetimeformat": "^6.10.0",
     "@formatjs/intl-getcanonicallocales": "^2.2.0",

diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx
@@ -1,9 +1,10 @@
+import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
-import RNTextInput from '@components/RNTextInput';
+import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -33,6 +34,7 @@ function Composer(
     const textInput = useRef<AnimatedTextInputRef | null>(null);
     const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const theme = useTheme();
+    const markdownStyle = useMarkdownStyle();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
@@ -66,7 +68,7 @@ function Composer(
     const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]);
 
     return (
-        <RNTextInput
+        <MarkdownTextInput
             multiline
             autoComplete="off"
             placeholderTextColor={theme.placeholderText}
@@ -76,6 +78,7 @@ function Composer(
             smartInsertDelete={false}
             textAlignVertical="center"
             style={[composerStyle, maxHeightStyle]}
+            markdownStyle={markdownStyle}
             autoFocus={autoFocus}
             isFullComposerAvailable={isFullComposerAvailable}
             /* eslint-disable-next-line react/jsx-props-no-spreading */

diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
@@ -0,0 +1,52 @@
+import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
+import {useMemo} from 'react';
+import FontUtils from '@styles/utils/FontUtils';
+import variables from '@styles/variables';
+import useTheme from './useTheme';
+
+function useMarkdownStyle(): MarkdownStyle {
+    const theme = useTheme();
+
+    const markdownStyle = useMemo(
+        () => ({
+            syntax: {
+                color: theme.syntax,
+            },
+            link: {
+                color: theme.link,
+            },
+            h1: {
+                fontSize: variables.fontSizeh1,
+            },
+            blockquote: {
+                borderColor: theme.border,
+                borderWidth: 4,
+                marginLeft: 0,
+                paddingLeft: 6,
+            },
+            code: {
+                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                color: theme.text,
+                backgroundColor: 'transparent',
+            },
+            pre: {
+                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                color: theme.text,
+                backgroundColor: 'transparent',
+            },
+            mentionHere: {
+                color: theme.ourMentionText,
+                backgroundColor: theme.ourMentionBG,
+            },
+            mentionUser: {
+                color: theme.mentionText,
+                backgroundColor: theme.mentionBG,
+            },
+        }),
+        [theme],
+    );
+
+    return markdownStyle;
+}
+
+export default useMarkdownStyle;
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
@@ -20,6 +20,7 @@ const darkTheme = {
     textSupporting: colors.productDark800,
     text: colors.productDark900,
     textColorfulBackground: colors.ivory,
+    syntax: colors.productDark600,
     link: colors.blue300,
     linkHover: colors.blue100,
     buttonDefaultBG: colors.productDark400,

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
@@ -20,6 +20,7 @@ const lightTheme = {
     textSupporting: colors.productLight800,
     text: colors.productLight900,
     textColorfulBackground: colors.ivory,
+    syntax: colors.productLight600,
     link: colors.blue600,
     linkHover: colors.blue500,
     buttonDefaultBG: colors.productLight400,

diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
@@ -23,6 +23,7 @@ type ThemeColors = {
     textSupporting: Color;
     text: Color;
     textColorfulBackground: Color;
+    syntax: Color;
     link: Color;
     linkHover: Color;
     buttonDefaultBG: Color;