CKEditor not activated when content includes a list or other nested tags

[olafgrabienski]

Description of the bug

In Backdrop 1.29.3, when I edit content which includes a list, CKEditor is not activated, and I get a warning message:

Activating CKEditor 5 will reformat the content of this field. Review content carefully after activating. Click to activate editor.

Activating CKE and saving the page works fine. However, editing the page again, leads to the same problem.

Steps To Reproduce

1. Create a page, and put content including an ordered or an unordered list in CKEditor. Example:

Hello world.

• Apple
• Orange
• Grapefruit

2. Save the page.
3. Edit the page again.

Actual behavior

CKEditor isn't activated. Instead, there is the following warning message:

Activating CKEditor 5 will reformat the content of this field. Review content carefully after activating. Click to activate editor.

Expected behavior

CKEditor is activated, no warning.

Additional information

Add any other information that could help, such as:

• Backdrop CMS version: 1.29.3

[indigoxela]

Seems like it has to do with white space. After activation there's some code indent that wasn't there initially.

[indigoxela]

I'm unable to figure out, what's causing it, I just can narrow the problem down with some version comparison:

No problem:

Backdrop CMS: 1.29.2
CKEditor 5 Version: 42.0.2

Backdrop CMS: 1.30.0-preview
CKEditor 5 version: 44.1.0

Has the problem:

Backdrop CMS: 1.29.3
CKEditor 5 version: 42.0.2

Backdrop CMS: 1.30.x-dev (up to date)
CKEditor 5 version: 44.1.0

The version of CKE5 doesn't seem to be involved. Whatever it was, it happened recently, between preview and 1.29.3 - that's just a few days.

[indigoxela]

Spoken too soon...

It's that one: backdrop/backdrop#4757

Merged only two days ago.

[quicksketch]

Yep, that's what I get for rushing a fix. Thank you @indigoxela for the research.

The problem boils down to the removal of a .trim() method in backdrop/backdrop#4757

I removed trim() from .filter((line) => { return line.trim().length }) because it was excluding empty lines within <pre> tags, which should be retained.

Rather than remove the .trim() which is needed for accurate DOM comparisons, we should put it back and also check if we are within a <pre> tag.

I filed a PR at backdrop/backdrop#4992 that I believe fixes this.

[indigoxela]

It was partly my fault. When testing with pre, I didn't have a list in content.

I've updated our testing catalogue with a new section "Caused trouble in the past": https://github.com/backdrop/backdrop-issues/wiki/CKEditor:-Checklist-for-manual-tests

Maybe we should introduce a stricter testing policy for any CKE5 updates, not only when updating the library? Not sure, what would work best.

[olafgrabienski]

Thanks for the PR, @quicksketch! It works for me in the sandbox. Unfortunately, it doesn't fix the issue when I apply the changes on a local site running Backdrop 1.29.3.

[indigoxela]

it doesn't fix the issue when I apply the changes on a local site running Backdrop 1.29.3.

Strange - it works for me. After applying the patch on a site already updated to 1.29.3, the editor initializes again without problems.

Performance settings may play a role, as ckeditor5.formatter.js might be aggregated. But you probably already considered that.
The browser cache can be quite sticky. 🤔 Maybe it's that... I usually open the browser dev tools to get rid of browser caching. But it might also be, that it's specific to a browser.
I tested with Firefox.

[olafgrabienski]

Thanks for the browser cache dev tools hint, @indigoxela! I wasn't aware of it, very helpful. (Doesn't seem to work this way in Chrome, btw.)

I've tested the PR again:

• First with Firefox (as before): same result, editor not activated
• Then with Chrome: editor is activated
• Finally with Firefox and dev tools open: editor is also activated

Works for me!