CKEditor doesn't understand invalid nested lists

[zadam]

Evernote produces following HTML:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <ul>
        <li>sub-item 2.1</li>
        <li>sub-item 2.2</li>
        <ul>
            <li>sub-item 2.2.1</li>
        </ul>
    </ul>
</ul>

Obviously, this (ul -> ul instead of ul -> li -> ul) isn't valid, but browsers don't have any trouble rendering it as expected. But CKEditor does this:

So it just ignores the nested list altogether. I'm not sure what approach CKEditor takes regarding the invalid HTML.

[Reinmar]

cc @f1ames

[f1ames]

As mentioned, this is an invalid HTML (ul > ul) which is the cause of this issue. The valid one ul > li > ul is handled correctly.

We are aware of some issues with lists conversions (for example ckeditor/ckeditor5-list#112 or #1318) so we will definately work on that in the future. However, I'm not sure to what extend we should support invalid markup. I can agree that this one may be common for lists - and by fixing it we provide additional support for pasting from Evernote. I'm for leaving it open as a valid issue and try to handle it while working on improvements in list conversions (WDYT @Reinmar?).

---

From more technical standpoint, the issue is caused by the list conversion mechanism and more precisely by cleanList() method which removes all ul/ol children which are not li elements during upcasting.

[Reinmar]

I think we should consider handling such lists if some popular apps generate such an invalid HTML. Or simply if it often happens that an invalid HTML is used on some websites and people try to copy-paste that into the editor (and report it as a bug to us). That'd be a reason to work.

But if this is a theoretical problem (no apps generate such content and no one stumbled upon this in real life), then it doesn't make sense to prioritise it.

Also, I'm curious if the browser will actually put such an invalid HTML to the clipboard on copy. Sometimes, they fix invalid markup internally and put a more valid one into the clipboard.

[Reinmar]

From more technical standpoint, the issue is caused by the list conversion mechanism and more precisely by cleanList() method which removes all ul/ol children which are not li elements during upcasting.

So would it be an easy fix to detect ul > ul and wrap that inner ul in an li?

[zadam]

Also, I'm curious if the browser will actually put such an invalid HTML to the clipboard on copy. Sometimes, they fix invalid markup internally and put a more valid one into the clipboard.

I encountered this issue not during copy & paste, but when I imported Evernote's ENEX file and then loaded it into the CKEditor.

It's difficult to test this issue by directly copy & pasting from Evernote, because it's complicated by ckeditor/ckeditor5-list#116. So it's broken in different way:

If instead I display the invalid list (without divs in li) in web browser and copy paste to CKEditor, then it behaves as the original issue (sub-list is skipped completely).

[f1ames]

So would it be an easy fix to detect ul > ul and wrap that inner ul in an li?

I think it should work that way so looks like an easy fix. Shouldn't break anything during conversions IMHO.

I encountered this issue not during copy & paste, but when I imported Evernote's ENEX file and then loaded it into the CKEditor.

It's difficult to test this issue by directly copy & pasting from Evernote, because it's complicated by ckeditor/ckeditor5-list#116.

Ok, so we should check what type of content Evernote puts into clipboard. If it's something like

<ul>
    <li>
        <div>1</div>
    </li>
    <ul>
        <li>
            <div>1</div>
        </li>
    </ul>
</ul>

it will cause the same issue (but invisible now due to ckeditor/ckeditor5-list#116). If the content is valid ul > li > ul and this issue occurs only with the steps mentioned by @zadam:

when I imported Evernote's ENEX file and then loaded it into the CKEditor

maybe it will be good to see if there are other cases like @Reinmar mentioned:

if some popular apps generate such an invalid HTML. Or simply if it often happens that an invalid HTML is used on some websites and people try to copy-paste that into the editor (and report it as a bug to us).

Fixing it just because there is one specific, rare case (generating invalid HTML) may not makes sense ATM.

[f1ames]

I have checked clipboard content when pasting simple list from Evernote (to Chrome):

Copied from Evernote browser (Chrome) client :

<ul style="-en-clipboard:true;">
    <li><div>item1</div></li>
    <ul>
        <li><div>item2</div></li>
    </ul>
</ul>
<div></div>

Copied from Evernote desktop (macOS) client:

<ul style="-en-clipboard:true;">
    <li><div>item1</div></li>
    <li style="list-style: none">
        <ul>
            <li><div>item2</div></li>
        </ul>
    </li>
</ul>

so browser client produces invalid HTML while desktop one valid 🤔 It means this issue will be visible while copy-pasting from Evernote browser client (when we fix ckeditor/ckeditor5-list#116).

[zadam]

I produced the invalid HTML content on Windows Evernote client. So it looks like Mac and Windows versions differ in handling this (which is a bit weird, but not impossible).

[f1ames]

@zadam Now that you mentioned it I checked to ENEX export in macOS desktop client (the previous comment is the clipboard content when copy pasting from Evernote to the browser) and it produces:

<ul>
    <li><div>item1</div></li>
    <ul>
        <li><div>item2</div></li>
    </ul>
</ul>

so the same invalid content as on Windows.

[jodator]

ps.: check the Gmail lists pasting: https://github.com/ckeditor/ckeditor5-paste-from-office/issues/20#issuecomment-520743218.