Forum Academy Marketplace Showcase Pricing Features

(new free plugin) Rich text editor with customizable menus - Tiptap 🩰

Oh! I gotta fix that.

FYI: following @keith’s initiative, I’ve synced with Github and made the repository public: https://github.com/RicoTrevisan/Tiptap-for-Bubble.

4 Likes

@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! :heart:

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 :see_no_evil:):

  • 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 Editor)

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

Woot! Coolio.

Released v1.1.0

You can nowSet content.


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.

3 Likes

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?

1 Like

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 :pray:

Appreciate the JSON input and set content action :heart:

Release 1.2.0

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

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.

Screen recording 2023-01-22 18.57.36 (1)

1 Like

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?

1 Like

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 :slight_smile:

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)

1 Like

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

1 Like

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
3 Likes

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

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>

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?

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

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.

@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:
CleanShot 2023-01-24 at 17.33.14

I hope this helps :+1:

2 Likes

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.

2 Likes

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.

1 Like

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

Release 1.5.0

  • when hovering a link the cursor will change

Release 1.6.0

2 Likes