[$250] mWeb - Private Notes - Link changed to text the second time that is saved in private notes

[lanitochka17]

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: 9.0.40-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal team

Action Performed:

1. Open the staging.new.expensify.com website
2. Open any chat with another user
3. Tap on the chat´s header
4. Tap on "Private Notes"
5. Paste any link
6. Tap on "Save"
7. Tap on "Private Notes" again
8. Verifiy that the link is still displayed as link in the private note preview
9. Open the private note
10. Remove the content and paste the link again
11. Tap on "Save"
12. Verify the content is still displayed as a link in the private note preview

Expected Result:

Link pasted in private notes of a chat, should be still displayed as a link in the private note preview, the second time that is saved

Actual Result:

Link pasted as private note on a chat, is changed to text in the preview, the second time that is saved

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/92719d19-2f5b-451d-9359-01046ea2aa00

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021839842995114805148
• Upwork Job ID: 1839842995114805148
• Last Price Increase: 2024-09-28

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot[bot]]

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

[truph01]

Proposal

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

Link pasted as private note on a chat, is changed to text in the preview, the second time that is saved

What is the root cause of that problem?

• We always remove the link in:

https://github.com/Expensify/App/blob/70a8a16114d68d871a89a2fb0aef841fac1c948d/src/pages/PrivateNotes/PrivateNotesEditPage.tsx#L97 when editing.

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

• We can change:

https://github.com/Expensify/App/blob/70a8a16114d68d871a89a2fb0aef841fac1c948d/src/pages/PrivateNotes/PrivateNotesEditPage.tsx#L97-L98

            const editedNote = Parser.replace(privateNote.trim());
            ReportActions.updatePrivateNotes(report.reportID, Number(route.params.accountID), editedNote);

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Shahidullah-Muffakir]

Proposal

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

When a user pastes a link into the "Private Notes" section of a chat, it appears as a clickable link initially. However, if the user deletes the content and pastes the link again, it is displayed as plain text instead of a clickable link in the preview.

Note: This issue occurs on all devices, not just mobile web (mWeb), including desktop Safari.

What is the root cause of that problem?

Right now, there’s no system to make sure that pasted URLs are always turned into clickable links before saving the note again. Because of this, when a link is pasted a second time, it gets saved as plain text instead of a clickable link.

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

To resolve this problem, we should implement a consistent conversion from plain URLs to Markdown links every time a note is saved. This can be achieved by applying the URL-to-Markdown conversion just before saving, ensuring that links are always clickable regardless of how many times they are pasted or edited.

We will use this converter function:

    const convertUrlsToMarkdown = (text: string): string => {
        const urlRegex = /(https?:\/\/[^\s]+)/g;
        return text.replace(urlRegex, (url: string) => `[${url}](${url})`);
    };

Here: https://github.com/Expensify/App/blob/70a8a16114d68d871a89a2fb0aef841fac1c948d/src/pages/PrivateNotes/PrivateNotesEditPage.tsx#L93

This will be the modified code:

 if (privateNote.trim() !== originalNote.trim()) {
            // Convert any plain URLs to Markdown links before saving
            const noteWithLinks = convertUrlsToMarkdown(privateNote.trim());
            editedNote = ReportActions.handleUserDeletedLinksInHtml(noteWithLinks, Parser.htmlToMarkdown(originalNote).trim());
            ReportActions.updatePrivateNotes(report.reportID, Number(route.params.accountID), editedNote);
        }

Before adding my changes:

https://github.com/user-attachments/assets/5989a8ad-290e-4d28-a387-3d68ed7f9c0d

after adding the changes:

https://github.com/user-attachments/assets/55bdfcb0-0506-4315-84ff-f14af3a30cea

[raza-ak]

Proposal

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

mWeb - Private Notes - Link changed to text the second time that is saved in private notes

What is the root cause of that problem?

The root cause lies in the "Parser.ts" component, where URLs are not passed back correctly to the "PrivateNotesEditPage" main component. The URL is being returned in markdown format instead of as an actual URL, causing it to display as plain text rather than a clickable link.

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

We should update the logic in the Parser.ts component to extract the URL from the incoming htmlString and pass it back to the main component properly, ensuring that the state value is correctly set as a clickable link.

Changes: In src/libs/Parser.ts, modify the htmlToMarkdown function in the ExpensiMarkWithContext class to convert any<a> tagsback to plain URLs before passing them to the markdown parser:

This change ensures that URLs remain properly formatted as links when passed to the main component.

Video:

https://github.com/user-attachments/assets/184bb666-8872-4d0d-a8fd-24957d6f577c

[greg-schroeder]

Next up is proposal review