How to keep a lonely <p> element in a <li> tag

[gdevreese]

📝 How to keep a lonely <p> element in a <li> tag

Hello everyone,

What I'm trying to achieve is to keep my paragraph tags inside a list item. If I add this markup into the HTML source mode, the <p> will automatically disappear when switching back & forth to this mode

Input

<ul>
    <li>
        <p>
            test 1
        </p>
    </li>
</ul>

after switching back & forth HTML source mode, output:

<ul>
    <li>
            test 1
    </li>
</ul>

What confuses me more is that when using two <p> inside the editor, the behavior is different:

input :

<ul>
    <li>
        <p>
            test 1
        </p>
        <p>
            test 2
        </p>
    </li>
</ul>

output :

<ul>
    <li>
        <p>
            test 1
        </p>
        <p>
            test 2
        </p>
    </li>
</ul>

I am using default Drupal implementation but I was also able to reproduce on the feature-rich editor. I can't find any configuration setting for this particular setup, nor any issue related.. Am I missing something, or is there anything I can do to prevent this behavior ?

Thanks in advance,

[Reinmar]

There's no configuration option for this behavior and I'd say it's hard to override this behavior without it.

May I ask why you need the paragraph within a single-block <li>?

The problem is: In huge number of cases it superfluous and most editors won't output them, that's why we're not doing this too.

[daoutis]

Why is it even removed in the first place? Having a P tag inside a LI tag is not considered invalid HTML, so I think it should be kept if people insert it.

[georgringer]

We got also such question in Open-Source CMS TYPO3, see for reference https://forge.typo3.org/issues/102633

and can also be tested at https://ckeditor.com/docs/ckeditor5/latest/features/source-editing.html#demo by adding

<ul>     <li>     <p><a href="https://ckeditor.com/">Ingress</a></p>     </li>
</ul>

in source view and toggling to regular view + back to source view

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[nebosuker]

I am looking forward to see this behavior fixed.

I'm plannig to make workaround applying specific className to <li> when one <p> is inside it. With CSS applying similar style as <p> to that <li>, at least displayed content looks similar.