WYSIWYG improvements

[xeron]

Feature

All current WYSIWYG options don't provide enough features to be useful when there's a need to provide a visual editor to publish static pages, blog posts, etc. Over time Avo provided several solutions — trix, tiptap and rhino — but none of them were ever fully developed into a powerful editor which would have a lot of features and/or will be easily configurable.

I'm asking to choose a single solution (e.g. rhino), and make it actually usable for publishing.

Here's an example of the features we use:

• Uploading files and inserting as images (drag-n-drop if possible)
• Block styles (header 1/2/3/…, paragraph, etc)
• Text/Block horizontal alignment
• Undo / Redo
• Changing links to open in either new window or same window
• Font family, size, color
• Tables
• Inserting horizontal line
• Clear selected text formatting

There's also a couple of features which are more specific but we use them so it would be great to have an ability to do the following:

• Image class selector (e.g. to add Bootstrap's img-fluid to the img tag)
• video format for inserting embedded YT videos (e.g. to add Bootstrap's ratio ratio-16x9 class to the block)

Current workarounds

It's possible to integrate a powerful 3rd party editors using custom Stimulus controller (e.g. we use TinyMCE right now), but most of them don't integrate very well with ActiveStorage — while uploading itself is not hard to solve, attaching images to the object which has not been saved to DB yet is tricky (new action).

Screenshots or screen recordings

https://drive.google.com/file/d/10H2UpFsvHYJfoKg8Ewd9Tp_lLB2C8DYe/view?usp=sharing

Additional context

https://www.tiny.cloud/docs/tinymce/latest/basic-example/