How do I make my list items content inline BUT also allow sub-lists?

[rfgamaral]

The current listItem extension has content: 'paragraph block*',, which results in the following HTML for list items:

<ul>
    <li><p>That’s a bullet list with one …</p></li>
    <li><p>… or two list items.</p></li>
    <li>
        <p>… or sub-list items …</p>
        <ul>
            <li><p>Sub-item 1</p></li>
        </ul>
    </li>
</ul>

I'm trying to tweak that content property to remove the surrounding <p></p> tags, but I'm not being able. I tried to play with the content property, but every combination of inline with paragraph, block or list results in a syntax error with a message like this:

Mixing inline and block content (in content expression '(inline|list?)*')

Is it possible to achieve what I want?

[philippkuehn]

No, unfortunately mixing inline and block content is not supported by ProseMirror.

[rfgamaral]

Why is it that big of a problem for you?

[Mushr0000m]

Because we use tiptap to write content for newsletter that are sent to users with old Outlook clients. And it doesn't play well with this markup due to Outlook strange css rules.... Also our previous Wysiwygs didn't had that behavior, let's say it's not the usual markup when you need to create a ul/li structure to have a base p tag for no html semantic purpose.

I love tiptap/prosemiror and all the job done on it, and we want to switch all our new project to tiptap, but this listItem issue feel a little weird to me, having used other wysiwyg and markdown editor. But I agree the term "big issue" is a bit much for a lot of other project, it's just in this one for writting email html it's problematic.

[rfgamaral]

I know it's not ideal, but have you thought about overwriting the original extensions getHTML methods to return exactly what you want? Another workaround is to just use some RegExp to clean up the <li><p></p></li> after calling editor.getHTML().

[Mushr0000m]

No I didn't try to overwrite the getHTML, but I'll. Also, if on some project I don't need sub-list can I just overwritte the ListItem shema content like you wrote on the first post and it'll work ? I'm not sure when talking about overwritting if I need to create a new extension that extends the other one or if there is a way to override it ?

[rfgamaral]

Also, if on some project I don't need sub-list can I just overwritte the ListItem shema content like you wrote on the first post and it'll work ?

IF you don't need sub-lists, maybe content: 'paragraph' is enough. I'm not sure.

I'm not sure when talking about overwritting if I need to create a new extension that extends the other one or if there is a way to override it ?

I don't know, you'll have to experiment with TaskItem.extend(), if that doesn't work, you'll have to copy the whole thing and adapt it to your needs.

But now that I'm thinking about it, and taking into account what @philippkuehn said above, I wouldn't try to override the output from the extension. Instead, I would parse the final HTML output (the one from editor.getHTML()) and remove the unneeded extra markup from there with a proper tool (e.g., rehype), so that you don't accidentally break anything in tiptap.