Currently, there's no simple way to directly create nested lists using the rich text editor. There is however a relatively simple workaround that, while not generating semantic code, will provide not only the appearance but the general hierarchy of a multi-leveled ordered or unordered list.

Using the powerful features of Slices' repeatable zone, you can create a Slice that has two fields: A Select field that will allow you to select the level of indentation; and a Rich Text field that will contain the actual list content. Using these in conjunction will allow you to create nested lists within your content with minimum difficulties.

Create a List Slice

In your Custom type, add a new Slice, and in the Repeatable zone drag and drop two fields in the Repeatable zone:

1. A Select field. This will be our list level selector. Add as many levels as you need in the options.

2. A Rich Text field. Since this will be the field that contains your actual list content, make sure to enable only the Ordered list and Unordered list options, as well as disabling the option for allowing multiple paragraphs.

Here's an example JSON for how this Slice can look like for a list with up to three different levels.

{
"multi_level_list":{
"type":"Slice",
"fieldset":"multi_level_list",
"description":"multi_level_list",
"icon":"face",
"display":"list",
"non-repeat":{

},
"repeat":{
"first_level":{
"type":"Select",
"config":{
"options":[
"first",
"second",
"third"
],
"default_value":"first",
"label":"first_level",
"placeholder":"first_level"
}
},
"list":{
"type":"StructuredText",
"config":{
"single":"list-item, o-list-item",
"label":"list",
"placeholder":"List items for this level"
}
}
}
}
}

 

Use your nested list in a document

.After selecting and adding the slice to your document, select which level of indentation your list content will have using the dropdown select, then write the list inside the rich text field.

If you need to add a new level, just Add a new element to the Group, select the desired indentation level for this sub-list, and keep writing the content. You can repeat as much as you need to until you've created your whole multi-level list.

Rendering the nested list

Feel free to refer to the documentation for your preferred language. You can retrieve the option chosen in the Select field ('list_level' in our example) which can be set as the class attribute for the rendered Rich Text field ('list'). Then it's a matter of modifying the CSS for these different classes to provide different indentation by using margin properties, as well as removing any spaces in between the lists.
 

Code example (React)

We're doing a Switch Statement to conditionally render the correct slice and then use the RichText helper to render the list.

<div className="multi-list">
{sliceZone.map((slice, i) => {
switch (slice.slice_type) {
case "multi-level_list":
return <div key={i} className={'multi ' + slice.list_level} >
{RichText.asHtml(slice.list)}
</div>;
default:
return null;
}
})}
</div>

Code example (Pug)

Here we do a loop to find the correct Slice and then render it asHtml

when 'multi-level_list'
  div.multi-list
    for item in slice.items
      div(class='multi ' + item.list_level)
        !{PrismicDOM.RichText.asHtml(item.list)}

Then, add the CSS:

.multi > ul, ol {margin-bottom: 0px;}
.multi_list     {margin-bottom: 20px;}
.multi.level_2  {margin-left:   1em;}
.multi.level_3  {margin-left:   1.9em;}

Modify and adjust to your actual needs.

Let us know how it worked out for you, or if you still have doubts on how to implement this solution.

Did this answer your question?