Enable Live Markdown Preview on web

ios/Podfile.lock

@@ -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
@@ -1904,7 +1904,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
-  RNLiveMarkdown: 35eeecf7e57eb26fdc279d5d4815982a9a9f7beb
+  RNLiveMarkdown: 1608aa096bc493fc2f91a91015e96b1592a3a874
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   rnmapbox-maps: fcf7f1cbdc8bd7569c267d07284e8a5c7bee06ed
   RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa

package.json

@@ -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",
@@ -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",

src/components/Composer/index.tsx

@@ -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';
@@ -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<
         | {
@@ -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(() => {
@@ -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));
@@ -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
@@ -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) {
@@ -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}

src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

@@ -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';
@@ -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();
@@ -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;
-        }
         calculateMentionSuggestion(selection.end);
-    }, [selection, value, previousValue, calculateMentionSuggestion]);
+    }, [selection, calculateMentionSuggestion]);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
         setSuggestionValues((prevState) => {