Make ckeditor_liststyle compatible with ckeditor5

Any update.

Please update this issue has been fixed or not , Thanks!

This can now be reviewed. The MR will integrate the list styles options as in the ckeditor5 demo of this feature.

The patch is based on a customized version of the ckeditor5-list package which is part of the ckeditor5 main repo.The reason for including the plugin that way is that it's based on the ongoing work to bring this functionality into core, which unfortunately is blocked by a bug in ckeditor5 itself, see also the corresponding comment in the core issue.

The customized version of the ckeditor5 included in the MR solves these problems and is a shortcut to make this functionality available in Drupal right now, as it's uncertain how long a fix in ckeditor5 and a corresponding update of ckeditor5 inside Drupal core will take to be committed.

Please note that the following core patch in this comment is currently required to make this patch work.

Hello s_leu,

I have cloned the module and enabled it locally, the module working fine and covers all the functionality from the existing module
list type (e.g. circle, square, dot for bulleted list or decimal, lower/upper roman, lower/upper alpha for numbered list)
start number (for numbered list).

Please check the screenshot, all the options working fine

Because usage of MRs directly in composer is a bad practice (cause they are dynamic), I'm adding a patch file (which is static) of the MR as it is today, to be used until this gets included in the project.

Thanks for all the work done here.

Re-roll of all work towards the latest (1.5) version of the module.
MR updated.

This will be obsolete once #3274635: [upstream] Use CKEditor 5's native <ol type> and <ul type> UX lands in Drupal core 😊

Please review that, so we can land it there!

Any update on this functionality? Thank you for your hard work. This is eagerly anticipated and much needed. Thanks again!

@s_leu there one issue I'm facing, unable to add a code block inside list
can you check

While using this patch and upgrading to Drupal core 10.2.1, I get the following issue:

The "ckeditor5_list" CKEditor 5 plugin definition is configurable, but its default configuration does not match its config schema. The following errors were found: [properties] missing schema, [multiBlock] missing schema.

I am getting same issue as #14 when upgrading to Drupal 10.2.1. Only solution for me was to uninstall the module for now

I was able to resolve issue from #14 by removing the patch from #10 I was applying -- https://www.drupal.org/files/issues/2023-08-15/3326957-liststyle_ck5-10-...

Using:

"drupal/core-recommended": "^10.2"
"drupal/ckeditor_liststyle": "1.x-dev@dev"

Also getting the error in #14:

Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException: The "ckeditor5_list" CKEditor 5 plugin definition is configurable, but its default configuration does not match its config schema. The following errors were found: [properties] missing schema, [multiBlock] missing schema. in Drupal\ckeditor5\Plugin\CKEditor5PluginDefinition->validateDrupalAspects() (line 190 of core/modules/ckeditor5/src/Plugin/CKEditor5PluginDefinition.php).

Confirmed the problem with D10.2.

The next patch solves the problem but I know that it needs more work because the schema of the configuration is incorrect. The patch works but needs more work.

Adding interdiff.

Using:

"drupal/core-recommended": "^10.2",
"drupal/ckeditor_liststyle": "1.x-dev@dev"

Not getting any onscreen error when applied patch #18. But when I try to switch the text format on the editor, the editor box is getting added on top of each whenever we switch the text format. Attached is the screenshot. And Attached the console error:

ckeditor5.js?s9w418:477 CKEditorError: schema-cannot-extend-missing-item {"itemName":"$listItem"}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-schema-cannot-extend-missing-item
    at li.extend (ckeditor5-dll.js?v=40.2.0:5:312284)
    at On.<anonymous> (html-support.js?v=40.2.0:5:62810)
    at On.fire (ckeditor5-dll.js?v=40.2.0:5:604093)
    at On._fireRegisterEvent (html-support.js?v=40.2.0:5:45500)
    at editor.data.on.priority (html-support.js?v=40.2.0:5:43517)
    at Vi.fire (ckeditor5-dll.js?v=40.2.0:5:604093)
    at <computed> [as init] (ckeditor5-dll.js?v=40.2.0:5:607777)
    at editor-classic.js?v=40.2.0:4:9696
(anonymous)	@	ckeditor5.js?s9w418:477

When I remove the patch and test it, the above issue is not repeating.

Getting this error also with Drupal 10.2.4, ckeditor_liststyle 1.5.0 + this patch #18
And the CKEditor textarea is empty.

I am getting the the problem as described above with Drupal 10.2.2, CKEditor List Style 1.5, and patch #18.

The problem, after applying the patch, is in the file config/schema/ckeditor_liststyle.schema.yml
it is not having the correct configuration.

Here the patch updated, and the diff.

FYI: we have decide to uninstall this module and use the patch that bring the same functionality but directly in Drupal core: https://www.drupal.org/project/drupal/issues/3274635#comment-15507417

Same error for us when we apply 23. This is a real bummer. The core project @Tomefa linked is too buggy for us to use. For some reason all of these base themes have set the list styles at a fundamental level. Never mind the fact that ckeditor injects it onto the page itself with /docroot/core/assets/vendor/ckeditor5/list/list.js

Edit: nuts. Imported config and busted again.

Edit edit. Wow. I just noticed how this module is overriding list.js... it has its own committed to the repo. That is wild.

The list style buttons seem to work, but when the wysiwyg loads, I'm still getting this in the console:

CKEditorError: schema-cannot-extend-missing-item {"itemName":"$listItem"}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#erro...
at li.extend (ckeditor5-dll.js?v=40.2.0:5:312284)
at On. (html-support.js?v=40.2.0:5:62810)
at On.fire (ckeditor5-dll.js?v=40.2.0:5:604093)
at On._fireRegisterEvent (html-support.js?v=40.2.0:5:45500)
at editor.data.on.priority (html-support.js?v=40.2.0:5:43517)
at Vi.fire (ckeditor5-dll.js?v=40.2.0:5:604093)
at [as init] (ckeditor5-dll.js?v=40.2.0:5:607777)
at editor-classic.js?v=40.2.0:4:9696

And every time we switch text formats, the toolbar duplicates ad nauseum.

And I'm getting these errors when editing two different text formats:

'styles' is not a supported key.

and

The List plugin needs another plugin to create

, for it to be able to create the following attributes:

. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

I noticed there's no ckeditor5.yml file for this module. That's where the plugins would be defined. Isn't this file necessary for any ckeditor 5 module?

Cloned comment from https://www.drupal.org/node/3283526

I added a ckeditor5.yml file:

ckeditor_liststyle_liststyle:
  ckeditor5:
    plugins:
      - list.bulletedListStyle
      - list.numberedListStyle
  drupal:
    label: ListStyle
    library: ckeditor_liststyle/editor
    class: Drupal\ckeditor_liststyle\Plugin\CKEditor5Plugin\ListStyle
    elements:
      - <ul>
      - <ul type>
      - <ol>
      - <ol type>
    conditions:
      plugins:
        - ckeditor5_list

And we are getting:

LogicException: The "ckeditor_liststyle_liststyle" CKEditor 5 plugin implements ::getElementsSubset() and did return a subset ("<ul type><ol type reversed start>") but the following tags can no longer be created: "<ul><ol>". in Drupal\ckeditor5\Plugin\CKEditor5PluginManager->getProvidedElements() (line 409 of /home/ide/project/docroot/core/modules/ckeditor5/src/Plugin/CKEditor5PluginManager.php).

And of course the eternal problem of this message on the text format.

With CKEditor 5 this is a read-only field. The allowed HTML tags and attributes are determined by the CKEditor 5 configuration. Manually removing tags would break enabled functionality, and any manually added tags would be removed by CKEditor 5 on render.

Even adding the ul and ol manually to the config yml file won't override the Allowed HTML tags on import.

So what are we supposed to do?

I genuinely have no idea what's going on with this module but we pinned to

"drupal/ckeditor_liststyle": "1.x-dev#a34d9baa310af13de950e6e1f46c38faa6ac7c07",

And another one of our team members simply created a ckeditor 5 patch for the info file

diff --git a/ckeditor_liststyle.info.yml b/ckeditor_liststyle.info.yml
index 0823a9d..691e029 100644
--- a/ckeditor_liststyle.info.yml
+++ b/ckeditor_liststyle.info.yml
@@ -3,5 +3,5 @@ type: module
 description: This plugin adds numbered list and ordered list properties dialogs (available in context menu) in CKEditor.
 package: CKEditor
 dependencies:
-  - drupal:ckeditor
+  - drupal:ckeditor5
 core_version_requirement: ^8 || ^9 || ^10

And the module works.

This makes literally no sense whatsoever but here we are. My guess is the most recent version of the library works fine and any addional Drupaly stuff isn't really necessary to make sure the plugin works in general.

Specifically, I believe whatever code was added to make the "styles" toggle work in the new code is busted in many ways. If you want this module to work, simply pin the release to the version and hash I have marked above and use the patch I added below. Hopefully this lets us ride it out until the core issue is completed and we have list styles as a part of core.

I mis-spoke. It only works on the full_html text format ... I assume because it allows for the changing of any HTML tag? I'm guessing since every other text format must abide by whatever tags are allowed by the different plugins, ul type and ol type cannot be added.

I don't know. This is a bit of a mess.

I’ve reviewed and tested the patch (#10), and I’ve had it working in a project for a while now.

Any movement on updates to this module to make it compatible with CKEditor5? We're on core 10.4.5. The workarounds on this thread seem to indicate we'd have to keep the deprecated CKEditor4 dependency enabled as well which we wouldn't want to do.

As a follow up to my last comment/question. I ended up using the 10.4.5 core patch that brings this same functionality via https://www.drupal.org/project/drupal/issues/3274635#comment-16045633. Looks as though they're getting very close to merging this update into core as well. Hoping this patch is short lived.