How to Change the Color of #Mentions in a Multiline Input in Real-Time?

Hey,
I need help figuring out how to make mentions (#mention) change color in real-time within a multiline input.

Context:

  • I am using the “@Mention Input Dropdown” plugin.
  • This multiline input is part of a chat box in a chatbot.

Images:

  • Image 1: Shows what happens when a user starts to type a #.
  • Image 2: Here the user has selected a #mention. This is the text that I want to change color.

Thanks in advanced!

CleanShot 2023-10-31 at 16.57.31

Hi. Did you ever figure this out? I have purchased a plugin that takes care of the mentions. However, I want my text that I retrieve back from the my table to show a different color for text that starts with @.
I appreciate if you could let me know if you found a solution?

Thanks,

1 Like

I haven’t. Partial solutions that don’t solve the user experience. Lmk if you find a solution. I think a solution could be to use some java but I need to explore it more.

Same here. Spent a few hours trying to get this accomplished with find&Replace and Regex. But no matter what Regex pattern I tried, I couldn’t get this to work. I think that’s the way to go. I’ll let you know if I find the regex pattern.

Basically you do find & Replace option at the end of the text, and then there is a checkbox for regex pattern. You check that and try to find the right pattern.

Yours is different from mine a little bit. You’re trying to do it on the fly as the user is typing in an input field. Using bubble, the only way I can think of is doing a check after every letter is entered which could impact your user experience.

Maybe what you could do is trigger an event as soon as the @Mention plugin is used, applied or changed.

1 Like