Symbols in text to perform functions and change color

On twitter or slack you can use @ and # to perform different functions within a block of text.

Also, when typing an # or @ programs give the user some form of feedback as they type to let them know it is working… Such as greying the text within the hashtag etc.

Are either of these possible in Bubble?

Ok so I it looks like some of this is possible using Regex? Not even sure what that means…

So far I have not figured out if it is possible to have the colors change as you type… Or to have those # or @ turn into a link…

You can’t do it “in editor” but what you can do is have an input area and a preview areas (like Ghost etc).

Then you can use something like Markdown to format the text. You can also turn an @ into a mention, there are a few topics on that subject.

Is Markdown a plugin? Forgive my naivety!

Markdown is a more complex version of the way we type stuff into the forum …

Like this is bold is actually **this is bold**

There are ways to turn markdown into HTML, although it isn’t all that simple.

There may be a way to change colour as well.

So there is…

Roses are <span style="color:red">red</span>, violets are <span style="color:blue">blue</span>.

Not exactly user friendly, but you could maybe do some find and replace to make it simpler.

2 Likes

Hmm, Is it in the realm of possibility that a plugin could be created for this? Like if I were to pay a developer to build this for me (the ability to make text change color with a # before it) is it functionally possible that it could be done in Bubble?

It depends on what you are really trying to do.

Are you trying to change the text colour with #red or something like that.

Or are you trying to do mentions and hashtags ?

Change the text color while typing… It sounds like the other things are already possible? right?

It isn’t possible in the existing input box.

If you have a static color change in mind, there’s a very rudimentary option.

Set a condition on the Input element: When This Input is not empty. Select Font Color as the property, set color to red (or whatever). This results in:

  • When Input is empty, and user is not actively typing in the element, the text color will be black (or default).

  • When Input has some previously entered text, even if user is not actively typing in the input, text color will be red

  • When Input is empty, and user begins actively typing, the text color will turn red (may be a slight delay)

Not very elegant, but partial solution. You might be able to get a workaround for #2 above by setting an additional condition “When input isn’t focused…” and set Font Color to black. This may conflict with the first condition, though, so may not be entirely reliable.

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