[$250] Chat - Emojis pasted from Slack render as images

[jponikarchuk]

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: 9.3.41-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-10915/folder/13176681/41236993/1264594149
Email or phone of affected tester (no customers): casluyo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows Windows 11 Home - Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Open a Slack chat and copy a message that contains emojis
3. Go into any conversation and paste the message

Expected Result:

The emoji should display correctly, not as a broken image

Actual Result:

the emoji appears as a broken image

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Uzaifm127

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022034897615980227563
• Upwork Job ID: 2034897615980227563
• Last Price Increase: 2026-03-20

[MelvinBot]

Proposal

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

When copying a message that contains emojis from Slack and pasting it into an Expensify chat, the emojis render as broken images instead of displaying correctly as Unicode emoji characters.

What is the root cause of that problem?

The paste handler in src/hooks/useHtmlPaste/index.ts:148-170 has a Slack emoji detection mechanism that only checks the first embedded image (embeddedImages[0]) for the data-stringify-type="emoji" attribute. When this check fails — either because:

1. The pasted content has non-emoji images before the emoji images (mixed content), or
2. The Slack client version/configuration doesn't include data-stringify-type="emoji" on the <img> tags

— the paste falls through to handlePastedHTML (line 169), which calls Parser.htmlToMarkdown(html). ExpensiMark's image rule then converts each Slack emoji <img> tag into markdown image syntax like ![:grinning:](https://a.slack-edge.com/production-standard-emoji-assets/...). These Slack CDN URLs are inaccessible from Expensify (blocked by CSP or requiring Slack authentication), so they render as broken images.

Additionally, even when the emoji detection succeeds, the current approach falls back to plain text entirely (handlePastePlainText), which discards all other HTML formatting (bold, links, code blocks, etc.) from the pasted content.

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

In src/hooks/useHtmlPaste/index.ts, instead of checking only the first image and falling back to plain text entirely, we should strip emoji <img> tags from the HTML and replace them with their alt text before passing the HTML to handlePastedHTML. This approach:

1. Handles all emoji images, not just the first one
2. Preserves other HTML formatting (bold, italic, links, code blocks) from the pasted Slack message
3. Works regardless of data-stringify-type by also matching Slack emoji CDN URLs (e.g., a.slack-edge.com containing emoji asset paths)

The logic should be:

• After parsing the HTML with DOMParser, iterate through all embedded images
• For each image that is a Slack emoji (detected via data-stringify-type="emoji" attribute OR src matching Slack emoji CDN patterns like slack-edge.com/production-standard-emoji-assets), replace the <img> tag in the HTML string with its alt attribute value (which contains the emoji unicode character or shortcode)
• Then pass the cleaned HTML to handlePastedHTML as normal

What alternative solutions did you explore? (Optional)

1. Check all images instead of just [0]: This fixes the mixed-content scenario but still falls back to plain text, losing formatting.
2. Add the fix in ExpensiMark: Could add a rule in expensify-common's htmlToMarkdown to detect Slack emoji <img> tags and replace with alt text. This is a more general fix but requires a library update and would affect all HTML-to-markdown conversions, not just paste.
3. Use a blocklist of external image domains: Strip all images from domains that aren't Expensify-owned during paste. This is too aggressive and would break legitimate image pasting from other sources.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[chengyixu]

Proposal

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

When a user copies a message containing emojis from Slack and pastes it into an Expensify chat on Windows Chrome, the emojis render as broken images instead of displaying as proper Unicode emoji characters.

What is the root cause of that problem?

The paste handler in src/hooks/useHtmlPaste/index.ts (around lines 148-170) only checks the first embedded image (embeddedImages[0]) for the data-stringify-type="emoji" attribute. When Slack's HTML contains multiple images or the attribute is missing on the first image, the check fails and the HTML is passed to handlePastedHTML, which converts Slack emoji <img> tags into markdown image syntax pointing to a.slack-edge.com CDN URLs. These URLs are inaccessible from Expensify's context (CSP restrictions / auth requirements), so they render as broken images.

Even when the emoji detection succeeds, the current fallback to handlePastePlainText discards all HTML formatting (bold, links, etc.) from the pasted content.

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

Modify src/hooks/useHtmlPaste/index.ts to sanitize Slack emoji <img> tags from pasted HTML before passing it to handlePastedHTML:

1. After parsing the pasted HTML with DOMParser, iterate through all <img> elements (not just embeddedImages[0])
2. For each image that matches a Slack emoji pattern -- either via data-stringify-type="emoji" attribute or src URL matching slack-edge.com emoji asset paths -- replace the <img> node with a text node containing the alt attribute value (which holds the Unicode emoji character)
3. Serialize the cleaned DOM back to HTML and pass it to handlePastedHTML

This preserves all other formatting (bold, italic, links, code blocks) while correctly converting emojis to their Unicode text equivalents.

// In src/hooks/useHtmlPaste/index.ts, replace the single-image emoji check with:
const doc = new DOMParser().parseFromString(html, 'text/html');
const allImages = doc.querySelectorAll('img');
allImages.forEach((img) => {
    const isSlackEmoji = img.getAttribute('data-stringify-type') === 'emoji' 
        || (img.src && img.src.includes('slack-edge.com') && img.src.includes('emoji'));
    if (isSlackEmoji && img.alt) {
        img.replaceWith(doc.createTextNode(img.alt));
    }
});
const cleanedHtml = doc.body.innerHTML;
handlePastedHTML(cleanedHtml);

What alternative solutions did you explore? (Optional)

1. Extending ExpensiMark: Adding a rule in expensify-common's htmlToMarkdown to detect Slack emoji images. This would require a library update and affects all HTML-to-markdown conversions globally, not just paste -- too broad.
2. Domain blocklist for images: Stripping all external-domain images during paste. Too aggressive -- would break legitimate image pasting from other sources.

[buyuan-dev]

I'd like to work on this issue. I can fix the issue where emojis pasted from Slack render as images instead of text.

I'll investigate the emoji handling logic and ensure proper rendering for pasted emojis.

Ready to submit a PR once I'm assigned to this issue.

[melvin-bot]

📣 @buyuan-dev! 📣
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>

[jainam884]

Proposal

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

When Slack content that contains emoji is pasted into Expensify chat, those emoji <img> tags can survive long enough to be converted into markdown image links, so the message shows broken images instead of emoji characters. The fix should also avoid throwing away the rest of Slack's formatting just because emoji are present.

What is the root cause of that problem?

useHtmlPaste() only has a Slack-specific escape hatch for embeddedImages[0], so any Slack emoji HTML that does not match that first-image check falls through to Parser.htmlToMarkdown().

App/src/hooks/useHtmlPaste/index.ts

Lines 148 to 169 in 0ad0ae9

	// If paste contains HTML
	if (event.clipboardData?.types?.includes(TEXT_HTML)) {
	const pastedHTML = event.clipboardData.getData(TEXT_HTML);
	const domparser = new DOMParser();
	const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;
	// Exclude parsing img tags in the HTML, as fetching the image via fetch triggers a connect-src Content-Security-Policy error.
	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') {
	handlePastePlainText(event);
	return;
	}
	}
	// If HTML starts with <p dir="ltr">, it means that the text was copied from the markdown input from the native app
	// and was saved to clipboard with additional styling, so we need to treat this as plain text to avoid adding unnecessary characters.
	if (pastedHTML.startsWith('<p dir="ltr">')) {
	handlePastePlainText(event);
	return;
	}
	handlePastedHTML(pastedHTML);

That converter has a generic <img> to markdown-image rule, so the emoji tag becomes ![alt](src) or !(src) instead of plain text. I verified locally that ExpensiMark.htmlToMarkdown() currently turns a Slack emoji <img> into a markdown image link, which is why the composer later renders a broken image. We should treat Slack emoji as text during HTML-to-markdown conversion, not as normal images. As a robustness point, that conversion should not depend on alt appearing after src.

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

1. Update the expensify-common HTML-to-Markdown image handling to detect Slack emoji images, using the existing data-stringify-type="emoji" signal and a Slack emoji CDN fallback, and emit the emoji alt text instead of markdown image syntax.
2. Make that image handling read alt regardless of attribute order, so we do not lose the emoji when Slack reorders attributes.
3. In src/hooks/useHtmlPaste/index.ts, stop routing Slack emoji HTML to handlePastePlainText() and let the cleaned HTML go through handlePastedHTML() instead. That keeps bold text, links, and other inline formatting intact while still converting emoji to text.
4. Keep the existing <p dir="ltr"> plain-text branch as-is, since that is solving a separate native clipboard issue.

What alternative solutions did you explore? (Optional)

Sanitizing the pasted DOM inside useHtmlPaste() before calling handlePastedHTML() would also work, and it is narrower in scope. I prefer the parser-layer fix because the real failure is that Slack emoji <img> tags are being treated like normal images during HTML-to-Markdown conversion. Fixing that conversion makes the behavior less brittle than keeping Slack-specific DOM surgery in the paste hook.