[HOLD] Incorrect pasted text on copied HTML snippet reported by @kerupuksambel

[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. Open staging.new.expensify.com
2. Send this HTML snippet to someone : <a href="takia.html">asd</a>
3. Right click on the message and select the option "Copy to clip board" and paste it to either an external text editor or Expensify textbox

Expected Result:

The pasted text is the same as the copied text

Actual Result:

The pasted text on the external text editor is only asd while the pasted text on the Expensify textbox is [asd](https://staging.new.expensify.com/r/takia.html)

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.21-4

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:

https://user-images.githubusercontent.com/43996225/198734005-732d98ad-0705-4c1c-9ff2-81ae0bf09688.mp4

https://user-images.githubusercontent.com/43996225/198734012-14442e5a-b09d-4d0e-896c-ea25f7b830b7.mp4

Expensify/Expensify Issue URL:

Issue reported by: @kerupuksambel

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666969406840619

View all open jobs on GitHub

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Christinadobrzyn]

Sorry I was ooo, I can't replicate this. Here's what I tried:

1. Copy/paste <a href="takia.html">asd</a> in a chat in staging
2. Click the Copy to Clipboard icon
3. Open TextEdit and paste

Side note, I can see this message in my notifications

[Christinadobrzyn]

@kavimuru can you try to reproduce this again to see what we are doing differently? Feel free to assign this back to me if you can reproduce again.

[kerupuksambel]

@Christinadobrzyn May I try to elaborate? My step to generate the error is :

1. Type <a href="takia.html">asd</a> in a chat in staging
2. Copy the code with highlighting the code and pressing Ctrl+C / Cmd+C
3. Paste it with Ctrl+V / Cmd + V on your text editor.

The bug is remained the same in my side. I also just realized the difference between copying the code from Copy To Clipboard button and using Ctrl/Cmd + C.

[melvin-bot[bot]]

@kavimuru Huh... This is 4 days overdue. Who can take care of this?

[Christinadobrzyn]

Hi @kerupuksambel! Thank you so much for the insight - testing this:

Using Copy to Clipboard

1. Type <a href="takia.html">asd</a> in a chat in staging
2. Copy the code by clicking the Copy to Clipboard button
3. Paste it with Ctrl+V / Cmd + V on your text editor.
4. You get <a href="takia.html">asd</a> in text editor

Using Ctrl+C / Cmd+C

1. Type <a href="takia.html">asd</a> in a chat in staging
2. Copy the code with highlighting the code and pressing Ctrl+C / Cmd+C
3. Paste it with Ctrl+V / Cmd + V on your text editor.
4. You get asd in text editor

So the Copy to Clipboard is pasting the <a href="takia.html">asd</a> code into text edit whereas the Ctrl+C / Cmd+C & Ctrl+V / Cmd + V is pasting the result of the code asd. Interesting!

I think this might be similar to this issue https://github.com/Expensify/App/issues/10262 - @parasharrajat would you be able to take a peek at this and see if you think it will be fixed with the changes you're working on in https://github.com/Expensify/App/issues/10262

[parasharrajat]

Investigated this one, it seems like root cause might be same. We are tackling the SetHTML function in the other issue. It is good to know one more bug caused by the same navigator.clipboard.write.

@b1tjoy This might be related to https://github.com/Expensify/App/issues/10262.

[Christinadobrzyn]

Thanks @parasharrajat, I think we should probably hold this until https://github.com/Expensify/App/issues/10262 is resolved to see if that fixes this issue. Let me know if there's a better option.

[parasharrajat]

Good call @Christinadobrzyn.

[b1tjoy]

This one is a regression of PR https://github.com/Expensify/App/pull/11905, ExpensiMark definitely expects encoded html string as parameter.

https://github.com/Expensify/expensify-common/blob/490d695c8ceb54bcff736785b54f06057c32fc9b/lib/ExpensiMark.js#L479

Solution fix both current issue and https://github.com/Expensify/App/issues/11693

Remove the code which encode the selection html.

https://github.com/Expensify/App/blob/0d653cad15c32150c302ac12dc0acdbca1ece18b/src/libs/SelectionScraper/index.js#L136

-    const newHtml = Str.htmlDecode(render(domRepresentation));
+    const newHtml = render(domRepresentation);

Set decoded html to clipboard as text/plain type.

https://github.com/Expensify/App/blob/0d653cad15c32150c302ac12dc0acdbca1ece18b/src/components/CopySelectionHelper.js#L38

-        Clipboard.setHtml(selection, parser.htmlToText(selection));
+        Clipboard.setHtml(selection, Str.htmlDecode(parser.htmlToText(selection)));

https://github.com/Expensify/App/blob/0d653cad15c32150c302ac12dc0acdbca1ece18b/src/pages/home/report/ContextMenu/ContextMenuActions.js#L112

-                         Clipboard.setHtml(content, parser.htmlToText(content));
+                         Clipboard.setHtml(content, Str.htmlDecode(parser.htmlToText(content)));

You may noticed that we found incorrect use of htmlToText() in https://github.com/Expensify/App/issues/10262#issuecomment-1310494115, I suggest we fix both https://github.com/Expensify/App/issues/11693 and https://github.com/Expensify/App/issues/12271 in solution of https://github.com/Expensify/App/issues/10262.

Screenshot

https://user-images.githubusercontent.com/103875612/201457073-2779492c-7be0-4e5b-8478-ff4df3cb0ac5.mp4

[parasharrajat]

Thanks, @b1tjoy for looking. I will definitely review this proposal beside https://github.com/Expensify/App/issues/10262.

[Christinadobrzyn]

If we think this was a regression of https://github.com/Expensify/App/pull/11905#issuecomment-1289779832 I think we can remove the hold label and start working on this. I think this can be External but going to double-check with the engineers first.

[melvin-bot[bot]]

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

[Christinadobrzyn]

@deetergp would you be able to lend some insights into if this could be External or needs to be Internal?

[deetergp]

@Christinadobrzyn I agree, this can definitely be external.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~015b92dc642f298147

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Vishrut19]

Hey Guys ! can I give it a try ?

[thesahindia]

Great finding @b1tjoy👏

@deetergp, I like @b1tjoy's proposal

C+ reviewed 🎀👀🎀

[thesahindia]

Hey Guys ! can I give it a try ?

Thanks for showing interest @Vishrut19. You can check other issues with the help wanted label. You can visit this link.

[Prottoy2938]

Is this issue still going on? or @b1tjoy 's solution works fine?

[thesahindia]

@b1tjoy 's solution works fine?

Yeah, it works fine.

[thesahindia]

@deetergp, I like @b1tjoy's proposal

C+ reviewed 🎀👀🎀

Bump @deetergp

[danieldoglas]

@thesahindia let's move forward with @b1tjoy's proposal.

[thesahindia]

@Christinadobrzyn, please hire @b1tjoy.

[JmillsExpensify]

@thesahindia Can you also please assign @b1tjoy to this issue. Thanks!

[b1tjoy]

Please review PR https://github.com/Expensify/App/pull/13108, thanks!