Incompatible with CKEditor 5 in Drupal 9.5

Hi,

I have tested the issue with this MR changes. After pulling the changes, the original issue has been resolved. I'm now able to see the CKEditor toolbar option.
But, I have observed below issues after pulling the changes.

1) Not getting the Media library setting to configure image/video, due to this not able to add the image for PK block.
2) When we are adding the PK block from admin/structure/block layout, getting the below error

Warning: Undefined array key "rows" in Drupal\ckeditor\CKEditorPluginManager::getEnabledButtons() (line 124 of modules/contrib/ckeditor/src/CKEditorPluginManager.php).
Drupal\ckeditor\CKEditorPluginManager::getEnabledButtons(Object) (Line: 71)
Drupal\ckeditor\CKEditorPluginManager->getEnabledPluginFiles(Object, 1) (Line: 325)
Drupal\ckeditor\Plugin\Editor\CKEditor->getJSSettings(Object) (Line: 167)
Drupal\patternkit\Plugin\PatternLibrary\PatternLibraryJSON->schemaEditor('{"$schema":"http:\/\/json-schema.org\/draft-04\/schema#","title":"Example with filtered content","properties":{"text":{"title":"Text","type":"string","options":{"grid_columns":4}},"formatted_text":{"title":"Formatted Text","description":"Only links, bold\/strong, and italic\/emphasis tags are allowed (assuming CKEditor is the wysiwyg plugin). You can use any attributes on these elements (including class, style, and other attributes), except ones prefixed with \"data-\". This field's schema uses the \"disallowedContent\" rule to instruct CKEditor to strip these attributes. However, there is no server-side process that strips them. See Patternkit's README for details.","type":"string","format":"html","options":{"wysiwyg":true,"allowedContent":"a b strong em i[*](*){*}","disallowedContent":"*[data-*]"}},"hidden":{"title":"hidden","type":"string"}},"type":"object","format":"grid","category":"atom"}', Object) (Line: 116)

Hi,

I have tested the issue with this MR changes. After pulling the changes, the original issue has been resolved. I'm now able to see the CKEditor toolbar option.
But, I have observed below issues after pulling the changes.

1) Not getting the Media library setting to configure image/video, due to this not able to add the image for PK block.
2) When we are adding the PK block from admin/structure/block layout, getting the below error

Warning: Undefined array key "rows" in Drupal\ckeditor\CKEditorPluginManager::getEnabledButtons() (line 124 of modules/contrib/ckeditor/src/CKEditorPluginManager.php).
Drupal\ckeditor\CKEditorPluginManager::getEnabledButtons(Object) (Line: 71)
Drupal\ckeditor\CKEditorPluginManager->getEnabledPluginFiles(Object, 1) (Line: 325)
Drupal\ckeditor\Plugin\Editor\CKEditor->getJSSettings(Object) (Line: 167)
Drupal\patternkit\Plugin\PatternLibrary\PatternLibraryJSON->schemaEditor('{"$schema":"http:\/\/json-schema.org\/draft-04\/schema#","title":"Example with filtered content","properties":{"text":{"title":"Text","type":"string","options":{"grid_columns":4}},"formatted_text":{"title":"Formatted Text","description":"Only links, bold\/strong, and italic\/emphasis tags are allowed (assuming CKEditor is the wysiwyg plugin). You can use any attributes on these elements (including class, style, and other attributes), except ones prefixed with \"data-\". This field's schema uses the \"disallowedContent\" rule to instruct CKEditor to strip these attributes. However, there is no server-side process that strips them. See Patternkit's README for details.","type":"string","format":"html","options":{"wysiwyg":true,"allowedContent":"a b strong em i[*](*){*}","disallowedContent":"*[data-*]"}},"hidden":{"title":"hidden","type":"string"}},"type":"object","format":"grid","category":"atom"}', Object) (Line: 116)

@minsharm thanks for testing this! Let me see if I can reproduce the issue you are getting.

I've updated most of the tests to work properly now and use CKEditor 5 instead of the old version of CKEditor. I also adjusted the behavior for how it's attaching the editor and ckeditor libraries on the form to remove a hard dependency and let all of the unrelated tests run without CKEditor enabled or configured at all.

The remaining tests that are failing are focused on the CKEditor integration and confirming values are captured from it. Everything seems to work in the browser directly during manual testing, but when trying to run the FunctionalJavascript tests I get this error:

1) Drupal\Tests\patternkit\FunctionalJavascript\CKEditorIntegrationTest::testCkeditorVisibility
Failed asserting that '{"text":"Pattern block title","formatted_text":"","image_url":"","hidden":"My hidden text"}' contains "My rich text value.".

I've debugged it with a breakpoint and confirmed the CKEditor value is set as expected and fetchable, but for some reason in the tests the value is not being updated to the hidden schema_instance_config field after the value in CKEditor is updated. Even testing in a browser using the same JavaScript commands to set the editor value the field seems to be updated as expected. I haven't been able to figure out what is different here or how to fix it.

Looks like a timing issue. Because the ckeditor5 create method return a promise, there is no way to bind any action on the event. I do see a patch created to allow the ability to bind on "ckeditor5.create". here https://www.drupal.org/project/drupal/issues/3319358 ✨ Trigger event when Text Editor is attached Needs work .

I think the block issue is unrelated, I see that it's using ckeditor module vs ckeditor5 there.

I'm unsure if that's the case or if there's a bug in the logic for attaching the listener. I finally narrowed down that in my manual testing I was editing an existing block with content in that field which worked fine. When I tried to create a new block, however, the fields are not updated. The tests that are failing would be creating a new block, so that explains the discrepancy between the tests and what I was observing.

With this last push I believe everything is working for CKEditor5 integration with one exception:

When editing the content in source edit mode, the change listener is not fired, so the schema configuration doesn't get updated. We had a similar challenge in CKEditor4 that was documented in the code and resolved with additional listeners (see the snippet below), but this has not been ported over to the CKEditor5 solution.

    this.ckeditor_instance.on('change', saveEditorContent);
    // In "source" mode (e.g., by clicking the "Source" button), CKEditor's
    // "change" event does not fire, so we need to listen on the "input"
    // event.
    // See https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#event-change
    this.ckeditor_instance.on('mode', () => {
      if (this.ckeditor_instance.mode === 'source') {
        const editable = this.ckeditor_instance.editable();
        editable.attachListener(editable, 'input', saveEditorContent);
      }
    });
    this.ckeditor_instance.on('blur', () => {
      if (this.ckeditor_instance.mode === 'wysiwyg') {
        saveEditorContent();
      }
    });

Drupal core's logic attempts to account for this via the detach callback where the value should get updated a final time if in source editing mode, but my efforts to use this have been unsuccessful.

The current behavior I'm seeing is that everything works as long as the editor is not in source mode when the form is submitted. If the editor is in source mode when the form is submitted, the value is not properly serialized into the configuration and saved.

Since this is a bit of an edge case that may need more in-depth digging to resolve, I'm leaning toward breaking that work out into a separate issue for follow-up and unblocking this work.

If the editor is in source mode when the form is submitted, the value is not properly serialized into the configuration and saved.

Since this is a bit of an edge case that may need more in-depth digging to resolve, I'm leaning toward breaking that work out into a separate issue for follow-up and unblocking this work.

Per the last comment, I've documented the source editor mode issue for follow-up in 🐛 CKEditor 5 Source Editing Mode May Not Save Content Fixed .

This has been tested internally at Red Hat and is ready for merging in. There is still the issue documented in 🐛 CKEditor 5 Source Editing Mode May Not Save Content Fixed , but that will be addressed as a follow-up item.

Merged for inclusion in the Beta 7 release. ( 🌱 Beta 7 Release Plan Fixed )

Automatically closed - issue fixed for 2 weeks with no activity.