Hey @rico.trevisan,
This RTE looks very nice.
Rookie question here but how can I setup the bubblemenu or bubblefloating menu to work? Do you have a demo or documentation?
Also, is it possible to setup the RTE so if I paste a link on a selected text the text changes color and now if you click it works as a link? (similar to notion or slack).
Thanks!
Thanks. No, I donāt (yet) have a tutorial on how to build it (but I do have it on my todo list for a shameful long while). In the meantime, you could look at the example app to see how it is setup: Tiptap-demo | Bubble Editor
Essentially involves:
- creating a group with the buttons
- giving an ID to it
- telling Tiptap the ID that you used for it
For the link on paste, this is a native feature of Tiptap so it should work.
1 Like
Great, Iāll deep dive the coming days into this. That said, 3 quick questions:
- Any idea why the placeholder is not showing?
- Do I need to setup something for linkOnPaste?
- How can I add line-spacing? Couldnāt find that.
Here a 30 seconds video
Thanks!
If you ever run into issues with the bubble menu (the floating one upon text selection) getting clipped like the below example:
You can band-aid fix it via adding the following CSS to the tiptap editor itself:
overflow: visible !important;
Result:
4 Likes
This is great! Where do you add the CSS exactly?
Thanks in advance.
I turns out that I need to delete the ones that were not work and insert new tiptaps. Then it works. Not sure why that is, but I am really glad that I can now update to the latest versions!
1 Like
You can use an html element and place the css within tags.
Iāll add this as a standard to the editor.
Iām having a hard time reproducing it on my side. How do you make it happen? Is it a combination of a max height and small/no padding or margins around the editor?
Release 2.7.1 - placeholder fix
- it should show up now
- you can customize the color of the placeholder
Hi Rico,
I am venturing into the collaboration function of the Tiptap. I followed your instructions to set up the APP secret, app id and generated JWT, etc. However, it doesnāt seem to work.
I have the Tiptap element in a reusable element. When an element is clicked, the reusable is shown in a floating group.
I have auto-binding checked also.
On two different instances, the JWT generated are different. I am assuming that is supposed to be that way, correct?
Is there something that I missed? Is there a way for you to do video with a fake App ID? So that we can make sure we got it set up correctly?
Thanks!
Another question. How do you set font color? It is not in the demo editor. However, I see in one of your videos where it appears to have a button that is to change font color. :). Would be great if you can give a few bullet points as to how to do that.
Thanks!
Grady
Try turning off autobind.
If that doesnāt work, do send me a DM with the video walking through the app, specially with the browserās console open.
Iām not sure how the plugin behaves in a reusable with multiple reusables on the same page AND with collab on. Technically I donāt see any limitations.
I need to do a better job with the documentation this plugin. I put together a couple of tutorial videos but havenāt gotten around to the collaboration yet nor publishing all the other ones.
It happens when the editor is inside a reusable element within a repeating group (the trifecta!). I blame it on the reusable element having fit height to content and then the repeating group basically clipping it off.
Hi Rico,
Iām trying to insert an image as part of the rich text editor, but I donāt know how to resize it so people donāt see it with its original size, but resize it to 100%.
Iāve read through the forum, and Iāve tried these two ways:
1.- add an āinsert image to tip tap.ā
2.- add it as an āinsert contentā action and change the width through HTML
None of those ways have worked! I see how the image resizes in the tiptap editor placed in my admin panel, but it still appears at its original size when shown in a blog post.
The blog post body is saved as Tip Tapās content (HTML), as you can see below, so I donāt understand why I cannot see it properly and I donāt know what else to do.
Could someone please let me know how you usually add images to body text through the tip tap editor? I just want to find a way to show the images with a 100% width in blog posts.
Thanks in advance for your help, and thank you, Rico, for your valuable contributions to the community!
Hi Sonia,
I was just taking a look at the underlying command and ā currently ā thereās no way to resize each image individually. In the settings of Tiptap you can set some CSS that will apply to all images in the document.
Iām currently making an improvement for @gradylam ; as soon as I get that done Iāll take a look at further options for images.
1 Like
Release 2.8.0 - double collab
- you can have multiple collab docs in one page
- you can now send multiple docs names / ids in one action and get one JWT token which can be used across multiple editors in the same page, cc: @gradylam
- fix for collab ā for a while Tiptap didnāt require the Yjs library directly; it does again.
- fix for input reset firing before editor was ready
- fix: bundled all the libraries to the plugin to avoid collab not starting when there was a dependency mismatch with Yjs
@rico.trevisan Since 2.7.2 Auto binding is clearing out the content of tiptap every 2-3 seconds. Below is a loom (initial tiptap editor is just an element on screen and then the second one i test on is within a reusable). Works fine in v2.7. Saw your changelog for v2.8 (fix for input reset firing before editor was ready) which I assume references this, but i tested in that version as well and same issue.
1 Like
I ran into the same issue today.
Issue with check box (task)
I am running into issue when using the checkbox in the Tiptap. I have disabled the autobinding. When I check the checkbox, and save it. Then pull up the data on another page, it doesnāt show the box being check. This happens randomly. Sometimes it works, sometimes it doesnāt.
Please help.