@mention Highligth on text element

Hello!.
I wonder if anyone knows how to highlight specific text from a Text Element (comment posted). I tried using Hashtag Highlighter but as a third party plugin, its causing side effects on the application and it doesn’t allow me to POST a comment for a Repeating Group, for example like Twitter.
Tagger plugin only helps with dropdown but not highlighting @mentions and make them clickable.

I’ve looked for a solution for this for a while and could never find one.

Following.

I’ve just done this for our app. This is what we’ve got.
There might well be a :find & replace route using <spans>. We’re using a custom Froala WYSIWYG plugin so we built a pre-rendering layer that adds styled <spans> around the tags. Happily give you access to our Froala plugin if you go that route, though you’d need to fiddle with the pre-rendering stuff to make it work in your context.

2 Likes

Oh that is amazing! Yes, anything you could send on how to create this would be awesome.

Any reason find-and-replace with Bubble’s built-in BBCode wouldn’t work? Or am I misunderstanding something?

Here’s an example of one approach that uses regex and Bubble’s BBCode support. A bit of CSS can be used to improve the readability of the highlighted text.

3 Likes

Thank you. I understand the css part. Is there a way to also make this @mention clickable within the find and replece?

I haven’t tried it, but it seems doable. Simply specify a hyperlink (in BBCode format) as the replacement text. If you’re not sure of the syntax, just create a hyperlink in any text element using the rich text editor (RTE) and note the text that gets generated for the element when you exit the RTE. If memory serves, it’s of the form [url=https://my.link.com]link text[/url].

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.