diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj index 41f53a0b8f7d..5d3bf1c07985 100644 --- 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 index c3a0a534d9b4..584dd5636773 100644 --- 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 index 01c20a55d97c..00b3f8e55fd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/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", @@ -3349,6 +3350,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@expensify/react-native-live-markdown": { + "version": "0.1.0", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c316611781f19815caebfed5540e0faf2a274785", + "integrity": "sha512-yF3oaBhqWQonl12LPELYLsgfmqCsGg2bu15g/h8XzVX3f/nzfPtrWE/ax2lWEIpIjk4/+aEu/VGNKLnlehjTxQ==", + "license": "MIT", + "workspaces": [ + "example" + ], + "engines": { + "node": ">= 18.0.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@expo/bunyan": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz", diff --git a/package.json b/package.json index bdbdb27dbf59..1b9be3c79e62 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/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 index c7b020a5c6dd..a3c037211d4c 100644 --- 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(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 ( - ({ + 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 index 98389330a6e6..fb4da09bf19a 100644 --- 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 index e07b74df6e7c..35ca6ab030e3 100644 --- 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 index 2a1bb79e2efb..90fae87839ca 100644 --- 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;