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

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:

Access staging.new.expensify.com
Sign into any valid account
Proceed to any chat
Copy and Paste "Text with Line breaks" and send in chat
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): emilio.utest+293@gmail.com / 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

👋 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:

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

@ctkochan22

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

@ctkochan22

@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

@ctkochan22

@ctkochan22 any updates here?

@ahmdshrif

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

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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;
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

OSBotify commented on Jul 25, 2022

melvin-bot commented on Jul 25, 2022

ahmdshrif commented on Jul 26, 2022

luacmartins commented on Jul 26, 2022

ctkochan22 commented on Jul 26, 2022

ctkochan22 commented on Jul 26, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions