CKEditor5 improvements: provide a true WYSIWYG experience

Created on 31 January 2024, 10 months ago

This issue is a follow-up to a discussion on the syntax to use for the module to improve its compatibility with CKEditor5:
#3331979-7: Not compatible with CKEditor 5

It'd be better to adopt HTML-like syntax, so:

<collapse collapsed="collapsed" class="class-example" title="Section collapsed example">
<p>HTML here</p>
</collapse>

instead of

[collapse collapsed="collapsed" class="class-example" title="Section collapsed example"]
<p>HTML here</p>
[/collapse]

That'd simplify this module two orders of magnitude in the @Filter plugin implementation level, but similarly it'd actually make a CKEditor 5 plugin much simpler to achieve.

The related https://www.drupal.org/project/ckeditor_accordion module had a fairly easy time adding CKEditor 5 support precisely because it just uses HTML.

Thanks to Wim's help (@wim-leers) and suggestions, we could certainly consider adopting a different syntax for the module in order to facilitate its integration with CKEditor5 and simplify its current implementation/logic.
 

As it currenly stands, the module already supports an HTML-like syntax, see under Documentation's Usage:

Angle brackets may also be used instead of straight brackets to surround the
collapse tag: <collapse> (turned into [collapse] and work the same way).

and the markup used as example above sort of works currently, with the Full HTML text format :
The <collapse> tags don't show in CKEditor, but they are visible in the source code of the editor.

There are probably some filtering issues, but I think mainly the issue is that <collapse> is not an HTML tag and therefore might not be supported by CKEditor5 (see Wim's and Brian's comments #7 🐛 Not compatible with CKEditor 5 RTBC and #9 🐛 Not compatible with CKEditor 5 RTBC ).

So we're not even sure something like this could be done and it might perhaps require : #6 🐛 Not compatible with CKEditor 5 RTBC

some complex additional pre-processing either before the CKEditor 5 JS is initialized or in the low-level CKEditor 5 HTML engine.

Another option would be to try to find synergies and ways to perhaps make collapse_text move towards an implementation of a "true WYSIWYG experience" :
Looking at CKEditor Accordion certainly sounds like a very good starting point.

But I found the module CKeditor Details Accordion is probably even closer to the type of markup that can be generated by collapse_text.

 

I don't even know if that's possible, but it would really be great if we could do some kind of bridge between the two modules, so it would be possible to visualize in CKEditor the collapsible sections that have been inserted, while still having the collapse text markup in the background, for example when viewing the source code.
 

Any questions, comments, suggestions or advice on this ticket or the project in general, would surely be greatly appreciated.
Thanks in advance !

Feature request
Status

Active

Version

2.0

Component

Wysiwyg

Created by

🇫🇷France dydave

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024