Merge pull request #88767 from wildan-m/wildan/87519-split-details-html-tags

Fix HTML tags showing in Split details page description

Author: chuckdries

src/components/MoneyRequestConfirmationList/sections/DescriptionField.tsx

@@ -10,6 +10,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setMoneyRequestDescription} from '@libs/actions/IOU';
 import Navigation from '@libs/Navigation/Navigation';
+import Parser from '@libs/Parser';
 import {getDescription, hasReceipt} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import {setDraftSplitTransaction} from '@userActions/IOU/Split';
@@ -53,7 +54,9 @@ function DescriptionField({
 
     const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
 
-    const iouComment = getDescription(transaction);
+    // `getDescription` returns raw `transaction.comment.comment`, which can be HTML for saved transactions.
+    // We normalize to markdown so both the read-only and editable inputs receive a consistent format.
+    const iouComment = Parser.htmlToMarkdown(getDescription(transaction));
 
     const contextMenuStateValue = {
         anchor: null,

tests/unit/ParserTest.ts

@@ -24,4 +24,28 @@ describe('Parser', () => {
             expect(Parser.isHTML('<>')).toBe(false);
         });
     });
+
+    describe('htmlToMarkdown', () => {
+        // These cases pin the contract relied on by DescriptionField.tsx, where the description of a saved
+        // transaction is stored as HTML (because `getParsedComment()` runs ExpensiMark at save time) and must
+        // be normalized back to markdown before being handed to the `shouldParseTitle` MenuItem and the
+        // `type="markdown"` TextInput. Without this normalization, the Split details page renders raw `<a>`
+        // tags as visible text — see https://github.com/Expensify/App/issues/87519.
+        test('converts an autolinked URL anchor back to a markdown link', () => {
+            expect(Parser.htmlToMarkdown('<a href="https://google.com" target="_blank" rel="noreferrer noopener">google.com</a>')).toBe('[google.com](https://google.com)');
+        });
+
+        test('converts ExpensiMark-emitted bold tags back to markdown asterisks', () => {
+            expect(Parser.htmlToMarkdown('<strong>hello</strong> world')).toBe('*hello* world');
+        });
+
+        test('is a no-op for plain text descriptions used by draft transactions', () => {
+            expect(Parser.htmlToMarkdown('lunch')).toBe('lunch');
+            expect(Parser.htmlToMarkdown('google.com')).toBe('google.com');
+        });
+
+        test('returns an empty string for an empty input', () => {
+            expect(Parser.htmlToMarkdown('')).toBe('');
+        });
+    });
 });