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.

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

Enable Live Markdown Preview on web #38152

Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
3973b76
Enable live markdown input on web
Skalakid Mar 12, 2024
60a8cec
Bump expensify-common version
Skalakid Mar 12, 2024
4379afe
Merge branch 'main' into @Skalakid/live-markdown-input-for-web
Skalakid Mar 12, 2024
c868943
Bump react-native-live-markdown verion to 0.1.26
Skalakid Mar 13, 2024
3cd3e79
Merge branch 'main' into @Skalakid/live-markdown-input-for-web
Skalakid Mar 13, 2024
cf5f86b
Change Composer markdown component to RNMarkdownTextInput
Skalakid Mar 13, 2024
124ac6c
Change ref type
Skalakid Mar 13, 2024
52f68dc
Fix prettier
Skalakid Mar 13, 2024
8333bb6
Fix Podfile
Skalakid Mar 13, 2024
f24cebb
Merge branch 'main' into @Skalakid/live-markdown-input-for-web
Skalakid Mar 14, 2024
ab6d0f6
Update react-native-live-markdown and expensify-common versions
Skalakid Mar 14, 2024
6db2f6b
Update Podfile
Skalakid Mar 14, 2024
9509076
fix: flushSync error
BartoszGrajdek Mar 14, 2024
e90a031
fix: flushSync
BartoszGrajdek Mar 18, 2024
a689007
fix: paste in composer for message editing
BartoszGrajdek Mar 18, 2024
08692ed
fix: repeated pasting
BartoszGrajdek Mar 19, 2024
095cc23
chore: resolve merge conflicts
BartoszGrajdek Mar 19, 2024
155a097
remove no longer needed workaround when mentions recalculate on char …
Kicu Mar 21, 2024
2e73780
fix: duplicated attachments while pasting
BartoszGrajdek Mar 25, 2024
7624b85
chore: resolve merge conflicts
BartoszGrajdek Mar 25, 2024
58bb4ea
fix: full composer scrollbar
BartoszGrajdek Mar 27, 2024
8fe7c78
fix: shift+enter after mentions scrolling issue
BartoszGrajdek Mar 27, 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: 2 additions & 2 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1363,7 +1363,7 @@ PODS:
- RNGoogleSignin (10.0.1):
- GoogleSignIn (~> 7.0)
- React-Core
- RNLiveMarkdown (0.1.5):
- RNLiveMarkdown (0.1.28):
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
Expand Down Expand Up @@ -1904,7 +1904,7 @@ SPEC CHECKSUMS:
RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e
RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
RNLiveMarkdown: 35eeecf7e57eb26fdc279d5d4815982a9a9f7beb
RNLiveMarkdown: 1608aa096bc493fc2f91a91015e96b1592a3a874
RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
rnmapbox-maps: fcf7f1cbdc8bd7569c267d07284e8a5c7bee06ed
RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa
Expand Down
12 changes: 7 additions & 5 deletions package-lock.json

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

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
},
"dependencies": {
"@dotlottie/react-player": "^1.6.3",
"@expensify/react-native-live-markdown": "0.1.5",
"@expensify/react-native-live-markdown": "0.1.28",
"@expo/metro-runtime": "~3.1.1",
"@formatjs/intl-datetimeformat": "^6.10.0",
"@formatjs/intl-getcanonicallocales": "^2.2.0",
Expand Down Expand Up @@ -102,7 +102,7 @@
"date-fns-tz": "^2.0.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
"expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#7bfd55f0ce75a37423119029fde58cfbe57086d9",
"expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#dc8ea983f9e06308cdb9151a9cdfa82bd11502e1",
"expo": "^50.0.3",
"expo-av": "~13.10.4",
"expo-image": "1.10.1",
Expand Down
19 changes: 12 additions & 7 deletions src/components/Composer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import {flushSync} from 'react-dom';
// eslint-disable-next-line no-restricted-imports
import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData} from 'react-native';
import {StyleSheet, View} from 'react-native';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import RNTextInput from '@components/RNTextInput';
import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
import Text from '@components/Text';
import useHtmlPaste from '@hooks/useHtmlPaste';
import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible';
import useMarkdownStyle from '@hooks/useMarkdownStyle';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
Expand Down Expand Up @@ -79,10 +80,11 @@ function Composer(
) {
const theme = useTheme();
const styles = useThemeStyles();
const markdownStyle = useMarkdownStyle();
const StyleUtils = useStyleUtils();
const {windowWidth} = useWindowDimensions();
const textRef = useRef<HTMLElement & RNText>(null);
const textInput = useRef<AnimatedTextInputRef | null>(null);
const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
const [selection, setSelection] = useState<
| {
Expand All @@ -97,6 +99,7 @@ function Composer(
const [caretContent, setCaretContent] = useState('');
const [valueBeforeCaret, setValueBeforeCaret] = useState('');
const [textInputWidth, setTextInputWidth] = useState('');
const [isRendered, setIsRendered] = useState(false);
const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');

useEffect(() => {
Expand All @@ -123,7 +126,7 @@ function Composer(
const addCursorPositionToSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
const webEvent = event as BaseSyntheticEvent<TextInputSelectionChangeEventData>;

if (shouldCalculateCaretPosition) {
if (shouldCalculateCaretPosition && isRendered) {
// we do flushSync to make sure that the valueBeforeCaret is updated before we calculate the caret position to receive a proper position otherwise we will calculate position for the previous state
flushSync(() => {
setValueBeforeCaret(webEvent.target.value.slice(0, webEvent.nativeEvent.selection.start));
Expand Down Expand Up @@ -163,7 +166,7 @@ function Composer(
return true;
}

if (textInput.current !== event.target) {
if (textInput.current !== event.target && !(document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable'))) {
const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null;

// To make sure the composer does not capture paste events from other inputs, we check where the event originated
Expand Down Expand Up @@ -256,12 +259,13 @@ function Composer(
updateNumberOfLines();
}, [updateNumberOfLines]);

useHtmlPaste(textInput, handlePaste, true);
useHtmlPaste(textInput, handlePaste, false);

useEffect(() => {
if (typeof ref === 'function') {
ref(textInput.current);
}
setIsRendered(true);

return () => {
if (isReportActionCompose) {
Expand Down Expand Up @@ -328,13 +332,14 @@ function Composer(

return (
<>
<RNTextInput
<RNMarkdownTextInput
autoComplete="off"
autoCorrect={!Browser.isMobileSafari()}
placeholderTextColor={theme.placeholderText}
ref={(el) => (textInput.current = el)}
selection={selection}
style={inputStyleMemo}
markdownStyle={markdownStyle}
value={value}
defaultValue={defaultValue}
autoFocus={autoFocus}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {usePersonalDetails} from '@components/OnyxProvider';
import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import usePrevious from '@hooks/usePrevious';
import * as LoginUtils from '@libs/LoginUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import * as SuggestionsUtils from '@libs/SuggestionUtils';
Expand Down Expand Up @@ -44,7 +43,6 @@ function SuggestionMention(
) {
const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
const {translate, formatPhoneNumber} = useLocalize();
const previousValue = usePrevious(value);
const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);

const currentUserPersonalDetails = useCurrentUserPersonalDetails();
Expand Down Expand Up @@ -281,14 +279,8 @@ function SuggestionMention(
);

useEffect(() => {
if (value.length < previousValue.length) {
// A workaround to not show the suggestions list when the user deletes a character before the mention.
// It is caused by a buggy behavior of the TextInput on iOS. Should be fixed after migration to Fabric.
// See: https://github.com/facebook/react-native/pull/36930#issuecomment-1593028467
return;
}
Copy link
Contributor

@Kicu Kicu Mar 21, 2024

Choose a reason for hiding this comment

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

Some notes for this one:

calculateMentionSuggestion(selection.end);
}, [selection, value, previousValue, calculateMentionSuggestion]);
}, [selection, calculateMentionSuggestion]);

const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
setSuggestionValues((prevState) => {
Expand Down
Loading