[Due for payment 2025-02-18] [Due for payment 2025-02-13] [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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864412596340849116
• Upwork Job ID: 1864412596340849116
• Last Price Increase: 2024-12-04

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap

[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

[289Adam289]

@luacmartins the LiveMarkdown bump has been merged! I've opened the pr for review

[luacmartins]

Amazing! I pinged C+ and I'll also review it today.

[luacmartins]

Just for posteriority, we need to address the following features after this PR is merged:

1. The syntax keys, e.g. in, from, type, should be in supporting text color
2. Only highlight exact autocomplete values

Coming from #54403 (comment)

[luacmartins]

#54403 is merged! Great work @289Adam289! We can start working on the follow ups: #50949 (comment).

[289Adam289]

@luacmartins I've prepared a draft PR that addresses both follow-up issues. There's one more thing that needs to be addressed before I can open it: one more LiveMarkdown bump to version 0.229, which includes fixes to issues I've encountered during work on the follow-ups. Unfortunately, the workflow publishing the package to npm has failed, probably because of an expired token.

I will open a PR with a bump as soon as the package is available on npm. Meanwhile, here is a video showing how everything looks with the package installed manually.

Screen.Recording.2025-02-03.at.17.21.07.mov

Let me know what you think.

[luacmartins]

Looks awesome! Thanks for working on it. Is there something that I can do to help with the markdown bump?

[Kicu]

I also have to say this looks super neat, and also quite fast because of great work of our friends from Live markdown 😁
CC @tomekzaw @BartoszGrajdek

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @Kicu is from an agency-contributor and not due payment
• ROLE: @ikevin127 paid $(AMOUNT) via Upwork (LINK)
• Contributor: @289Adam289 is from an agency-contributor and not due payment

BugZero Checklist (@sonialiap)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1864412596340849116/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[289Adam289]

Is there something that I can do to help with the markdown bump?

@luacmartins Could you help me to push forward both prs:
ND: #56309
OD: https://github.com/Expensify/Mobile-Expensify/pull/13405

It is important that they get merged simultaneously

[luacmartins]

Work is ongoing on this PR #56243

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.94-25 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Highlight autocomplete value #54403

If no regressions arise, payment will be issued on 2025-02-13. 🎊

For reference, here are some details about the assignees on this issue:

• @Kicu does not require payment (Contractor)
• @ikevin127 requires payment (Needs manual offer from BZ)
• @289Adam289 does not require payment (Contractor)

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.95-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Bump react-native-live-markdown to 0.1.230 #56309
• Highlight autocomplete value on a match #56243

If no regressions arise, payment will be issued on 2025-02-18. 🎊

For reference, here are some details about the assignees on this issue:

• @Kicu does not require payment (Contractor)
• @ikevin127 requires payment (Needs manual offer from BZ)
• @289Adam289 does not require payment (Contractor)