feature: add Tiptap WYSIWYG field

[olivierbuffon]

trafficstars

Description

This PR introduce Tiptap WYSIWYG basic features as a new field. Since Tiptap has been built in a way where each feature of the editor comes as an extension, this PR comes as a very first implementation to set the base of what could come next (attachments, code blocks...).

Fixes #2467

Checklist:

• [x] Add tiptap and required extensions to the imported JS resources

• [x] Create a new tiptap field

• [x] Enable basic edition features (Bold, Italic, Bullet list...)

• [x] Handle custom placeholder and always_show options

• [x] Add custom css in a separate file

• [x] Add missing required SBG icons

• [x] Enable the field on one of the dummy app resouce (product description)

• [x] I have performed a self-review of my own code

• [ ] I have commented my code, particularly in hard-to-understand areas

• [ ] I have made corresponding changes to the documentation

• [x] I have added tests that prove my fix is effective or that my feature works

Screenshots & recording

Manual review steps

This feature can be tested by playing in the product edition section of the included dummy app.

[qlty-cloud-legacy[bot]]

Code Climate has analyzed commit af42b211 and detected 0 issues on this pull request.

View more on Code Climate.

[olivierbuffon]

@adrianthedev As discussed this is a functional first version. As backend developer it's been a while for me sinc I played with the frontend and it's been a first for me playing with StimulusJS, so don't be shy on the feedbacks 😄 !

[adrianthedev]

Thanks for this amazing contribution @olivierbuffon.

I'm traveling right now, but it's on my list to review ASAP.

[olivierbuffon]

@adrianthedev hehe my pleasure. No rush take your time and have a safe trip. 😉

[olivierbuffon]

@adrianthedev Thanks! Sure thing! I'll do that for you as soon I have some free time.

[olivierbuffon]

There you go!

[adrianthedev]

Ah-mazing @olivierbuffon! Thank you for all the thoughtful work you've put in to this. Tip Tap was a long time request from users.

What do you think we should tackle next? Maybe Active Storage support? Anything else you have in mind?

[olivierbuffon]

@adrianthedev indeed! I think being able to attach stuff might be the next big request regarding this field.

[xeron]

@olivierbuffon this is awesome! Thanks!

While I can't replace my current custom tinyMCE integration because I need an ability to insert images I have a couple of other places where I don't need images so I can use this now.

Small things which are not as complex as image upload but will make this much better:

• Block styles (header 1/2/3/…, paragraph, etc)
• Text alignment
• Undo / Redo
• Tables
• Changing links to open in either new window or same window

[olivierbuffon]

@xeron Thanks for the feedback! Those points make total sense to me. This was a very first implementation so we could introduce TipTap inside the codebase. I'll definitely try to improve it when I'll have more time to dedicate to it. But if you want to help on this feature please do. I've set the basis so I guess a couple of those requested features would make great cases for a first contribution 😃.