Make ckeditor_liststyle compatible with ckeditor5

Any update.

Any update.

This can now be reviewed. The MR will integrate the list styles options as in the ckeditor5 demo here: https://ckeditor.com/docs/ckeditor5/latest/features/lists/document-lists...

The patch is based on a customized version of the ckeditor5-list package which is part of the ckeditor5 main repo: https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list . The reason for including the plugin that way is that it's based on the ongoing work to bring this functionality into core ✨ [upstream] Use CKEditor 5's native and UX Needs work , which unfortunately is blocked by a bug in ckeditor5 itself, see also the corresponding comment in the core issue ✨ [upstream] Use CKEditor 5's native and UX Needs work .

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 ✨ [upstream] Use CKEditor 5's native and UX Needs work 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 ✨ [upstream] Use CKEditor 5's native and UX Needs work 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 ✨ [upstream] Use CKEditor 5's native and UX Needs work

Same. This is a real bummer. We are using an old core base theme for our admin theme, so the core project @Tomefa linked isn't working for us. 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

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 I'm getting these errors when editing two different text formats:

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.

I mis-spoke. It only works on the full_html text format 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.