Instantly Highlight/Style Text in an Input

Need help Plugins
1

I’m looking for a way to highlight text in a multi-line input that matches text in a list, or based on regex. I’ve tried all the existing highlight plugins and they do not actually style the text in the input, they only style text in a separate text field from the input.

Any ideas on how I might be able to do this with an input?

3 Likes
2

Exact same issue here, any luck aj11? :wave:

3

I wasn’t able to find any solution.

4

Dang, I’ll let you know if I get anywhere with it

1 Like
5

Please do, I would greatly like to implement this.

6

Ok, managed to find a hacky way to make this mostly work for me (good enough for what I need, which is similar functionality to Google Docs). I’ll explain the set-up below, may or may not be what you’re after :wave:t2:

Here’s the set-up:
A. Text selector plugin (Text Selection Plugin | Bubble) to capture highlighted text
B. Use rich text input (Rich Text Editor Plugin | Bubble), not multi-line, for the main text area
C. Autobind the rich text input so the source text is in the database and can be edited live
D. Repeating group for the ‘comments’ that typically sit on the right-hand side of a google doc

Workflow:

  1. User highlights string of words (A above)
  2. User selects call to action, triggering workflow that does:
    A. Saves the highlighted text as it’s own item in the database (A above)
    B. ‘Find & replace’ highlighted words with the same words + BBcode in the database (e.g. was this ’ Hello world’, and is changed to this ‘’ [color=rgb(65, 65, 191)][highlight=rgb(233, 229, 255)] Hello world [/highlight][/color].’) (B & C above)
  3. Using a repeating group on the right-hand side of the text, display the ‘highlighted text’ from (D above)

The main issue for me is finding a way to select the highlighted text from within the rich text editor, to scroll to the respective item in the repeating group, as an anchor link, like you would if you were using google docs. Also, the rich text formatting is quite limited.

2 Likes
7

I’m trying to achieve something similar to this, but get stuck when trying to find all the entries the user highlighted and saved. So if there is a long post and the user highlights several words, I want the find&replace feature to highlight every word/phrase. But so far I can only do 1 at a time. Any ideas?

8

Hi @manuelmaccou - it sounds like you have got it working for one word / phrase at a time, maybe you simply place that in a recurring back-end workflow, to keep running until all words / phrases are complete? A bit more on recurring workflows here:
Recursive workflows in Bubble (OR, HOW TO LOOP THROUGH A LIST) - YouTube

9

Hi @aj11 .
I’m working on an advanced AI powered plugin that will replace the need for complex regular expressions. One of the actions the plugin will provide is AI transform which allows you to describe what are the changes you want for the text and the AI engine will do it for you.

For example you can take an html snippet and ask it to highlight a specific word/phrase and it will return a new updated html, like this:

image
image1284×1706 186 KB

I’m hoping the plugin will become public in the next few days. In the meanwhile you can play around with it in the demo application. You can find the transform function here:

AI Transform (Natural Language Parser)

Good Luck!
Eldad

10

I need something similar.

I have a rich text input with a value that is autobound to a value in the DB.

Lets say the rich text input is [string 1]. [string 2]. [string 3]. If [string 2] is in another table in the DB, then highlight [string 2] in the rich text input to the user (so they know its already a note they have saved before).

Is this possible?