New editing mechanism for small screens

config/eslint/eslint.seatbelt.tsv

@@ -379,8 +379,8 @@
 "../../src/pages/inbox/report/PureReportActionItem.tsx"	"react-hooks/refs"	2
 "../../src/pages/inbox/report/PureReportActionItem.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/pages/inbox/report/ReactionList/HeaderReactionList.tsx"	"no-restricted-syntax"	1
-"../../src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx"	"react-hooks/preserve-manual-memoization"	2
-"../../src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx"	"react-hooks/refs"	8
+"../../src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions.tsx"	"react-hooks/preserve-manual-memoization"	2
+"../../src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions.tsx"	"react-hooks/refs"	8
 "../../src/pages/inbox/report/ReportActionCompose/SuggestionEmoji.tsx"	"react-hooks/refs"	1
 "../../src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx"	"react-hooks/refs"	3
 "../../src/pages/inbox/report/ReportActionItemMessageEdit.tsx"	"no-restricted-syntax"	1

src/CONST/index.ts

@@ -1832,6 +1832,18 @@ const CONST = {
         MAX_LINES_FULL: -1,
         // The minimum height needed to enable the full screen composer
         FULL_COMPOSER_MIN_HEIGHT: 60,
+        /**
+         * TestIDs for the main report composer vs inline message editor (E2E / integration tests only).
+         * See tests/ui/ReportActionMessageEditLayoutTest.tsx
+         */
+        TEST_ID: {
+            REPORT_ACTION_COMPOSE: 'reportActionCompose',
+            DRAFT_MESSAGE_ACTION_ROW: 'reportActionCompose_draftMessageActionRow',
+            EDITING_MESSAGE_ACTION_ROW: 'reportActionCompose_editingMessageActionRow',
+            REPORT_ACTION_ITEM_MESSAGE_EDIT: 'reportActionItemMessageEdit',
+            MESSAGE_EDIT_CANCEL_MAIN_COMPOSER: 'messageEditCancel_mainComposer',
+            MESSAGE_EDIT_CANCEL_INLINE: 'messageEditCancel_inlineMessageEdit',
+        },
     },
     MODAL: {
         MODAL_TYPE: {

src/ONYXKEYS.ts

@@ -417,9 +417,6 @@ const ONYXKEYS = {
     /** The policyID of the last workspace whose settings were accessed by the user */
     LAST_ACCESSED_WORKSPACE_POLICY_ID: 'lastAccessedWorkspacePolicyID',
 
-    /** Whether we should show the compose input or not */
-    SHOULD_SHOW_COMPOSE_INPUT: 'shouldShowComposeInput',
-
     /** Is app in beta version */
     IS_BETA: 'isBeta',
 
@@ -1448,7 +1445,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.HAS_LOADED_APP]: boolean;
     [ONYXKEYS.WALLET_TRANSFER]: OnyxTypes.WalletTransfer;
     [ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID]: string;
-    [ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT]: boolean;
     [ONYXKEYS.IS_BETA]: boolean;
     [ONYXKEYS.RAM_ONLY_IS_CHECKING_PUBLIC_ROOM]: boolean;
     [ONYXKEYS.MY_DOMAIN_SECURITY_GROUPS]: Record<string, string>;

src/components/Composer/implementation/index.native.tsx

@@ -1,9 +1,9 @@
-import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
+import type {MarkdownStyle, MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import mimeDb from 'mime-db';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {NativeSyntheticEvent, TextInputChangeEvent, TextInputPasteEventData} from 'react-native';
 import {StyleSheet} from 'react-native';
-import type {ComposerProps} from '@components/Composer/types';
+import type {ComposerProps, ComposerRef} from '@components/Composer/types';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
 import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
@@ -38,7 +38,7 @@ function Composer({
     ref,
     ...props
 }: ComposerProps) {
-    const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
+    const textInputRef = useRef<MarkdownTextInput | null>(null);
     const textContainsOnlyEmojis = useMemo(() => containsOnlyEmojis(Parser.htmlToText(Parser.replace(value ?? ''))), [value]);
     const theme = useTheme();
     const markdownStyle = useMarkdownStyle(textContainsOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
@@ -47,7 +47,7 @@ function Composer({
     const isInLandscapeMode = useIsInLandscapeMode();
 
     useEffect(() => {
-        if (!textInput.current?.setSelection || !selection || isComposerFullSize) {
+        if (!textInputRef.current?.setSelection || !selection || isComposerFullSize) {
             return;
         }
 
@@ -56,8 +56,8 @@ function Composer({
         // (see https://github.com/Expensify/App/pull/50520#discussion_r1861960311 for more context)
         const timeoutID = setTimeout(() => {
             // We are setting selection twice to trigger a scroll to the cursor on toggling to smaller composer size.
-            textInput.current?.setSelection((selection.start || 1) - 1, selection.start);
-            textInput.current?.setSelection(selection.start, selection.start);
+            textInputRef.current?.setSelection((selection.start || 1) - 1, selection.start);
+            textInputRef.current?.setSelection(selection.start, selection.start);
         }, 0);
 
         return () => clearTimeout(timeoutID);
@@ -71,17 +71,17 @@ function Composer({
      */
     const setTextInputRef = useCallback(
         (el: AnimatedMarkdownTextInputRef | null) => {
-            textInput.current = isInLandscapeMode ? getLandscapeTextInputRefProxy(el) : el;
+            textInputRef.current = isInLandscapeMode ? getLandscapeTextInputRefProxy(el) : el;
 
-            if (typeof ref !== 'function' || textInput.current === null) {
+            if (typeof ref !== 'function' || textInputRef.current === null) {
                 return;
             }
 
             // This callback prop is used by the parent component using the constructor to
             // get a ref to the inner textInput element e.g. if we do
             // <constructor ref={el => this.textInput = el} /> this will not
             // return a ref to the component, but rather the HTML element by default
-            ref(textInput.current);
+            ref(textInputRef.current as ComposerRef);
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [isInLandscapeMode],

src/components/Composer/implementation/index.tsx

@@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, use
 // eslint-disable-next-line no-restricted-imports
 import type {TextInputKeyPressEvent, TextInputSelectionChangeEvent} from 'react-native';
 import {DeviceEventEmitter, StyleSheet} from 'react-native';
-import type {ComposerProps} from '@components/Composer/types';
+import type {ComposerProps, ComposerRef} from '@components/Composer/types';
 import {useSession} from '@components/OnyxListItemProvider';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
@@ -65,7 +65,7 @@ function Composer({
     const addAuthTokenToImageURL = useCallback((url: string) => addEncryptedAuthTokenToURL(url, encryptedAuthToken), [encryptedAuthToken]);
     const markdownStyle = useMarkdownStyle(textContainsOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
     const StyleUtils = useStyleUtils();
-    const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
+    const textInputRef = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const [selection, setSelection] = useState<
         | {
               start: number;
@@ -80,7 +80,7 @@ function Composer({
     });
     const [isRendered, setIsRendered] = useState(false);
 
-    const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');
+    const isScrollBarVisible = useIsScrollBarVisible(textInputRef, value ?? '');
     const [prevScroll, setPrevScroll] = useState<number | undefined>();
     const [prevHeight, setPrevHeight] = useState<number | undefined>();
     const isReportFlatListScrolling = useRef(false);
@@ -96,19 +96,26 @@ function Composer({
     /**
      *  Adds the cursor position to the selection change event.
      */
-    const addCursorPositionToSelectionChange = (event: TextInputSelectionChangeEvent) => {
-        const sel = window.getSelection();
-        if (shouldCalculateCaretPosition && isRendered && sel) {
+    const addCursorPositionToSelectionChange = useCallback(
+        (event: TextInputSelectionChangeEvent) => {
+            const sel = window.getSelection();
+            const canCalculateCaretPosition = shouldCalculateCaretPosition && isRendered && sel;
+            if (!canCalculateCaretPosition) {
+                onSelectionChange(event);
+                setSelection(event.nativeEvent.selection);
+                return;
+            }
+
             const range = sel.getRangeAt(0).cloneRange();
             range.collapse(true);
             const rect = range.getClientRects()[0] || range.startContainer.parentElement?.getClientRects()[0];
-            const containerRect = textInput.current?.getBoundingClientRect();
+            const containerRect = textInputRef.current?.getBoundingClientRect();
 
             let x = 0;
             let y = 0;
             if (rect && containerRect) {
                 x = rect.left - containerRect.left;
-                y = rect.top - containerRect.top + (textInput?.current?.scrollTop ?? 0) - rect.height / 2;
+                y = rect.top - containerRect.top + (textInputRef?.current?.scrollTop ?? 0) - rect.height / 2;
             }
 
             const selectionValue = {
@@ -126,11 +133,9 @@ function Composer({
                 },
             });
             setSelection(selectionValue);
-        } else {
-            onSelectionChange(event);
-            setSelection(event.nativeEvent.selection);
-        }
-    };
+        },
+        [isRendered, onSelectionChange, shouldCalculateCaretPosition],
+    );
 
     /**
      * Check the paste event for an attachment, parse the data and call onPasteFile from props with the selected file,
@@ -139,14 +144,14 @@ function Composer({
     const handlePaste = useCallback(
         (event: ClipboardEvent) => {
             const isVisible = checkComposerVisibility();
-            const isFocused = textInput.current?.isFocused();
+            const isFocused = textInputRef.current?.isFocused();
             const isContenteditableDivFocused = document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable');
 
             if (!(isVisible || isFocused)) {
                 return true;
             }
 
-            if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) {
+            if (textInputRef.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) {
                 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
                 // If it did originate in another input, we return early to prevent the composer from handling the paste
@@ -155,7 +160,7 @@ function Composer({
                     return true;
                 }
 
-                textInput.current?.focus();
+                textInputRef.current?.focus();
             }
 
             event.preventDefault();
@@ -210,19 +215,23 @@ function Composer({
     );
 
     useEffect(() => {
-        if (!textInput.current) {
+        if (!textInputRef.current) {
             return;
         }
+
+        const inputRef = textInputRef.current;
+
         const debouncedSetPrevScroll = lodashDebounce(() => {
-            if (!textInput.current) {
+            if (!inputRef) {
                 return;
             }
-            setPrevScroll(textInput.current.scrollTop);
+            setPrevScroll(inputRef.scrollTop);
         }, 100);
 
-        textInput.current.addEventListener('scroll', debouncedSetPrevScroll);
+        inputRef.addEventListener('scroll', debouncedSetPrevScroll);
+
         return () => {
-            textInput.current?.removeEventListener('scroll', debouncedSetPrevScroll);
+            inputRef?.removeEventListener('scroll', debouncedSetPrevScroll);
         };
     }, []);
 
@@ -235,6 +244,8 @@ function Composer({
     }, []);
 
     useEffect(() => {
+        const inputRef = textInputRef.current;
+
         const handleWheel = (e: MouseEvent) => {
             if (isReportFlatListScrolling.current) {
                 e.preventDefault();
@@ -243,40 +254,40 @@ function Composer({
 
             // When the composer has no scrollable content, the stopPropagation will prevent the inverted wheel event handler on the Chat body
             // which defaults to the browser wheel behavior. This causes the chat body to scroll in the opposite direction creating jerky behavior.
-            if (textInput.current && textInput.current.scrollHeight <= textInput.current.clientHeight) {
+            if (inputRef && inputRef.scrollHeight <= inputRef.clientHeight) {
                 return;
             }
             e.stopPropagation();
         };
-        textInput.current?.addEventListener('wheel', handleWheel, {passive: false});
+        inputRef?.addEventListener('wheel', handleWheel, {passive: false});
 
         return () => {
-            textInput.current?.removeEventListener('wheel', handleWheel);
+            inputRef?.removeEventListener('wheel', handleWheel);
         };
     }, []);
 
     useEffect(() => {
-        if (!textInput.current || prevScroll === undefined || prevHeight === undefined) {
+        if (!textInputRef.current || prevScroll === undefined || prevHeight === undefined) {
             return;
         }
-        textInput.current.scrollTop = prevScroll + prevHeight - textInput.current.clientHeight;
+        textInputRef.current.scrollTop = prevScroll + prevHeight - textInputRef.current.clientHeight;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isComposerFullSize]);
 
     const isActive = useIsFocused();
-    useHtmlPaste(textInput, handlePaste, isActive);
+    useHtmlPaste(textInputRef, handlePaste, isActive);
 
     useEffect(() => {
         setIsRendered(true);
     }, []);
 
     const clear = useCallback(() => {
-        if (!textInput.current) {
+        if (!textInputRef.current) {
             return;
         }
 
-        const currentText = textInput.current.value;
-        textInput.current.clear();
+        const currentText = textInputRef.current.value;
+        textInputRef.current.clear();
 
         // We need to reset the selection to 0,0 manually after clearing the text input on web
         const selectionEvent = {
@@ -294,22 +305,22 @@ function Composer({
     }, [onClear, onSelectionChange]);
 
     useImperativeHandle(ref, () => {
-        const textInputRef = textInput.current;
-        if (!textInputRef) {
-            throw new Error('textInputRef is not available. This should never happen and indicates a developer error.');
+        const textInput = textInputRef.current;
+        if (!textInput) {
+            throw new Error('textInput is not available. This should never happen and indicates a developer error.');
         }
 
         return {
-            ...textInputRef,
+            ...textInput,
             // Overwrite clear with our custom implementation, which mimics how the native TextInput's clear method works
             clear,
             // We have to redefine these methods as they are inherited by prototype chain and are not accessible directly
-            blur: () => textInputRef.blur(),
-            focus: () => textInputRef.focus(),
+            blur: () => textInput.blur(),
+            focus: () => textInput.focus(),
             get scrollTop() {
-                return textInputRef.scrollTop;
+                return textInput.scrollTop;
             },
-        };
+        } as ComposerRef;
     }, [clear]);
 
     const handleKeyPress = useCallback(
@@ -351,9 +362,7 @@ function Composer({
             autoComplete="off"
             autoCorrect={!isMobileSafari()}
             placeholderTextColor={theme.placeholderText}
-            ref={(el) => {
-                textInput.current = el;
-            }}
+            ref={textInputRef}
             selection={selection}
             style={[inputStyleMemo]}
             markdownStyle={markdownStyle}

src/components/Composer/types.ts

@@ -1,6 +1,6 @@
+import type {MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import type {Ref} from 'react';
-import type {StyleProp, TextInput, TextInputProps, TextInputSelectionChangeEvent, TextStyle} from 'react-native';
-import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
+import type {StyleProp, TextInputProps, TextInputSelectionChangeEvent, TextStyle} from 'react-native';
 import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import type {FileObject} from '@src/types/utils/Attachment';
 
@@ -15,6 +15,8 @@ type CustomSelectionChangeEvent = TextInputSelectionChangeEvent & {
     positionY?: number;
 };
 
+type ComposerRef = MarkdownTextInput & HTMLInputElement & HTMLTextAreaElement;
+
 type ComposerProps = Omit<TextInputProps, 'onClear'> &
     ForwardedFSClassProps & {
         /** Indicate whether input is multiline */
@@ -74,7 +76,7 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> &
         isGroupPolicyReport?: boolean;
 
         /** Ref exposing imperative methods on the underlying text input */
-        ref?: Ref<TextInput | HTMLInputElement | HTMLTextAreaElement | AnimatedMarkdownTextInputRef>;
+        ref?: Ref<ComposerRef>;
     };
 
-export type {TextSelection, ComposerProps, CustomSelectionChangeEvent};
+export type {TextSelection, ComposerProps, CustomSelectionChangeEvent, ComposerRef};

src/components/ExceededCommentLength.tsx

@@ -9,7 +9,7 @@ type ExceededCommentLengthProps = {
     isTaskTitle?: boolean;
 };
 
-function ExceededCommentLength({maxCommentLength = CONST.MAX_COMMENT_LENGTH, isTaskTitle}: ExceededCommentLengthProps) {
+function ExceededCommentLength({maxCommentLength = CONST.MAX_COMMENT_LENGTH, isTaskTitle = false}: ExceededCommentLengthProps) {
     const styles = useThemeStyles();
     const {numberFormat, translate} = useLocalize();
 

src/components/ImageSVG/index.android.tsx

@@ -5,7 +5,6 @@ import getImageRecyclingKey from '@libs/getImageRecyclingKey';
 import type ImageSVGProps from './types';
 
 function ImageSVG({src, width = '100%', height = '100%', fill, contentFit = 'cover', style, onLoadEnd}: ImageSVGProps) {
-    const tintColorProp = fill ? {tintColor: fill} : {};
     const isReactComponent = typeof src === 'function';
 
     // Clear memory cache when unmounting images to avoid memory overload
@@ -61,8 +60,10 @@ function ImageSVG({src, width = '100%', height = '100%', fill, contentFit = 'cov
             source={src}
             recyclingKey={getImageRecyclingKey(src)}
             style={[{width, height}, style as ExpoImageProps['style']]}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...tintColorProp}
+            tintColor={fill}
+            // On android, there's an issue where the fill color of the icon does not change,
+            // unless the component is remounted. (https://github.com/Expensify/App/pull/76741#issuecomment-4245274687)
+            key={fill}
         />
     );
 }