šŸ¤Œ Rich text editor with real-time collaboration (Tiptap)

Showcase Plugins
145

I turned off TaskList, Placeholder, CharacterCount, TextAlign, Highlight

1 Like
146

Great plugin, thank you @rico.trevisan .

Quick question, is there a reason there is no option to modify the line height of the <p> text? I am currently doing it with some custom css targeting the proseMirror p class, but just thought it might be a nice addition.

Thanks again!

147

The reason is the extra wiring needed to set that up.
Iā€™m thinking of adding a field that allows users to change the CSS directly. So, each heading + p would have:

  • font-face
  • font-weight
  • color
  • advanced options

I want to keep the first 3 so that it is easy for someone who doesnā€™t know CSS while giving you power-users the ability to change all of that.

A question to you guys: so far Iā€™ve been adding all these options as static text so that you can save them in the element styles. Is that OK or would you guys prefer dynamic fields (which then donā€™t fall under styles)?

1 Like
148

I canā€™t think of a reason Iā€™d need dynamic, but it always a nice option to have (especially on a multi-tenant app)

1 Like
149

I prefer dynamic that we can easily customā€¦
btw, I think we should xtra line-height. Bubbleā€™s text was trimmedā€¦ look so bad while we can affect on the line spacingā€¦

150

You can add some simple css:

<style>
.ProseMirror p {
line-height: 1.6;
}
</style>
1 Like
152

Release 1.16.1: Autobind tweak still doesnā€™t workā€¦ @rico.trevisan . It still save automaticallyā€¦

153

Release 1.18.1: fix errors due to missing extension.

see if this release fixes that.

Under the hood, Tiptap has a handful of extensions that need to be loaded by default. I removed those from the options. FYI: the extensions are: Document, Paragraph, Text, ListItem, CharacterCount.

154

It seems to be working. It doesnā€™t update until I change the body of the text (which then gives me an error because Iā€™m not logged in).

155

Take it for a spin before I push this update: https://tiptap-plugin.bubbleapps.io/version-test/doc-switcher2

156

Release 1.19.0: added ADV options + cleaned up set content + better logging

  • h1-6 and p have a field where you can add your own CSS properties
  • fixed an issue with set content not working the first time if you had no initial content
  • if you do activate an extension and you tried to use that extension, Tiptap will no longer crash, but will console.log an error.

Iā€™ve tried a bunch of edge cases combinations for the set content vs initial content, but Iā€™m not sure I covered them all. Any feedback here would be highly appreciated.

2 Likes
157

viewer and debug

When open my site, youā€™ll see some things always update (in case: The Tiptap content updatedā€¦) - I dont know some conditions make it run

Let check again, Rico. I think your conditions: " Iā€™ve added a check to see if the noteā€™s value is different than the current editor value:

  • true ā†’ it saves data
  • false ā†’ it doesnā€™t"
    doesnā€™t workā€¦

Thanks a lot cause your hard work!!!

158

You got an infinite loop.

1 Like
159

Yep, I see the problems from Tiptap content are always run

160

Release 2.0.0: real-time collaboration

You will need an account with Tiptap (collab.tiptap.dev).

Iā€™m going to update the demo app.

1 Like
161

I had to turn off the access to the editor because it exposes my API keyā€¦ :thinking:

162

Thatā€™s great. Thanks for the update!

163

It there a simple way to change the line spacing? The text I have are a bit to dense together. If we can change the line spacing somewhere, that would be awesome.

Thanks, Rico. Awesome Plugin

1 Like
164

Itā€™s not the most obvious, but you can do it like this:

Nonetheless, it would be nice if the plugin editor allowed the Bubble native line-height. Iā€™ll request that feature. Until then, use some CSS in the p_adv field (which I recognize needs a better namingā€¦)

165

Thatā€™s awesome. Thanks for the quick reply!