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

Hi Rico, this plugin is incredible. But I have one problem - the selected_html returns an empty string. selected_text works fine, but if you are selecting something with html tags - and then trying to use it, all the formatting will be gone. Is there anyway to fix this?

1 Like

It appears the read only mode isn’t working. It allow me to enter my cursor in the editor and enter text. Any thoughts / suggests on how to make the editor actually not editable? thank you!

It’s the same issue with the Bubble RTE. I just add a conditional “If RTE is hovered disable drag.”

1 Like

Ah, nice, forgot about that condition being available. Thanks @ihsanzainal84 :raised_hands:

1 Like

I should be able to get the current dev version out the door and then work on this and a few other requests that have been trickling in.

Somewhat related, does anyone have a good model for a sponsorship / Patreon? There quite some people who are using this plugin in production and I would like to offer a prioritized support tier.

1 Like

Hey Rico - congratulations on all that demand! Just chiming in with how I handle SLAs in case it’s valuable to you. I offer a stripe subscription (looks like this) and link it to terms (like this). In short folks who are subscribed get priority support via any channel they want to reach me on (email, phone, bubble forum, video). I could probably improve the logistics of this with requiring people to message me on certain channels. The volume of support tickets haven’t been so high as to see a benefit from having any kind of reporting dashboard (like to see number of open tickets, time to resolution, etc) but that may be something for you to consider. Hopefully you find something that works well for you!

2 Likes

2024-04-11 11.06.24

Release 3.4.0: multiple collab providers

  • you can now use other providers: liveblocks.io and my own rico.wtf.
  • reorganized and added a bit more documentation.
  • for rico.wtf, just register yourself, get the app_id and the JWT secret.
  • rico.wtf is free while in beta

Hat-tip to @zelus_pudding for Bask. It makes plugin life so much easier.

Next up: I’ll try my hand on the @mentions.

3 Likes

Question Bek: where do you recommend pasting this CSS? There are different options within the editor itself.
Thanks!

I believe that the important thing is that this code is rendered/read by your browser.

So, you can add an HTML element anywhere in your app. On the page itself, or reusable where the TipTap is, or perhaps in a universal element of your app (menu/header/footer). You can also include it in the SEO/Meta tags settings.

That’s what I did.
<style>#menueditor {overflow: visible !important;}</style>
And in the TipTap element I added ID Attribute menueditor.

I hope it helps you, brother! :handshake:

2 Likes

Sorry for the late reply. I actually ended up just placing it under the:
Settings - > SEO/metatags → Script in Body

1 Like

I’m not sure where my mistake is. When autobinding was still active, I entered content in html in my Tiptap element and the changes such as making highlighted text bold were saved via autobinding and displayed in my preview. But now it just doesn’t work anymore and I think I’m making an obvious mistake somewhere.

My goal is to mark a word in the editor, for example, and display it in bold by clicking on the “bold” icon => bold a tiptap => in the preview and in the best case also in the editor


Bildschirmfoto 2024-04-17 um 10.26.45
Bildschirmfoto 2024-04-17 um 10.27.22

I recorded a video to show you my problem. Maybe it’s totally obvious to you guys: Problem with Actions and updating the preview | Loom

Release 3.4.2 - fix: enabled? and initial content

  • the enabled / disabled option will finally work at first load.
  • initial content will be set properly when not using collaboration
  • updated underlying libraries to the latest release 2.3.0

A small toast :clinking_glasses: to typos making my life exciting.

2 Likes

Should I add this CSS to Tiptap?

FYI: there’s also a setting that allows you to access the base CSS directly via the plugin.

It’s deployed inline the HTML and its unique to each editor.

Yes please!

Finally working on mentions. It starting to take shape.

2024-04-30 08.23.24

3 Likes

Made some further progress yesterday. load a list from Bubble, adds a mention span, got styles to work, key navigation, but I’m stuck trying to get the typed text to be deleted.

2024-05-02 06.33.37

2 Likes

Release 3.4.3 - FacePalm edition :lady_beetle:

  • all the actions had been restored - they were wiped since 3.4.0

Release 3.5.1 - Autobind resurrected :mending_heart: :zombie:

  • Autobind works again
  • reset content however does not ← this has been causing the bug with autobind. I’ve reported a bug to Bubble
  • Autobind also works when switching content

Autobind has a small delay, it only triggers when the user stops typing for 1 second. Should I make this configurable in the future?
2024-05-03 08.46.30

Autobind also works when switching documents
2024-05-03 08.46.52

4 Likes

@rico.trevisan can you provide some steps to get the liveblocks integration working?

Hey @rico.trevisan, congratz on the autobind ressurection, my workaround was not really UX :muscle:

Just spotted a problem :
I work with class=“featured-image” to spot the main image of the document. The problem is that autobinding (just as the classic saving) removes it automatically.

I do not have any workaround for the moment, as a regex find&replace would set class=“featured-image” to all images

If you could allow classes to stay in the HTML, I would really appreciate!
Thank you very very much :heart: