Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repair Editing a comment containing both RTL and LTR characters breaks the (edited) text #9834

Merged
merged 13 commits into from
Jul 25, 2022
17 changes: 9 additions & 8 deletions src/pages/home/report/ReportActionItemFragment.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import canUseTouchScreen from '../../../libs/canUseTouchscreen';
import compose from '../../../libs/compose';
import * as StyleUtils from '../../../styles/StyleUtils';

const propTypes = {
/** The message fragment needing to be displayed */
Expand Down Expand Up @@ -117,16 +118,16 @@ const ReportActionItemFragment = (props) => {
return (
<Text
selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
style={EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined}
style={[EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined, styles.ltr]}
>
{Str.htmlDecode(text)}
{StyleUtils.convertToLTR(Str.htmlDecode(props.fragment.text))}
{props.fragment.isEdited && (
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
>
{` ${props.translate('reportActionCompose.edited')}`}
</Text>
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
>
{` ${props.translate('reportActionCompose.edited')}`}
</Text>
)}
</Text>
);
Expand Down
11 changes: 11 additions & 0 deletions src/styles/StyleUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,16 @@ function getPaddingLeft(paddingLeft) {
};
}

/**
* Android only - convert RTL text to a LTR text using Unicode controls.
* https://www.w3.org/International/questions/qa-bidi-unicode-controls
* @param {String} text
* @returns {String}
*/
function convertToLTR(text) {
return `\u2066${text}`;
}

export {
getAvatarSize,
getAvatarStyle,
Expand Down Expand Up @@ -475,4 +485,5 @@ export {
getPaymentMethodMenuWidth,
parseStyleAsArray,
getPaddingLeft,
convertToLTR,
};
2 changes: 2 additions & 0 deletions src/styles/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import textInputAlignSelf from './utilities/textInputAlignSelf';
import positioning from './utilities/positioning';
import codeStyles from './codeStyles';
import visibility from './utilities/visibility';
import writingDirection from './utilities/writingDirection';
import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
import pointerEventsNone from './pointerEventsNone';
import overflowXHidden from './overflowXHidden';
Expand Down Expand Up @@ -148,6 +149,7 @@ const styles = {
...positioning,
...wordBreak,
...whiteSpace,
...writingDirection,

rateCol: {
margin: 0,
Expand Down
13 changes: 13 additions & 0 deletions src/styles/utilities/writingDirection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* Writing direction utility styles.
* Note: writingDirection isn't supported on Android. Unicode controls are being used for Android
* https://www.w3.org/International/questions/qa-bidi-unicode-controls
*/
export default {
rtl: {
writingDirection: 'rtl',
},
ltr: {
writingDirection: 'ltr',
},
};