Formatting lost when attempting to add/edit paragraph within a list item in CKEditor 5

Created on 1 December 2023, 12 months ago
Updated 5 December 2023, 12 months ago

Problem/Motivation

This is a similar issue to https://www.drupal.org/project/drupal/issues/3381557 πŸ› [DrupalMedia] Formatting lost when attempting to edit media within a list item in CKEditor 5 Fixed .

Steps to reproduce

Create a list using CKEditor 5 and attempt to insert a paragraph into a list item. The list will be split into two lists and the paragraph inserted either inbetween, before, or after.

Example:

Before paragraphs embed:

<ul>
    <li>
        Test1 Test2
    </li>
</ul>

After paragraph embed:

<ul>
    <li>
        Test1&nbsp;
    </li>
</ul>
<drupal-paragraph data-embed-button="callout" data-entity-label="Embed Callout" data-paragraph-id="9f2ab784-59be-41e1-a2b5-a22cb54a25a7" data-paragraph-revision-id="2400">&nbsp;</drupal-paragraph>
<ul>
    <li>
        Test2
    </li>
</ul>

Proposed resolution

I believe the issue is that the allowed HTML for CKeditor's Document List support (https://ckeditor.com/docs/ckeditor5/latest/features/lists/document-lists...) does not allow the drupal-paragraph element to be nested within a list. Is there anything in the CKEditor API that would allow drupal-paragraph to be explicitly able to be nested in list item?

Remaining tasks

-TBD

User interface changes

None.

API changes

None.

Data model changes

-TBD

πŸ› Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States Zooney

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Zooney
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Believe this falls under major vs critical.

    Curious though can you embed a media bundle or anything else in a list and see what it does.

  • πŸ‡ΊπŸ‡ΈUnited States Zooney
  • πŸ‡ΊπŸ‡ΈUnited States Zooney

    I've tested on drupal/core 10.1.6 and this is what happens when embedding drupal-media (using the "Insert Media" button). Note that the list isn't split into two lists. The desired behavior is to have paragraphs embedded into list item elements rather than splitting the list in two (which is how it worked in CKEdtor 4).

    Before:

    <ul>
        <li>
            Test1 Test2
        </li>
    </ul>

    After:

    <ul>
        <li>
            <p>
                Test1&nbsp;
            </p>
            <drupal-media data-entity-type="media" data-entity-uuid="9c10382b-8b46-4005-8aa2-9c62e2e58b3a">&nbsp;</drupal-media>
            <p>
                Test2
            </p>
        </li>
    </ul>
  • πŸ‡ΊπŸ‡ΈUnited States chrisgross

    I can confirm this issue. I think the reason it is possibly "critical" is because CKEditor 4 is out of support, and thus technically a security concern, and upgrading to 5 breaks this module's functionality. As a result, security updates are actually being held back because stakeholders won't abide by what they see as a loss of features that they previously had, and content is their primary concern. So if there is a relatively simple way to resolve this, that would be the motivation for treating this as critical.

  • πŸ‡ΊπŸ‡ΈUnited States chrisgross

    Here is a patch that seems to fix this issue. It uses identical code as the media patch @Zooney linked to, so thanks to them for connecting those dots. It allows these embeds to exist within lists just like media elements. It does have the odd side effect of appearing to nest the embed within an additional list element. This is only visible within the editor, not when viewing content, but this also happens with the core media fix, so that is probably just a separate core issue that needs resolved. I have just been hiding those list markers in my theme's CSS in the meantime.

  • πŸ‡ΊπŸ‡ΈUnited States Zooney

    I've tested the patch created by @chrisgross in #6 πŸ› Formatting lost when attempting to add/edit paragraph within a list item in CKEditor 5 Active and it fixes the issue.

  • Status changed to Fixed 12 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Thanks for testing!

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

Production build 0.71.5 2024