Revert "Merge pull request Expensify#76741 from margelo/kureev/new-editing-model"

This reverts commit 073ac6b, reversing
changes made to 3a13517.

Author: chrispader

src/CONST/index.ts

@@ -1842,18 +1842,6 @@ 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

@@ -423,6 +423,9 @@ 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',
 
@@ -1477,6 +1480,7 @@ 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, MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import type {MarkdownStyle} 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, ComposerRef} from '@components/Composer/types';
+import type {ComposerProps} 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 textInputRef = useRef<MarkdownTextInput | null>(null);
+    const textInput = useRef<AnimatedMarkdownTextInputRef | 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 (!textInputRef.current?.setSelection || !selection || isComposerFullSize) {
+        if (!textInput.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.
-            textInputRef.current?.setSelection((selection.start || 1) - 1, selection.start);
-            textInputRef.current?.setSelection(selection.start, selection.start);
+            textInput.current?.setSelection((selection.start || 1) - 1, selection.start);
+            textInput.current?.setSelection(selection.start, selection.start);
         }, 0);
 
         return () => clearTimeout(timeoutID);
@@ -71,17 +71,17 @@ function Composer({
      */
     const setTextInputRef = useCallback(
         (el: AnimatedMarkdownTextInputRef | null) => {
-            textInputRef.current = isInLandscapeMode ? getLandscapeTextInputRefProxy(el) : el;
+            textInput.current = isInLandscapeMode ? getLandscapeTextInputRefProxy(el) : el;
 
-            if (typeof ref !== 'function' || textInputRef.current === null) {
+            if (typeof ref !== 'function' || textInput.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(textInputRef.current as ComposerRef);
+            ref(textInput.current);
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [isInLandscapeMode],

src/components/Composer/implementation/index.tsx

@@ -4,7 +4,7 @@ import lodashDebounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {TextInputKeyPressEvent, TextInputSelectionChangeEvent} from 'react-native';
 import {DeviceEventEmitter, StyleSheet} from 'react-native';
-import type {ComposerProps, ComposerRef} from '@components/Composer/types';
+import type {ComposerProps} from '@components/Composer/types';
 import {useSession} from '@components/OnyxListItemProvider';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
@@ -64,7 +64,7 @@ function Composer({
     const addAuthTokenToImageURL = useCallback((url: string) => addEncryptedAuthTokenToURL(url, encryptedAuthToken), [encryptedAuthToken]);
     const markdownStyle = useMarkdownStyle(textContainsOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
     const StyleUtils = useStyleUtils();
-    const textInputRef = useRef<AnimatedMarkdownTextInputRef | null>(null);
+    const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const [selection, setSelection] = useState<
         | {
               start: number;
@@ -79,7 +79,7 @@ function Composer({
     });
     const [isRendered, setIsRendered] = useState(false);
 
-    const isScrollBarVisible = useIsScrollBarVisible(textInputRef, value ?? '');
+    const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');
     const [prevScroll, setPrevScroll] = useState<number | undefined>();
     const [prevHeight, setPrevHeight] = useState<number | undefined>();
     const isReportFlatListScrolling = useRef(false);
@@ -95,26 +95,19 @@ function Composer({
     /**
      *  Adds the cursor position to the selection change event.
      */
-    const addCursorPositionToSelectionChange = useCallback(
-        (event: TextInputSelectionChangeEvent) => {
-            const sel = window.getSelection();
-            const canCalculateCaretPosition = shouldCalculateCaretPosition && isRendered && sel;
-            if (!canCalculateCaretPosition) {
-                onSelectionChange(event);
-                setSelection(event.nativeEvent.selection);
-                return;
-            }
-
+    const addCursorPositionToSelectionChange = (event: TextInputSelectionChangeEvent) => {
+        const sel = window.getSelection();
+        if (shouldCalculateCaretPosition && isRendered && sel) {
             const range = sel.getRangeAt(0).cloneRange();
             range.collapse(true);
             const rect = range.getClientRects()[0] || range.startContainer.parentElement?.getClientRects()[0];
-            const containerRect = textInputRef.current?.getBoundingClientRect();
+            const containerRect = textInput.current?.getBoundingClientRect();
 
             let x = 0;
             let y = 0;
             if (rect && containerRect) {
                 x = rect.left - containerRect.left;
-                y = rect.top - containerRect.top + (textInputRef?.current?.scrollTop ?? 0) - rect.height / 2;
+                y = rect.top - containerRect.top + (textInput?.current?.scrollTop ?? 0) - rect.height / 2;
             }
 
             const selectionValue = {
@@ -132,9 +125,11 @@ function Composer({
                 },
             });
             setSelection(selectionValue);
-        },
-        [isRendered, onSelectionChange, shouldCalculateCaretPosition],
-    );
+        } else {
+            onSelectionChange(event);
+            setSelection(event.nativeEvent.selection);
+        }
+    };
 
     /**
      * Check the paste event for an attachment, parse the data and call onPasteFile from props with the selected file,
@@ -143,14 +138,14 @@ function Composer({
     const handlePaste = useCallback(
         (event: ClipboardEvent) => {
             const isVisible = checkComposerVisibility();
-            const isFocused = textInputRef.current?.isFocused();
+            const isFocused = textInput.current?.isFocused();
             const isContenteditableDivFocused = document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable');
 
             if (!(isVisible || isFocused)) {
                 return true;
             }
 
-            if (textInputRef.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) {
+            if (textInput.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
@@ -159,7 +154,7 @@ function Composer({
                     return true;
                 }
 
-                textInputRef.current?.focus();
+                textInput.current?.focus();
             }
 
             event.preventDefault();
@@ -214,23 +209,19 @@ function Composer({
     );
 
     useEffect(() => {
-        if (!textInputRef.current) {
+        if (!textInput.current) {
             return;
         }
-
-        const inputRef = textInputRef.current;
-
         const debouncedSetPrevScroll = lodashDebounce(() => {
-            if (!inputRef) {
+            if (!textInput.current) {
                 return;
             }
-            setPrevScroll(inputRef.scrollTop);
+            setPrevScroll(textInput.current.scrollTop);
         }, 100);
 
-        inputRef.addEventListener('scroll', debouncedSetPrevScroll);
-
+        textInput.current.addEventListener('scroll', debouncedSetPrevScroll);
         return () => {
-            inputRef?.removeEventListener('scroll', debouncedSetPrevScroll);
+            textInput.current?.removeEventListener('scroll', debouncedSetPrevScroll);
         };
     }, []);
 
@@ -243,8 +234,6 @@ function Composer({
     }, []);
 
     useEffect(() => {
-        const inputRef = textInputRef.current;
-
         const handleWheel = (e: MouseEvent) => {
             if (isReportFlatListScrolling.current) {
                 e.preventDefault();
@@ -253,40 +242,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 (inputRef && inputRef.scrollHeight <= inputRef.clientHeight) {
+            if (textInput.current && textInput.current.scrollHeight <= textInput.current.clientHeight) {
                 return;
             }
             e.stopPropagation();
         };
-        inputRef?.addEventListener('wheel', handleWheel, {passive: false});
+        textInput.current?.addEventListener('wheel', handleWheel, {passive: false});
 
         return () => {
-            inputRef?.removeEventListener('wheel', handleWheel);
+            textInput.current?.removeEventListener('wheel', handleWheel);
         };
     }, []);
 
     useEffect(() => {
-        if (!textInputRef.current || prevScroll === undefined || prevHeight === undefined) {
+        if (!textInput.current || prevScroll === undefined || prevHeight === undefined) {
             return;
         }
-        textInputRef.current.scrollTop = prevScroll + prevHeight - textInputRef.current.clientHeight;
+        textInput.current.scrollTop = prevScroll + prevHeight - textInput.current.clientHeight;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isComposerFullSize]);
 
     const isActive = useIsFocused();
-    useHtmlPaste(textInputRef, handlePaste, isActive);
+    useHtmlPaste(textInput, handlePaste, isActive);
 
     useEffect(() => {
         setIsRendered(true);
     }, []);
 
     const clear = useCallback(() => {
-        if (!textInputRef.current) {
+        if (!textInput.current) {
             return;
         }
 
-        const currentText = textInputRef.current.value;
-        textInputRef.current.clear();
+        const currentText = textInput.current.value;
+        textInput.current.clear();
 
         // We need to reset the selection to 0,0 manually after clearing the text input on web
         const selectionEvent = {
@@ -304,22 +293,22 @@ function Composer({
     }, [onClear, onSelectionChange]);
 
     useImperativeHandle(ref, () => {
-        const textInput = textInputRef.current;
-        if (!textInput) {
-            throw new Error('textInput is not available. This should never happen and indicates a developer error.');
+        const textInputRef = textInput.current;
+        if (!textInputRef) {
+            throw new Error('textInputRef is not available. This should never happen and indicates a developer error.');
         }
 
         return {
-            ...textInput,
+            ...textInputRef,
             // 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: () => textInput.blur(),
-            focus: () => textInput.focus(),
+            blur: () => textInputRef.blur(),
+            focus: () => textInputRef.focus(),
             get scrollTop() {
-                return textInput.scrollTop;
+                return textInputRef.scrollTop;
             },
-        } as ComposerRef;
+        };
     }, [clear]);
 
     const handleKeyPress = useCallback(
@@ -361,7 +350,9 @@ function Composer({
             autoComplete="off"
             autoCorrect={!isMobileSafari()}
             placeholderTextColor={theme.placeholderText}
-            ref={textInputRef}
+            ref={(el) => {
+                textInput.current = el;
+            }}
             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, TextInputProps, TextInputSelectionChangeEvent, TextStyle} from 'react-native';
+import type {StyleProp, TextInput, TextInputProps, TextInputSelectionChangeEvent, TextStyle} from 'react-native';
+import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import type {FileObject} from '@src/types/utils/Attachment';
 
@@ -15,8 +15,6 @@ type CustomSelectionChangeEvent = TextInputSelectionChangeEvent & {
     positionY?: number;
 };
 
-type ComposerRef = MarkdownTextInput & HTMLInputElement & HTMLTextAreaElement;
-
 type ComposerProps = Omit<TextInputProps, 'onClear'> &
     ForwardedFSClassProps & {
         /** Indicate whether input is multiline */
@@ -76,7 +74,7 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> &
         isGroupPolicyReport?: boolean;
 
         /** Ref exposing imperative methods on the underlying text input */
-        ref?: Ref<ComposerRef>;
+        ref?: Ref<TextInput | HTMLInputElement | HTMLTextAreaElement | AnimatedMarkdownTextInputRef>;
     };
 
-export type {TextSelection, ComposerProps, CustomSelectionChangeEvent, ComposerRef};
+export type {TextSelection, ComposerProps, CustomSelectionChangeEvent};

src/components/ExceededCommentLength.tsx

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

src/components/ImageSVG/index.android.tsx

@@ -5,6 +5,7 @@ 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
@@ -60,10 +61,8 @@ function ImageSVG({src, width = '100%', height = '100%', fill, contentFit = 'cov
             source={src}
             recyclingKey={getImageRecyclingKey(src)}
             style={[{width, height}, style as ExpoImageProps['style']]}
-            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}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...tintColorProp}
         />
     );
 }