[Due for payment 2025-12-16] [$250] Chat - Header markdown is applied in preview but not shown in conversation for specific text

[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: V9.2.65-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/folder/13176723/test-cases/41237038?p=2
Email or phone of affected tester (no customers): dreamnitethedragon+yydyd373@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10S Android 13
App Component: Chat Report View

Action Performed:

1. Launch app
2. Open a chat
3. Paste the text
   👍 📕

😊 😊 💔 headto < heart >

  - Global create emojies (2 grean pluses)
4. Note text is in bold
5. Send the message
6. Note text is not is bold

Expected Result:

Header markdown is applied in preview similarly must be shown in conversation for specific text.

Actual Result:

Header markdown is applied in preview but not shown in conversation for specific text.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021994245772371676216
• Upwork Job ID: 1994245772371676216
• Last Price Increase: 2025-11-28

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Triggered auto assignment to @RachCHopkins (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[bernhardoj]

Proposal

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

Markdown isn't applied if the text contains custom emoji.

What is the root cause of that problem?

If the text contains custom emoji, we won't render the markdown.

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 79 in c13d47d

if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted) && (containsOnlyEmojis || !containsCustomEmoji(text))) {

It was added to fix this. The PR fixes the custom emoji alignment issue by applying a negative margin style to TextCommentFragment, but since markdown is rendered with RenderHTML doesn't use TextCommentFragment, the fix isn't applied to markdown, so they decide to not render it as markdown.

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

Remove the (containsOnlyEmojis || !containsCustomEmoji(text)) condition and add the style fix to EmojiWithTooltip.

App/src/components/EmojiWithTooltip/index.ios.tsx

Lines 9 to 17 in c13d47d

	return isMedium ? (
	<Text style={style}>
	<View>
	<Text style={styles.emojisWithTextFontSizeAligned}>{emojiCode}</Text>
	</View>
	</Text>
	) : (
	<Text style={style}>{emojiCode}</Text>
	);

const isCustomEmoji = emojiCode === '\uE100';
return isMedium ? (
    <Text style={style}>
        <View>
            <Text style={[..., isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>
        </View>
    </Text>
) : (
    <Text style={[style, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>
);

[abbasifaizan70]

Proposal

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

When a user types a message with markdown formatting (such as bold text using **text**) along with emojis, the markdown formatting appears correctly in the preview/composer but does not render in the conversation view after sending. For example, if a user sends "👍 📕 bold text 😊 😊 💔 headto < heart >", the bold formatting is visible in the preview but disappears once the message is sent and appears in the conversation.

What is the root cause of that problem?

The root cause is in the TextCommentFragment component (App/src/pages/home/report/comment/TextCommentFragment.tsx), specifically in the condition that determines whether to render a message as HTML (which supports markdown) or as plain text.

On line 79, there's a condition that checks:

if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted) && (containsOnlyEmojis || !containsCustomEmoji(text))) {

The problematic part is (containsOnlyEmojis || !containsCustomEmoji(text)). This condition means:

• Render as HTML only if the message contains ONLY emojis, OR
• Render as HTML only if the message does NOT contain custom emojis

When a message contains both markdown formatting (like bold) AND regular emojis (or custom emojis), this condition evaluates to false, causing the component to fall through to the plain text rendering path instead of the HTML rendering path. This results in markdown tags being displayed as plain text rather than being rendered as formatted HTML.

The shouldRenderAsText() function correctly identifies that the HTML is different from plain text (indicating markdown/formatting is present), but the additional emoji check prevents HTML rendering, causing the markdown to be lost.

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

Update the rendering condition in TextCommentFragment.tsx

Remove the restrictive emoji check from the condition on line 79. The component should render as HTML whenever the HTML differs from plain text (indicating markdown/formatting is present), regardless of emoji content.

Current code (line 79):

if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted) && (containsOnlyEmojis || !containsCustomEmoji(text))) {

Updated code:

// Render as HTML if HTML is different from text (contains markdown/formatting), unless it's only emojis that are deleted
// The emoji check should not prevent HTML rendering when markdown is present
if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[mananjadhav]

@bernhardoj's proposal looks good.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

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