Merge pull request #32297 from samilabud/android_chat_displayed_right…

…_to_left_30584

Fixed Android - Chat - Message gets displayed from right to left

src/libs/convertToLTR/index.android.ts

@@ -1,10 +1,11 @@
-import CONST from '@src/CONST';
-import ConvertToLTR from './types';
-
 /**
  * Android only - convert RTL text to a LTR text using Unicode controls.
- * https://www.w3.org/International/questions/qa-bidi-unicode-controls
+ *
+ * In React Native, when working with bidirectional text (RTL - Right-to-Left or LTR - Left-to-Right), you may encounter issues related to text rendering, especially on Android devices. These issues arise because Android's default behavior for text direction might not always align with the desired directionality of your app.
  */
+import CONST from '@src/CONST';
+import ConvertToLTR from './types';
+
 const convertToLTR: ConvertToLTR = (text) => `${CONST.UNICODE.LTR}${text}`;
 
 export default convertToLTR;

src/libs/convertToLTR/index.ts

@@ -1,3 +1,4 @@
+// The Android platform has to handle switching between LTR and RTL languages a bit differently (https://developer.android.com/training/basics/supporting-devices/languages). For all other platforms, these can simply be no-op functions.
 import ConvertToLTR from './types';
 
 const convertToLTR: ConvertToLTR = (text) => text;

src/libs/convertToLTRForComposer/index.android.ts

@@ -1,8 +1,69 @@
+import CONST from '@src/CONST';
 import ConvertToLTRForComposer from './types';
 
+/**
+ * Android only - The composer can be converted to LTR if its content is the LTR character followed by an @ or space
+ * because to mention sugggestion works the @ character must not have any character at the beginning e.g.: \u2066@ doesn't work
+ * also to avoid sending empty messages the unicode character with space could enable the send button.
+ */
+function canComposerBeConvertedToLTR(text: string): boolean {
+    // This regex handles the case when a user only types spaces into the composer.
+    const containOnlySpaces = /^\s*$/;
+    // This regex handles the case where someone has RTL enabled and they began typing an @mention for someone.
+    const startsWithLTRAndAt = new RegExp(`^${CONST.UNICODE.LTR}@$`);
+    // This regex handles the case where the composer can contain multiple lines of whitespace
+    const startsWithLTRAndSpace = new RegExp(`${CONST.UNICODE.LTR}\\s*$`);
+    const emptyExpressions = [containOnlySpaces, startsWithLTRAndAt, startsWithLTRAndSpace];
+    return emptyExpressions.some((exp) => exp.test(text));
+}
+
+/**
+ * Android only - We should remove the LTR unicode when the input is empty to prevent:
+ *  Sending an empty message;
+ *  Mention suggestions not works if @ or \s (at or space) is the first character;
+ *  Placeholder is not displayed if the unicode character is the only character remaining;
+ *
+ * @param {String} newComment - the comment written by the user
+ * @param {Boolean} force - always remove the LTR unicode, going to be used when composer is consider as empty
+ * @return {String}
+ */
+
+const resetLTRWhenEmpty = (newComment: string, force?: boolean) => {
+    const result = newComment.length <= 1 || force ? newComment.replaceAll(CONST.UNICODE.LTR, '') : newComment;
+    return result;
+};
+
 /**
  * Android only - Do not convert RTL text to a LTR text for input box using Unicode controls.
  * Android does not properly support bidirectional text for mixed content for input box
  */
-const convertToLTRForComposer: ConvertToLTRForComposer = (text) => text;
+const convertToLTRForComposer: ConvertToLTRForComposer = (text, isComposerEmpty) => {
+    const shouldComposerMaintainAsLTR = canComposerBeConvertedToLTR(text);
+    const newText = resetLTRWhenEmpty(text, shouldComposerMaintainAsLTR);
+    if (shouldComposerMaintainAsLTR) {
+        return newText;
+    }
+    return isComposerEmpty ? `${CONST.UNICODE.LTR}${newText}` : newText;
+};
+
+/**
+ * This is necessary to convert the input to LTR, there is a delay that causes the cursor not to go to the end of the input line when pasting text or typing fast. The delay is caused for the time that takes the input to convert from RTL to LTR and viceversa.
+ */
+const moveCursorToEndOfLine = (
+    commentLength: number,
+    setSelection: (
+        value: React.SetStateAction<{
+            start: number;
+            end: number;
+        }>,
+    ) => void,
+) => {
+    setSelection({
+        start: commentLength + 1,
+        end: commentLength + 1,
+    });
+};
+
+export {moveCursorToEndOfLine};
+
 export default convertToLTRForComposer;

src/libs/convertToLTRForComposer/index.ts

@@ -30,4 +30,9 @@ const convertToLTRForComposer: ConvertToLTRForComposer = (text) => {
     // Add the LTR marker to the beginning of the text.
     return `${CONST.UNICODE.LTR}${text}`;
 };
+
+const moveCursorToEndOfLine = (commentLength: number) => commentLength;
+
+export {moveCursorToEndOfLine};
+
 export default convertToLTRForComposer;

src/libs/convertToLTRForComposer/types.ts

@@ -1,3 +1,3 @@
-type ConvertToLTRForComposer = (text: string) => string;
+type ConvertToLTRForComposer = (text: string, isComposerEmpty?: boolean) => string;
 
 export default ConvertToLTRForComposer;

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

@@ -18,7 +18,7 @@ import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import getDraftComment from '@libs/ComposerUtils/getDraftComment';
-import convertToLTRForComposer from '@libs/convertToLTRForComposer';
+import convertToLTRForComposer, {moveCursorToEndOfLine} from '@libs/convertToLTRForComposer';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener';
@@ -108,6 +108,7 @@ function ComposerWithSuggestions({
     const StyleUtils = useStyleUtils();
     const {preferredLocale} = useLocalize();
     const isFocused = useIsFocused();
+    const composerIsEmpty = useRef(true);
     const navigation = useNavigation();
     const emojisPresentBefore = useRef([]);
     const [value, setValue] = useState(() => {
@@ -223,41 +224,56 @@ function ComposerWithSuggestions({
                     debouncedUpdateFrequentlyUsedEmojis();
                 }
             }
-            const newCommentConverted = convertToLTRForComposer(newComment);
-            const isNewCommentEmpty = !!newCommentConverted.match(/^(\s)*$/);
-            const isPrevCommentEmpty = !!commentRef.current.match(/^(\s)*$/);
+
+            let newCommentConvertedToLTR = newComment;
+            const prevComment = commentRef.current;
+
+            // This prevent the double execution of setting input value that could affect the place holder and could send an empty message or draft messages in android
+            if (prevComment !== newComment) {
+                newCommentConvertedToLTR = convertToLTRForComposer(newCommentConvertedToLTR, composerIsEmpty.current);
+                setValue(newCommentConvertedToLTR);
+                moveCursorToEndOfLine(newComment.length, setSelection);
+                composerIsEmpty.current = false;
+            }
+
+            const isNewCommentEmpty = !!newCommentConvertedToLTR.match(/^(\s)*$/);
+            const isPrevCommentEmpty = !!prevComment.match(/^(\s)*$/);
 
             /** Only update isCommentEmpty state if it's different from previous one */
             if (isNewCommentEmpty !== isPrevCommentEmpty) {
                 setIsCommentEmpty(isNewCommentEmpty);
+                if (isNewCommentEmpty) {
+                    composerIsEmpty.current = true;
+                }
             }
+
             emojisPresentBefore.current = emojis;
-            setValue(newCommentConverted);
+
             if (commentValue !== newComment) {
-                const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition || 0);
+                const position = Math.max(selection.end + (newComment.length - prevComment.length), cursorPosition || 0);
                 setSelection({
                     start: position,
                     end: position,
                 });
             }
 
             // Indicate that draft has been created.
-            if (commentRef.current.length === 0 && newCommentConverted.length !== 0) {
+            if (prevComment.length === 0 && newCommentConvertedToLTR.length !== 0) {
                 Report.setReportWithDraft(reportID, true);
             }
 
             // The draft has been deleted.
-            if (newCommentConverted.length === 0) {
+            if (newCommentConvertedToLTR.length === 0) {
                 Report.setReportWithDraft(reportID, false);
             }
 
-            commentRef.current = newCommentConverted;
+            commentRef.current = newCommentConvertedToLTR;
             if (shouldDebounceSaveComment) {
-                debouncedSaveReportComment(reportID, newCommentConverted);
+                debouncedSaveReportComment(reportID, newCommentConvertedToLTR);
             } else {
-                Report.saveReportComment(reportID, newCommentConverted || '');
+                Report.saveReportComment(reportID, newCommentConvertedToLTR || '');
             }
-            if (newCommentConverted) {
+            if (newCommentConvertedToLTR) {
                 debouncedBroadcastUserIsTyping(reportID);
             }
         },
@@ -271,6 +287,7 @@ function ComposerWithSuggestions({
             raiseIsScrollLikelyLayoutTriggered,
             debouncedSaveReportComment,
             selection.end,
+            composerIsEmpty,
         ],
     );