[$250] Chat-Extra emojis appear with markdown * and _

[nlemma]

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.59-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-1995/folder/13176723/41237036/1016710018
Email or phone of affected tester (no customers): Slottwo1 l@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Chat Report View

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open a chat window
3. Paste text with 4 asterisks around it:
   Test 😊
4. Add one underscore _ at the start (left) → nothing happens
5. Add 2 underscores at the start (left) → extra emojis appear, cursor jumps
6. Remove one underscore → even more emojis appear
7. Add 4 underscores at the start (left) → emojis keep multiplying

Expected Result:

Adding _ or removing _ start (left), should not create extra emojis or move the cursor.

Only the text entered by the user should appear.

Actual Result:

Cursor moves unexpectedly and extra emojis appear automatically when underscores are added/ removed on the start (left).

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

Bug7005028_1763222032332.Screenrecorder-2025-11-15-20-58-52-223.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021993280488912648126
• Upwork Job ID: 1993280488912648126
• Last Price Increase: 2025-12-16

Issue Owner

Current Issue Owner: @TaduJR

[melvin-bot]

Triggered auto assignment to @sonialiap (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.

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-25 12:20:18 UTC.

Proposal

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

When combining markdown formatting (* for bold, _ for italic) with emojis, extra duplicate emojis appear and the cursor jumps unexpectedly. For example, typing _****Test 😊****____ causes emojis to multiply (1 → 3 → 9).

What is the root cause of that problem?

The excludeRangeTypesFromFormatting function splits italic and strikethrough ranges at emoji boundaries, but does not split bold ranges. This creates overlapping ranges where bold extends past its parent italic range.

Where italic/strikethrough are split but bold is not:

https://github.com/Expensify/react-native-live-markdown/blob/342a60cce84a79f227bbd9de282395498aab5241/src/parseExpensiMark.ts#L261-L262

Flow of the bug:

1. User types _****Test 😊****____

2. Parser generates ranges:

   • italic: 1-15 (contains bold and emoji)
   • bold: 5-12 (contains emoji)
   • emoji: 10-12

3. excludeRangeTypesFromFormatting splits italic at emoji but NOT bold:

   • italic: 1-10 (split before emoji)
   • italic: 12-15 (split after emoji)
   • bold: 5-12 (unchanged - now extends past first italic!)

4. Web DOM builder unnests from italic (ends at 10) after processing emoji, but lastRangeEndIndex is 12:

https://github.com/Expensify/react-native-live-markdown/blob/342a60cce84a79f227bbd9de282395498aab5241/src/web/utils/parserUtils.ts#L285-L291

5. JavaScript's substring(12, 10) swaps arguments and returns "😊" (duplicate emoji)

Why cursor jumps: Tree node positions become inconsistent because bold's range doesn't match the split italic ranges, causing getTreeNodeByIndex to return wrong nodes.

Why this doesn't reproduce on native (iOS/Android):

Native platforms use flat range application - they iterate through ranges independently and apply styles directly to text spans without nesting:

• Android: SpannableStringBuilder applies each range independently

https://github.com/Expensify/react-native-live-markdown/blob/342a60cce84a79f227bbd9de282395498aab5241/android/src/main/java/com/expensify/livemarkdown/MarkdownFormatter.java#L50-L52

• iOS: NSMutableAttributedString applies each range independently

https://github.com/Expensify/react-native-live-markdown/blob/342a60cce84a79f227bbd9de282395498aab5241/apple/MarkdownFormatter.mm#L20-L27

Web uses a nested DOM tree structure that requires proper parent-child relationships. Overlapping ranges break this structure.

Why bold was missed:

The original PR Expensify/react-native-live-markdown#591 "Prevent italic or strikethrough emojis on Android" focused on visual issues where italic/strikethrough styles would slant or strike through emojis. Bold doesn't visually distort emojis the same way, so it wasn't included. However, when bold + italic + emoji are combined, the inconsistent splitting creates overlapping ranges that break the web DOM builder. This was a missed edge case.

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

Add bold to the list of markdown types that get split at emoji boundaries:

https://github.com/Expensify/react-native-live-markdown/blob/342a60cce84a79f227bbd9de282395498aab5241/src/parseExpensiMark.ts#L261-L262

Change:

// Before
markdownRanges = excludeRangeTypesFromFormatting(markdownRanges, 'italic', rangesToExclude);
markdownRanges = excludeRangeTypesFromFormatting(markdownRanges, 'strikethrough', rangesToExclude);

// After
markdownRanges = excludeRangeTypesFromFormatting(markdownRanges, 'italic', rangesToExclude);
markdownRanges = excludeRangeTypesFromFormatting(markdownRanges, 'bold', rangesToExclude);
markdownRanges = excludeRangeTypesFromFormatting(markdownRanges, 'strikethrough', rangesToExclude);

This ensures all inline text formatting types are consistently split at emoji boundaries, preventing overlapping ranges and fixing both the duplicate emoji and cursor positioning issues.

[melvin-bot]

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

[melvin-bot]

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

[TaduJR]

Demo of Proposal

https://www.loom.com/share/6bce2e599b6b49c3aa21c0896d4f46d3