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

[lukemturner2020]

Ah you’re right, there is a bit of an issue. It wasn’t autobinding correctly when typing quickly. I made a change fixing that issue which is to make sure the editor is not focused which is roughly what bubble does.

if (properties.autobinding !== instance.data.editor.getHTML() && instance.data.is_focused == false)

However now the issue is that when the page initially loads, and then the data changes in the backend, the editor doesnt update. It only starts working when you start typing. So, Im looking to add an autobinding step at the beginning of the function, but facing some challenges there too.

Generally I’m trying to replicate Bubble’s autobinding behaviour on their input forms, so appreciate it if you end up finding a solution. Ill keep trying from my end.

[gradylam]

Hi Rico,

I keep getting this error when I use the recent updated versions of the plugin. Now even when I go back to the older version, I still get this error…
I was using the set a tiptap focus function in the workflow.
Really need your help on this.

Thanks.

[rico.trevisan]

It looks like the editor failed to load so the focus action couldn’t run. Maybe it tried to run before the editor was ready? Could you share your setup?

In any case, I’ll add some guardrails.

[rico.trevisan]

Release 2.2.0 - focus options + throttling back on

[rico.trevisan]

@lukemturner2020

However now the issue is that when the page initially loads, and then the data changes in the backend, the editor doesnt update. It only starts working when you start typing. So, Im looking to add an autobinding step at the beginning of the function, but facing some challenges there too.

Generally I’m trying to replicate Bubble’s autobinding behaviour on their input forms, so appreciate it if you end up finding a solution. Ill keep trying from my end.

I’ll look at the code of their Rich Text Editor again.

Ideally, autobinding with Tiptap is best with their Collaboration suite. Which is killing an ant hill with an A-10 Warthog, but it’s consistent.

[ihsanzainal84]

Hey @rico.trevisan !

Looks like Tip Tap is affecting Bubble’s Rich Text Editor plugin. I have your plugin installed for testing but I use the Bubble RTE for most parts of my apps.

So it looks like anything after version 2.0.3 will bug out the Bubble RTE. Here’s the error from Bubble’s debugger:

Bug in custom code TypeError: Right-hand side of 'instanceof' is not callable
    at i (https://cdn.quilljs.com/1.3.6/quill.min.js:7:1608)
    at Object.r [as create] (https://cdn.quilljs.com/1.3.6/quill.min.js:7:1256)
    at new t (https://cdn.quilljs.com/1.3.6/quill.min.js:7:21385)
    at initialize_quill (PLUGIN_1580238841425x582072028873097200/Rich-Text-Editor-update--Rich-Text-Input-.js:587:19)
    at HTMLDocument.reconcile (PLUGIN_1580238841425x582072028873097200/Rich-Text-Editor-update--Rich-Text-Input-.js:881:32)
    at e (https://masjids.sg/package/run_debug_js/a9823c5ef13764033d9b268e6fce6c84fb28ec23912c12702f41866023329b2e/xfalse/x25/run_debug.js:10:30158)
    at t (https://masjids.sg/package/run_debug_js/a9823c5ef13764033d9b268e6fce6c84fb28ec23912c12702f41866023329b2e/xfalse/x25/run_debug.js:10:30460)
    at root (https://masjids.sg/package/run_debug_js/a9823c5ef13764033d9b268e6fce6c84fb28ec23912c12702f41866023329b2e/xfalse/x25/run_debug.js:10:31823)

Hope this helps!

Just want to add I don’t use it in Live so no rush for a fix for me!

[rico.trevisan]

OMG! Thanks for sharing, let me take a look at this.

[gradylam]

Hi Rico,

Thanks for the reply. My set up is quite simple. The element is in a groupfocus element. When another element is clicked, it shows the groupfocus element. Then when the group the TipTap is in is clicked, it focus the Tiptap. But the issue only shows using plugnin version 2.0.2. I do have a few TiaTap element on the same page though.

Here’s some screens on the setup.

[rico.trevisan]

@ts11

Menu ID Ref’s — It seems like you can’t use the same group for both the bubble and floating menus. It would be nice if that were an option, though I understand it’s probably not a priority.

Finally figured out how to find all the bookmarks in this thread, going back through them. I misread your request, and started implementing the UniqueID extension.

This could be useful if you want to add a way to refer to a specific part of the text. For instance, if you want to add notes to a section, etc…

I need to find a way to expose this in a good manner. Probably a list of all IDs + selected ID.

---

In any case, I think I’ve got an idea of how to implement this menu for all. I’ll try after I get this unique ID feature ready.

[parag]

Is anyone experiencing problem with the plugin in safari or any apple devices?

[2706mason]

Any idea if/when mentions will be available?

Thank you!

[rico.trevisan]

I’m back from holidays (again) taking this out of the fridge. Here’s a sketch of the current backlog:

• investigate crash when Tiptap is loaded with other plugins: Bubble’s Rich Text Editor, Universal Video Player Plugin. – my hunch is that the root cause are shared libraries and/or the fact that I’m including the library inside the plugin (instead of calling them from a CDN).
• better documentation + tutorial video
• node id: this depends on a couple of pull requests on Tiptap’s Github. I’m keeping my eye on them.
• mentions.

[rico.trevisan]

A note about autobinding (aka my nemesis). @aj14 had a question and I think that the solution might be worthwhile sharing here.

He wanted to be able to set the initial content and then have autobind pick up from there. You can use Set content with autobind: Loom | Free Screen & Video Recording Software | Loom

[gradylam]

Hi Rico,

Welcome back from holiday. I run into another issue this morning. Whenever I click on a link in the TipTap, two tabs open at the same time for the link.

Could you look into that? It started doing that this morning in Chrome but not in Safari. I am using an old version of the plugin 2.0.2. I did not update to the new versions because somehow I am not able to load the newer version properly. The content just went blank. See example screenshot. This is the version 2.0.2

Simply updating to the latest version. It just went blank.

But if I try any version newer than 2.0.2. It either gives me an error message or it just goes blank.

Thanks for you help!

Grady

[michael.basckin]

Hi. First of all I love TipTap so thanks so much!

I’m facing issues when there are multiple tiptaps on the same page with different styles because every TipTap on the page is inheriting the styles of the last TipTap. I want the TipTaps to be able to have different styles without messing with the other TipTaps on the page.

Thanks for any help.

[michael.basckin]

Another issue is that since the 2.1 update and all updates after, the plugin has ‘broken’ a couple other plugins on my app across all pages even when a tiptap isn’t placed on the page. For example, the super popular “image compressor” plugin by Renato Asse doesn’t work at all if TipTap plugin is updated past 2.03.

[rico.trevisan]

Yeah, that’s unfortunate. I’m aware of that and trying some different solutions. I’ll keep you posted on how this evolves.

[rico.trevisan]

I think I finally got it fixed.

Doing a few tests before I push this version.

[gradylam]

Hi Rico, any luck pushing the latest update? I am still on 2.0.2. Any version newer than that just doesn’t work in my app. I know all good things take time. You are doing an awesome thing for the community. I am cheering for you here, bro.

Grady

[rico.trevisan]

Oh! I never hit ‘post’ on this!

Release 2.2.1 - fix conflict with Bubble’s Rich Text Editor

• under the hood: I’ve removed the attempt to bundle the libraries and just call them as a normal plugin.

That puts a hamper on my attempts to add the paid Tiptap extensions. I’ll have to find a different route.