Mention Suggestions

[davevilela]

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]

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]

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]

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]

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?

https://github.com/Expensify/react-native-live-markdown/assets/18126630/e8f39ee3-4c1e-48ce-8383-cc8fe4f6e280

[Skalakid]

@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]

@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.

[tomekzaw]

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

[Bob142403]

+1 for enabling custom parsing rules. Seems like you just need to expose additional option parameter which will merge into exist parsing rules?

[tomekzaw]

Yes, actually here's the PR: https://github.com/Expensify/react-native-live-markdown/pull/439