🤌 Rich text editor with real-time collaboration (Tiptap)

Thanks.

Just to make sure I understand: you want to add a specific class to one of the images in the document?

I create HTML documents with a specific class, then edit them in tiptap. So the class is already present, but when I save, it disappears.

Maybe it is an optimization feature, as all the HTML code becomes inline too when I load it in tiptap (not that convenient for some reasons but really not as important).

Before :

After :

1 Like

Got over a couple of humps this weekend, mentions is working as it should. I just need to organize the fields and expose the styling options / CSS.

You will be able to feed it a base URL and a data type and 2 fields: id and label. Then the mention will be a link to that base URL + id

2024-05-06 17.38.22

What do you think, any feedback?

1 Like

Thanks for sharing. I’ll take a look if there’s way to add a tag by individual image. Let me try to get this Mentions out the door and then I’ll take a look.

1 Like

Hi @rico.trevisan

Really awesome plugin you have here. I’m playing around with it.

I tried to use the actions in your editor, Bold, Italic et cetera. It seems none of them work though… not through a Bubble menu nor a Floating menu or a standard menu. I can’t get it to work in my app either.

Do you have any idea why that is perhaps?

Yes! I need to update the demo app. :man_facepalming::face_palm:

A few weeks ago I botched all the plugins actions. I just need to update it. And also update the description of the plugin because it still says no autobinding.

Anyway, I’m almost done fixing the utility to reorganize the parameters of the plugin.

Awesome, thanks for your reply!

Just putting the final touches on mentions. After I launch that, I’ll take a look at the emoji plugin.
cc: @jv.farinelli


You can adjust the colors of Mentions. The text is a Link so it will follow whichever formatting you have set for that.

2 Likes

Incredible! I’m looking forward to the emoji feature

Release 3.6.0 - Mentions :speech_balloon:

  • you can now @ someone
  • the autobind was too aggressive at 250ms, I’ve raised it to Bubble’s normal 2000ms delay.

Please take the Mentions for a spin and let me know what you think, improvement ideas you might have, etc…

I’ll now take a look at @satreoscar’s request and then dive into emojis.
Ah, yeah, and I should do some tutorials on how to use the extension. For that I’ll have to shave…

4 Likes

Thank you s0 much, you saved my life, thanks making it for free,
thanks again

not working with json, even I marked Json Content : Yes

Hey Rico, spot something else : every link added comes from
< a href=“https://mylink.com”>link< /a>
to
< a target=“_blank” rel=“noopener noreferrer nofollow” href=“https://mylink.com”>link< /a>

Is it something tiptap native?

I think it’s an option that I could expose. I’ll take a look this Friday.

1 Like

I noticed in the forum history that there are several questions similar to mine, but I couldn’t find any answers. How can I optimize the size of images uploaded by users? Or create a popup with a prerequisite that the image size should be a maximum of 2MB?

The file uploader has a setting to limit it: How to Use the File Uploader Element | Bubble!

Cool, but does this tutoril also apply to the plugin you developed?

OMG, sorry! I thought it was a question on a different thread. I don’t know how I got this stuff mixed up.

I don’t think there is anything on the plugin where I could limit uploads. Maybe you could use a file uploader, upload the file, and then have Tiptap add the image to it as a link.

Alright haha, I will try this alternative. Thank you for the response. :smile: