šŸ¤Œ Rich text editor with real-time collaboration (Tiptap)

Showcase Plugins
471

Also noticed what might be a bug. When I instpect the HTML of ordered/unordered lists , the text inside the <li> is wrapped in a <p> as well.

<ul>
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>three</p>
</li>
</ul>

Should definitely not be a <p> element inside there.

472

Okay, back againā€¦ but I just want to say @rico.trevisan you are officially my favorite Bubble plugin developer. I wish you had paid plugins, because Iā€™d love to feel like Iā€™m giving back to you for your awesome work.

This plugin has me excited (for the first time ever) about building rich text experiences on Bubble. Iā€™ve pretty much found the solution to my previous comments. But one thing I am struggling to figure out now is:

When a user pastes Markdown text, the tiptap field doesnā€™t automatically convert it. It catches the inline code, bold, italics, and strikethrough, but none of the other formatting such as headings, code blocks, ordered/unordered lists.

Is there a way to make that happen?

1 Like
473

Another issue - it looks like the Initial Content field is being used more as a data source field. If I understand it correctly, the initial content should only be whatā€™s loaded on initial page load and subsequent database changes to that field should not impact whatā€™s seen on the front end (until a page refresh); however, whenever I update the database field specified by initial content, itā€™s reflecting on the front-end immediately. This shouldnā€™t be the case, should it? It leads to a pretty funky experience where, as Iā€™m typing, the database is updating on the back-end and text is reverted on the front-end to the value written to the DB, even if Iā€™ve already written more.

474

Hi @rico.trevisan

Do you have any plans to add the extensions below?

Also a resize image/video function? There is a community plugin for that:

Thanks for your job.

2 Likes
475

Nice finds, I have not been keeping up with the new extensions. Iā€™m still on holidays for this week; Iā€™ll pick this back up this weekend.

3 Likes
476

Iā€™ve find a problem. My users are dropping base64 images on editor and itā€™s breaking my application. If you could add an option to enable/disable base64 dropping it would help me a lot.

allowBase64

Allow images to be parsed as base64 strings <img src="data:image/jpg;base64...">.

Default: false

Image.configure({
  allowBase64: true,
})
1 Like
477

Release 3.13.0 - FontFamily

  • You can now set the FontFamily of the selected text.
    What does it accept? :person_shrugging: Not sure ā€“ not much documentation. Maybe all Google Fonts?

@julianno.09 : mind testing it and letting me know if it works?

1 Like
478

Wow, looks great! I tested some Google Fonts and everything seems ok. Thanks.

Iā€™ll test more throughout the day. If there are more updates to release, Iā€™m here to test them :grin:

479

Release 3.14.0 - Color

  • you can now set and unset colors to specific parts of the text
1 Like
480

Release 3.15.1 - Selection color

  • you can now see which color the selection has
3 Likes
481

Release 3.16.0 - Font family exposed

  • you can know which font family is currently selected
3 Likes
482

:hugs: Flattery will get you everywhere with me.

Indeed, Tiptap can handle Markdown if youā€™re typing, but not when you paste a block of markdown into the editor. Iā€™ll look into this next weekend.

In the meantime, Iā€™m going to continue building my Tiptap course (which you can buy thus supporting this Bubble plugin).

1 Like
483

Purchased. Not sure how much time I have to dive in, but Tiptapā€™s AI functionality would be dope to integrate into my current products.

1 Like
484

thanks

485

Hey, whenever I try to manually save content itā€™s moving the cursor to the end position. How can I prevent this?

486

Hey @rico.trevisan - I donā€™t believe setting colors work correctly.

I have tried manually setting colors, and dynamically setting them. The highlight only stays yellow, and the change color action doesnā€™t do anything.

Is there a specific way to set it up?

1 Like
487

Yes, thereā€™s one step I forgot to mention ā€“ you have to add Color to your list of Extensions. Iā€™ll add a debugger message so that you at least get some feedback.

488

Release 3.17.0 - Warns if extensions missing

  • If you try to set or unset Colors or FontFamily, it will warn in the Bubble debugger if the Extension is not loaded.
1 Like
489

This is just an opinionated suggestionā€“feel free to ignore.

I think it would be better for the floating bar to appear BELOW the line that it will apply to, rather than inline. It feels like itā€™s in the way before the user starts typing.

1 Like
490

Thanks @rico.trevisan - works fine now.

Suggestion:

Turn most of your actions into singular but dynamic actions.

For instance - setting Heading, you can just make one action and have it so you have a drop-down option for all the specific headings. That would give us ONE action (ā€œSet Headingā€) with a dynamic property or option list.

Or the Add/remove items, you can just make the actions add OR remove based on a dynamic yes/no.

If you need help optimizing it, let me know - been going through my plugins and making sure they are as dynamic and modular as possible recently.

1 Like