[HOLD live-markdown 439][Search v2.5] [Autocomplete] Highlight autocomplete key and selected value

[lakchote]

See https://docs.google.com/document/d/1o-Hp-tK8Z_BAcE-KRiXQicPH04qNr525EIxlG8J4RxM/edit?tab=t.0#bookmark=id.hy4h27dpoz37

[289Adam289]

Hi! According design doc I think this issue should be on hold for Expensify/react-native-live-markdown#439 pr that will allow our parser to be passed as worklet to live markdown.

[ikevin127]

Not overdue, on hold for Expensify/react-native-live-markdown#439.

[ikevin127]

Still on hold for Expensify/react-native-live-markdown#439.

[ikevin127]

Still on hold for Expensify/react-native-live-markdown#439.

[ikevin127]

Still on hold for Expensify/react-native-live-markdown#439.

[lakchote]

Still on hold for Expensify/react-native-live-markdown#439.

Same.

[Kicu]

Issue update

Quick reminder:
we wanted to use https://github.com/Expensify/react-native-live-markdown to implement highlighting in Search autocomplete. I recently discussed the best way to implement this with @tomekzaw who is the author of the PR.
Tomek has done a great deal of work 👏 to allow for the LiveMarkdown component to accept any JS code as parser via a prop.
Now we need to actually implement this in Expensify/App, which will require updating the version of live markdown (and some other packages) and tweaking the current code for RNMarkdownTextInput component.

This should not be a very big change in the code, but as any change it might introduce some small bugs.
In the old implementation of livemarkdown, the ExpensiMark parser was bundled together with the MarkdownTextInput component and was always used.
In the new version of MarkdownTextInput, the component accepts a parser prop, which can be any JS function adhering to correct interface.

I will try to push this forward as smoothly as possible, but we will require some help with testing.

Next steps :

1. I'm testing if the new version works correctly with Expensify locally (<--- we are here)
2. We will want to create a test build, and would need your help in getting some QAs to test it and see if there are no regressions for Composer with ExpensiMark.
3. merge Support custom parsing logic (pass worklet as parser prop) react-native-live-markdown#439 and release new version
4. bump version of react-native-live-markdown in E/App; pass expensiMark as parser for Composer, pass autocompleteParser for SearchRouter
5. Profit $$$ 😉

We will also need to bump reanimated and expensify-common (minor version for both). Thankfully @blazejkustra is already looking at bumping reanimated here: #52024 so this will speed things up.

I will open a draft PR soon for tracking the progress.
Feel free to ask anything. The workletization of parser in LiveMarkdown editor is a feature that multiple people would like to see added to the library. It will give us a lot of freedom, if we want to change how our parsers behave in future.

CC @luacmartins @lakchote @JmillsExpensify @tomekzaw @289Adam289 @SzymczakJ

[blazejkustra]

We will also need to bump reanimated and expensify-common (minor version for both). Thankfully @blazejkustra is already looking at bumping reanimated here: #52024 so this will speed things up.

I created the issue earlier today, would you mind assigning me? @lakchote

[luacmartins]

Nice! Thanks for the detailed updated @Kicu! Looking forward to the PR and testing!

[lakchote]

Not overdue, progress still happening!

[lakchote]

Not overdue, progress still happening!

Same

[Kicu]

Quick update because this is taking some time.
I tested the liveMarkdown PR with worklets and it worked great on - I was able to actually use live markdown and pass it down any JS code as a parser 👍

Unfortunately this breaks on mobile, and @tomekzaw needs to spent a bit more fixing bugs.
I will post another update next week, meanwhile we need to bump some other libraries to be ready for worklets - which other people are doing.

[luacmartins]

I appreciate the update @Kicu!

[tomekzaw]

Unfortunately this breaks on mobile, and @tomekzaw needs to spent a bit more fixing bugs.

This bug should be fixed with software-mansion/react-native-reanimated#6706, we'll test it out in E/App early next week.