Not compatible with CKEditor 5

I will try to resolve this issue

I have implemented the given solution and have attached a patch for your review

Thanks Atul,

+ the code worked fine for me when I added it through the source code of the page:

<details class="pre" data-bordered="" data-collapse="true" data-color="" data-cssclass="" data-hidesummary="" data-maxheight="" data-monospace="" data-wrap="" undefined=""><summary class="pre-title" style="font-weight: bold">Meer hierover lezen?</summary>

<div class="pre-content" style="padding: 4px 12px; margin-top: 2px; white-space: pre; overflow: auto;">Enter text or code snippet...</div>
</details>

- I could not add an icon tot the CKeditor 5 toolbar. Hence I could not open the "Collapsible snippets settings" form in the WYSIWYG window.

Best wishes,

JP

The above patch worked in removing the problem error, however I'm getting a different error preventing me from saving. I have settings "Limit allowed HTML tags and correct faulty HTML" and "Correct faulty and chopped off HTML" both unchecked. Not sure if this a problem with CKEditor5 or collapse text with this patch in particular. Any way to resolve this issue?

The current CKEditor 5 build requires the following elements and attributes:
<br> <p class> <h2 class> <h3 class> <h4 class> <h5 class> <h6 class> <cite> <dl> <dt> <dd> <span> <blockquote cite> <h1 class> <div class> <code class language-*> <pre class> <* dir ltr rtl lang> <strong> <em> <u> <s> <sub> <sup> <a href> <ul> <ol reversed start> <li> <hr> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption> <img src alt height width>

The following elements are missing:
<br> <p class> <h2 class> <h3 class> <h4 class> <h5 class> <h6 class> <cite> <dl> <dt> <dd> <span> <blockquote cite> <h1 class> <div class> <code class language-*> <pre class> <* dir ltr rtl lang> <strong> <em> <u> <s> <sub> <sup> <a href> <ul> <ol reversed start> <li> <hr> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption> <img src alt height width>

My manual editable tags are as follows:

<p class> <h2 class> <h3 class> <h4 class> <h5 class> <h6 class> <cite> <dl> <dt> <dd> <span> <blockquote cite> <h1 class> <div class> <code class language-*> <pre class> <* dir ltr rtl lang>

drupal v9.5.9

#3 is wrong; this is custom markup, because [collapse] is not HTML markup.

Quoting \Drupal\filter\Plugin\FilterInterface::TYPE_MARKUP_LANGUAGE:

  /**
   * Non-HTML markup language filters that generate HTML.
   */
  const TYPE_MARKUP_LANGUAGE = 0;

In order for this to work correctly in CKEditor 5, this would need a custom plugin. Also, I'm not entirely sure it's possible to do that, because this really is using non-HTML markup, and I'm not sure how that could possibly be handled inside CKEditor 5. Because of that, this may need to do some complex additional pre-processing either before the CKEditor 5 JS is initialized or in the low-level CKEditor 5 HTML engine.

But looking at https://git.drupalcode.org/project/collapse_text/-/blob/2.0.x/src/Plugin..., this filter has been doing very complex things for years. This module seems to be architected in a way that sort of goes against the grain of how the filter system is designed to work 😅

https://www.drupal.org/project/collapse_text#known-issues lists:

1 - Integration (with other modules)

Other filters, such as the HTML corrector (Correct faulty and chopped off HTML), media, entity_embed and probably many other filter modules are known to cause issues with collapse text.

If other conflicting filters are enabled, it is important to configure collapse text to run after them, by ordering it below (heavier than) other filters, under Filter processing order, see screenshot and configuration steps from section Installation and configuration above.

👆 This just confirms what I wrote in #6. The way that this filter is architected will continue to cause problem after problem.

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.

Added this to https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito... 👍

I'm not sure I agree Wim's assessment that this needs a proper CKE5 plugin. Changing the filter plugin type to Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_IRREVERSIBLE resolves this issue for me and allows collapse text work exactly like it does in CKE4.

The module does its thing in a clunky way, but it's literally meant to parse these custom tags and convert them to HTML, only when the content is actually displayed/rendered. It's not meant to display the converted content within CKEditor. It never did that.

Yes, ideally there would be some CKE toolbar button to create these collapsed text items in the editor, which under the hood created custom HTML markup as described in #7. That would provide a true WYSIWYG experience. But the module never worked that way.

The same issue affects other modules that use these custom "tokens":
#3378663: CKEditor 5 only works with HTML-based text formats. The "Email Token Filter" (email_token) filter implies this text format is not HTML anymore
#3299104: Change filter type to TYPE_TRANSFORM_REVERSIBLE (CKEditor 5 compatibility)
#3294067: Filter not working with CkEditor 5

Thanks a lot to everyone for your great help with this ticket and contributions, it's greatly appreciated.

The discussion exchanges above are super helpful and constructive.

Special thanks to Brian (@bkosborne) for summing everything up just perfectly at #9.
 

The current D10 version (2.0.x) is pretty much a port of the initial implementation on D7, which was already developed when I inherited the maintenance of the module, mostly to support clients' projects using it.

Overall, bug fixes and version compatibility updates are the only changes that were really made to the module over the years, so its initial implementation from D7 pretty much stayed intact.
 

Seeing the various issues we've been having over the years with its processing method/implementation, I think Brian is very nice to qualify it as "clunky" and Wim clearly understood the hard time we've been having supporting, documenting and maintaining the module (#7).

Personnally, I would be more than happy if we could drastically cut down the code and processing of this module, as suggested by Wim at #7 and summed up by Brian above:

Yes, ideally there would be some CKE toolbar button to create these collapsed text items in the editor, which under the hood created custom HTML markup as described in #7. That would provide a true WYSIWYG experience.

Additionally, it hasn't been easy to document the usage of the module as well, since it's quite complicated in the way the custom [collapse] markup works, with its attributes, parameters, etc... which would all become unnecessary if there was a "true WYSIWYG experience".
 

I've taken a quick look at the module suggested by Wim : CKEditor Accordion (above at #7), which works great, but a bit differently from this one, at least for the markup that's generated by the module (<dl><dt><dd>).

But, it brought me to looking a bit further for something closer to what we have in collapse_text, generating "details/summary" markup, perhaps in a CKEditor5 plugin, and found the following tickets:

• CKEditor5 Issues: Support for details and summary elements
• CKEditor Issues: Toggleable lists; Support for Details Summary tags.

 
Which brought me to the following module CKeditor Details Accordion, which I tested, worked great and really matches the markup generated by Collapse Text.

If we could perhaps add a few options to the ckeditor_details module, such as changing the CSS class, ID, etc... I suppose all the features from collapse_text could probably be covered by ckeditor_details.

Since it's really not clear to me at this point what could be achieved in terms of integration with CKEditor5, I created the following ticket as a follow-up to the discussion in this issue:
#3418506: CKEditor5 improvements: provide a true WYSIWYG experience

However, I personally have great doubts this is ever going to result on anything concrete and this ticket was mostly created for the sake of documentation.
But, in truth, if I were to require collapsible text sections in a project at this point in time, I would most likely go for CKeditor Details Accordion with CKEditor5 on D10.
I personally believe we should probably be moving this feature and its development over to ckeditor_details, steering users away from collapse_text and that's why I added a green information box at the top of project's page as an attempt to direct users over to CKeditor Details Accordion.
I've also updated module's Maintenance and Development statuses to: Minimally maintained and Maintenance fixes only, as it should have already been for the past couple of years.

For the time being, as mentioned by Brian, since the module has always worked this way, and the patch allows it to keep working the same way with CKEditor5, I went ahead and committed the changes at #10.

Brian (@bkosborne), I've seen in your "DrupalCode profile" you've been quite active with CKEditor related modules, and more particularly the maintainer of CKEditor FakeObjects and CKEditor iFrame, which probably require quite a bit of knowledge and experience working with CKEditor, so it would definitely be great if we could benefit from your input in the related CKEditor5 ticket for collapse_text, when you have some time and if you're interested in moving this feature forward.

We would greatly appreciate to have more feedback, comments and advice on the way to move forward with this module, with a better integration with CKEditor5 and perhaps simplification of its current implementation.

Once again, I would like to thank everyone for your great help, suggestions and contributions in this ticket.

Feel free to let us know at any point if anything is unclear, or if you have any questions or would need more information on any of the recent code changes, this ticket or the project in general, we would surely be glad to help.
Thanks in advance !