[Hold][$1000] Copy to clipboard for code block message adds extra space below

[kavimuru]

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. Open the app on android
2. Open any report
3. Send code block (eg: Test)
4. Long press and copy to clipboard
5. Send the copied message again

Expected Result:

Message should display same as copied

Actual Result:

Extra space below the text is added inside code block and it is only visible on android app, it works fine on android chrome

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native

Version Number: 1.2.72-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

android.app.code.block.issue.mp4

az_recorder_20230215_212936.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1676459478735969

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017d6f7a1cf15fa6ae
• Upwork Job ID: 1626697741398188032
• Last Price Increase: 2023-02-17

[MelvinBot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[isabelastisser]

I don't have an android, so I can't reproduce this. I was unable to reproduce this on my iPhone tho. I will post to bug-zero for help!

[isabelastisser]

SO I was able to reproduce it on android.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~017d6f7a1cf15fa6ae

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)

[MelvinBot]

Triggered auto assignment to @grgia (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Extra space below the text is added inside code block only on android/ios app, it works fine on web

What is the root cause of that problem?

This is due to the <br> tag is rendered differently on web vs native.

When we copy the code block, the following markdown will be copied:

When we send that message, this is the HTML that's sent
<pre>codeblock<br /></pre>

On Web, that <br /> inside the pre will be collapsed and you'll not see a new line. However on native, the <br /> will show in the new line since it's the default behavior of react-native-render-html. This causes the mentioned extra space below the text only on native platforms.

What changes do you think we should make in order to solve the problem?

In order to fix this, we need to enable the enableExperimentalBRCollapsing flag of react-native-render-html on native platform so that the behavior of the native platform will follow the correct HTML standard.

The documentation of that flag can be found here.

The flag should be added to this component

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

Line 241 in 1b68a5f

<RenderHTMLConfigProvider

Please note we should only enable this on native platform, this is also mentioned in the documentation

Recommended value is true on non-web platforms

What alternative solutions did you explore? (Optional)

NA

Result

Working well after the fix:

Screen.Recording.2023-02-18.at.17.43.11.mov

[eh2077]

Related to #14822

[JmillsExpensify]

So perhaps we put this issue on hold since that PR predates this report and it was already known. If we can't reproduce the issue after that PR hits staging, we can close this one.

[bondydaa]

I believe this should be fixed now that #14822 was just merged.

It looks like this PR #15241 published the expensify-common update before #14822 was done which meant the updates to the markdown parsing code went out without the changes @marktoman added to address the extra <br> tags on native.

There wasn't anything wrong done in #15241 it's that it required changes from Expensify-Common as well and since @marktoman's changes in Expensify-Common had been merged before Expensify/expensify-common#502 was merged when the hash was updated it just also included the changes from Expensify/expensify-common#496.

As for why the extra <br> tags were included it's explained here: #14822 (comment).

@kavimuru once #14822 has been deployed can you re-test and confirm for us that this isn't happening anymore?

[isabelastisser]

@kavimuru , can you please follow up on this? Thanks!

@kavimuru once #14822 has been deployed can you re-test and confirm for us that this isn't happening anymore?

[kavimuru]

@isabelastisser Not able to reproduce.

[isabelastisser]

So perhaps we put this issue on hold since that PR predates this report and it was already known. If we can't reproduce the issue after that PR hits staging, we can close this one.

Closing this!