[$250] Markdown - Space in the Code Block is removed after Manually copying and pasting

[lanitochka17]

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

---

Version Number: 1.4.80-16
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4606901
Email or phone of affected tester (no customers): dave0123seife+admin@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to a 1:1 chat
2. Send a message with a Code block. Make the code block a multiline with an extra line between the markdown and text.
3. Manually Copy and paste the message with the code block

Expected Result:

The correct markdown format is pasted

Actual Result:

The markdown format removes the line space

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6505942_1717827443315.CodeBloke_Copy.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014e40385be5828d12
• Upwork Job ID: 1802910270409896448
• Last Price Increase: 2024-07-26

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@MitchExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[kpadmanabhan]

@lanitochka17 : this is related to #39971
This is on hold as PR for this is blocked due to another related issue.
Awaiting update.
CC: @jayeshmangwani / @roryabraham

[jayeshmangwani]

@kpadmanabhan Are you sure this is related to #39971 ?

I have tested again after applied the solution from the PR #42892 and it doesn't solve the current issue, can you please link between this issue and other one how they are related ?

[MitchExpensify]

Not overdue, ball is in @kpadmanabhan 's court

[kpadmanabhan]

@MitchExpensify / @jayeshmangwani : sorry for late response. On it now.

In main HEAD, copying using Copy to Clipboard menu item works fine with complete text from the code block. But using CTRL+C copies only the current text without the newline inside the code.

Recording.2024-06-14.011634.mp4

The fix for #39971 will not solve this issue. The text is already trimmed while copying to clipboard.
Working on this. Will update soon here.

[kpadmanabhan]

Proposal

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

Pasted code block trimming trailing newline characters.

What is the root cause of that problem?

Two concerns from the initially reported problem.

1. From the initial video recording in bug description, the text is NOT selected in full. Only 1 trailing newline is selected by selecting the text. To select the complete code block, one will need to go till end of code block till end of message. The same is demonstrated in the video recording further below.

2. Send button is not enabled because the trailing CR LF (\n) while pasting is not considered in selection and hence not considered in the range length.

src\hooks\useHtmlPaste\index.ts

const insertAtCaret = (target: HTMLElement, text: string) => {
        . . . 
        // Move caret to the end of the newly inserted text node.
        range.setStart(node, node.length);
        range.setEnd(node, node.length);
        . . . 

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

Check if this is a code block or is text having trailing newline, then calculate range accordingly with offset.

src\hooks\useHtmlPaste\index.ts

const insertAtCaret = (target: HTMLElement, text: string) => {
    . . . 

        // Move caret to the end of the newly inserted text node.
        // Text with newline at end or code block that ends with ``` 
        // These lines must be pasted in full and "Send" button enabled.
        // length reduced by an offset of 1 character to accommodate the trailing \n (CR LF) 
        const offset = text.trimEnd().endsWith('```') || text.endsWith('\n') 
            ? node.length - 1 : node.length;
        range.setStart(node, offset);
        range.setEnd(node, offset);
    . . . 

This makes sure that the correctly selected code block is pasted in full and send button is enabled.

Recording.2024-06-14.132257.mp4

Recording.2024-06-14.133756.mp4

What alternative solutions did you explore? (Optional)

N.A.

[kpadmanabhan]

@MitchExpensify / @jayeshmangwani / @lanitochka17 : if you think this solves the issue reported, please mark this bug external and kindly assign.

[melvin-bot]

@MitchExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014e40385be5828d12

[melvin-bot]

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

[msuleman526]

You need to change the field to text area field and onPaste we need to handle the code.

Code on handle paste:
const text = cipboardData.getData('text/plain');
const formattedText = text.replace(/\r?\n/g, '\n');

Code is just a sample

[melvin-bot]

📣 @msuleman526! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[msuleman526]

Contributor Details:
Expensive account Email: suleman.muh526@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01c87dbd15282b0aef

[MitchExpensify]

@eVoloshchak which proposal should we go with?

[eVoloshchak]

@MitchExpensify, we might want to put this on hold for #39971, which in turn is held for #42216. Both already have PR's open, this issue might be resolved after applying both

[jayeshmangwani]

@eVoloshchak I think Space in the code block will not be resolved in this PR #39971. I'm not sure if this issue #42216 solve the current issue, but in my opinion, both have different RCAs

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[adelekennedy]

@kpadmanabhan taking this over from Mitch - it sounds like from your last comment that this issue isn't reproducible but you're running into a similar issue?

[kpadmanabhan]

@adelekennedy that's partially correct. Newlines in code block were trimmed off which is not the expected behaviour. However I will test again on main HEAD and confirm as myself, @jayeshmangwani , @eVoloshchak and @MitchExpensify were seeing different behaviours.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

@eVoloshchak what are the next steps here?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[kpadmanabhan]

In latest main HEAD I still see these behaviour as explained and shown in my proposal.

Also pasting of text from "Copy to clipboard" context menu is ending up placing the cursor at end of code block.
@eVoloshchak : the issue you mentioned is not reproducible at my side.

@adelekennedy : the core issue seems to be fixed. however there are regressions w.r.t copying using mouse / trackpad click and drag. if you do nmot click and drag till outside of the message (not just till outside code block), then this works fine in main HEAD.

Please let me know if you need further details.

[melvin-bot]

@eVoloshchak, @adelekennedy Huh... This is 4 days overdue. Who can take care of this?

[kpadmanabhan]

@eVoloshchak / @adelekennedy : shall i pick this up for fixing? key problem here is the selection of text from code block.
fix will be that in case selection is till end of message and the data from clipboardv endswith code block, then add extra newline if selected till end.

please suggest if i may proceed with the fix.

[mallenexpensify]

@eVoloshchak 👀 above plz

[melvin-bot]

@eVoloshchak, @adelekennedy 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[eVoloshchak]

I'm not sure if this is worth fixing, it's not a bug with the app itself, but rather the way OS handles text selection.
I can observe the same behavior here on GitHub

Screen.Recording.2024-08-01.at.18.42.32.mov

@mallenexpensify, @adelekennedy, what are your thoughts?

[adelekennedy]

I'd move to close it in that case, it's low priority any way