[$250] Markdown - Cursor position moves to start when inserting a new break in a hyperlink

[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: 1.4.85-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: https://expensify.testrail.io/index.php?/tests/view/4641558
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any conversation
3. Send any hyperlink using format
4. Get into editing mode on the hyperlink sent on step 3
5. Position the cursor to be at the end of the text content right before the last "]" and insert a line break

Expected Result:

The cursor positions itself in the beginning of the new line

Actual Result:

The cursor positions itself in the beginning of the first line

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

Bug6517276_1718718866342.bandicam_2024-06-18_16-47-50-581.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019e1861b7a8f9e8fd
• Upwork Job ID: 1803124326197693470
• Last Price Increase: 2024-06-18

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[melvin-bot]

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

[melvin-bot]

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

[huult]

Proposal

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

Cursor position moves to start when inserting a new break in a hyperlink

What is the root cause of that problem?

When the user inputs a newline character at the end of a Markdown string, it disappears after parsing. Therefore, when comparing conditions, this discrepancy can lead to incorrect evaluations

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

Trim the Markdown input prior to condition checks to mitigate whitespace discrepancies.

In parseExpensiMarkToRanges at parser, should add .trim() like in the code snippet below:

function parseExpensiMarkToRanges(markdown: string): Range[] {
  try {
    const html = parseMarkdownToHTML(markdown);
    const tokens = parseHTMLToTokens(html);
    const tree = parseTokensToTree(tokens);
    const [text, ranges] = parseTreeToTextAndRanges(tree);

-   if (text !== markdown) {
+   if (text !== markdown.trim()) { 

POC

Screen.Recording.2024-06-19.at.04.06.39.mov

What alternative solutions did you explore? (Optional)

[ikevin127]

@huult Thanks for your proposal. A few clarifications before I can reach a point where I can verify your proposal:

1. The root cause of your proposal is not clear enough. Can you expand on the why of the following statements ?
   • When the user inputs a newline character at the end of a Markdown string, it disappears after parsing
   • when comparing conditions, this discrepancy can lead to incorrect evaluations
2. I wasn't able to fix the issue applying the suggested solution. Can you detail how you implemented your solution in the Expensify app such that it works ?

Note: I applied the suggested changes in the react-native-live-markdown repo, compiled and used the compiled react-native-live-markdown-parser.js to replace in Expensify/node_modules/@expensify/react-native-live-markdown both parser and lib/parser folders -> my Expensify web app reloaded but I can still reproduce the issue.

Here's a console log of the variables after implementing the solution:

Given these results, it would make sense that the error is still thrown from that if condition. So I'm curious if you left out a certain part of the solution from your proposal or if not - how come the issue is fixed on your side ? 🤔

Note: Looks like the difference between original / processed input is \n regardless of trimming or not.