CKEditor 5 readiness

I'll definitely be releasing a version that support CKEditor 5! It should be out sometime in October. :-)

Yay, thanks @j-vee! Let us know if you have any questions in the #ckeditor5 Drupal Slack channel. Useful resources:

1. https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito...
2. https://www.drupal.org/project/ckeditor5_dev

Good luck! 👍

I put together the first beta release 2.0.0-beta1.

It has all the same functionality than the old version, but there were some CKEditor 5 quirks that I couldn't quite figure out in time. So I listed them in the readme and I hope the community can help me figure them out. Mainly:
- Balloon toolbar should hover over selected row
- Icons in the Accordion Balloon toolbar are not displaying
- The inserted title row should get selected after insertion

Awesome news! I've updated https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito... accordingly 😊

I checked out the 2.0.x branch and have a few thoughts:

1. I see that <dl> and <dl class> are explicitly supported, but what about <dt> and <dd>?
2. The new 2.0.x branch dropped support for CKEditor 4. Please bring it back. 🙏 We need a single release to support both CKE4 and CKE5 at the same time. That allows sites to gradually migrate each text format from 4 to 5.
3. There is no automatic upgrade path yet. This requires a CKEditor4To5UpgradePluginInterface implementation — see https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito... for many examples 😊 But … in this case it's so simple, since there's no configuration at all, that I figured I'd write it for you:
   

   /**
    * @CKEditor4To5Upgrade(
    *   id = "ckeditor_accordion",
    *   cke4_buttons = {
    *     "Accordion",
    *   },
    *   cke4_plugin_settings = {
    *   },
    *   cke5_plugin_elements_subset_configuration = {
    *   }
    * )
    *
    * @internal
    *   Plugin classes are internal.
    */
   class Accordion extends PluginBase implements CKEditor4To5UpgradePluginInterface {
   
     /**
      * {@inheritdoc}
      */
     public function mapCKEditor4ToolbarButtonToCKEditor5ToolbarItem(string $cke4_button, HTMLRestrictions $text_format_html_restrictions): ?array {
       switch ($cke4_button) {
         case 'Accordion':
           return ['Accordion'];
   
         default:
           throw new \OutOfBoundsException();
       }
     }
   
     /**
      * {@inheritdoc}
      */
     public function mapCKEditor4SettingsToCKEditor5Configuration(string $cke4_plugin_id, array $cke4_plugin_settings): ?array {
       throw new \OutOfBoundsException();
     }
   
     /**
      * {@inheritdoc}
      */
     public function computeCKEditor5PluginSubsetConfiguration(string $cke5_plugin_id, FilterFormatInterface $text_format): ?array {
       throw new \OutOfBoundsException();
     }
   
   }
   

4. Similarly, you also want upgrade path test coverage. I think the closest example for this case would be https://git.drupalcode.org/project/drupal/-/commit/12e8b703f8449175de6f3....

Let me know if you have any other questions!

Thanks for you help Wim! It's much appreciated.

I added a commit to the dev branch that addresses points 1, 2, 3: https://git.drupalcode.org/project/ckeditor_accordion/-/commit/095c55978...

If that's all looking good, I'll add the test to the repo as well and push a new beta release out. :-)

Thanks!

Excellent improvement!

A test would still be great :)

Finally:

core_version_requirement: ^9.3 || ^10
configure: ckeditor_accordion.settings
dependencies:
  - drupal:ckeditor5

This module should not have a hard dependency on CKEditor 5, since it supports both 4 and 5.

Thanks again @wim-leers! I've added the test and removed ckeditor5 dependency in commit https://git.drupalcode.org/project/ckeditor_accordion/-/commit/de7fd0c6f...

Couldn't have figured the whole process out this fast myself so thanks for that also :-)

If the test looks alright, I'll create a new beta release for people.

I can help test this! May help another module we use where we need an accordion but in a very specific library

Running into a problem on the newest version where the accordion tabs are not expanding on the site. The accordion tab basically just links to an empty anchor on the page (it looks like the hash is getting appended to the URL). The JS/JQuery does seem to be adding the "active" class to the tab but not the CSS controlling the visibility to the tab content.

What browser are you using @jallen41? Can you also post the error log that appears in your DevTools console (open with F12)?

I've tried Firefox, Chrome & Edge with the latest version and the accordion is working fine. It sounds like the issue could also be another JS error on your site that prevents the accordion frontend JS from running. But your log will explain the issue more.

But I did find an issue where the accordion could break if tabs were being opened simultaneously. I pushed a fix for that out to 2.0.x-dev. Can you try with that as well?

And thanks for that @smustgrave! That'll be much appreciated.

@j-vee I tested in both Chrome and Firefox. Here is the error log:

Thanks for the report @jallen41! I couldn't replicate that exact issue but I do think that the animation system needed an overhaul after the move from jQuery to native javascript.

So I rewrote the frontend JS and pushed a fix out to the dev branch again. We're now using https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimation... for animations which should be compatible with all modern browsers. Tested with Chrome, Firefox, Edge and it's working fine.

Can you give it a whirl to see whether your issue is fixed?

There's also now a new option in /admin/config/content/ckeditor-accordion to disable animations completely as well for those who want to do so.

* Have the same issue for slide up and slide down functionalities - as #10 and #12 in chrome.

* Also looking into the nested accordion feature which was available in version 8.x-1.3 after the patch at https://www.drupal.org/files/issues/2022-07-04/ckeditor_accordion-enable...

Hi @dhan123! Thanks for the feedback, can you try the 2.0.x-dev branch? The issue with the slide up/down should be fixed in that one. If you can confirm that it works there, I'll create a new beta release of that branch.

And that nested accordion patch was made for CKEditor 4 version of the plugin and since that plugin JS file is still in the same location, that patch will work IF you're using CKEditor 4 on your site. But your nested accordions won't work if you upgrade your site to CKEditor 5.

Creating a CKEditor 5 version of that plugin will be a harder task since the plugin architecture has completely changed. I'll raise the issue up at https://www.drupal.org/project/ckeditor_accordion/issues/3138679 and see if there's folks who can tackle it.

So testing on latest version of
D10 - olivero theme (default for drupal)
Latest version of 2.x dev

Everything works through the Ckeditor

But when I click an accordion page jumps to the top

Thanks @smustgrave! That was a silly mistake on my part. I've pushed a fix out to 2.0.x-dev that will prevent the page from jumping around when toggling accordions.

Really appreciate your work!

I was experiencing the same issue as @smustgrave yesterday and noticed you were working on it. Installed beta3 this morning, and now the accordion item is not opening onclick and appears to freeze. First click attempts to open an accordion item (indicator carrot changes from close to open status), but it becomes unresponsive that point... accordion item doesn’t open and second click anywhere on accordion doesn’t do anything.

Thanks @brian_nsu! I finally caught the bug when I tried the plugin using a clean D9 installation. There was a nextSibling call where nextElementSibling was required.

There's a new release out that should fix this one. https://www.drupal.org/project/ckeditor_accordion/releases/2.0.0-beta4

Success!! Updated to beta4 and accordion is working as expected. Great work... I’ll continue to test.

Working perfect for me!

Like the arrow transition too btw.

Excellent, thanks for the reports! If there's no new bug reports by December, I'll push out an actual 2.0.0 release and close this ticket.

Thanks everyone for your help! I've created a stable release 2.0.0 and it's time to close down this ticket.

Wonderful news — I updated https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito... 😊