Problem/Motivation

I am currently writing an article about my experience using CKEditor 5 experimental module on a realworld website. It has a few contributed / custom modules activated with format filters and CKEditor integrations. A few examples here are :

  • Linkit version 6.0.0-beta3
  • Layout Paragraph version 1.0.0
  • Media Directories Editor version 2.0.2 : it integrate with the CKEditor
  • CKEditor Templates version 8.x-1.2
  • CKEditor Templates User Interface version 8.x-1.4
  • Codesnippetgeshi version 8.x-2.0-beta1
  • Font Awesome version 8.x-2.22

At the moment I convert my format to CKEditor 5 I get the following messages :
Before patch success messages

Those are a bunch of message that some of the CKEditor tools could not be converted due to contrib lack of upgrade path and therefore they are disabled. As a site builder, the green success color implies that everything is fine. While in fact, it informs me I will lose some functionality, I will expect a warning color at least, and eventually a message that helps me.

Steps to reproduce

  • Install a Drupal 9.3 website
  • Configure a text format to use CKEditor
  • Add and configure contrib module such as CKEditor Templates for instance
  • Convert the text format to CKEditor 5

Proposed resolution

As described above, I suggest a warning message rather than success, and expanding the message with a suggested action.

Before
Before patch success messages
After
CKEditor 4 to 5 migrate after patch 40

Issue fork drupal-3273325

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Dom. created an issue. See original summary.

wim leers’s picture

Issue tags: -ckeditor +Usability, +Upgrade path
dom.’s picture

Issue tags: +ckeditor
ifrik’s picture

StatusFileSize
new107.02 KB


I got a similar green status message when using the Anchor Link and Footnotes modules. In both cases, further action is needed, even though CKEditor 5 has taken some steps to mitigate the problem by adding additional HTML tags to "Source Editing". This message should therefore be a yellow warning, rather than a green success message.

Additionally: Several contrib modules are not yet working with CKEditor 5. Maybe we could have a page on d.o. that lists these modules with a link to their issue about CKEditor 5 compatability. This page could be updated when more modules are identified, or when updating a module will make it CKEditor 5 compatible.
A link to this page should be added to the status message. Then any user who is gets this message could directly find their way to the relevant information. And they might even help fixing the issue for the module that they rely on.

The wording in the message could be something like:
Not all modules on this site are compatible with CKEditor 5. Please check this page [link] for details.

dom.’s picture

Version: 9.4.x-dev » 10.0.x-dev

wim leers’s picture

Issue tags: -drupaldevdays +ddd2022
dom.’s picture

After deeper analyze of the subject, I noticed they are various types of messages that can be generated during the process. Therefore I had to take an opiniated decision on how to handle them as status, warning or error. The decision here is taken as follow:

  • success for messages when Drupal took an action that results in fixing the functionality or migrate it properly to CKE5.
  • warning for messages when Drupal took a decision resulting in a functionality drop that can be fixed by direct manual action (no module update, or other) and / or that might work anyway, for instance a button removed that might actually have an inlined equivalent within CKE5.
  • error for messages when we know Drupal action resulted in a loss of functionality.

Here is an exhaustive list of the message types and how I considered them.

Status messages :

  • The following plugins were enabled to support tags that are allowed by this text format: %enabling_message_content.
  • The following tags were permitted by this format's filter configuration, but no plugin was available that supports them. To ensure the tags remain supported by this text format, the following were added to the Source Editing plugin's Manually editable HTML tags: @unsupported_string.
  • The following plugins were enabled to support specific attributes that are allowed by this text format: %enabled_for_attributes_message_content.
  • This format's HTML filters includes plugins that support the following tags, but not some of their attributes. To ensure these attributes remain supported by this text format, the following were added to the Source Editing plugin's Manually editable HTML tags: @missing_attributes.

Warning messages :

  • The CKEditor 4 button %button does not have a known upgrade path. If it allowed editing markup, then you can do so now through the Source Editing functionality.

Error messages :

  • The %cke4_plugin_id plugin settings do not have a known upgrade path.

This would be an expected result following this rule :

Before example :
CKEditor 4 to 5 conversion messages

After example :
CKEditor conversion messages with warnings

--

As of the subject of a message pointing to a listing documentation by @ifrik at #4, I personally like it in the theory, however I can't figure out a practical way to list all those module and to maintain this list up-to-date as of who would have such a responsibility ?

dom.’s picture

Added a commit to do what's explained in #8 and see.
Tests are left untouched and therefore expected to fail at this point.

dom.’s picture

Status: Active » Needs review

Tests changed to reflect the message structure change and verify the desired message types.

wim leers’s picture

Status: Needs review » Needs work

Some phpcs violations:

FILE: .../modules/ckeditor5/tests/src/Kernel/SmartDefaultSettingsTest.php
----------------------------------------------------------------------
FOUND 2 ERRORS AND 8 WARNINGS AFFECTING 10 LINES
----------------------------------------------------------------------

🤓

wim leers’s picture

The MR looks perfect to me: I 100% agree with your choices in which messages should be "status" (green), "warning" (yellow) or "error" (red) 👍

Once the MR is green, I will RTBC 🥳

Thanks so much!

P.S.: this helps #3245967: Messages upon switching to CKEditor 5 are overwhelming a lot too!

dom.’s picture

Status: Needs work » Needs review

Now passes the tests and PHPCS

ifrik’s picture

Should we still add a link to the documentation page about the status of different contrib modules that might get flagged up as part as the warning or errors?

The link is https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito...

dom.’s picture

Sure, I forgot about that part, let's cross with @wim-leers or @laurii about this.

ifrik’s picture

Since this is currently a fork for 10.x it can't be tested on existing D( sites (with CKEditor plugins), but @dom is looking into that.

dom.’s picture

@ifrik I should provide a patch for the other branches I suppose indeed.

Meanwhile pushing in the PR an additionnal message as suggested at #14 with a wording provided by @ifrik:

Check this handbook page for details about compability issues of contrib modules.

dom.’s picture

Adding patches for your convenience for the 3 branches. It a bit of a pain to maintain them three. Should it be ? Or working on D10 is enough ?

wim leers’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new71.87 KB

Looks perfect:

🤩

wim leers’s picture

Only a tiny typo to fix! :D

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 20: cke5_and_contributed--3273325-20.patch, failed testing. View results

ifrik’s picture

Status: Needs work » Needs review

The patch for 9.3 does not apply.

wim leers’s picture

Status: Needs review » Needs work

Wow, that must be because 9.3 already changed in those few hours then! :D

Looks like we have one genuine test failure here: the new basic_html_with_h1 can be switched to CKEditor 5 without problems, heading configuration computed automatically test case that was added by #3273527: Upgrade path never configures the ckeditor5_heading plugin to allow <h1> between the patch being posted and tested 🥳

andregp’s picture

@Wim leerrs, I hope I have done everything right updating the tests! 😊🙏

andregp’s picture

Status: Needs work » Needs review

I forgot to change the status. Sending to NR

The last submitted patch, 24: cke5_and_contributed--3273325-24.patch, failed testing. View results

dom.’s picture

Status: Needs review » Needs work

Nice work @andregp ! That lets the last test to pass (at least with the 9.3.x patch, I have to check about what's wrong with that failure on the 10.0.x branch).

If I may though, in term of keeping the tests consistant : you changed the array merge of $basic_html_test_case['expected_messages'] by reimplementing the strings which is different than any other tests in file. They where updated by keeping the merge and making it array_merge_recursive because the new depth of the array. You can see that in action for a reference in other tests by search at the following:
'expected_messages' => array_merge_recursive($basic_html_test_case['expected_messages'], [

--

This should stick with the pattern of merging with $basic_html_test_case['expected_messages'] as per others tests consistancy. It alo avoids duplicating strings in case of update in the future.

+++ b/core/modules/ckeditor5/tests/src/Kernel/SmartDefaultSettingsTest.php
@@ -568,10 +581,13 @@ public function provider() {
-        $basic_html_test_case['expected_messages'],
...
+      'expected_messages' => [
wim leers’s picture

Priority: Normal » Major
Issue tags: +stable blocker
Parent issue: » #3238333: Roadmap to CKEditor 5 stable in Drupal 9

IMHO this ought to be a stable blocker.

Re-testing against D10 for #24 — that's an unrelated random failure for sure.

#27++ — could you address that perhaps, @andregp? 🙏😊

wim leers’s picture

We need to update the issue summary with clear before vs after screenshots. That will make this much easier to get committed.

dom.’s picture

StatusFileSize
new118.44 KB

Adding image on "after" the patch as described in #8 : let me update that comment become image was lost.

dom.’s picture

Status: Needs work » Needs review
StatusFileSize
new29.67 KB
new1.8 KB
new30.03 KB
new1.8 KB

Updated patch at #24 with feedback from #27.

dom.’s picture

StatusFileSize
new36.45 KB
new41.28 KB

Updated before / after screenshots :

Before:
Before patch success messages

After:
Before patch messages

NOTE1: we can see the various WARNING / ERROR messages types as decided, as well as the link to the handbook warning message.
NOTE2: the messages themselves may be reworked as part of #3245967: Messages upon switching to CKEditor 5 are overwhelming but it is out of scope of the current issue.

Status: Needs review » Needs work

The last submitted patch, 31: cke5_and_contributed--10.0.x--3273325-31.patch, failed testing. View results

andregp’s picture

Status: Needs work » Needs review

Unrelated test fail, sending back to needs review.

wim leers’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs issue summary update

Thanks, @Dom.!

wim leers’s picture

Title: CKE5 and contributed filters: better "next action" description on messages » CKE5 and contrib: better "next action" description on upgrade path messages

Attempt to clarify title.

wim leers’s picture

Status: Reviewed & tested by the community » Needs work

Actually … those screenshots make it clear that I overlooked one thing in recent reviews: the "plugin settings" not having a known upgrade path should also be a warning, not an error. Because it's the same level of non-upgradeability; it's not worse than a button not having an upgrade path. In fact, usually the plugin settings will be associated with a button, and if that button does not exist, the settings are not needed anymore either.

I said this in-person at the DDD sprints, but I lost track of it — sorry! 😅

That then also means that the "Check this handbook page" message will be more clearly associated with all of the warning messages. 😊

dom.’s picture

I said this in-person at the DDD sprints, but I lost track of it — sorry! 😅

Totally correct. And I also lost it in the way ! I will update the patch when I have time for it (or anyone can do actually :p).

wim leers’s picture

Issue tags: +Needs screenshots

Thanks!

We'll also need an updated "after" screenshot 😊

dom.’s picture

Status: Needs work » Needs review
StatusFileSize
new29.64 KB
new1.44 KB
new30 KB
new1.44 KB
new129.57 KB

Hopefully I did not introduce any new errors here and every behave as expected.
Here is an updated screenshot of the result :
CKEditor 4 to 5 migrate after patch 40

andregp’s picture

A commit in between patches changed:
'expected_superset' => '<code class="lang-*"> ' . $basic_html_test_case['expected_superset'],
from SmartDefaultSettingsTest.php to
'expected_superset' => '<code class="language-*"> ' . $basic_html_test_case['expected_superset'],
that's why patch #40 9.3.x didn't apply.
Here's a reroll.

Status: Needs review » Needs work
dom.’s picture

Status: Needs work » Needs review
StatusFileSize
new29.64 KB
new1.45 KB

Damn, I did not pull before the patch indeed ! This issue is trolling us !
Here is the updated 41 patch with tests pass.

wim leers’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs screenshots

#43: 🤣 yeah, #3269651: Update Drupal 9.3.x to CKEditor 5 v34.0.0 along with other un-backported issues finally happened, so now the 3 branches are 99% identical again! 👍

This looks perfect again! 🥳

alexpott’s picture

Version: 10.0.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed dafde75531 to 10.0.x and 0936710171 to 9.4.x and d5d963b011 to 9.3.x. Thanks!

  • alexpott committed dafde75 on 10.0.x
    Issue #3273325 by Dom., Wim Leers, andregp, ifrik: CKE5 and contrib:...

  • alexpott committed 0936710 on 9.4.x
    Issue #3273325 by Dom., Wim Leers, andregp, ifrik: CKE5 and contrib:...

  • alexpott committed d5d963b on 9.3.x
    Issue #3273325 by Dom., Wim Leers, andregp, ifrik: CKE5 and contrib:...

Status: Fixed » Closed (fixed)

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