[$250] Try to copy and paste an emoji from Slack into the chat editor shows an error

[mvtglobally]

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. Navigate to Slack
2. Copy any emoji
3. Paste Emoji in App

Expected Result:

User should be able to paste

Actual Result:

Try to copy and paste an emoji from Slack into the chat editor shows an error.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.77-0 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: Any additional supporting documentation

https://user-images.githubusercontent.com/43995119/174722628-f574bc16-1ec9-4c4e-817e-5d2678cfac7a.mp4

Expensify/Expensify Issue URL:
Issue reported by: @AndrewGable Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1654789237813029

View all open jobs on GitHub

[melvin-bot[bot]]

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

[amyevans]

When pasted content is parsed as HTML and contains an image tag, we attempt to fetch the image(s) in this block.

The fetch fails due to our strict Content Security Policy:

Note that the subdomain isn't always the same:

So I think allow-listing https://*.slack-edge.com makes sense.

I'll get a PR up for this change.

Also, just for completeness since it confused me a bit while debugging - if the emoji is the only thing being copy/pasted (via right click > copy image) then it can be pasted as a blob and does succeed:

[amyevans]

@justinpersaud deployed the linked PR. Unfortunately in QAing it, I've now encountered a new error:

Seems like we'd need to proxy the request through the back end to get around that, but I'm not sure if that's a good idea / worth pursuing. Any thoughts off the top of your head @AndrewGable?

[justinpersaud]

Hm, I am just thinking about this more now after seeing your error and not thinking about it when I reviewed the original PR. Are we going about this the right way?

It seems like when we paste an emoji from Slack into NewDot, it is trying to paste the image URL instead of the emoji language or whatever you call it. I think that's the issue, no? I wouldn't expect that Slack would just freely let anyone use their emojis off their CDN (or would they?).

If you paste into a text editor instead, you see the actual emoji language like :tent: -- so perhaps we need to figure out why it's trying to paste the image as an attachment?

[amyevans]

Yeah, I think that's a very reasonable suggestion. I compared against a few other platforms just to see what they do:

• iMessage: paste as text (hi :aussie_peace_out: bye)
• WhatsApp: paste as text (hi :aussie_peace_out: bye)
• A different workspace in Slack:

It looks like there's some data attributes on the image I could access to use the stringified version of the emoji:

https://user-images.githubusercontent.com/7277067/175983301-b8933305-a366-4bc9-a138-7b1db4a6b316.mov

So that seems like a good path forward to me. Thanks @justinpersaud!

[parasharrajat]

Good discussion overall. There are two things that need to be done to make emojis work from slack.

1. Instead of taking slack emojis as images, allow pasting :emoji: in text form. This would generalize the pasting from any platform. There would be a set of generic rules which should work for most of the apps.
2. Second would be adding new parsing rules to parse :text: as emoji.

Both of these have been discussed before so I think it would be better to discuss this internally as well to decide the next step. Maybe it is already planned.

[amyevans]

Thanks for chiming in here @parasharrajat! I spent some time looking at prior discussions in Slack and GitHub and you're right, this has already been discussed a lot 😅. A non-exhaustive list:

• Bug Emojis are pasted like images when copied and pasted from other apps (e.g Slack, Gmail) closed as Won't Do (GH)
• Render Emoji when typed with emoji code (GH) - Although the original post in the issue focuses specifically on converting things like :) to emoji, I think its scope has been expanded to include the :colon_code: implementation. Opened to external contributors recently, although not officially (no Help Wanted label)
• (Slack thread) with some discussion

For this issue, I see a few options:

1. Close it and continue to Do nothing for now
2. Take care of what's labeled as 1 by @parasharrajat now, which would be relatively straightforward. Essentially:

• Prevent the fetch/growl for emoji images here: https://github.com/Expensify/App/blob/main/src/components/Composer/index.js#L272-L301
• Add a new regex rule here: https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.js#L194 that would find image tags and display their alt, or the contents of data-stringify-emoji, or something like that (exact implementation TBD)

Tagging in @stitesExpensify and @jboniface too since it seems like y'all have been heavily involved in the emoji feature development to date.

Also separately, I'll put up a revert PR for the CSR rule change since that's a non-factor here now.

[stitesExpensify]

I think that we should:

1. Put this on hold
2. Add Help Wanted to the :colon_code: issue and get that completed
3. Come back to this once we have alternate codes (this is the proposed solution for colon_codes) and then add a regex rule like you suggested

Thoughts?

[amyevans]

Sounds like a good plan to me @stitesExpensify 🙌

[stitesExpensify]

Added the labels

[amyevans]

Dropping to monthly while it's still on hold

[amyevans]

Still on hold, a PR for the other issue is under review at the moment

[amyevans]

The PR this is held on is in the final stages of review but not yet complete

[amyevans]

https://github.com/Expensify/App/issues/4324 has shipped so this can come off hold and be opened up to external proposals

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[0xmiroslav]

Proposal

https://github.com/Expensify/App/blob/main/src/components/Composer/index.js#L297

            if (embeddedImages.length > 0 && embeddedImages[0].src) {
+               if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') {
+                   const plainText = event.clipboardData.getData('text/plain');
+                   this.paste(Str.htmlDecode(plainText));
+                   return;
+               }
                fetch(embeddedImages[0].src)

After fix:

https://user-images.githubusercontent.com/97473779/198730216-ea7d519b-11f0-4a3d-a466-26ae5f0d8241.mov

Before fix:

https://user-images.githubusercontent.com/97473779/198730254-f0bd6226-2f6b-45c7-85a0-31fd1f4590d9.mov

[sonialiap]

Job added to Upwork

[rushatgabhane]

reviewing today

[sonialiap]

@rushatgabhane have you had a chance to review this yet?

[rushatgabhane]

@0xmiroslav question: don't we need to fix this issue for native too?

[0xmiroslav]

This issue is for web only. It's not reproducible on native. Here's working video:

https://user-images.githubusercontent.com/97473779/200060239-2c71127c-cdf2-4bde-a442-cdea09f2fb6a.mp4

[rushatgabhane]

~@0xmiroslav Thanks for the confirmation!~

~@srikarparsi I like @0xmiroslav's proposal.~ ~🎀 👀 🎀 C+ reviewed~

[rushatgabhane]

@0xmiroslav thanks for the confirmation.

The proposal is missing this case - on slack, select a message with both emoji and image. Paste it to composer.

Expected: emoji and image url in markdown is pasted. Actual: only emoji is pasted

[0xmiroslav]

on slack, select a message with both emoji and image.

@rushatgabhane can you share video of what you selected exactly?

[rushatgabhane]

@0xmiroslav here you go. copied emoji and image

https://expensify.slack.com/archives/C01GTK53T8Q/p1667591050793079?thread_ts=1667584299.633799&cid=C01GTK53T8Q

[0xmiroslav]

I tried to copy this selection and paste into other popular apps

Github: (it's weird that 2 hours ago is hyperlinked to thread message, not image link)

Whatsapp:

Slack:

Telegram:

I couldn't find any apps that paste image url as markdown So my proposal is fine I think

[rushatgabhane]

@0xmiroslav on production, you get something like this

[melvin-bot[bot]]

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