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

I tried a bunch of stuff yesterday and failed. Given the twisted history that I have with autobinding, I think that the wise thing to do is to turn it off until I grow some further skills.

If anyone has ideas, let me know.

When the Input Enabled checkbox is unchecked (so the input should be disabled), it is a little buggy. Sometimes when a page is loaded, the tiptap input is still enabled and users can still type inside the tiptap for a short while before the input is disabled. Its almost like the tiptap is enabled by default when its loaded and only becomes disabled when it is fully loaded. Is there any way to fix this so that it is disabled immediately when the page is loaded?

Thanks

1 Like

The plugin has stopped working completely. I think it was because of the Bubble update. Now it’s showing a broken plugin message:

The plugin :pinched_fingers: Rich text editor (Tiptap.dev) / action H3 a Tiptap threw the following error: anonymous@PLUGIN_1670612027178x122079323974008830/—Rich-text-editor–Tiptap-dev–element_action–Tiptap-H3-.js: 3:72
lib-browser/pluginservice.js/pluginservice3.create_code/<@https://mgnifi.co/package/run_debug_js/095afa0ea36b23400aaff758552e9eca28e213d55b503519ee041993dcf6a8e0/xfalse/x28/run_debug.js:481: 677
lib-browser/pluginservice.js/_interpret_raw_plugin_def/run/</</</</<@https://mgnifi.co/package/run_debug_js/095afa0ea36b23400aaff758552e9eca28e213d55b503519ee041993dcf6a8e0/xfalse/x28/run_debug. js:608:3485 (please report this to the plugin author)

Would you mind sharing a bit more detail on your setup? It would be useful for me know what the javascript console is displaying, too.

I’m unable to reproduce this with my test app: Bubble | No-code apps

It was working normally until the Bubble update, but now it gives this error.

Follow recording:

Thanks. While trying to check the error this morning I saw that some plugins of mine were throwing a similar error. I’ve reported a bug to Bubble because as far as I could troubleshoot, the error is not on the plugin side.

Thank you very much! I hope Bubble solves it, because the plugins you created are excellent!

@rico.trevisan

I discovered here that ā€˜floatingMenuDiv’ is undefined.

Maybe it’s happening if the script is trying to access a DOM element that doesn’t exist or hasn’t been loaded yet, or something like that.

Maybe Bubble changed the structure of this element.

Any news @rico.trevisan ?

None yet. I’m on holidays with bad Internet connectivity.

Any news @rico.trevisan ?

I’m having all sorts of challenges with all the collaboration libraries (again!). I’ll likely trim the plugin to only the editor and spin out a different one for collaboration. Give me a couple of days.

I will have to remove autobinding.

Today’s goal was to fix autobinding, prohibit actions from running before the editor is ready, add a couple more style controls, and finally record a tutorial.

Nope.

I’ve spent the whole day today battling autobinding x Tiptap. I have been unable to find the root cause of autobinding wiping the editor contents. No luck.

The closest I’ve come was to identify that v2.7.1 works but the following version doesn’t. I figured I should be able to restore my dev environment to that version and rebuild from there. Nope. The same exact code doesn’t work in my dev environment.

Luckily there are ways around autobinding. In the next version:

  • remove autobinding
  • set a throttle function on the Content updated trigger so that you can hook a Save function and it won’t explode your WU.

Release 3.1.0: :headstone: removed Autobind

  • removed autobind
  • added ability to remove headings and detect if paragraph is a body aka has no heading tags applied to it.
  • made commands more robust

As explained above, there’s a bug somewhere between Tiptap and Bubble that clears out the editor’s content after every save. I’m still looking for a solution but it has to go for now.

Commands now will not run if the editor is not yet active.


With these things out of the way, I will take a look at your bug report.

Release 3.2.0: better error handling for BubbleMenu and FloatingMenu

  • the editor will no longer crash if it doesn’t find the Bubble element that should be the BubbleMenu or FloatingMenu
  • it will report to the Bubble debugger
  • and it will log to the browser’s console

Release 3.2.1: better error logging

  • fixed typo in error messages
  • added report to debugger so that users can easily understand what crashed

And if you expand the debugger

Release 3.3.0: styling for ul and ol

  • you can now access the styling of ul (aka bullet lists) and ol (aka numbered lists)
  • it gives you direct access to the CSS
  • and it supports nested styles (that’s a browser feature not a Tiptap feature).

2024-01-25 22.16.07

cc: @v.chavda

2 Likes

Hey @rico.trevisan, incredible plugin. Thanks!

Quick question around the YouTube feature. Explained here: Loom | Free Screen & Video Recording Software | Loom

Any help would be much appreciated.

Cheers,
Daniel

Thanks for the bug report. Let me take a look.

Wow, something very funky happening there. I can reproduce it. The weird thing is that the src remains if you export the JSON.

I’m not sure what’s causing it. I can’t find any code in the extension-youtube library that would strip it out. I’m going to keep investigating. I’m wondering if there’s some code to prevent injection attacks that is seeing a youtube url and removing it. Weird.

1 Like