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

Friday night updates :sunglasses:

Just updated to beta version. From my brief testing, it does seem like auto-binding is working as expected! Iā€™ll continue testing though and will report back :+1:

Iā€™m referring to this option:

Iā€™ve just realized that your demo actually has two pagesā€¦ (index and doc). I completely missed the doc page (default goes to index :sweat_smile:).

I see that you check a value and then based on that, the tiptap element is editable or not. I havenā€™t tried this approach. Iā€™m just using the option shown in the screenshot aboveā€¦

In any case, itā€™s not really a deal breaker for me at the moment, as I can just use an html element to display content vs enable/disabling input within tiptap.

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)..

5 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)

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)

2 Likes

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.
2023-01-24 11.25.57

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).

CleanShot 2023-01-24 at 17.18.18

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.

2023-01-24 21.36.09

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.