[$250] Markdown - Multiline hyperlink is not displayed as a hyperlink

[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.3.6-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-3235/folder/13176723/41237049/1141126705?sort=%2Bidentifier
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 11/ Chrome
App Component: Chat Report View

Action Performed:

1. Sign in to staging.new.expensify.com
2. Navigate to any conversation
3. In the compose box type in a multiline hyperlink with the format and send it

Expected Result:

Multiline hyperlinked text is displayed in the conversation

Actual Result:

The multiline text is not displayed as a hyperlink in the conversation

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022014682326035401426
• Upwork Job ID: 2014682326035401426
• Last Price Increase: 2026-02-06

Issue Owner

Current Issue Owner: @aimane-chnaif

[melvin-bot]

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

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-31 19:27:14 UTC.

Proposal

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

When a user types a multiline markdown hyperlink like [line1\nline2\nline3](https://example.com), it is not rendered as a clickable hyperlink. Instead, the raw markdown syntax is displayed as plain text, with only the bare URL being auto-linked.

What is the root cause of that problem?

There are two contributing causes:

1. Regex exclusion in expensify-common: The MARKDOWN_LINK_REGEX in ExpensiMark.ts (line 77) uses [^\[\]\r\n]* which explicitly excludes \r\n from matching inside the link text portion of [text](url). This means ExpensiMark never converts multiline markdown links to <a> HTML tags in the first place -- the markdown is left as raw text.

   This exclusion was added in expensify-common PR #880 (commit 186a7a4) as part of issue #65618. At the time, the design team decided to follow Slack's behavior and not support multiline hyperlinks. However, the current issue [$250] Markdown - Multiline hyperlink is not displayed as a hyperlink #80233 indicates the desired behavior has changed and multiline hyperlinks should now be supported.

2. Inline-flex display in AnchorRenderer: In AnchorRenderer.tsx (line 145 and line 172), the anchor and its text children use styles.dInlineFlex. The inline-flex display mode collapses newline characters, so even if the regex is fixed and <br /> tags are generated inside the <a> tag, all lines appear collapsed onto a single line. This was actually the original root cause identified in [$250] Multiline hyperlink is displayed as a single line hyperlink #65618 before the design decision changed the approach.

Both issues need to be fixed together. Fixing only the regex renders the link as clickable but with collapsed lines. Fixing only the display style has no effect since the regex prevents the link from being parsed at all.

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

In expensify-common (lib/ExpensiMark.ts):
Remove \r\n from the MARKDOWN_LINK_REGEX character class so that newlines are allowed inside link text. Change [^\[\]\r\n]* to [^\[\]]* in both occurrences within the regex pattern.

In App (src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx):
Change styles.dInlineFlex to styles.dInline in two places:

• The style array on the AnchorForCommentsOnly component (line 145)
• The style array on the Text component inside renderChild (line 172)

The display: inline property preserves newline characters rendered as \n from <br /> tags, while inline-flex collapses them.

What alternative solutions did you explore? (Optional)

• Regex-only fix: Fixing only the expensify-common regex makes multiline links clickable, but all lines collapse onto one line due to inline-flex. This provides partial improvement but doesn't match the expected multiline display.
• Display-only fix: Changing only dInlineFlex to dInline has no visible effect because the regex still prevents multiline text from being parsed as a link. The markdown is never converted to HTML in the first place.
• CSS white-space approach: Considered using white-space: pre-wrap or pre-line on the anchor instead of changing the display property. This doesn't work in React Native's text layout model where display controls how flex containers handle whitespace characters.

Note on design history: The \r\n regex exclusion was a deliberate design decision from issue #65618, where the team chose to follow Slack's pattern of not supporting multiline hyperlinks. The current issue #80233 reverses that stance. The dInline fix also addresses the original rendering bug from #65618 (lines collapsing into one), so reverting the regex will not reintroduce the old problem -- multiline links will now render correctly with proper line breaks.

[melvin-bot]

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

[melvin-bot]

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

[btkcodedev]

Proposal: Fix Multiline Hyperlink Markdown Parsing

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

When users type a multiline hyperlink in the markdown format [text\nmore text](url) in the compose box and send it, the multiline text is not displayed as a clickable hyperlink in the conversation. The link remains as plain text with the markdown syntax visible, breaking the expected user experience where hyperlinks should be rendered as clickable anchors.

What is the root cause of that problem?

It's because of the package, we have two main problems though not one. The root cause exists in the expensify-common package's markdown parser (ExpensiMark.js). There are two specific issues:

Issue 1: Regex Pattern Exclusion
The MARKDOWN_LINK_REGEX pattern at line 46 explicitly excludes newline characters (\r and \n) from the link text:

// Current regex pattern
const MARKDOWN_LINK_REGEX = new RegExp(`\\[((?:[^\\[\\]\\r\\n]*(?:\\[[^\\[\\]\\r\\n]*][^\\[\\]\\r\\n]*)*))]\\(${UrlPatterns.MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');

The character class [^\\[\\]\\r\\n] means "match anything except [, ], \r, or \n", which prevents the regex from matching link text containing newlines.

Issue 2: Newline Processing Order
Even after fixing the regex, the modifyTextForUrlLinks function at line 920 applies formatting rules including the newline rule to the link text. This converts newlines to <br /> tags before the anchor element is created, resulting in broken HTML like:

<a href="url">text<br />more text</a>

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

Create a patch for expensify-common@2.0.166 with addressing the issues with the following changes:

Change 1: Update MARKDOWN_LINK_REGEX to allow newlines

File: node_modules/expensify-common/dist/ExpensiMark.js
Line: 46

// Before
const MARKDOWN_LINK_REGEX = new RegExp(`\\[((?:[^\\[\\]\\r\\n]*(?:\\[[^\\[\\]\\r\\n]*][^\\[\\]\\r\\n]*)*))]\\(${UrlPatterns.MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');

// After
const MARKDOWN_LINK_REGEX = new RegExp(`\\[((?:[^\\[\\]]*(?:\\[[^\\[\\]]*][^\\[\\]]*)*))]\\(${UrlPatterns.MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');

This removes \\r\\n from the negated character class, allowing the regex to match link text containing newlines.

Change 2: Normalize newlines before applying formatting rules

File: node_modules/expensify-common/dist/ExpensiMark.js
Lines: 917-924

// Before
const linkText = urlRegex.test(match[1])
    ? match[1]
    : this.replace(match[1], {
        filterRules: ['bold', 'strikethrough', 'italic', 'newline'],
        shouldEscapeText: false,
    });

// After
// Normalize newlines in link text to spaces before applying other rules
const normalizedLinkText = match[1].replace(/\r?\n+/g, ' ').replace(/\s+/g, ' ').trim();
const linkText = urlRegex.test(normalizedLinkText)
    ? normalizedLinkText
    : this.replace(normalizedLinkText, {
        filterRules: ['bold', 'strikethrough', 'italic'],
        shouldEscapeText: false,
    });

This preprocesses the link text to:

1. Convert all newline sequences (\r?\n+) to single spaces
2. Collapse multiple whitespace characters to single spaces
3. Trim leading/trailing whitespace
4. Remove 'newline' from the filterRules array to prevent <br /> conversion

Change 3: Simplify replacement functions

File: node_modules/expensify-common/dist/ExpensiMark.js
Lines: 220-232

// Before (line 224)
return `<a href="${str_1.default.sanitizeURL(g2)}" target="_blank" rel="noreferrer noopener">${g1.trim()}</a>`;

// After
return `<a href="${str_1.default.sanitizeURL(g2)}" target="_blank" rel="noreferrer noopener">${g1}</a>`;

// Before (line 231)
return `<a href="${str_1.default.sanitizeURL(g2)}" data-raw-href="${g2}" data-link-variant="labeled" target="_blank" rel="noreferrer noopener">${g1}</a>`;

// After
return `<a href="${str_1.default.sanitizeURL(g2)}" data-raw-href="${g2}" data-link-variant="labeled" target="_blank" rel="noreferrer noopener">${g1}</a>`;

Remove redundant .trim() calls since normalization is now handled earlier in the processing chain.

Implementation

1. Apply these changes using patch-package:

npx patch-package expensify-common

2. This creates the patch file at:

patches/expensify-common+2.0.166.patch

3. Commit this patch file to version control

4. The patch will be automatically applied via the existing postinstall script:

scripts/postInstall.sh -> scripts/applyPatches.sh

Test Branch

Please try solution at: Test Branch

What alternative solutions did you explore?

None

[abbasifaizan70]

Proposal

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

When users type a multiline markdown hyperlink in the compose box and send it, the multiline text is not displayed as a hyperlink in the conversation. Instead, it appears as plain text without any link formatting.

What is the root cause of that problem?

The root cause is that the markdown parser (ExpensiMark) doesn't recognize markdown links that span multiple lines. Standard markdown link syntax requires the link text and URL to be on a single line:

• Valid: [text](url)
• Invalid: [text\nhere](url) or [text]\n(url)

When a user types a multiline link, the parser fails to match it against the markdown link pattern because:

1. The regex pattern used by ExpensiMark expects links to be on a single line
2. Newlines in the link text break the pattern matching
3. The link is not converted to HTML anchor tags, so it renders as plain text

The parsing happens in App/src/libs/ParsingUtils.ts in the getParsedMessageWithShortMentions() function, which calls Parser.replace() from ExpensiMark. The ExpensiMark parser doesn't handle multiline links by default.

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

The solution is to normalize multiline markdown links before parsing. We'll add a preprocessing step that collapses newlines and whitespace in multiline links, converting them to single-line format that the parser can recognize.

1. Create a normalizeMultilineMarkdownLinks() function that finds and normalizes multiline markdown links
2. Call this function before Parser.replace() in the parsing pipeline
3. This ensures multiline links are converted to single-line format before parsing

Change 1: Add normalization function to MarkdownLinkHelpers.ts

After line 94 (after detectAndRewritePaste function)

App/src/libs/MarkdownLinkHelpers.ts

Line 94 in fdaac7a

/**
 * Normalizes multiline markdown links by collapsing whitespace and newlines in the link text.
 * This allows markdown links that span multiple lines to be properly recognized and parsed.
 *
 * Examples:
 *   [text\nhere](url) -> [text here](url)
 *   [text\n\nhere](url) -> [text here](url)
 *   [text\n  here](url) -> [text here](url)
 *   [text]\n(url) -> [text](url)
 *   [text\nhere]\n(url) -> [text here](url)
 *
 * @param text - The markdown text that may contain multiline links
 * @returns The text with multiline links normalized to single-line format
 */
const normalizeMultilineMarkdownLinks = (text: string): string => {
    if (!text) {
        return text;
    }

    // Match markdown links that may span multiple lines
    // Pattern: [ followed by text (possibly with newlines) followed by ] 
    //          followed by optional whitespace/newlines, then ( followed by URL followed by )
    // We use a non-greedy match to handle multiple links in the same text
    return text.replaceAll(/\[([^\]]*(?:\r?\n[^\]]*)*)\]\s*\(([^)]+)\)/g, (match, linkText, url) => {
        // Collapse newlines and whitespace in the link text
        const normalizedLinkText = linkText
            .replaceAll(/\r?\n+/g, ' ') // Replace newlines with spaces
            .replaceAll(/\s+/g, ' ') // Collapse multiple spaces to single space
            .trim(); // Remove leading/trailing whitespace

        // Return the normalized link
        return `[${normalizedLinkText}](${url})`;
    });
};

Export the function (update line 95):

App/src/libs/MarkdownLinkHelpers.ts

Line 95 in fdaac7a

export {isStandaloneURL, escapeLinkText, sanitizeUrlForMarkdown, toMarkdownLink, detectAndRewritePaste};

export {isStandaloneURL, escapeLinkText, sanitizeUrlForMarkdown, toMarkdownLink, detectAndRewritePaste, normalizeMultilineMarkdownLinks};

---

Change 2: Integrate normalization into parsing pipeline

File: App/src/libs/ParsingUtils.ts

Import statement (around line 7)

App/src/libs/ParsingUtils.ts

Lines 1 to 7 in fdaac7a

	import type {MarkdownRange} from '@expensify/react-native-live-markdown';
	import {parseExpensiMark} from '@expensify/react-native-live-markdown';
	import {Str} from 'expensify-common';
	import type {Extras} from 'expensify-common/dist/ExpensiMark';
	import CONST from '@src/CONST';
	import Parser from './Parser';
	import {addSMSDomainIfPhoneNumber} from './PhoneNumber';

getParsedMessageWithShortMentions function (around line 107)

App/src/libs/ParsingUtils.ts

Lines 106 to 111 in fdaac7a

	function getParsedMessageWithShortMentions({text, availableMentionLogins, userEmailDomain, parserOptions}: GetParsedMessageWithShortMentionsArgs) {
	const parsedText = Parser.replace(text, {
	shouldEscapeText: true,
	disabledRules: parserOptions.disabledRules,
	extras: parserOptions.extras,
	});

function getParsedMessageWithShortMentions({text, availableMentionLogins, userEmailDomain, parserOptions}: GetParsedMessageWithShortMentionsArgs) {
    // Normalize multiline markdown links before parsing
    // This allows links that span multiple lines to be properly recognized
    const normalizedText = normalizeMultilineMarkdownLinks(text);

    const parsedText = Parser.replace(normalizedText, {
        shouldEscapeText: true,
        disabledRules: parserOptions.disabledRules,
        extras: parserOptions.extras,
    });
    // ... rest of function unchanged

---

Change 3: Add comprehensive tests

File: App/tests/unit/MarkdownLinkHelpersTest.ts

Demo

Screen.Recording.2026-01-27.at.4.53.22.AM.mov

[aimane-chnaif]

Thanks for the proposals.
Please share demo videos and make sure that automated tests pass.