Certain list structures cause the editor to crash when using Document lists alongside GHS

[mabryl]

📝 Provide detailed reproduction steps (if any)

1. Create a build that utilizes Document lists alongside GHS with support enabled for <div> elements
2. Provide the following HTML to the editor:

<div><ol><li>asd</li><li><div><ol><li>asd</li></ol></div></li></ol></div>

3. Try removing the sublist a item in the second list item

✔️ Expected result

The editor shouldn't crash.

❌ Actual result

The entire tab freezes, no error thrown in the console:

document-list-freeze.mov

❓ Possible solution

It looks like something weird is happening with the second <div> because removing it from the markup resolves the issue.

📃 Other details

• Browser: cross-browser
• OS: cross-OS
• First affected CKEditor version: N/A
• Installed CKEditor plugins: N/A

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

@mabryl could you check if how turning on the AdjacentListsSupport  plugin influences this scenario?

[mabryl]

@Witoso just checked it and there seems to be no difference in behavior, unfortunately:

adjacent-lists-freeze.mov

[mabryl]

Also, I just noticed that, if you wait long enough, you will eventually see some errors in the console. Namely: ckeditorerror.js:90 Uncaught RangeError: Map maximum size exceeded.

Additionally, a warning can be seen: [Violation] 'beforeinput' handler took 365676ms.

[Witoso]

Thanks for checking, we will take a look at this! One important thing to mention is that it's highly unadvisable to use div's like that, as it's not possible to escape them when writing (rel: #6462).

[FilipTokarski]

Related #15565 ?

[niegowski]

This was a post-fixer loop. Two post-fixers were fixing each other changes. One was removing GHS-related list attributes (and it was doing it too greedy) and the other was adding them since they were expected.

This problem was caused by:

ckeditor5/packages/ckeditor5-html-support/src/datafilter.ts

Line 464 in b9fb73a

for ( const { item } of change.range.getWalker( { shallow: true } ) ) {

It was trying to iterate the attribute change "shallowly" but for attribute change on an element the range starts before an element and ends just inside it and the walker with the shallow option does not stop properly and follows the document until its end.