App: [HOLD for payment 2022-12-08] [$1000] Incorrect pasted text on copied HTML snippet reported by @kerupuksambel

So sorry for the payment delay, I wasn’t sure if there was a regression and I was ooo for a bit. Paid and closed the job.

@b1tjoy $1000 for the fix & $500 bonus (PR in 3 days) @thesahindia $1000 as C+ & $500 bonus (PR in 3 days) @kerupuksambel $250 for reporting

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

The PR that introduced the bug has been identified. Link to the PR:

https://github.com/Expensify/App/pull/11905

The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/11905#issuecomment-1358063814

A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

https://expensify.slack.com/archives/C049HHMV9SM/p1671474832197629

A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here Slack chat about this here

Need help with this one @danieldoglas

Oh whoops, I’m flying through too many issues. Thanks!

@Christinadobrzyn, please hire @b1tjoy.

@Christinadobrzyn I agree, this can definitely be external.

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

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