Making tweet-like input with hashtags & autohighlighting - Paid help welcome!

[maryamahmed007]

Hello Everyone,

I’ve spent 3 days on this and really would love someone to guide me on how I can do this in Bubble - happy to pay for an hourly session with a Bubble developer.

I’m trying to create a custom input like this:

Here are the main features of this input:

• Automatically colors custom hashtags (starting with $), @mentions and normal hashtags (#) as blue
  -When a user types an @mention or $hashtag, a dropdown list appears with choices of users or pre-defined hashtags from the Bubble DB to choose from
  -When the user enters more than 250 characters, the extra text turns red

What I’ve learned so far in my research:

• Bubble uses the HTML 'textarea’ element for the multiline input element. ‘textarea’ elements do not support inline styling, so there is no way to change the color of select words inside using the multiline input element
  -What I need is a ‘div’ of type ‘contenteditable’ to achieve the above look. I can use the built-in HTML element in Bubble to achieve this. So far so good.
  -I also need custom javascript for the above
  element to parse and detect the hashtags & @mentions in real-time.
  -I have found many pre-built jquery, react, and javascript libraries to do this

This is where I’m stuck. How can I import or use a pre-built javascript library in Bubble? Do I need to create a plugin? Or is there a way to integrate the JS code without a plugin?

If there’s any developers out there who can help me build this out for a reasonable paid fee please let me know. I have found the library I want to use for this, just need some help importing into Bubble.

Thanks so much!

~ Maryam

[nocodeventure]

@wegetdesign built something similar you might want to ask @omar3

[nocodeventure]

Plugin WGD Mentions

WGD Mentions A new plugin from our team, that allows you to customise and use mentions within an input and multiple input element. Add the element to the page to customise the colours, rounded corners. We even hidden the scroll to make it look that much more smoother. See Demo Page: [styles] Quick set up On page load add, to the workflow - Setup mentions Set any character to be the trigger i.e @, #, etc Set the search of the data that you wish to show in the list Set up style Add WGD …

[maryamahmed007]

Thank you so much @nocodeventure On first glance it seems like the WDG plugin should take care of the mention and hashtags, I will need to try it out to see if it can handle all 3 (@, # and $) at the same time.