Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live Markdown Preview #34292

Merged
merged 7 commits into from
Feb 1, 2024
Merged

Live Markdown Preview #34292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
50c5f81
Live Markdown Preview
tomekzaw Jan 31, 2024
5ed7798
Merge branch 'main' into @tomekzaw/live-markdown
tomekzaw Feb 1, 2024
908dbb9
Re-run tests
tomekzaw Feb 1, 2024
f3f778f
Merge branch 'main' into @tomekzaw/live-markdown
tomekzaw Feb 1, 2024
f475b98
Merge branch 'main' into @tomekzaw/live-markdown
tomekzaw Feb 1, 2024
d768bee
Merge branch 'main' into @tomekzaw/live-markdown
tomekzaw Feb 1, 2024
e8c51e2
Merge branch 'main' into @tomekzaw/live-markdown
tomekzaw Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ios/NewExpensify.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand All @@ -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;
Expand Down Expand Up @@ -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 = (
Expand All @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down Expand Up @@ -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`)
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
17 changes: 17 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 5 additions & 2 deletions src/components/Composer/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -66,7 +68,7 @@ function Composer(
const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]);

return (
<RNTextInput
<MarkdownTextInput
multiline
autoComplete="off"
placeholderTextColor={theme.placeholderText}
Expand All @@ -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 */
Expand Down
52 changes: 52 additions & 0 deletions src/hooks/useMarkdownStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Blockquote element has style of inline-block which is forcing cursor to be inside of this block and overlap with characters. We solved this by adding padding-right so that cursor has some space for itself

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI paddingRight is a no-op on mobile (Android & iOS), it works only on web.

},
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;
1 change: 1 addition & 0 deletions src/styles/theme/themes/dark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/styles/theme/themes/light.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/styles/theme/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type ThemeColors = {
textSupporting: Color;
text: Color;
textColorfulBackground: Color;
syntax: Color;
link: Color;
linkHover: Color;
buttonDefaultBG: Color;
Expand Down
Loading