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

rico.trevisan · January 26, 2023, 11:47am

this plugin is based on Tiptap.dev which is itself in beta.

After a few late-nights and tons of questions to @Kayami , I finally got the starter kit version of the TipTap text editor working.

Get it here: Rich text editor -- 🩰 Tiptap.dev Plugin | Bubble

It’s free as in beer . But I would like you to pay with feedback and requests. My goal is to treat this project as an open-source project, taking in pull requests and improving it for all of us.

Demo
Editor

Bring & Customize your own menu

Each little feature is accessible via workflows and have individual events that fire immediately. That means that you can create and control your own menu.

Tailwind Typography styling

The text inside the editor will be styled according to TailwindCSS’s Typography styles.

Keyboard shortcuts

Both for classical editor and markdown. You can set a paragraph to Heading1 either by typing ⌘ + ⌥ + 1 or by adding # at the beginning of a paragraph.

Elements

Paragraphs
Headings - from H1 to H6
Images
Ordered lists
Unordered lists
Quotes
Links
Code blocks
Horizontal line
Text alignment: left, center, right (and justify)
Text highlighting

Roadmap

Basics++ version

Tables
Code highlighting
Customize styling
Images sizing

Collaboration version

Collaboration
See each other’s cursors
Offline mode

Releases

1.6.0: text highlighting
1.5.0: hovering on links fix
1.4.0 & 1.3.0
1.2.0
1.1.0

louis2 · December 26, 2022, 11:54am

Looks very nice Rico:ok_hand:

Kayami · December 26, 2022, 2:13pm

nice job @rico.trevisan, tiptap is a huge library so it probably too you some time to get it to work

rico.trevisan · December 27, 2022, 3:38am

There is my teacher, the Plugin Prince himself. Come here, gimme me a bearhug!

di_lucena · December 27, 2022, 10:13am

Looking very nice Rico!
Congrats!
Does it work with the new resposiveness?

rico.trevisan · December 27, 2022, 10:50am

Thanks. Yes, it works with the new responsive engine. The plugin itself is a simple <div> and TipTap does all the filling in.

I’m currently testing out which options are needed. (I currently have all the options turned on which is overkill…)

1david2hot · December 27, 2022, 2:17pm

Would be cool if this had some sort of Iframe implemented where you could embed social media post like Twitter post or Youtube Videos.

rico.trevisan · January 6, 2023, 3:53pm

Try it out here: Bubble | No-code apps

rico.trevisan · January 20, 2023, 3:45pm

v1 is released → Rich text editor -- 🩰 Tiptap.dev Plugin | Bubble

Unfortunately, no collaboration in this version. I’ve gotta harass some more people in the #plugin-builders forum. And @Kayami.

bryanrcosta · January 17, 2023, 2:48pm

@rico.trevisan I’m having a lot of fun playing around with tiptap (I’m a huge tiptap fan )

First impressions

The freedom to create custom menus is a really nice touch!
Ability to output html and json: awesome!

Issue - auto-binding

(some context of usage)

I’m using your plugin in a SPA
The tiptap editor is inserted into a floating group
This floating group is used to create an edit notes.

Problem:

When auto-binding is enable, if I view note A, it’s content is loaded (expected behavior);
When I view note B, content A is displayed and is saved to note B (not expected behavior);

Work-around:

I’m using the following plugin to monitor input (Keystroke Input Trigger Plugin | Bubble)
create custom event based on input monitor;

Requests

Would love for json to be supported as input;
Ability to highlight text (Highlight – Tiptap Editor);

My experimentation is still in early stages, but I feel confident that this plugin could very well replace the current RTE plugin used in my project.

Thanks for this plugin

rico.trevisan · January 17, 2023, 3:37pm

Excellent feedback, thank you!

Yep. Yep. This autobinding business is giving me a proper headache. I posted a question hoping the gods of plugins will help me out.

I’ll certainly add the highlight text feature to the list.

bryanrcosta · January 19, 2023, 5:35pm

@rico.trevisan back with some more feedback (using version v.1.0.1 )

Issues

input is enabled option:

When check it works as expected;
When uncheck it doesn’t work as expected (input is still possible);

Responsive/layout behavior:
(context of use)

I’m using your plugin in a SPA
The tiptap editor is inserted into a floating group;
This floating group is used to create an edit notes;

I’m under the impression that in order to get inputted content in tiptap element, to scroll in a floating group, you need to enable the option “fit height to content” even though I have inf max height for the element.

Would you consider this to be expected behavior? Try it out yourself by replicating these steps:

In editor:

Create a floating group with scrollable content (e.g: text). Configure the floating group as you would for a SPA (fullcreen);
Create a second floating group and include the tiptap element. Configure the second floating group as you would for a SPA (fullcreen);
Configure the tiptap element to have no max height. Keep the “fit height to content” option unchecked;

In preview:

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

Now, go back to the editor an enable the option “fit height to content”. Try to scroll again (it will scroll).

This behavior just doesn’t seem super intuitive (at least for me). Curious to know what you and perhaps others think.

Thanks again!

rico.trevisan · January 19, 2023, 7:26pm

Excellent feedback. That’s my homework for the weekend.

Future · January 20, 2023, 3:45pm

Can’t believe i just saw this thread… Amazing work man! Can’t wait to see where it goes… +1 for json as input.

brad.h · January 20, 2023, 1:47pm

this is excellent @rico.trevisan. Nice work!

rico.trevisan · January 20, 2023, 8:21pm

I think I just solved the auto-binding issue.

I want to test it on a real app. To do that I need to publish a new version which will roll out to all of you. I’ll make sure to tag it as BETA. Try it out and let me know.

rico.trevisan · January 20, 2023, 9:06pm

Could you show me your app? What do you mean when input is still possible? Can you type? Or are you referring to the actions (bold, italic, etc.)?

On my demo it seems to work properly.
Properly’ish. Typing input is disabled but actions still work. What’s the right approach / philosophy: who should be responsible to restrict it: the plugin or the Bubble dev?

treb.gatte · January 21, 2023, 7:21pm

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.

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?

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

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

Looks great and can’t wait to try it out!

bryanrcosta · January 20, 2023, 11:11pm

Friday night updates

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

bryanrcosta · January 20, 2023, 11:21pm

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

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.