Fix cursor positioning on android on markdown style change

[Skalakid]

Details

Related Issues

Expensify/App#40504

Manual Tests

1. Modify the MarkdownTextInput component in App. tsx with the following code:

     <MarkdownTextInput
        multiline
        autoCapitalize="none"
        value={value}
        onChangeText={(val) => {
          if (val.includes(':+1:'))r {
            setMarkdownStyle({emoji: {fontSize: 30}});
          }
          setValue(val.replaceAll(':+1:', '👍'));
        }}
        style={styles.input}
        ref={ref}
        markdownStyle={markdownStyle}
        placeholder="Type here..."
        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
        selection={selection}
      />

2. Clear the whole text
3. Enter 👍
4. Check if the cursor is positioned correctly (after the emoji)

Linked PRs

[robertKozik]

@Skalakid Is it testable in example app?

[BartoszGrajdek]

@Skalakid Is it testable in example app?

Bump 👀

Please add some test steps 🙏🏻

[robertKozik]

I've tested on E/App - working like a charm. I didn't find any regressions in example app as well. Changes are quite straightforward so I'll approve it now.

[Skalakid]

@BartoszGrajdek @robertKozik Sorry, I forgot to add test steps. The issue is in E/App because we are changing text and styles (for example changing 👍 into an emoji). We can reproduce it in our example app only after app modifying App.tsx file. For example:

      <MarkdownTextInput
        multiline
        autoCapitalize="none"
        value={value}
        onChangeText={(val) => {
          if (val.includes(':+1:'))r {
            setMarkdownStyle({emoji: {fontSize: 30}});
          }
          setValue(val.replaceAll(':+1:', '👍'));
        }}
        style={styles.input}
        ref={ref}
        markdownStyle={markdownStyle}
        placeholder="Type here..."
        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
        selection={selection}
      />

I updated the test steps ;)