[Due for payment 2025-09-12] [Due for payment 2025-09-02] [$250] Chat - Strikethrough not applied to blockquote text in preview, but applied in conversation

[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.1.94-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-272/folder/13176723/41237032/839723869
Email or phone of affected tester (no customers): Slottwo1 2@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
3. Paste the text
   ~ Test

Test
Test~

4. Send the message

Expected Result:

The preview view and conversation view should be consistent.

Actual Result:

In preview, strike through is not applied for quote markdown text but in conversation view, strike through markdown is applied.

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/~021956328079456092450
• Upwork Job ID: 1956328079456092450
• Last Price Increase: 2025-08-15

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[aadil42]

@jponikarchuk the text provided in the OP is not consistent with the one used in the video. Can you give me that text?

[jponikarchuk]

@aadil42 The text provided in the OP is correct too

bandicam.2025-08-14.11-50-53-332.mp4

[dmkt9]

Proposal

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

In preview, strike through is not applied for quote markdown text but in conversation view, strike through markdown is applied.

What is the root cause of that problem?

1. Since blockquote in react-native-live-markdown is styled with display: 'inline-block':
   https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/blockUtils.ts#L58-L62

2. In the OP’s case, strikethrough is used outside and fully wraps the blockquote, so it gets rendered first and becomes the parent of the blockquote's span. However, because blockquote is set to inline-block, the styles from the strikethrough's span don’t cascade down to the blockquote's span.

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

In this case, we should check whether the blockquote is wrapped by a strikethrough. If it is, we can manually apply the strikethrough styles to the blockquote’s span.
https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/parserUtils.ts#L238

+ const parsedLineMarkdownRanges = [] as MarkdownRange[];

https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/parserUtils.ts#L266

+ if (
+     range.type === 'blockquote' &&
+     parsedLineMarkdownRanges.some((prevLine) => prevLine.type === 'strikethrough' && prevLine.start <= range.start && prevLine.length + prevLine.start >= range.start + range.length)
+ ) {
+     addStyleToBlock(span, 'strikethrough', markdownStyle, isMultiline);
+ }

https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/parserUtils.ts#L300

+    parsedLineMarkdownRanges.push(range);
}

Note: We can review other markdown combinations that may require similar manual handling and apply this approach where necessary.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

1. Option 1: Add textDecoration: 'inherit' style to blockquote:
   With this approach, we need to apply textDecoration: 'inherit' to all elements that might wrap around a blockquote, such as bold, italic, etc.
   https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/blockUtils.ts#L58

2. Option 2: Remove the inline-block style from blockquote:
   https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/web/utils/blockUtils.ts#L62

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

@dmkt9's proposal looks good to me, the RCA is correct and the proposed main solution fixes the issue following existing patterns within the react-native-live-markdown library.

Screen.Recording.2025-08-15.at.16.53.15.mov

Additionally I tested the changes directly in the react-native-live-markdown library to ensure all tests are still passing 🟢
Noting that the issue is only present in web-based platforms, this issue is not reproducible on Native.

This will require a react-native-live-markdown PR first, then a version bump PR for Expensify/App. For the react-native-live-markdown I suggest adding the following webParser tests to cover the new logic proposed in the main solution:

Tests DIFF

diff --git a/src/__tests__/webParser.test.tsx b/src/__tests__/webParser.test.tsx
index fbc77fd..d962902 100644
--- a/src/__tests__/webParser.test.tsx
+++ b/src/__tests__/webParser.test.tsx
@@ -296,3 +296,41 @@ describe('trailing whitespace', () => {
     });
   });
 });
+
+describe('strikethrough with blockquote combinations', () => {
+  test('strikethrough spanning over blockquote text', () => {
+    expect('~test\n> test\ntest~').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">~</span></span><span data-type="strikethrough" data-id="0,1"><span data-type="text" data-id="0,1,0">test</span></span></p><p data-type="line" data-id="1"><span data-type="strikethrough" data-id="1,0"><span data-type="blockquote" style="text-decoration: line-through;" data-id="1,0,0"><span data-type="syntax" data-id="1,0,0,0"><span data-type="text" data-id="1,0,0,0,0">&gt;</span></span><span data-type="text" data-id="1,0,0,1"> test</span></span></span></p><p data-type="line" data-id="2"><span data-type="strikethrough" data-id="2,0"><span data-type="text" data-id="2,0,0">test</span><span data-type="syntax" data-id="2,0,1"><span data-type="text" data-id="2,0,1,0">~</span></span></span></p>',
+    );
+  });
+
+  test('single line strikethrough with blockquote inside', () => {
+    expect('~> test content~').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">~</span></span><span data-type="strikethrough" data-id="0,1"><span data-type="text" data-id="0,1,0">&gt; test content</span></span><span data-type="syntax" data-id="0,2"><span data-type="text" data-id="0,2,0">~</span></span></p>',
+    );
+  });
+
+  test('multiple blockquotes within strikethrough - not valid strikethrough', () => {
+    expect('~> first quote\n> second quote~').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="text" data-id="0,0">~&gt; first quote</span></p><p data-type="line" data-id="1"><span data-type="blockquote" data-id="1,0"><span data-type="syntax" data-id="1,0,0"><span data-type="text" data-id="1,0,0,0">&gt;</span></span><span data-type="text" data-id="1,0,1"> second quote~</span></span></p>',
+    );
+  });
+
+  test('strikethrough not fully encompassing blockquote - not valid strikethrough', () => {
+    expect('~test\n> not struck~ more').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="text" data-id="0,0">~test</span></p><p data-type="line" data-id="1"><span data-type="blockquote" data-id="1,0"><span data-type="syntax" data-id="1,0,0"><span data-type="text" data-id="1,0,0,0">&gt;</span></span><span data-type="text" data-id="1,0,1"> not struck~ more</span></span></p>',
+    );
+  });
+
+  test('nested blockquotes within strikethrough', () => {
+    expect('~>> nested quote~').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">~</span></span><span data-type="strikethrough" data-id="0,1"><span data-type="text" data-id="0,1,0">&gt;&gt; nested quote</span></span><span data-type="syntax" data-id="0,2"><span data-type="text" data-id="0,2,0">~</span></span></p>',
+    );
+  });
+
+  test('blockquote with other formatting inside strikethrough', () => {
+    expect('~> *bold* and _italic_~').toBeParsedAsHTML(
+      '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">~</span></span><span data-type="strikethrough" data-id="0,1"><span data-type="text" data-id="0,1,0">&gt; </span><span data-type="syntax" data-id="0,1,1"><span data-type="text" data-id="0,1,1,0">*</span></span><span data-type="bold" data-id="0,1,2"><span data-type="text" data-id="0,1,2,0">bold</span></span><span data-type="syntax" data-id="0,1,3"><span data-type="text" data-id="0,1,3,0">*</span></span><span data-type="text" data-id="0,1,4"> and </span><span data-type="syntax" data-id="0,1,5"><span data-type="text" data-id="0,1,5,0">_</span></span><span data-type="italic" data-id="0,1,6"><span data-type="text" data-id="0,1,6,0">italic</span></span><span data-type="syntax" data-id="0,1,7"><span data-type="text" data-id="0,1,7,0">_</span></span></span><span data-type="syntax" data-id="0,2"><span data-type="text" data-id="0,2,0">~</span></span></p>',
+    );
+  });
+});

🎀👀🎀 C+ reviewed