[$250] Editing a comment containing both RTL and LTR characters breaks the (edited) text - Reported by @adeel0202

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to any chat
2. Type something containing RTL characters
3. Send the comment
4. Edit the comment and add LTR characters
5. Press Save changes

Expected Result:

The (edited) text doesn't break

Actual Result:

The (edited) text breaks

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.79-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2022-06-13.at.9.17.49.PM.mov

Upwork URL: https://www.upwork.com/jobs/~01c6ba7a40ecceeb34
Issue reported by: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1655138110274269

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @trjExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @sketchydroide (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[trjExpensify]

Passing on to engineering triage. Will remain assigned for CM if it can go external.

[melvin-bot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[sketchydroide]

I think this can be external.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[melvin-bot]

Current assignee @sketchydroide is eligible for the Exported assigner, not assigning anyone new.

[trjExpensify]

Oops, someone missed this. On upwork here: https://www.upwork.com/jobs/~01c6ba7a40ecceeb34

[Karim-30]

Proposal

wrap the comment and edit Texts inside a <View>. So change these lines inside ReportActionItemFragment.js to these :

<View style={{flexDirection:'row',alignItems:'center'}}>

    <Text
        selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
        style={EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined}
    >
        {Str.htmlDecode(props.fragment.text)}
    </Text>

    {props.fragment.isEdited && (
        <Text
            fontSize={variables.fontSizeSmall}
            color={themeColors.textSupporting}
        >
            {` ${props.translate('reportActionCompose.edited')}`}
        </Text>
    )}

</View>

Result :

[sketchydroide]

@Karim-30 can you show me an example with just edited RTL text?
And add a before and after example.

thanks

[Karim-30]

@sketchydroide I updated my Proposal, here is how it looks like

before :

before.mov

after :

after.mov

[rushatgabhane]

@Karim-30 I don't think we should vertically center (edited)

[jeet-dhandha]

Just a question does Expensify provide with payments for the solutions provided by freelance developers, as they can just fix the code from the provided proposal without giving out the payments.

[rushatgabhane]

@jeet-dhandha good question. If an issue is labeled External and your proposal is accepted, you'll be paid.

I'd strongly recommend that you read https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#propose-a-solution-for-the-job

[Karim-30]

I don't think we should vertically center (edited)

@rushatgabhane You are right, using alignItems: 'baseline' instead of alignItems: 'center' fixed it.

Result :

[rushatgabhane]

🎀 👀 🎀 C+ reviewed
@sketchydroide I like @Karim-30's proposal.

[sketchydroide]

Yeah, I'm happy with it as well

[melvin-bot]

📣 @Karim-30 You have been assigned to this job by @sketchydroide!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[trjExpensify]

@Karim-30 can you apply to the job on upwork when you get a chance?

[Karim-30]

Applied

[Karim-30]

PR is ready

[trjExpensify]

PR is in review. @sketchydroide looks like it's awaiting your approval and we can merge this?

[rushatgabhane]

@trjExpensify just FYI, we had a regression #10123
(so half pay for C+)

[rushatgabhane]

@trjExpensify we can close this out (commenting because the bot won't remind as the reviewing label has been applied)

[trjExpensify]

Ah, why didn't the labels get added? 🤔 Processing payments now.

[trjExpensify]

Cool, done!

[rushatgabhane]

why didn't the labels get added

I think it's because we didn't remove the reviewing label after merging the PR.

If I'm not wrong, the reviewing label disables Melvin.