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

I do use a multiline input element instead of this plugin.

Hey @rico.trevisan, hope youā€™re doing good
Just checking on 2 things, maybe you foud out how to fix them :slight_smile:

First one is the target=ā€œ_blankā€ rel=ā€œnoopener noreferrer nofollowā€ automatically added to every link.
I am creating an SEO tool, and this is not very SEO friendlyā€¦

The second one is that I need a way to identify the main image of my document with a REGEX (for some reason you canā€™t say ā€œI only want the first oneā€ in the find and replace regex).
For now, I created a class ā€œfeatured-imageā€ but it seems to disappear when tiptap saves.
I know you said this is quite hard to fix, but do you know a workaround like some HTML around the image that will not be deleted by tiptap, or did you launched ā€œfund a featureā€?

Thank you very much :pray:

Is there a way to add custom styling to code blocks? Iā€™m looking to do something similar to Slack where code has a different border, background, and font color applied.

Yup, the editor needs to accept dynamic data so we can assign unique IDā€™s to each instance of TipTap. Without it this is useless as a reusable element in repeating groups.

Awesome plugin @rico.trevisan - nice work.

I have a small problem - elements with H1 are not showing in the right font sizes on Safari and Edge, but on Chrome it works properly. The text is correctly marked as H1 and the tags appear in the database. This is true of the demo app on Safari as well.

What could be the issue?

FYI: the way the code works currently is that it goes up the HTML tree looking for the nearest element with the specified ID. Itā€™s not ideal so itā€™s due to a refactoring.

Iā€™ll update the code to allow for dynamic data.

This refactor will also shift the responsibility away from the plugin and onto the dev ā€“ the correct way. Meaning, instead of the plugin trying to take the best guess, itā€™s the devā€™s responsibility to properly name the Bubble / Floating menu ids. Iā€™ll put a warning if the plugin finds multiple elements with the same id.

1 Like

Ah, so it might actually work as-is, but to be safe a dynamic ID would be great. Thank you!!

@rico.trevisan - any ideas on how to fix this?

Iā€™ll take a look at it. I primarily use Safari; Iā€™m surprised I didnā€™t see this.

Was this ever solved? Iā€™ve tried adding this custom CSS with no luck. Still getting a clipped Bubble Menu when the TipTap element is below a certain height.

Any update @rico.trevisan? Thanks.

1 Like

I canā€™t seem to get mentions working anymore either. Worked a few days ago and recently stopped. Anyone else having issues there?

DO NOT USE THIS VERSION
(my version control system borked the actions againā€¦ :sob: )
Working on an update

Release notes

Release 3.11.0

  • bubble & floating menus now accept dynamic text so itā€™s easier to wrap Tiptap in a reusable
  • added HardBreak to the documentation of the list of Extensions ā€“ the functionality was already there but it wasnā€™t documented.

This refactor shifts the responsibility away from the plugin and onto the dev ā€“ the correct way. Meaning, instead of the plugin trying to take the best guess, itā€™s the devā€™s responsibility to properly name the Bubble / Floating menu ids. Iā€™ll put a warning if the plugin finds multiple elements with the same id.

It works for the demo app on a bunch of versions I just randomly tested. Maybe inspect the CSS of the Tiptap instance to see if the CSS is broken.

Release 3.11.1

  • bubble & floating menus now accept dynamic text so itā€™s easier to wrap Tiptap in a reusable
  • added HardBreak to the documentation of the list of Extensions ā€“ the functionality was already there but it wasnā€™t documented.

This refactor shifts the responsibility away from the plugin and onto the dev ā€“ the correct way. Meaning, instead of the plugin trying to take the best guess, itā€™s the devā€™s responsibility to properly name the Bubble / Floating menu ids. Iā€™ll put a warning if the plugin finds multiple elements with the same id.

2 Likes

Thank you for the fast turnaround here! This definitely helps ensure that, in cases where multiple instances of the plugin are loaded, theyā€™re pointing to menus with unique IDā€™s.

Separately, have you had a chance to investigate cases where the menu is cut off when being used in a reusable element (see image below)?

In this case, Iā€™m using TipTap in a reusable element within a repeating group. Iā€™d like to force the bubble menu to be the top-most element on the page (z-index = inf) but it appears to be cut off by the bounds of the reusable element instead. Iā€™ve attempted to solve this with some CSS by setting overflow: visible !important and z-index: 999999 !important; with no luck. Any other ideas?

Thanks again!

I was able to get the menu to show up outside of a cell on the table, but the z-index appears to still be below other cell content (see image below).

image

Notice how the full menu appears, but the bottom-right cell content (in this case the text ā€œTestā€ has a higher z-index and therefor doesnā€™t allow me to actually click anything in the menu. No amount of messing with overflow and z-index values helps me force the menu to appear on top of all other elements on the page.

Rico, I have a problem, basically I need to limit the size that images saved in the text editor are shown, because as you can see, they are gigantic in the feed, how can I limit this size?

How can we get the current cursor position to know where to put the cursor back to? For example, if I make an edit to the middle of a paragraph, we only have options to highlight all, place the cursor at the beginning or end, or place it at a specific position (hereā€™s where Iā€™d need to know the specific position Iā€™m at).

Just discovered this plugin and absolutely love it! 2 things:

  1. Support coming for markdown links?
  2. How does one exit a code block? I canā€™t see to get out of it once I start typing one. Update: figured this out