Skip to content

Commit

Permalink
Revert "Fixed Android - Chat - Message gets displayed from right to l…
Browse files Browse the repository at this point in the history
…eft"
  • Loading branch information
neil-marcellini authored Dec 27, 2023
1 parent 9e81447 commit f3673e4
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 103 deletions.
9 changes: 4 additions & 5 deletions src/libs/convertToLTR/index.android.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
/**
* Android only - convert RTL text to a LTR text using 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';

/**
* Android only - convert RTL text to a LTR text using Unicode controls.
* https://www.w3.org/International/questions/qa-bidi-unicode-controls
*/
const convertToLTR: ConvertToLTR = (text) => `${CONST.UNICODE.LTR}${text}`;

export default convertToLTR;
1 change: 0 additions & 1 deletion src/libs/convertToLTR/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// 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;
Expand Down
63 changes: 1 addition & 62 deletions src/libs/convertToLTRForComposer/index.android.ts
Original file line number Diff line number Diff line change
@@ -1,69 +1,8 @@
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, 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};

const convertToLTRForComposer: ConvertToLTRForComposer = (text) => text;
export default convertToLTRForComposer;
5 changes: 0 additions & 5 deletions src/libs/convertToLTRForComposer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,4 @@ 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;
2 changes: 1 addition & 1 deletion src/libs/convertToLTRForComposer/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
type ConvertToLTRForComposer = (text: string, isComposerEmpty?: boolean) => string;
type ConvertToLTRForComposer = (text: string) => string;

export default ConvertToLTRForComposer;
Original file line number Diff line number Diff line change
Expand Up @@ -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, {moveCursorToEndOfLine} from '@libs/convertToLTRForComposer';
import convertToLTRForComposer from '@libs/convertToLTRForComposer';
import * as EmojiUtils from '@libs/EmojiUtils';
import focusComposerWithDelay from '@libs/focusComposerWithDelay';
import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener';
Expand Down Expand Up @@ -108,7 +108,6 @@ 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(() => {
Expand Down Expand Up @@ -224,56 +223,41 @@ function ComposerWithSuggestions({
debouncedUpdateFrequentlyUsedEmojis();
}
}

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)*$/);
const newCommentConverted = convertToLTRForComposer(newComment);
const isNewCommentEmpty = !!newCommentConverted.match(/^(\s)*$/);
const isPrevCommentEmpty = !!commentRef.current.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 - prevComment.length), cursorPosition || 0);
const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition || 0);
setSelection({
start: position,
end: position,
});
}

// Indicate that draft has been created.
if (prevComment.length === 0 && newCommentConvertedToLTR.length !== 0) {
if (commentRef.current.length === 0 && newCommentConverted.length !== 0) {
Report.setReportWithDraft(reportID, true);
}

// The draft has been deleted.
if (newCommentConvertedToLTR.length === 0) {
if (newCommentConverted.length === 0) {
Report.setReportWithDraft(reportID, false);
}

commentRef.current = newCommentConvertedToLTR;
commentRef.current = newCommentConverted;
if (shouldDebounceSaveComment) {
debouncedSaveReportComment(reportID, newCommentConvertedToLTR);
debouncedSaveReportComment(reportID, newCommentConverted);
} else {
Report.saveReportComment(reportID, newCommentConvertedToLTR || '');
Report.saveReportComment(reportID, newCommentConverted || '');
}
if (newCommentConvertedToLTR) {
if (newCommentConverted) {
debouncedBroadcastUserIsTyping(reportID);
}
},
Expand All @@ -287,7 +271,6 @@ function ComposerWithSuggestions({
raiseIsScrollLikelyLayoutTriggered,
debouncedSaveReportComment,
selection.end,
composerIsEmpty,
],
);

Expand Down

0 comments on commit f3673e4

Please sign in to comment.