WYSIWYG support for collapsible sections (Accordion)

[Yves852]

Summary

Add a collapsible section option in the WYSIWYG editor, eventually based on TinyMCE Accordion plugin.

Basic Example

No response

Motivation

If it's possible to manually edit the code to add it, the graphical editor doesn't support it and the section is rendered closed, cannot be opened and its content cannot be viewed/edited.

As the underlaying html tags (details and summary) are supported as code and rendered in most if not all browsers, the graphical option is the missing brick to support this feature.

Additionally these tags can be styled client side without requiring users to edit the code, allowing to use this simple graphical template for pages content wherever they want with any supported html content.

Detailed Design

According to TinyMCE documentation: https://www.tiny.cloud/docs/tinymce/latest/accordion/.

The Accordion plugin allows for the creation of collapsible sections in a document that can be expanded or collapsed to show or hide additional content.

By default, when the accordion plugin is loaded, the command is available in the TinyMCE menu at Insert → Accordion.

Adding accordion to the toolbar in the TinyMCE configuration adds an Accordion icon to the TinyMCE toolbar.

And, when a specific collapsible section is selected, a pop-up menu presents offering two controls: one to collapse or expand the selected section; and one to delete the selected section.

Requirements List

Must Have:

• Ability to wrap (any html) content in a <details> tag below a <summary> tag.
• (if using plugin) TinyMCE >= 6.5 (Directus app 10.10.4 feats "tinymce": "6.8.3")

Drawbacks

An external editor plugin could embed this option as well. Compatibility issue for older/exotic browsers?

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#browser_compatibility

It’s been available across browsers since January 2020.

Alternatives

Collapsible section can already be used when coding it directly but it's a poor experience for non-it users. An external editor plugin could embed this option as well. Optional feature.

Adoption Strategy

To be determined.

Unresolved Questions

No response