[WEB] Fix cursor moves several characters when deleting markdowns on multiline message

[VickyStash]

Details

Fix cursor moves several characters on android web platform when deleting markdowns on multiline message.

Related Issues

Expensify/App#50687
Expensify/App#57024
Proposal: Expensify/App#50687 (comment)

Manual Tests

1. Enter a bold text in multiline.
2. Delete * at the end of the text.
3. Make sure the cursor position is expected.
4. Experiment with typing quickly when there are a lot of markdown styles inside the input to make sure there are no side affects due to updates.

WEB

web.mp4

WEB iOS

ios-web.mp4

WEB Android

android-web.mp4

Linked PRs

N/A

[Skalakid]

I see that these changes break quick typing a bit, since now we need to pass a slight delay to our tests. I'm worried that on slower devices the required delay will increase, and some bugs may appear :/
Also, there are some more places in our library where the input structure is modified, for example, the insertText function in the main web component. Maybe we also need to add runAfterInteractions there. Can we check if we can remove this delay in any way?

[Skalakid]

Why do we need this?

[VickyStash]

The default test timeout is 30sec, with added delay this test takes ~40sec to run, so I needed to increase the timeout.

[tomekzaw]

Can we use fake timers instead? https://jestjs.io/docs/timer-mocks

[VickyStash]

Can we use fake timers instead? https://jestjs.io/docs/timer-mocks

It's a Playwright, not a jest test.
Maybe we can try to customize the pressSequentially implementation, but I don't feel really strongly about the idea...

[tomekzaw]

Oops, you're right.

[VickyStash]

I see that these changes break quick typing a bit, since now we need to pass a slight delay to our tests. I'm worried that on slower devices the required delay will increase, and some bugs may appear :/

The delay I've added is a simulation of human typing. But I understand you concern about slow-performant devices.

Also, there are some more places in our library where the input structure is modified, for example, the insertText function in the main web component. Maybe we also need to add runAfterInteractions there.

I'll check it!

Can we check if we can remove this delay in any way?

I've tried to do it on Friday but had no luck unfortunately.

[VickyStash]

Also, there are some more places in our library where the input structure is modified, for example, the insertText function in the main web component. Maybe we also need to add runAfterInteractions there.

It looks like all of the places that update the input structure use the updateInputStructure method anyway.

For example insertText calls handleOnChangeText => handleOnChangeText calls parseText or other methods that later calls parseText => parseText calls updateInputStructure.

I've also done some testing on the real low-performant device (Android - Redmi Note 7) and haven't had problems, but we def will need to keep an eye on it.

[Skalakid]

LGTM

[os-botify]

🚀 Published to npm in 0.1.265 🎉

[Skalakid]

Hello @VickyStash, unfortunately, InteractionManager.runAfterInteractions causes the following issue in Expensify NewDot App. I think we need to revert your changes, since it will be a deploy blocker

[VickyStash]

Hello @VickyStash, unfortunately, InteractionManager.runAfterInteractions causes the following issue in Expensify NewDot App. I think we need to revert your changes, since it will be a deploy blocker

It feels like this PR was reverted by mistake, as the original issue existed on E/App main, but the updates of this PR never reached the main.
@Skalakid Have you tested the issue with/without these PR updates to confirm?

[Skalakid]

Yes, I've tested the issue with and without your PR changes. I've also tested different versions of the Live Markdown, and only when InteractionManager.runAfterInteractions is added the issue appears. Here is more info