Extending Rich Text Editor [Tiptap] Property Editor UI with configurable setting

Hey there!

I’m using v15 and I have a need to limit the number of characters that a data type using Rich Text Editor [Tiptap] Property Editor UI can have.

I’ve found this TipTap CharacterCount extension that does what I need exactly.

The only thing I’m missing is adding the limit itself as a configuration of the datatype.

Can I have some kind of property editor UI that extends the default Umb.PropertyEditorUi.Tiptap but adds the new configuration?

Also, if I keep the schema as Umbraco.RichText I’ll have the default RTE behavior when using models builder, correct?

All the best,
Pedro

Kindly bumping this as I’m still lost on how to achieve this :downcast_face_with_sweat:

There is documentation on how to add extensions to Tiptap here:

Not sure if you can make the limit configurable though, you might need to play around with it to find out.

2 Likes

… Ok…

Apparently, the “Word Counter” status that can be added to the status bar IS the character counter extension I was trying to add……..

If the character counter extension allows for a limit, why not use it? the same way as the textbox allows maximum chars.

Can anyone in v16 check if the Rich Text Editor configuration has limit for the number of characters?

Hi @PMendesWebDev

Seems fair, to be able to set a limit, but it is not a feature of the CMS as we are speaking. Neither in our next steps, but it surely could be, and it would be an appreciated contribution. :umbraco-heart:

Until then, if you have a nearing deadline, one solution could be to look into how to append your own Validation Rules to an existing Property Editors.

It can be a bit complex for some devs, given the circumstance that your code would need to handle variants of the property. But I have an example of how to set up your own validation logic, appending existing/other property editors than the one you are coding.

I do recognize your case has one unknown, which is the fact that you like to use the TipTap Extension to do the word counting for you. So you need to find a way to connect the two.
I would look into whether it’s possible to utilize the counting logic in your Validation Rule. Just notice the main tricky part here becomes that the TipTaip editor is only initialized and running when on screen. Where the Validation Rules from my example is running for the whole Document.

It’s part of my talk from this year’s codegarden, and the code is available in this repo:

(There is also an example in the Codebase of the CMS. But I do I think currently the one from the talk is must up to date, but for anyone reading this in a year or two, then please make sure to check the example in the codebase.)

Good luck, and I hope to hear about how you go about it :crossed_fingers:

1 Like

Thank you @nielslyngsoe for the input :slight_smile:

As this is not a must-have but rather a nice-to-have, I’ll use the word/char count to give info to the content editor and the character limitation will be present as a best practice in the property’s description.

If I end up having the time, I’ll might try to get it done in Umbraco as my first PR :smiley:

Thanks again

1 Like

@PMendesWebDev sounds reasonable, feel free to keep me in the loop on the PR!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.