Web - Line breaks & Text from code editor do not appear correctly within chat

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Access staging.new.expensify.com
2. Sign into any valid account
3. Proceed to any chat
4. Copy and Paste "Text with Line breaks" and send in chat
5. Copy and paste "Text from a code editor" and send in chat

Expected Result:

The user expects the text in chat preview to be exactly as copied.

Actual Result:

The text does not comply with the correct format for either case

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

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

Version Number: 1.1.86-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected] / Emilio98 or (Any email)
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5662750_PROD.mp4

Bug5662750_Code_editor_text_does_not_display_correctly.mp4

Bug5662750_Line_break_issue_in_chat_preview.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

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

[ahmdshrif]

@ctkochan22 to fix this we should replace this line

App/src/pages/home/report/ReportActionItemFragment.js

Line 123 in d1fda9f

{StyleUtils.convertToLTR(Str.htmlDecode(props.fragment.text))}

with this

      {StyleUtils.convertToLTR(Str.htmlDecode(text))}

because we map br to a new line and save it on text variable in this lines
but props.fragment.text does not have `\n' by default .

App/src/pages/home/report/ReportActionItemFragment.js

Lines 99 to 104 in 151ec1a

	const differByLineBreaksOnly = Str.replaceAll(props.fragment.html, '<br />', ' ') === props.fragment.text;
	if (differByLineBreaksOnly) {
	const textWithLineBreaks = Str.replaceAll(props.fragment.html, '<br />', '\n');
	html = textWithLineBreaks;
	text = textWithLineBreaks;
	}

this change start in this pr https://github.com/Expensify/App/pull/9834/files

[luacmartins]

@ctkochan22 any updates here?

[ctkochan22]

The recommendation by @ahmdshrif looks good. Just making sure it doesn't conflict with the PR that introduced it

[ctkochan22]

So the original issue was that when editing a message for a language written left to right, the (edited) splices the text right in half.

Issue: #9709
PR Fix: #9834

I don't know why they would replace text with props.fragment.text