To Trix or not to Trix

[furilo]

Now that the implementation of #7289 is closer, I wanted to open a final discussion of using Trix or not. Trix is great as it provides a good editor out of the box, abstracts content handling, attachments, etc... but it comes with some limitations - I want us all to reflect on if these limitations are important for Decidim or not.

I have been receiving, or suffering :D, the feedback from a client who needs some basic editing with a Trix and he is very frustrated, and I can see why.

I'm afraid that using Trix will impose some limitations for admins (for users in the public spaces, I feel it won't be a problem). To sum up:

Limitations

(some things may be achieved with custom development, I'm talking about defaults)

• you can't define different levels of headings, just one
• when embedding images, it's difficult to control the position, and you always get the caption box (placing images as in here is not straightforward, or even possible (it may be possible customizing styles though)
• you can't embed iframes/Youtube videos. Supporting all iframes might not be a requirement (also related with security issues etc) but at least enabling Youtube embeds I think it's a must. We managed to do it, but it's not pretty
• Using Trix and then trying to migrate to another system I think is not straightforward, because of the way Trix/ActionText handles things

Also, I have informally talked with a couple of Decidim admins about Trix and after a quick test they think it's not a substantial improvement over what we already have.

I acknowledge that having the perfect editor is not possible. But maybe it makes sense to define the requirements we'd like?

Requirements

(@decidim/product feel free to edit this list - this is intended only as a starting point)

• Basic formating
• Multiple heading levels
• Image uploading via UI and via paste
• Mentions @user
• Embed, at least for Youtube, and/or some other approved services

Nice to haves

• Markdown shortcuts
• History
• Raw HTML mode

Posible alternatives

• https://tiptap.dev/
• https://editorjs.io/
• the editor behind https://www.netlifycms.org/ is fantastic, as it enables you to switch mode to edit raw HTML (although I don't know if want to support this), but it would have to be extracted which I guess makes it a no go

Thoughts?

[mrcasals]

As mentioned in #7289 (comment), uploading from the local machine to Decidim by drag&drop has been solved for Quill in an external module: https://github.com/Platoniq/decidim-module-decidim_awesome/

I opened a issue some months ago to migrate to Trix to be able to use the drag&drop feature and upload attachments, but a lot has rained since and I was not aware of the possibility to have the feature using Quill.

So maybe there's no real need to move away from Quill?

[furilo]

If we maintain Quill I guess the intention is to integrate the dragndrop feature in core.

[andreslucena]

So maybe there's no real need to move away from Quill?

I liked Trix Editor for the Native argument: If Rails is providing a native API for this (ActionText) I think the best course of action is staying native with this as it'd work better with the current and specially the future ecosystem of the framework (ie integrating natively with ActiveStorage)

[furilo]

If we use Trix, I think it's mandatory to extend it with some things or do some adaptations, so the Native argument may not hold... I think we should agree on what we prioritize: developer experience or admin experience ;)

[andreslucena]

Yes, I agree!

I have fears especially with the legacy migration/new bugs and also regarding what you're saying that if we implement all the things that we now have then we'll have maintenance issues down the line.

I've talked with @carolromero and what we'd love to have if we don't migrate to Trix would be image support (without base64 of course) and markdown preview (like HackMD/Discourse/GitHub) but AFAIK markdown is not easily doable in Quill (or I can't find it).

[ahukkanen]

There is by the way this which adds multi-level headings (but it also adds color options which I feel is bad for overall consistency and accessibility):
https://github.com/lazaronixon/trix-extensions

But it's not distributed as its own gem, so there would be maintenance overhead anyways.

[virgile-dev]

I'd add as important :

• having indentation for bullet points
• text justification
• quote styling

Less important :

• colorstyling options
• markdown support
• viewsource mode

Thanks for opening up the debate :)

[andreslucena]

I'd said that some things like text justification and colour styling aren't available in most of the editors (and markdown) because that would allow to break the sites by the users. For instance colour choosing also has implications in accessibility (contrasts with the background and legibility).

[ahukkanen]

An easy way to add images in a rich text editor is a must for any system that handles content. This has been a constant issue.

Looking at all the issues brought up regarding Trix, I am starting to switch my opinion whether it would be a good choice.

What I would see important from technical perspective:

• An editor that does everything what we already have with Quill.js and adds the possibility to add images (read: does not remove any current features)
• Something that does not re-invent HTML as Quill.js or Editor.js, just edit the HTML as we are all used to (and much easier to extend for use cases that are supposed to edit HTML pages)
• Something that is widely used and well supported for the foreseeable future
• Something that doesn't require hundreds of lines of code and days of unnecessary work to add line breaks which is a basic requirement for any rich text editor (Fix linebreaks in WYSWYG editor #6996, Fix editor linebreak module #7070, Fix editor paste #7241, etc.)

+ Everything @virgile-dev has pointed out above, it's a good list of the recurring problems with Quill.js (by the way, bullets indentation is possible with Quill but not in an accessible and standards compliant way).

[ahukkanen]

I've collected some info for easier comparison from the discussion so far. Feel free to incorporate in the beginning of this discussion.

Feature	Quill.JS	Trix
Basic formatting (bold, italic, lists, links)	✔️	✔️
Basic formatting (underline)	✔️	🚫 (won't be added)
Basic formatting (line breaks)	🔨 (through hack)	✔️
Basic formatting (paragraphs)	✔️	🔨 (through hack)
Multi-level headings	✔️	🔌 (Trix Extensions)
Multi-level lists	🚫 (related issue)	✔️
Text justification	✔️	🚫 (possibly coming)
Blockquotes	✔️	✔️
History	✔️	✔️
Image support through upload	🔌 (Decidim Awesome)	✔️
Drag+drop images	🔌 (Decidim Awesome)	✔️
Mentions @user	🔌 (Tribute)	🔌 (Tribute)
YouTube embeds	✔️	🚫 (difficult)
Markdown shortcuts	🔌 (Quill Markdown Shortcuts)	🚫 (author comment)
Raw HTML editing	🔌 (quill-html-edit-button)	🚫 (probably never)
Does not re-invent HTML (easier to extend)	🚫	🚫
Widely used	(used by 54.8k)	(used by 5.5k)
Well supported (latest release)	2019-09-09 (1.3.7)	2020-12-04 (1.3.1)
Well supported (last commit)	2021-03-27	2021-04-26
Well supported (number of contributors)	127	33

✔️ = Available
🚫 = Not available
🔌 = Available plugin / extension
🔨 = Available hack / fork

[microstudi]

Seeing this (amazing) list, and from my perspective, I vote to maintain Quill until Trix is more widely used and has more plugins/options available.
Quill is more hackable (ie: easily customizable).

[furilo]

Amazing work @ahukkanen, thanks a lot!! Yesterday we had a sprint review meeting for the Online Meetings project and it was decided to stick by the moment with Quill, given the uncertainty with Trix, and try to fix some of the issues (starting with the Dragndrop image upload)

[leio10]

Hi, maybe it's too early to say it, but based on this thread we should start thinking about a replacement for Quill. 😟

[ahukkanen]

As an update also to this thread, after all we decided to go with TipTap (see #10082).

TipTap seemed to be the most flexible option we have right now. It is a "headless" editor which means it only controls the editable area (based on ProseMirror) and provides us nice a programming API to work with the editable area. Using this API, we've implemented our own user interface which integrates nicely with Decidim.

TipTap doesn't seem to have any limitations in regards of what we can do with the editor. It provides most of what we need already as official extensions and the rest we could implement through our own extensions. The integration was much more work than integrating a simple drop-in editor, such as Quill, CKEditor, TinyMCE, etc. But this approach gives us almost unlimited possibilities to extend and customize the editor just as we wish for the context where we use it.

The only "odd" thing that we found out during the implementation was that TipTap adds extra paragraphs to list elements, i.e. <li><p>List element</p></li>. This is to support all the "marks" and inline elements within the list elements, such as line breaks, bold, italics, etc. But we can live with this as it is still valid HTML and much better what we had with Quill (which didn't support nested lists).

Also to note for the future that we are aware that TipTap is relatively new and right now the v2 we are using is still in beta. The same might happen to it as happened to Quill but we should be fine living with it at least for the foreseeable future, i.e. at least as long as we lived with Quill.

The implementation is ready for testing (see #10082 and #10196).