[HOLD for payment 2023-08-16] [$1000] Selecting all and pasting into the composer prompts user to send an attachment.

[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. Log into an account.
2. Open a 1-on-1/group chat and click outside the composer to blur it (remove focus).
3. Select everything by pressing Cmd + A .
4. Click the Edit option in the toolbar and select Copy .
5. Click on the composer and paste with Cmd + V .

Expected Result:

All selected text is pasted into the composer.

Actual Result:

A new page/modal opens up prompting the user to send an attachment if you perform the steps above in a 1-on-1 chat. Clicking the "Send Attachment" button uploads the background shown on the page which appears in the chat and can be interacted with.
Until you select something else and copy it, pasting in the composer will open this page/modal, even if you're pasting in a different chat, whether that be a 1-on-1 or group chat.
However, if you perform the same steps in a group chat first, the selection is pasted but an error toast notification (see attached screenshot) briefly appears at the top right of the screen stating:
There was an error getting the image you posted.
Similarly, if you try pasting in a different chat after selecting all and copying from a group chat, the text will be pasted, but the error will also be shown, whether that be pasting in a subsequent group chat or 1-on-1.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3. 11.2
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: Any additional supporting documentation

Recording.183.1.mp4

expensify-mac-safari-copy-bug.mov

expensify-mac-desktop-copy-bug.mov

Recording.184.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Victor-Nyagudi
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1683394374441039

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b727a2688d7bb8a9
• Upwork Job ID: 1659288933217681408
• Last Price Increase: 2023-06-21

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[sonialiap]

Reproducible

• Chrome
• When I press Command C then Command V - text pastes, no image
• When I click Edit > Copy then press Command V - text pastes, error about image. My reproduction did not specify which image, but there aren't any images in the chat I copied so the error is a bug.

Screen.Recording.2023-05-18.at.9.28.51.PM.mov

[sonialiap]

The linked PR is in production but this error still shows up so it didn't fix it. Adding External

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b727a2688d7bb8a9

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[qispark]

Proposal

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

When pasting from a selection, it is showing the attachment dialog whenever an image is part of the selection.

What is the root cause of that problem?

A block of code inside Composer detects whether an image is contained within the HTML content. If an image exists, then it is treated as an attachment.

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

We should detect whether or not text is a part of that HTML content and the plaintext content. If there is text, then we should paste that instead. We also need to check whether or not that text matches the alt text of the image, in which case, the image should be pasted.

We can add the following in src/components/Composer/index.js:

    handlePaste(event) {
        event.preventDefault();

        const {files, types} = event.clipboardData;
        const TEXT_HTML = 'text/html';
        const TEXT_PLAIN = 'text/plain';

        const plainText = event.clipboardData.getData(TEXT_PLAIN);
        const trimmedText = plainText.trim();

        // If paste contains files, then trigger file management
        if (files.length > 0) {
            // Prevent the default so we do not post the file name into the text box
            this.props.onPasteFile(event.clipboardData.files[0]);
            return;
        }

        // If paste contains HTML
        if (types.includes(TEXT_HTML)) {
            const pastedHTML = event.clipboardData.getData(TEXT_HTML);

            const domparser = new DOMParser();
            const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

            // If HTML has img tag, then fetch images from it.
            if (embeddedImages.length > 0 && embeddedImages[0].src) {
                // If HTML has emoji, then treat this as plain text.
                if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') {
                    // const plainText = event.clipboardData.getData('text/plain');
                    this.paste(Str.htmlDecode(plainText));
                    return;
                }
               // if the text copied does not match the image alt text, paste the text.
                if (trimmedText !== '' && trimmedText !== embeddedImages[0].alt) {
                  this.paste(Str.htmlDecode(plainText));
                  return;
                }

When doing this, pasting any content that contains text will now paste the text into the Composer.

What alternative solutions did you explore? (Optional)

N/A

[parasharrajat]

@sonialiap Can you please reassign this issue to another engineer as Vivek is OOO?

[techievivek]

I can reproduce the same thing by copying GH comments, so IMO we can definitely improve the copy-paste logic here so it doesn't show an error. @parasharrajat, Interested to hear your thoughts on why you may have considered this issue not worth solving, if that was the case.

[melvin-bot]

@sonialiap @parasharrajat @techievivek this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[parasharrajat]

I will continue this tomorrow. Didn't get time for this today.

[melvin-bot]

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

[parasharrajat]

@techievivek Same as this comment https://expensify.slack.com/archives/C049HHMV9SM/p1684442056948549?thread_ts=1683394374.441039&cid=C049HHMV9SM.

Also, the expected behavior is not clear to me. Can you please clarify the expected behavior if you think we should solve this?

[techievivek]

@parasharrajat I totally agree with the point that this issue may not be a critical concern, so perhaps we can consider closing it and prioritize more urgent bugs. But I think we can at least seek proposals to prevent showing the error message about not being able to fetch images. What do you think about it?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.51-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Ignore images from embedded html when pasting, paste plaintext instead. #21476

If no regressions arise, payment will be issued on 2023-08-16. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @parasharrajat does not require payment (Eligable for Manual Requests)
• @qispark requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:
• [@parasharrajat] 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:
• [@parasharrajat] 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:
• [@parasharrajat] Determine if we should create a regression test for this bug.
• [@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@sonialiap] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[Victor-Nyagudi]

Has this been paid out yet?

I'd usually wait a little longer before raising this, but since the weekend's almost here, I thought I'd ask now.

[qispark]

@Victor-Nyagudi It hasn't been paid out yet.

[parasharrajat]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: Its a new change
• [@parasharrajat] 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: Not applicable
• [@parasharrajat] 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: Not required
• [@parasharrajat] Determine if we should create a regression test for this bug. No
• [@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

1. Copy a web document that contains both text and images. (e.g. w3schools.com/tags/tryit.asp?filename=tryhtml_image_test)
2. Log in with any account.
3. Go to any chat
4. Paste the contents into the composer
5. Verify that no image attachments are being created.
6. Verify that the correct contents are within the composer box.
7. Verify that no error modals are appearing upon paste.

Do you agree 👍 or 👎 ?

[parasharrajat]

@sonialiap Can you please post the summary as well as handle other payments?

[Victor-Nyagudi]

Bump @sonialiap.

[parasharrajat]

Bump @sonialiap...

[qispark]

Any updates? @sonialiap

[sonialiap]

Sorry guys, I was out. Sending offers out now

• @Victor-Nyagudi report $250
• @qispark fix + bonus $1500 - I can't find your Upwork handle, could you please apply for the job here
• @parasharrajat review + bonus $1500 - please request in newdot

[Victor-Nyagudi]

@sonialiap I've already received and accepted an offer from @Christinadobrzyn a few minutes ago for the reporting bonus.

[qispark]

@sonialiap I was getting this error when I tried to apply:
Only invited users can find, view and apply to the job

My upwork profile is here: https://www.upwork.com/freelancers/~012ec968f7113a1b63

[parasharrajat]

@Victor-Nyagudi Feel free to reject the extra offer.

[sonialiap]

@Victor-Nyagudi the offer process in upwork is

1. we send offer
2. contributor accepts offer
3. we make the payment. The payment can be issued by anyone on the Expensify team, it doesn't have to be the same person who sent the offer

Christina did #1 and I finished off the #3. I did not send an extra offer, but let me know if you got paid twice :)

[Victor-Nyagudi]

@sonialiap I only got one offer, but the payment for the milestone hasn't been released yet.

Am I missing something?

[sonialiap]

@qispark thanks, offer sent! (bonus will be applied during payment step)

@Victor-Nyagudi the payment was approved yesterday but I just ended the contract, maybe that was holding up the payment. Could you refresh and check if it's showing as released now?

[Victor-Nyagudi]

The payment has gone through now. Thank you.

Strangely, I didn't get the confirmation of the milestone being approved yesterday, but everything's sorted out now.

[qispark]

Thanks @sonialiap, I have accepted and requested a milestone payment now.

[sonialiap]

Payment sent ✔️

[parasharrajat]

Payment requested as per #18583 (comment)

[JmillsExpensify]

$1,500 payment for @parasharrajat approved based on BZ summary.