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

[campbell]

Hey @rico.trevisan - Hope you’re doing well! I’ve got a cool idea for the plugin that I think could be super useful.

There’s this function called InsertContentAt that I stumbled upon in the TipTap docs. You can check it out here. Basically, it lets you swap out specific bits of content without having to redo the whole document. I reckon this could be a great addition to our plugin. It’d make replacing sections within the editor a lot more flexible.

Let me know what you think and thanks as always for your help.

[nur.ibrayev]

You are a super star @rico.trevisan . Imma buy you a coffee.

[nur.ibrayev]

Also, image extension to resize images would be a huge help:

GitHub - breakerh/tiptap-image-resize: Simple React image resizer

[julianno.09]

+1 upvote for Image Resizer

[dustinstout]

Have you seen MDX Editor @rico.trevisan?

[rico.trevisan]

Release 3.19.0 - insertContentAt

• you can now insert the content at a certain location
• the plugin now exposes the current selection’s from and to

Thanks to @campbell to sponsoring this change.

[rico.trevisan]

Release 3.20.0 - HTML selection

• you can now get the output of the HTML starting from the first block element (<p>, <h1>, etc.)
• it also outputs the JSON

NB: Bullets have to be selected entirely for it to work

Thanks @campbell for sponsoring yet another feature.

[rico.trevisan]

If you want to crowdfund issues: Issues · RicoTrevisan/Tiptap-for-Bubble · GitHub

Pull requests welcome.

[rico.trevisan]

Release 3.20.1 - selectedHTML only outputs the selection

• instead of selecting the entire block, it now outputs only the selection
  
  

I refactored some of the exposed states.

Hat-tip to @campbell

[gilveloso.oficial]

First of all, I want to congratulate you on the brilliant work with this plugin. It is undoubtedly the best available, even better than many paid ones.

Now that I’ve given my compliments…

I noticed a bug in the latest version 3.20.0: when two tiptaps are added to a page, only the first one is rendered, and the second one is not displayed.

To resolve this, I reverted to version 3.19.0, and it worked fine.

[satreoscar]

Hello Rico,
Thanks for all these updates ! (And thank you @campbell too <3)
Started playing with the JSON and saw that the “hardbreak” way to create a new line while staying in the same <p> is not working. (screenshots)

An easy workaround for now is to set a \n :

{
   "type":"paragraph",
   "content":[
      {
         "type":"text",
         "text":"First line"
      },
      {
         "type":"text",
         "text":"\n"
      },
      {
         "type":"text",
         "text":"Second line with \"Maj+Enter\""
      }
   ]
}

So it’s just FYI.

Edit : when editing content, the \n disappears. I just do new lines instead now.

[macsparrow]

+1 using this in a SPA and was going round in circles because it was only rendering in the first loaded view.

@gilveloso.oficial thanks for the version rollback heads up!

[rico.trevisan]

@gilveloso.oficial

I noticed a bug in the latest version 3.20.0: when two tiptaps are added to a page, only the first one is rendered, and the second one is not displayed.

Thanks for catching this! I thought that the changes I made were not related to multi-editor functionality so I didn’t even test that properly. Apologies; I’ll take a look this Friday.

Are there any errors on the console?

[macsparrow]

These are the errors that the console threw up for me

[rico.trevisan]

Thanks, I just pushed a new version that should fix this.
The issue was that I left a debugging step on.

[macsparrow]

Legend, thank you! Works perfectly again.

And I wanted to check if this is a bug or an expected action; is it possible to indent/ outdent text? EX: at the moment outdenting lists is the only action possible for either of those functions.

[rico.trevisan]

@macsparrow

EX: at the moment outdenting lists is the only action possible for either of those functions.

Smells like a bug. I’ll take a look.

[rico.trevisan]

Release 3.21.1 - drop / paste images

• enable / disable file uploading
• limit file size
• declare which MIME types are allowed
• attach files to a data item
• pasted base64 images will upload the files which will parse it to a normal image file → that should result in smaller files, less WUs, etc.
• there be dragons corner :
  • the plugin doesn’t handle HTML content when pasting. It might show up on the editor but it will likely not be saved. Still figuring this out.
  • HEIC / HEIF files are uploaded but not properly displayed.

New fields:

• Max file size (MB): max file of each size
• File uploads enabled
• Attach files to: choose which Bubble thing this item should be related to. Optional, but highly recommended to fill something in so that you can restrict access.
• Allowed MIME types: optional. Empty = no restrictions. List of MIME types – for example image/jpeg, image/png, image/gif– will allow only those types of uploads. Everything else will default to standard browser behavior: open/download that file in a new tab.

New triggers:

• file upload error: when an error occurs.
• file is uploaded: when file completes uploading.

New exposed states:

• File upload error message
• File upload URLs: list of urls of files that have been uploaded.
• File upload progress: number from 0 to 1, indicating progress. 1 = 100%.

[julianno.09]

You are the GOAT, man.

I purchase your course to support the project.

For those who also want to support:
https://indiecourses.com/catalog/build-a-bubbleio-plugin-tiptap-rich-text-editor-3C8d14sCCJfcqSLz7lw8D2

[macsparrow]

@rico.trevisan can you share more on what the refactored CSS fields added in the 3.20.3 version are? I have some custom base div CSS but it doesn’t work in any version after 3.20.2