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

[julianno.09]

I also think that the possibility of deleting uploaded images is something very important.

If anyone is using any resources to accomplish this, please let us know.

[rico.trevisan]

Release 2.5.0 - updated libraries

Great news, esm.sh just fixed an issue that was affecting upgrading the libraries. I’ve updated the libraries to the latest versions. Please let me know if you have any issues, errors.

This is big. This plugin was previously stuck at an old version of the Tiptap libraries which meant we could not benefit from that any of the upgrades and bugfixes.

Don’t thank me, star the esm.sh repo: GitHub - esm-dev/esm.sh: A no-build JavaScript CDN for modern web development.

[atriastara]

question @rico.trevisan I’m currently migrating from bubble native rich text editor that use bbcode to tiptap,

and I’ve encountered a problem where the text from our database that use bbcode formating isn’t showing correctly on tiptap editor.

Is this known issue or I’m missing something (like converting all previous data or setting up something incorrectly. etc) ?

[atriastara]

to add more context, this is the previous text that using bubble native RTE: (also showing like this when I accidentally using plain text as the inital content when the editor is enabled)

and this is when created using tiptap:

but the styling (p_adv) is correct when the tiptap input is not enabled

[rico.trevisan]

@atriastara

bbcode formating isn’t showing correctly on tiptap editor

Unfortunately Tiptap doesn’t support bbcode. It supports HTML primarily.

You could convert your bbcode texts to HTML with something like this: BBCode to HTML Converter - Translate BBCode to HTML - Online - Browserling Web Developer Tools .

There is this plugin but I’ve never used it: Air BBcode to HTML converter plugin for Bubble | Zeroqode

[brendan.a.ford]

I’m having an issue I’m hoping is an easy fix and I’m just not seeing it…

I have 2 Tiptap RTEs, one under the other, Tiptap A (top) and Tiptap B (bottom):

Tiptap A is to reflect text held in my database within tiptap’s initial content.
Tiptap B is used to generate text through an API call.

Each Tiptap has different formatting applied, although I’m finding the following problem:

• When the API call’s text populates in Tiptap B with its special formatting, it also changes Tiptap A’s formatting to match it, even though Tiptap A has completely different formatting specified. Any ideas as to why this is happening?

Hopefully this is clear
Thanks!

[karlfriend.nz]

Is it possible to make this so a visible html element can see a ‘invisible’ elements html ?
I.e load the contents of the ‘tip tap’ on page load event if its invisible

[rico.trevisan]

Put it in a group and set the group to opacity 0?

I’m curious, what are you trying to achieve?

[Pat]

@rico.trevisan so happy that I found this amazing plug-in!!

I love how you can add custom CSS to H1-H6.

Question, would you be able to add the following:

I want the user to select a part of regular text (not h1-h6) and apply one of various highlighter/marker styles.
So, user selects text and pushes button. A workflow gets triggered “CSS Tiptap A” and the CSS gets applied to the selected text.

Reason: I would like to offer different styles of highlighters to the user. It would be great if one could offer multiple of these CSS custom workflows.

[Pat]

P.S.

Any chance it would be possible to connect the tiptap/html world with the bubble workflow world?
It would be great to give the user the ability to trigger a workflow through the html text generated by tiptap (e.g. click a word and a popup opens with dynamic data, e.g. the word = search filter)

Something like this (but more dynamic):

How to make a part of text clickable and can add workflow that part only

Hello, I am making a scenario where there is a text and i want to make a specific part of it clickable and can also add workflow on it. Please help me.

Just to clarify: The end user would edit the text in such a way that a word would now trigger a workflow. So, that e.g. another user now could click on the word and a pop-up would open (via bubble workflow)

Keep up the great work. thank you for your consideration.

[saulo.assis]

I also noticed that it doesn’t work within the “Repeating Group.”
The solution I found was to ignore the “bubble menu” and “Floating menu” within each cell, just leave these parameters without specifying any ID for them to be disabled.

Another alternative to use it within a “Repeating Group” would be to create a condition for the visibility of the “fixed” menu to toggle between Hide/Show when the hover event on the text element is triggered. (this simulates the float function)

[gradylam]

Hi Rico,

Great plugin. But I have not been able to use the updates pass 2.0.2. When I update the plugin beyond that, the different instance of the Tiptap cannot be read.

For example:
I have this tiptap showing the description of a story:

Then when I click Edit Story, I have another Tiptap element in the floating group. If I use the 2.0.2, the Tiptap works fine and I can edit the text. But when I use anything version above that, the text doesn’t show and gives me the error above.

Could you help?

[rico.trevisan]

I would love to help.

My hunch is that it’s a timing issue, that the Bubble is trying to fire an action before the editor is ready.

Could you share more details about the workflow when you hit edit?

[saulo.assis]

"I’ve encountered an issue where the TipTap element doesn’t function properly within a ‘Repeating Group.’ To work around this, I’ve discovered two solutions. Firstly, you can disable the ‘bubble menu’ and ‘Floating menu’ within each cell by leaving these parameters unspecified or without specifying any ID.

Another approach to using TipTap within a ‘Repeating Group’ involves creating a conditional visibility setting for a ‘fixed’ menu. This menu can be toggled between Hide/Show states when a hover event on the text element is triggered, simulating the floating function.

Additionally, there’s a more critical problem when adding a new record (row) within the ‘repeating group.’ The TipTap element maintains static content in its initial position on the page, causing data misalignment when the list reorganizes due to the addition of a new record. This issue necessitates a manual page refresh to correct it, as TipTap doesn’t update in real-time."

[gradylam]

Hi Rico,

Here is some more screenshots. It is very simple actually.
The tiptap element is in a floating group.

When a button is clicked, this floating group is show.

For version 2.0.2, it works fine and the description is displayed in the tiptap element.

However, any version of the update above will not let me click on the tiptap element, and the description content is also not displayed. So, it doesn’t seem like a timing issue.

Or is there other way that you would structure the workflow to be sure that it works?

Thanks!

[rico.trevisan]

Could you send me screenshots of the browser’s javascript console?

[rico.trevisan]

Release 2.6.1 - character limit

• you can now set a character limit
• character and word counts will update more often so it should update when you set content to the editor.

[hugors00]

Hey Rico,

Have you concidered adding “Undo”/“Redo”? Would be nice.

[cpo]

Dear @rico.trevisan ! Thank you for an amazing tool, but let me suggest to add the compatibility of this editor with span tags in HTML

UPD: It also cleans all the inline styles for any HTML tags since the content is uploaded to the editor… Why??? Such a flexible design with such a strict constraint…

[julianno.09]

Regarding the repeating group, use the unique ID of the current cell element as TipTap ID. This way the TipTap ID will always be dynamic.