Expensify/react-native-live-markdown

Mention Suggestions

Closed this issue · 7 comments

davevilela commented

Hello,

I'm wondering if anyone has ever tried implementing mentions suggestions as the user types using this library.

I would be glad if anyone could help me with some example implementation.

Thanks !

tomekzaw commented

Hey @davevilela, thanks for opening this issue.

What exactly do you mean by "mentions suggestions"?

I believe that overlaying suggestion box can be implemented separately from MarkdownTextInput, at least that's how it's done in the Expensify app.

If you would like to somehow autocomplete the missing characters of an username, this can be done just like it was a regular TextInput from React Native.

Let me know what's exactly on your mind.

davevilela commented

Hey @tomekzaw, thanks for replying!

By "mentions suggestions," I mean overlaying a suggestion box just like GitHub does when the user types "@".

How does the Expensify app handle this? Can you point me to the most relevant parts of the implementation so I could understand how to achieve this?

Thanks in advance!

Skalakid commented

Hi @davevilela, the Expensify app displays an overlaying suggestion box by analyzing the current text value and cursor position. You can find how it is done inside ComposerWithSuggestions component. It is a general component that combines our Live Markdown Input with a custom suggestion box.

More info about how it particularly works and filter users using current input you can find in Suggestion and SuggestionMention component. Let me know in case of any questions 😄

davevilela commented

Hey @Skalakid,

I have put together an example following the implementation of SuggestionMention. There are some aspects I’m having trouble understanding, such as how I can implement a custom parser to correctly highlight user mentions.

Is this library even suited for this kind of use case?

Screen.Recording.2024-06-04.at.18.43.12.mov
Skalakid commented

@davevilela Currently react-native-live-markdown library works only with the ExpensiMark parser from the expensify-common library. For now, you can only change parsing rules by adding patches to it inside our library. Enabling custom parser usage in Live Markdown Input is on our roadmap and we will add it in the near future

davevilela commented

@Skalakid @tomekzaw thank you so much guys! I think the path that I will follow right now is forking the library and modifying the parser with my own rules.

  • 👍1
tomekzaw commented

@davevilela This should work fine. Stay tuned for upcoming improvements around parsing logic! 😄 Closing the issue.

  • 🎉1