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

[rico.trevisan]

I’m biting the bullet and creating the styles. It will be a mega-wall of settings though…
Ah, it will accept px or rem or any other size unit for fonts.

[Wosoke]

Sorry, but the only thing I can get are some prints, because I have already changed my app to the input content way, which works fine, and I can’t go back anymore…

Bug

My tiptap text content:

Summary

How I save the content:

Summary

The initial content:

Summary

The bug: After a while (like when the cache is gone), my text turns into this:

Summary

But my data is still correct:

Summary

[ux11]

Hi @rico.trevisan. As a developer, I was trying to build a new option in the toolbar, for my users embedd a video from youtube. But using the “Set content” option, I’m unnable to insert the embedd code from youtube, that starts with “<iframe…”, maybe the editor is not ready to show videos, is that right?

And instead of cleaning all of my content (using the “Set content” option), I would like to “Insert content” on my page to add the video. Is that possible in any way?

Thanks!

[bryanrcosta]

@rico.trevisan I’ve got another bug report:

Problem:
If the option “Fit height to content” option is checked, you cannot insert an image (it briefly appears and then disappears).

Steps to replicate:

• Enable the “Fit height to content” option for the tiptap editor
• Configure a smple workflow to insert an image into tiptap (use the workflow)

The work-around I found:

• Disable “Fit height to content”
• Add the following css (I add this since I need the “fit to height” behavior):

#tiptapElementIDAttribute { overflow: initial !important; }

Let me know if you need more info on this

[33077a]

Hi Rico, I can’t add an image if auto-biding is selected. It`s not working. Without auto-biding its working

[33077a]

I found a solution by adding a plugin – Copy Content Of Group To Clipboard Plugin | Bubble that allows you to copy an object and insert it into your Rich text editor block using CTRL+V

[rico.trevisan]

Could you share a copy of your project? I would love to see the error myself.

[33077a]

Can do a zoom or TeamViewer if you want

[33077a]

I dont know how to share on bubble

[rico.trevisan]

Indeed, it’s not easy.

Make a copy, add me as a collaborator. Then record a little video showing me what’s happening. I’ll try to reproduce it myself.

[33077a]

Is it possible to add a youtube video or some iframe in the nearest future?)

[33077a]

For insert youtube its code:

<div class="youtube-block">
            <div style="padding-top:56.17021276595745%" class="w-embed-youtubevideo youtube-container"><iframe loading="lazy" src="https://www.youtube.com/embed/ELbNfuLVF1c?rel=0&amp;controls=1&amp;autoplay=0&amp;mute=0&amp;start=0" frameBorder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media"
                allowfullscreen="" ></iframe></div>
            </div>

[33077a]

Found a temporary solution for embed youtube video/iframe with find and replace

[ux11]

Hi @33077a , can you show step-by-step of how do you make to render youtube videos, please? If it possible, with the text in english will be very good. Thanks

[33077a]

On button click we have workflow with HTML and 2 find and replace (between them is youtube video id)

[ux11]

@33077a

I did exactly what you did, but the video doesn’t show up. Instead, when I save and look at the content cell in my database, the code wasn’t saved. There’s something that I’m missing here?

What saves in my database:

[33077a]

maybe you do it for the same «content» field? I do it for another field. And I do in from Tiptop.content (HTML)

[ts11]

Hi @rico.trevisan

First off, this is an awesome contribution to the community, so thank you for the hard work you’ve put in. Second, I noticed a couple other folks asking about video embeds. I’m interested in this, also, and I noticed that there is already a Tip Tap plugin that would make this possible. Do you have any plans to add that to your implementation anytime soon?

I also noticed a couple issues when testing out the plugin that probably bear mentioning.

• 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.
• Menu Responsiveness — It seems the bubble and floating menus don’t respect Bubble’s responsive settings as one would expect. Am I missing something here, or is this a known issue?
• Quote Block — It’s not clear to me how to enter a new line if the last line in the editor is a quote block. Maybe I’m being dense here, but there seems to be no intuitive way to do so. Might be worth taking a look.

[henri]

Hi Everyone,

First of all, thank you so so much @rico.trevisan for this plugin, this will change my life !!!
I’m still a noob on Bubble and I was wondering about two things :

Context : I’m using TipTap as an input to edit some text but also to make the text result of an API call appear in it. To do so I’m using a workflow that set the content of TipTap to the result of the API call. Two questions there :

1/ I tried to set the state of the page to store the result of the API call and to put them into the TipTap editor and for some reasons it doesnt work (this is why I used a Set content workflow)

2/ When the content appears in the editor, it doesnt respect the formatting of the content (particularly the line break), do you know why ?

Thank you so much for your help !!!

[rico.trevisan]

Thanks for all the requests. I’m currently trying to figure out git so that I can pause the work on the customization and add the features you need.