[bug]: Block editor/renderer: Nesting a list inside of a list-item leads to invalid/inaccessible HTML

[HendrikSchmidt]

What version of @strapi/blocks-react-renderer are you using?

• npm@10.9.0
• Node@20.17.0
• @strapi/blocks-react-renderer@1.0.1
• @strapi/strapi@5.5.0
• react@18.3.1
• Browser Chrome@131

What's Wrong?

When creating a nested list in Strapi, it will be rendered as invalid HTML with list (ul/ol) elements as direct children of other list elements, instead of being children of list-items li.

Input:

* Test
    * Test

Output:

<ul>
    <li>Test</li>
    <ul>
        <li>Test</li>
    </ul>
</ul>

I am not sure whether this is an issue with @strapi/blocks-react-renderer or strapi itself though. Let me know if I should raise the issue with strapi.

To Reproduce

Create a nested list in the blocks-editor in Strapi and render it with the blocks-react-renderer.

Expected Behaviour

The list should be wrapped inside a list-item:

<ul>
    <li>Test</li>
    <li>
        <ul>
            <li>Test</li>
        </ul>
    </li>
</ul>

[theenoahmason]

I can confirm this. I think Strapi uses Slate.js under the hood for the editor, so this may be a Slate issue.

[AxMannessiez]

Encountered the same issue! Here's a workaround if you're already using BlocksRenderer to output HTML and need a quick fix.

Setup

import { BlocksRenderer } from '@strapi/blocks-react-renderer';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

let html = ReactDOMServer.renderToStaticMarkup(
	React.createElement(BlocksRenderer, {
		content,
		blocks: {
		  ...
		},
	})
);

Fix

To move nested <ul>/<ol> elements inside their parent <li> (where they belong), I added this regex replacement:

html = html.replace(/<\/li>(<(ul|ol)>.*?<\/\2>)/g, '$1</li>');

This transforms the invalid structure:

<ul>
    <li>First bullet</li>
    <li>Second bullet</li>
    <ul>
        <li>Sub-bullet</li>
        <li>Second sub-bullet</li>
    </ul>
    <li>Third bullet</li>
</ul>

Into valid HTML:

<ul>
    <li>First bullet</li>
    <li>
        Second bullet
        <ul>
            <li>Sub-bullet</li>
            <li>Second sub-bullet</li>
        </ul>
    </li>
    <li>Third bullet</li>
</ul>

Hope this helps others!