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

Hi Rico!

How are you changing the document?

Because I change the parent based on the URL, and the autobind is not working. It cannot distinguish that the parent has already been changed by the URL, and before that it already replaces all the content of the second document with the first.

Thanks for nudging me. I’ve spent sometime trying to understand how to do this (and also add custom classes to different images in a document). It’s just outside my skill level. I’m planning hire a Tiptap expert to help me with this but that’s gonna cost me. I might try to set up a ā€œfund a featureā€ campaign so that I can dedicate more time to this. I’ll get back to you guys this Friday.

2 Likes

You can take a look under the hood of my test app: tiptap-plugin-dev | Bubble Editor
Would that help? Otherwise, could you share an example app of what you’re trying to do so that I can better troubleshoot it?

(it’s messy in there :sweat_smile: , I’ve gotta Marie Kondo this thing)

Oh okay, I naively thought it would be easy !
ā€œfund a featureā€ is a good idea anyways! I’m interested.

The autobinding has the same problem in your test app lol

See how autobinding is firing just by switching from one document to another:

GravacaodeTela2024-06-12as14.07.12-ezgif.com-video-to-gif-converter

Oh, it took me a bit to understand the problem – I’m a bit thick. The problem is that autobinding is firing a save when simply switching documents.

Hmm… :thinking: I’m gonna go (re)read some more code of the other editors to see how they handle it. If I just turn off the throttle and let the firehose of updates would be simplest, but that floods the Bubble app and WU will sky rocket. Maybe I’ll have to put a little switch to pick up if the content has changed and not fire the autobind.

Do you have any ideas?

I think me (and ChatGPT) got something working. Would you mind testing it again?

The solution was to add a flag when there’s a programmatic update and drastically lower the debounce timeout, from 2000 ms to 300.

1 Like

Tested it and works fine, good job!

Do you intend to release a new version in the next few days? Thanks

Released.

1 Like

Anyone else having problems adding YouTube videos?

I added it successfully, but when refresh the page, Tiptap does not render the iframe (only the first time). There are no modifications to the code, no classes removed, etc., the space is blank and simply does not render.

I couldn’t reproduce it in the demo because I can’t save the changes.

Hello Rico, how are you? I’m using tiptap editor in my community to create and display my posts, however, when showing a repeating group in my app’s feed that shows all posts with a tiptap element to view the post’s HTML, it causes the screen to freeze a lot, especially in apps mobile, is there any way to fix it? I need to at least see the texts and images in the feed

Hey @rico.trevisan - big fan of the editor.

Here’s an improved version of your writing:

We are building an internal tool with your editor and are encountering issues with the ā€œA TipTap Content is Updatedā€ workflow. This workflow triggers a save action to our database whenever a user stops typing. Unfortunately, this leads to an excessive number of updates, rendering the tool impractical for production use.

Additionally, there’s a secondary issue: after the rich text content has been updated workflow is run, the cursor refocuses at the bottom of the input field post-workflow. This means that when a user tries to add an H1, H2, or H3 header immediately after, the wrong text gets highlighted causing a really jumpy UX.

Currently, we are using the ā€œinput is not focusedā€ workflow as a workaround. However, this has its own drawbacks: refreshing the page while the input is focused results in lost content being a big one.

Ideally, we would like to use the ā€œA TipTap Content is Updatedā€ workflow as intended, but with fewer database updates and no issues when adding headers.

Do you have any suggestions on how to achieve this?

Many thanks.

1 Like

Thanks for all the details.

I could denounce this until the user stops typing (aka like the autobinding).

I’ll check what I can do. Maybe I can add a refocus action that keeps track of the current location and — after you run your save workflow — you can add this refocus action to put the cursor back where it was.

Hey @rico.trevisan - thanks for the prompt reply!

I think these suggestions would go a long way.

In regards to the refocus action - Assuming it could be triggered when text is highlighted or when a user clicks a header button outside of the bounds of the TipTap editor, that would likely solve the issue.

Let me know if there’s any more details I can provide.

Many thanks.

@rico.trevisan - one other bug to report for you is the Set Content Workflow adds additional HTML Tags.

For example, the action ā€œInsert contentā€ adds additional<p>tags after every paragraph.

This one is less pressing but just wanted to mention. Take care!

Release 3.7.0

  • you can now set the update delay
  • default is 300ms

update_delay

2 Likes

Thanks @rico.trevisan - this helps a lot.

The re-focus cursor flow would also be super useful but I appreciate the fast turn around on this.

1 Like

The solution would be not to use the Tiptap editor but just an HTML element. The problem will be getting the styles to work correctly.

I need to finish a little utility plugin that allows you to more easily configure styles for an HTML element…

In the meantime, you can inspect an existing Tiptap element and start from there.

Then you could copy that content.

into your HTML element.

You will have to remove the .ProseMirror classes from everywhere but nothing that ChatGPT can’t help you with.

Hello Rico,

Do you have plans to add image/video resizing functionality to the editor?

There is a community-made solution for this:

Hi! Just downloaded the plugin but im havign some issues with formatting. I would like to stream my answers on the plugin but the formatting doesnt help. In the bubble RTE it does stream with the format.

With that i manage to use the insert content action to put the formatted text and it worked! but now when my user writes anything on it, the formatting goes wrong again

  1. Formatting with import content:
    image

  2. Fomatting after i modified only one letter:
    image

Any ideas on what can i do get the formatting i need or to be able to stream llms responses on the plugin with the correct formatting. Thanks.