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

[leffica.shared.1]

it seems a problem popped up today,

Sorry for the Korean,

the editor duplicated
I only inserted one editor in the edit page, but there are two with default value in it

only the second one works with workflow

[rico.trevisan]

Release 2.0.2: pinned library versions + autobinding changes

• I’ve pin all the library items to a build version (v125).
• removed the autobinding delay (previously set at 2 secs)

@petter : could you test with adding images now?
@TipLister : I’ve set the editor for the demo version public again. There’s a small security risk for me, but it’s minimal.

A small explainer on libraries

Tiptap loads some 40 libraries in order for it to work. Each one of these libraries have other dependencies so they load those dependencies.

Each of the libraries have a version number and a build number. The version number is set to one that I have tested. I never had to set it to a build number because the builds are quite stable. In the past week, one of the Tiptap.dev builds created a mismatch between the libraries this plugin loads and its dependencies.

So, I had to go through each library and find the correct match.

[rico.trevisan]

@maryamahmed007

Is it possible to use it for mentions and without a toolbar? I’m trying to mimic this Headless WYSIWYG Text Editor – Tiptap Editor

I’ve added this as the next feature to implement.

[moonlygreat]

upgraded plugin to the latest and it’s fixed
thanks!

[hugors00]

2 Tiptap element on the same page seems to mess up the entire page with the latest update.

[rico.trevisan]

Could you share your use case?

One of my tests is 2 Tiptap on one page and it worked well this morning

[hugors00]

This is happening because we are having multible hidden pages in page, also both of the tiptaps are having auto-binding. When going from one page to another, the lag starts.

[petter]

@rico.trevisan image saving now works like a charm! Thanks Rico!

[rico.trevisan]

@hugors00 I just added a test to my poor-man’s test suite and it seems to be working. However, it did just strike me that my tests are conducted with probably tiny documents compared to what you might be using.

How big are your documents?

Nonetheless, there are a handful of alternatives:

• don’t use autobind, only save on demand or on blur, etc… Yes, I understand that this is not ideal, but it is the quickest option.
• use the collaboration feature. The collaboration feature uses differential updates, meaning that it only sends what has changed. The updates are tiny.
• I implement the Ydoc feature and send differential updates on autobinding. There are a few challenges under the hood and user experience. Each doc will also have to have an extra field to save the document in this Ydoc format.

---

FYI: my test

[k.kulbir]

Hi Rico,

I appreciate the great work you are doing and your funny style.

I just noticed a typo on the plugin’s “Property Editor” see below:

You also might want to keep the style consistent like changing “Floating Menu Theme” to “Floating menu theme” as shown to match rest of the titles.

Not a dealbreaker but it just makes things more pro.

[rico.trevisan]

I blame late-night-Rico for typos.

Thanks a ton, I appreciate those details (even if I suck at them).

[hugors00]

We are using a few Tiptaps and also some inside repeating groups. The issue comes from the newest update.

Currently we are choosing between:

1. Double tiptaps without lag (2.0.1)
2. No double tiptaps but lags up the whole page (2.0.2)

We are indeed using auto-binding and did not find any improvements from disabling it.
Collaboration feature doesn’t seem to be working with Initial content.

Here is 2 videos of how it impacts our app with the different versions. Hopefully you can find out what is causing the issue.

2.0.1 Not laggy but double content.mov

2.0.2 No bouble text but lags the whole page up.mov

[rico.trevisan]

Thanks! On the 2.0.2 example I can see tons of errors in the console. Would you mind running through this example again with your browser’s console open?

[k.kulbir]

Hi Rico,

The plugin has a bug (it wasn’t there before).

“This input is enabled” is not working as it should. Regardless of if its checked or not, I am able to edit the content. I shouldn’t be able to edit if this field is not checked right.

Second thing is, the word count is not working unless you edit the text. Once you make a change the to the text, the work count works.

Kindly fix this!

• Kulbir

[k.kulbir]

Hi @rico.trevisan,

Were you able to identify the bug that’s causing the “This input is enabled” option to malfunction? Despite unchecking this option, all my blog visitors can still edit the Rich Text data.

I hope you can fix this as it is causing bad user experience at the moment.

[rico.trevisan]

I’ll look into it as soon as I can make some time.

Have considered using an HTML element instead of the actual editor? The HTML element will be much lighter to load if it’s just for reading.

[k.kulbir]

Thanks @rico.trevisan , I have tried using HTML element but the formatting from Titap disappears and makes the text it look ugly.

I am saving Tiptap’s HTML in a thing and then displaying that in a HTML. But if I use Tiptap to display the text it stay beautiful.

Am I doing something wrong?

Your help would greatly appreciated.

[vitor370]

This looks really great but I really didn’t understood a few basic things?
Although is awesome, I dont the collaboration feature.

But the editor looks so great, I’ve spent an hour copying the editor and trying to make it work…

How do you enabled this? The whole data type as doc or uploaded images element?

Without, I’m unable to copy the editor and adapt for the app.

How do you enabled for the floating and bubble group to appear inside the Tiptap element?

How to insert image from a picture uploader? Workflow for the popup to upload is simlpe, but how do we insert in on the editor’s input like the floating group does?

[k.kulbir]

Thank you for bringing up the suggestion of using the HTML element. I have now incorporated the HTML element into my project and combined it with aesthetically pleasing CSS code. I am grateful that this plugin remains free, even though it may result in slightly lower maintenance and support standards.

For those who are curious, I am currently storing the CSS code in an option set. I dynamically add it to the HTML element just before including the HTML output from Tiptap, which is saved in the database within Bubble.

[rico.trevisan]

While testing the plugin this morning I saw that — when the plugin is used inside a reusable and if you have multiple of those reusables on a page — the events and triggers were going into the wrong reusable.

I’m quite certain that worked before. I’m looking into it.