[Due for payment 2025-12-03] [$250] Room - Room description with markdown is shown as html in LHN

[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.48-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/a
Email or phone of affected tester (no customers): Dreamnitethedragon kaaligamba@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Launch app
2. Open admin room
3. Tap header - description
4. Enter a text eg: j and save
5. Go to LHN and note chat report
6. Room description text is displayed correctly
7. Go back to description
8. Change room description with markdown
   eg: # j and save
9. Go to LHN and note chat report
10. Note description with markdown is shown as html tags

Expected Result:

Room description with markdown must not be shown as html in LHN.

Actual Result:

Room description with markdown is shown as html in LHN.

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

Bug7000278_1762845934641.Screenrecorder-2025-11-11-12-49-21-657.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021988440710522900785
• Upwork Job ID: 1988440710522900785
• Last Price Increase: 2025-11-12

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[thelullabyy]

Proposal

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

Room description with markdown is shown as html in LHN.

What is the root cause of that problem?

We didn't convert html to text here

App/src/libs/ReportActionsUtils.ts

Line 2259 in be30752

return `${translateLocal('roomChangeLog.updateRoomDescription')} ${originalMessage?.description}`;

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

Need to convert to text

        return `${translateLocal('roomChangeLog.updateRoomDescription')} ${Parser.htmlToText(originalMessage?.description)}`;

Can add new param shouldConvertHtmlToText and only pass true in LHN

What alternative solutions did you explore? (Optional)

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.

[nkdengineer]

Proposal

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

Room description with markdown is shown as html in LHN.

What is the root cause of that problem?

The originalMessage?.description is HTML

App/src/libs/ReportActionsUtils.ts

Line 2259 in be30752

return `${translateLocal('roomChangeLog.updateRoomDescription')} ${originalMessage?.description}`;

and we don't convert this to text here

App/src/libs/SidebarUtils.ts

Line 896 in be30752

result.alternateText = getUpdateRoomDescriptionMessage(lastAction);

App/src/libs/OptionsListUtils/index.ts

Line 758 in be30752

lastMessageTextFromReport = getUpdateRoomDescriptionMessage(lastReportAction);

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

We should convert the message to text here. We shouldn't convert to text inside getUpdateRoomDescriptionMessage because when coping to clipboard, we want to copy the fully markdown.

result.alternateText = Parser.htmlToText(getUpdateRoomDescriptionMessage(lastAction));

App/src/libs/SidebarUtils.ts

Line 896 in be30752

result.alternateText = getUpdateRoomDescriptionMessage(lastAction);

lastMessageTextFromReport = Parser.htmlToText(getUpdateRoomDescriptionMessage(lastReportAction)); 

App/src/libs/SidebarUtils.ts

Line 896 in be30752

result.alternateText = getUpdateRoomDescriptionMessage(lastAction);

What alternative solutions did you explore? (Optional)

Some other options:

1. We can define shouldParseToText pameter for getUpdateRoomDescriptionMessage to parse the message to text if this param is true and then pass it false heree

App/src/libs/SidebarUtils.ts

Line 896 in be30752

result.alternateText = getUpdateRoomDescriptionMessage(lastAction);

2. From the sidebar, we can parse result.alternateText to text after all conditions which change the result.alternateText value

App/src/libs/SidebarUtils.ts

Line 896 in be30752

result.alternateText = getUpdateRoomDescriptionMessage(lastAction);

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/~021988440710522900785

[melvin-bot]

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

[IjaazA]

Proposal

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

When a room description contains markdown (e.g., # j), it gets converted to HTML (e.g., <h1>j</h1>) and stored. However, in the Left Hand Navigation (LHN), the HTML tags are displayed as plain text instead of being stripped, showing <h1>j</h1> instead of just j. This creates a poor user experience where HTML markup is visible in the navigation.

What is the root cause of that problem?

The root cause is in ReportActionsUtils.ts in the getUpdateRoomDescriptionMessage() function. This function is used to generate the message text that appears in the LHN when a room description is updated. The function directly includes the HTML description without converting it to plain text:

function getUpdateRoomDescriptionMessage(reportAction: ReportAction): string {
    const originalMessage = getOriginalMessage(reportAction) as OriginalMessageChangeLog;
    if (originalMessage?.description) {
        return `${translateLocal('roomChangeLog.updateRoomDescription')} ${originalMessage?.description}`;
    }
    return translateLocal('roomChangeLog.clearRoomDescription');
}

When a room description contains markdown (e.g., # j), it's stored as HTML (e.g., <h1>j</h1>). The originalMessage.description contains this HTML, and it's being directly concatenated into the message string without conversion. This causes HTML tags to appear as text in the LHN's alternateText field.

Additionally, HeaderView.tsx also displays the room description and uses Parser.htmlToText(), but this function may not strip all HTML tags correctly in certain cases, which could contribute to the issue.

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

Fix the getUpdateRoomDescriptionMessage() function in ReportActionsUtils.ts to convert HTML descriptions to plain text:

1. Convert HTML to plain text: Before including the description in the message, convert it from HTML to plain text using Parser.htmlToText().

2. Add a fallback HTML tag stripper: After using Parser.htmlToText(), add a regex-based fallback that removes any remaining HTML tags. This ensures that even if htmlToText() doesn't work perfectly for all HTML structures, we still get clean plain text.

3. Handle edge cases: Ensure the conversion handles various HTML structures correctly and trims whitespace.

The updated code in ReportActionsUtils.ts:

function getUpdateRoomDescriptionMessage(reportAction: ReportAction): string {
    const originalMessage = getOriginalMessage(reportAction) as OriginalMessageChangeLog;
    if (originalMessage?.description) {
        // Convert HTML description to plain text to avoid displaying HTML tags in messages
        const plainTextDescription = Parser.htmlToText(originalMessage.description).replace(/<[^>]*>/g, '').trim();
        return `${translateLocal('roomChangeLog.updateRoomDescription')} ${plainTextDescription}`;
    }
    return translateLocal('roomChangeLog.clearRoomDescription');
}

Additionally, update HeaderView.tsx to ensure the description is properly converted when displayed directly:

const reportDescription = useMemo(() => {
    const htmlDescription = getReportDescription(report);
    if (!htmlDescription) {
        return '';
    }
    // Convert HTML to plain text, ensuring all HTML tags are stripped
    const textDescription = Parser.htmlToText(htmlDescription);
    // Fallback: if htmlToText doesn't strip all tags, remove them manually
    return textDescription.replace(/<[^>]*>/g, '').trim() || textDescription;
}, [report?.description]);

What alternative solutions did you explore? (Optional)

1. Use RenderHTML component: Instead of stripping HTML, we could use the RenderHTML component to properly render the HTML in the LHN. However, this would be overkill for the navigation and might cause layout issues or performance problems.

2. Fix Parser.htmlToText: We could investigate and fix the underlying issue in Parser.htmlToText() from ExpensiMark. However, this would require changes to the external library and might affect other parts of the codebase that rely on its current behavior.

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-12 12:43:58 UTC.

Proposal

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

Room - Room description with markdown is shown as html in LHN

What is the root cause of that problem?

1. When user taps on "Save", we trigger UpdateRoomDescription with action name UPDATEROOMDESCRIPTION

2. We don't parse the html to markdown in this specific case here

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

1. We need to change that html to markdown first

else if (lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOM_CHANGE_LOG.UPDATE_ROOM_DESCRIPTION) {
result.alternateText = Parser.htmlToMarkdown(getUpdateRoomDescriptionMessage(lastAction));
}

What alternative solutions did you explore? (Optional)

n/A

Result

[PiyushChandra17]

@jliexpensify @thesahindia Just a side-note here, i think we need to preserve markdown and show as it is in LHN so perhaps i think my proposal is different than rest of the existing ones, since it uses Parser.htmlToMarkdown. Thanks!