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

[rico.trevisan]

@bryanrcosta

(index and doc)

Oh! I gotta fix that.

FYI: following @keith’s initiative, I’ve synced with Github and made the repository public: GitHub - RicoTrevisan/Tiptap-for-Bubble: This is a repository based on the Bubble plugin 'TipTap rich text editor with HTML output' (https://bubble.io)..

[bryanrcosta]

@rico.trevisan auto-binding is working as expected for my use case and I’m super happy with it! Thank you again for looking into this so swiftly!

I have encountered one instance where auto-binding is problematic though:

• In my use case, the element is in a reusable. User clicks on an existing note that has content to be displayed;
• This reusable is displayed using an animation. (go to page step is to push data to url which is used to retrieve data - I follow your SPA logic here).

What can happen on first try after page load:

• the element is animated and displayed but there is a delay (due to animation);
• Tiptap element will appear empty (this is not expected);
• Since its empty, (and you guessed it) it will save exactly that. Essentially results in a loss of content.

I mentioned first try because: after the tiptap element appearing once, this no longer happens, until the page is reloaded.

My temporary solution:

• Removed animation

But this actually got me thinking (feature requests incoming ):

• As a bubble dev I want to be able to push data to the tiptap element as an action, so that I can change/update data source for the tiptap element via a workflow and its respective conditions"

• As a bubble dev I want to have the “editor is loaded” as a data source so that I can better configure my workflows around it’s loaded state"

I have one additional request: I would like to have underline supported; (Underline – Tiptap)

P.s: I’ve made the plunge and have opted to use your plugin on production. And I’m loving it

[keith]

Woot! Coolio.

[rico.trevisan]

Released v1.1.0

@bryanrcosta

As a bubble dev I want to be able to push data to the tiptap element as an action, so that I can change/update data source for the tiptap element via a workflow and its respective conditions"

You can nowSet content.

---

@Future

+1 for json as input.

You can now feed it JSON either via:

• initial content
• autobind
• or the set content action

Keep in mind that this needs to be Tiptap-compatible JSON.

[rico.trevisan]

@bryanrcosta

As a bubble dev I want to have the “editor is loaded” as a data source so that I can better configure my workflows around it’s loaded state"

It does have this event.

Is this what you need? Could the working be improved? Does it get lost in the sea of events?
Or would you prefer to have it in a state?

[bryanrcosta]

Is this what you need? Could the working be improved? Does it get lost in the sea of events?
Or would you prefer to have it in a state?

Have it in a state please

Appreciate the JSON input and set content action

[rico.trevisan]

Release 1.2.0

• new state Tiptap is ready
• there was a typo in the autobinding code. Should be fixed now.

[rico.trevisan]

@bryanrcosta

• Insert a few paragraphs of text until text passes page fold;
• Try to scroll (it won’t work)

I think I got it working. Need to test a couple more things before deploying.
LEFT fit to height is checked.
RIGHT Fit to height is not checked.

• demo
• editor

[33077a]

Rico, thanks for this plugin, its what I’m looking for. Auto bidding in ver 1.2 is working well. I have one idea to improve – when we use the list (ul,ol) – now, it has big whitespaces because p-tag is in every li tag. Is it possible to remove p-tag from the li-tag?

[Future]

Been trying different things, definitely going in the right direction!
One behavior that could see improvement :

• When using the editor in a repeating group, maybe i got this wrong, but you need to put both “popup” elements in every cell.
• To make the popups work correctly, they would need to have their own id attribute.
• Thing is : the editor’s bubble menu and floating menu inputs do not accept dynamic data

Keep it up, it’s already awesome as it is!

Edit : Wondering if tiptap accepts custom json (aka creating our own action or adding uuids to (for example) tasks/lists, headers, etc)

[troy.roberge]

I haven’t tried this yet, but it’s stuff like this that really adds to the ecosystem in a very beneficial way. Thanks!

[rico.trevisan]

Release 1.4.0

• text alignment is now a thing; even the most disgusting of them all: justify.
  • both actions and states
• documentation updates

Release 1.3.0

• editor contents now scroll

[Future]

nice man! if ever there’s an highlight (text background color) function, that would be appreciated and does tiptap offer tables?

[rico.trevisan]

@treb.gatte

A small quibble from a UI perspective. The cursor doesn’t change to a finger icon when you hover over a url. Not sure if this is under your control.

I was looking at this last night. I haven’t found the easiest way to do it. Before that, what do you think of this set up. If the editor is:

• editable, clicking on a link will not do anything, it will treat it as text.
• NOT editable, it works as a normal link with the cursor and everything.

I’ll try this again tonight but Tiptap doesn’t yet have any way to ‘reconfigure’ the editor so I have to destroy() and build it again. Which is harsh and it will cause some weird behavior.

I’m trying to figure out if there’s simple CSS that gets around this. On Tiptap’s website there are a lot of examples that use Vue which has this nice :disable thingy. But I don’t know how to do that with vanilla JS.

<button 
  @click="editor.chain().focus().toggleBold().run()"
  :disabled="!editor.can().chain().focus().toggleBold().run()"
  :class="{ 'is-active': editor.isActive('bold') }">
    bold
</button>

For the custom menu, can I highlight text and then click a custom menu button to act upon the highlighted text? Is there any docs on how to do this yet?

That’s normally how any of the menus work. The action will act where on the selection or where the cursor is. I probably didn’t understand your question, could you clarify?

If I’m using the current Bubble RTE, is there any migration issues?

The Bubble RTE outputs bbcode. You can copy paste from the RTeditor, but not its output.

Lastly, based on previous discussions we’ve had, if I paste in an image, is it stored securely?

I don’t think you’re able to paste images on the editor. Unless you figured out something that I didn’t yet. So the images are stored the way you store them. The image adding mechanics is built with Bubble; not the plugin.

[bryanrcosta]

@rico.trevisan

I was looking at this last night. I haven’t found the easiest way to do it. Before that, what do you think of this set up. If the editor is:

• editable, clicking on a link will not do anything, it will treat it as text.
• NOT editable, it works as a normal link with the cursor and everything.

@rico.trevisan based on what you proposed:

This could strain/limit the usage of this plugin, as your forcing a UX approach that defeats the purpose of the WYSIWYG editor (IMO).

For example in my app, your proposed change would mean:

• I need to force the end-user to have an additional step just to be able to edit their note. Versus what I have now (see gif below).

(I rely heavily on the WYSIWYG functionality which is the reason I love Tiptap and this plugin so much).

Thinking of mobile users, this is the UX forced, due to a behavior they do not benefit from (as there is no hover on mobile).

Now, good UX would not be “just leave it!” We definitely need to improve this.

I have found a work-around that could be used until this is changed/fixed more elegantly. @treb.gatte you’re more than welcome to give it a try:

Add an html element to the page, and insert the following code:

<style>
a:hover {
  cursor: pointer !important;
}
</style>

Result:

I hope this helps

[treb.gatte]

I like it! Also, I think I can make that desktop only, but it’s been a while since I’ve done that type of CSS.

@rico.trevisan, my use case is for a custom menu option to trigger a workflow. For example, I want to highlight a sentence, then click a button so that I can create a reminder from the highlighted text. This is a use case I’ve not been able to do in Bubble yet.

[rico.trevisan]

Thanks!
I can get it to work directly in Tiptap.

Tiptap allows you to add HTML attributes directly to the element.

It adds extra stuff in the HTML:

<p>
<a 
  target="_blank" 
  rel="noopener noreferrer nofollow"
  style="cursor: pointer" 
  href="https://bubble.io">
  https://bubble.io
</a>
</p>

Alternatively, I could add it to the root, via Tailwind Typography.

That leads to the next question: you probably want more control over the CSS, correct? I started using Tailwind because it was a simple way to get beautiful styling for “free”. I was thinking of providing more options of CSS – like Pico.css – and the option of NOT adding any so that you can bring your own.

[bryanrcosta]

@rico.trevisan

That leads to the next question: you probably want more control over the CSS, correct? I started using Tailwind because it was a simple way to get beautiful styling for “free”. I was thinking of providing more options of CSS – like Pico.css – and the option of NOT adding any so that you can bring your own.

So I have no experience with Tailwind or other CSS frameworks, but I’d really like to bring my own CSS.

[rico.trevisan]

Release 1.5.0

• when hovering a link the cursor will change

[rico.trevisan]

Release 1.6.0

• You can now highlight