payload
payload copied to clipboard
payloadcms
Data from nested lists in richt text is incorrect
Bug Report
Nested lists from the rich text fields are rendering incorrectly.
In Payload:
In my frontend:
This is the incorrect HTML it generates:
And this is what it's supposed to generate (ignore the ::marker or spans, just look at the structure):
.
The <ul> of the second level would kinda need to be part of the first level; however, it's not. This is the relevant part of the data from the rest API.
{
"type":"li",
"children":[
{
"text":"A"
}
]
},
{
"type":"li",
"children":[
{
"type":"ul",
"children":[
{
"type":"li",
"children":[
{
"text":"B"
}
]
},
{
"type":"li",
"children":[
{
"type":"ul",
"children":[
{
"type":"li",
"children":[
{
"text":"C"
}
]
},
{
"type":"li",
"children":[
{
"text":"C"
}
]
}
]
}
]
}
]
}
]
},
As you can see, "B" is not part of "A" here. Not sure if that's an issue with what the rest API outputs or with how it's rendered (I just followed what's explained in your docs there).
Hey @AlessioGr — Payload I believe is currently outputting correctly formatted JSON for nested lists — however, browsers have weirdness with nested lists, which is what you're showing in your screenshot. Basically, if you have an li within an li, you'll get two bullets.
The solution is to use CSS, and to do something like this in your HTML serializer, which disables list style if there is an embedded list:
case 'li':
const hasListChildren = node.children ? node.children.find((child) => child?.type && ['ul', 'ol'].includes(child.type)) : false;
return (
<li
key={i}
style={{ listStyle: hasListChildren ? 'none' : undefined }}
>
<Serialize
content={node.children}
/>
</li>
);
Hey @AlessioGr — Payload I believe is currently outputting correctly formatted JSON for nested lists — however, browsers have weirdness with nested lists, which is what you're showing in your screenshot. Basically, if you have an
liwithin anli, you'll get two bullets.The solution is to use CSS, and to do something like this in your HTML serializer, which disables list style if there is an embedded list:
case 'li': const hasListChildren = node.children ? node.children.find((child) => child?.type && ['ul', 'ol'].includes(child.type)) : false; return ( <li key={i} style={{ listStyle: hasListChildren ? 'none' : undefined }} > <Serialize content={node.children} /> </li> );
Hey, that could work visually. Semantically I don't think it's correct too, though. Shouldn't the second-level <li> be nested inside an <ul> in the top-level <li>? Because right now, they are on the same level.
So instead of:
<li>
A
</li>
<li>
<ul>
<li>
B
</li>
</ul>
</li>
It should be:
<li>
A
<ul>
<li>
B
</li>
</ul>
</li>
to be semantically correct, shouldn't it?
EDIT: See https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#nesting_lists or https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list
Ah I see what you're saying. That makes sense, because the nested list is likely semantically connected to the A topic, vs. starting a completely separate idea within a new list item.
Let me see what we can do about this! Good call!
@jmikrut Do you think the weird behaviour about the indent/outdent feature, that I show in the video below, might be related to this issue :)?
Video: https://user-images.githubusercontent.com/4012401/188283007-92e96d94-2dc9-4b51-8d4b-2c924c5e1b41.mp4
@katywings it sure is!
We are going to tackle this issue next. Give us a few days here and I will report back with our progress. Thanks for the video - this is super helpful!
Thanks @katywings for the video. Just came across this / likely related issue on the editor.
When exiting indented list formatting to add some regular text after the list, caret/text remains indented. And when doing "unindents" it messes up the indents on the list above.
Repro steps for this:
- Start creating bullet list. Add 3 entries
- Indent each entry a level deeper than the previous entry
- Press enter for new line (creates 4th list entry)
- Press button "bullet list format" to exit/stop list formatting (bullet is removed - list formatting should stop now?)
- Observe: Caret remains indented
- Press button "unindent" until caret reaches the base level
- Observe: previously created list's indents are altered
Hey @Stupidism we're going to address this after launch week! Got some other features prioritized over this issue at the moment. But it is indeed on our radar.
When is launch week? a week in a month? @jmikrut
I think this was referred: https://payloadcms.com/blog/launch-week
Hallelujah it's a Christmas miracle.
I just wasted about 1,000,000 brain cells on fixing this issue but it is now done and will be released shortly!
@jmikrut Thank you so much for your work! I wish you an amazzzing Christmas with lots of payload in form of Christmas presents 🥳
Still buggy:
Reproduced in demo page: https://demo.payloadcms.com/admin/collections/forms/645b61a2c76a997a0c0952eb