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

Release 1.10.1

Working on adding YouTube.
Any clues what this is?

The video seems to be working regardlessā€¦

2 Likes

Thanks for the kind words and the support. This whole plugin is me flailing around trying to figure out this code thing.

Iā€™m working on the YouTube extension now. It gave me a couple of errors last night ā€“ I was so tired I didnā€™t even google it; I dropped it on the thread hoping someone would have the answer.

:thinking: I donā€™t think thereā€™s any way around it. What are you trying to do / avoid? I know itā€™s quite tiring setting up the menu (believe me, Iā€™ve set up more menus testing this plugin than I ever thought possible).

Iā€™ll look around Tiptapā€™s Github forum to see if thereā€™s anything. At the same time Iā€™ll amuse myself with Githubā€™s issue tracker, issue #4.

Mind sharing your example? I donā€™t know what Tiptap does when it takes those menus. It probably adds some CSS that conflicts / overrides Bubbleā€™s settings. Iā€™ll look around for CSS ideas.

Anyway, Iā€™ve made an issue that I will try to solve; issue #2.

I think you can just use the same command again to stop it. Or Cmd + Shift + B
https://media.cleanshot.cloud/media/22365/1CyuJhnpfOoaqAOiXPMTix5oftrzHzlwb8DMLU2T.gif?Expires=1679017525&Signature=RJ1h0S2G9R5tgdgKTDShpDVIO2C-BBJ7UC6eqlWX-CgGqphPfzsN4jfFsLGqKNnfprZuUdozjUB9uaWVqDYU1XMRZPUV2kLQ6m5uDNzZkyEaZmt7Zb-Z3I3j5Drnq-wLHW0ImSrUY-l7Ei-AHd9etNwwLCiRLlNv0Biadj2-dJF8mA3PKrXSOg5gjCZbJNucV5WZE3W90kqQeJxoM145wtib~OkJYgKqNtDmmzFz3MfnSXjTWz1fCvzSefaI22yUOCqghzvzIM6P20GEGhGgQMk5zj38xdWEplaeFtoWp7DjQsuNF9EjvLfSPNNaI7VZFR55o04tRed7FGzOhtX8OQ__&Key-Pair-Id=K269JMAT9ZF4GZ

1 Like

Hi @rico.trevisan , I want to report a bug related with links inside the tiptap.

Problem
Iā€™m using the Tiptap with the ā€œInput is enableā€ unchecked, so my users is not able to edit the content. So, the links are getting a unexpected behavior.

You can see it in your demo page too. The links are opening in two tabs and the browser think that one is a popup. But if you try to click in the second link, the tab is open with the link of the first one that you clicked for the first time, so on.

Expected Behavior
When inserted one or multiple links in Tiptap while the ā€œInput is enableā€ is unchecked they have to open in a new tab.

How to replicate:
On your demo page, insert two more links, one for google and other to youtube. Click on them with ā€œInput is enableā€ checked and after unckecked and see the behavior.

I record my screen too, so you can see the same.

Iā€™ll appreciate any advance on this, because my pages has a lot of link for my users.
Thanks!
chrome_1I2tlLQSTi

1 Like

If anyone has the random ā€œborderā€ showing up on the bottom right, add this to your script in the body (Settings - > SEO/metatags):

/* Hide scrollbar for Chrome, Safari and Opera */ div[class$="-AAC"]::-webkit-scrollbar { display: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } /* Hide scrollbar for IE, Edge and Firefox */ div[class$="-AAC"] { -ms-overflow-style: none !important; /* IE and Edge */ scrollbar-width: none !important; /* Firefox */ }

Release 1.11.0 & 1.11.2

  • fit height now behaves properly. If fit to height is:
    • OFF =overflow: scroll
    • ON = overflow: auto

Release 1.11.1

  • fixed YouTube CORS error by turning on the noCookies policy.
4 Likes

I feel you are becoming quite powerful in the ways of plugin creation, @rico.trevisan!

2 Likes

Rico, hi, there is one idea that can allow us to add content to the beginning of the article, which in some cases (if the articles are very long) can be a convenient element of orientation in this text

Essentially, the task is to add an id tag to all h1, h2, h3, h4, h5. For simplicity, you can simply make them numbers #1, #2ā€¦ And then you can click on the title and get to exactly the place where you need to go

And separately output such a list of titles (contents)


exemple ā€“ SaaS Conversion Rate - Industry Average and How to Improve Yours

Release alt1.0.0

  • code highlighting

Instead of adding code-highlighting to the plugin, I figured I abstract the code into its own plugin so that itā€™s lighter.

Get the plugin here: Code syntax highlighter Plugin | Bubble

1 Like

This is INSANE :zap::rocket:Congrats @rico.trevisan for another amazing RTE plugin! :clap:

1 Like

Release 1.11.3

  • Tiptap is out of beta ā†’ moved to version 2.0.2

Rico, hi, is it possible to add button that can be customized for necessary code. For example to customize them to add SoundCloud widget or iframe or something else.

Where I can add for example in my case optimized youtube (for PageSpeed)

Code that I put now is:

I insert it with find and replace (like [yb1ā€“MSj3GxT0Z2wā€“yb2ā€“MSj3GxT0Z2wā€“yb3ā€“MSj3GxT0Z2wā€“yb4]), but if it is possible to add this more user-friendly it will cool

Hey there, can you tell me how to access the staying I donā€™t seem to see it. Im trying to chnage the text color.

Thanks :blush:

Hey! Very very very nice work with this pluginā€¦but somehow, the 2.0.2 version is work working todayā€¦even in your demo pageā€¦
But the way - let me request a feature:

  • can we change the font color?
  • can we change font ?
    Thanks a lot for you work with this plugin - help a lot!

and now - working!!! Great!

Iā€™m happy itā€™s working again. I changed nothing. The boys at Tiptap must have made a mistake with their libraries and fixed it.

Yep, changing colors is a big request. Iā€™ll start working on it again.

Thanks for this great plugin! I switched from the Bubble RTE to this. A few things that I am trying to figure out how to do in my editor. If anyone can shed some light:

  1. change font size. There was a comment about having input of font sizes for the H1-H6. But I have not seem any follow ups. Is this done? Or is there a way to set this through classify plugin?
  2. font type. can I select the font type or is there a plan to implement this?
  3. YouTube Video insert responsive. Can we make the YouTube insert a responsive element? Right now we can set the size of the YouTube element but it is not responsive.
  4. Table. Is there a way to adjust the column size of the tables? Will there be a way to adjust the color of the table borders also?
  5. H6 seems to be the same size as H5? Would be great if H6 is font 14px.

Look the plugin as it help solve many issues I had with the bubble RTE. Thanks again for this great plugin.

Grady

Picking this up again ā€“ after the whole Bubble pricing fiasco of the last weeks. Grabbing a couple of low-hanging fruit.

Release 1.13.0

  • you can now select different styles for the bubble + floating menu

CleanShot 2023-04-20 at 09.45.03@2x

CleanShot 2023-04-20 at 09.45.36@2x

CleanShot 2023-04-20 at 09.45.55@2x

CleanShot 2023-04-20 at 09.46.13@2x

3 Likes

:warning: BETA Release 1.13.1 - customize H1

  • control H1 size, color, margin, weight

Iā€™ll be adding the other headings and body, but itā€™s slow progress. Adding new fields in the plugin editor is painfully slow.

2 Likes

CleanShot 2023-04-22 at 09.33.37

:warning: BETA Release 1.13.2 - H2, H3, H4 + body are customizeable

  • you can define the font-family of the body
  • however thereā€™s a bug if you change the font-family conditionally ā€“ Iā€™ve submitted a bug report already.

Between the Github sync failing, discovering bugsā€¦ this is a painful path.

Are you guys OK with defining margins with CSS, like this?
CleanShot 2023-04-22 at 09.29.49@2x

2 Likes