List Items rendered without <ul> or <li>

[RafaelZasas]

Ive tried the following three methods:

      if (block.type === 'ordered-list-item') {
        switch (block.depth) {
          case 1:
            return {
              start: `<li className="list-inside list-loweralpha indent-6">`,
              end: '</li>',
              nest: '<ol>',
              nestStart: '<ol>',
              nestEnd: '</ol>',
            };
          case 2:
            return (
              <ol>
                <li className="list-inside list-lowerroman indent-12">{block.text}</li>
              </ol>
            );
          default:
            return <li className="list-inside list-decimal" />;
        }
    }

This is the output:

This is the DOM:

As you can see:

• The default (nested length 0) renders the <li> but no <ol> or </ol> which means every subsequent list will continue the numbering order after the last <li> in the DOM. If I had an <ul> before hand it would not start at 1.
• The first nesting level renders the <ol> and </ol> tags correctly but removes my styles.
• The second nested level renders a <ol><li></li></ol> for each block which means the numbering resets for each block.

I am just trying to mimic the functionality as seen in the DraftJS editor on the left. If I remove any checking for list blocks in the convertToHTML section my lists are rendered correctly in the dom but are not styled and have no bullet points (list-style-type css property).

[RafaelZasas]

I actually answered myself in This Stack Overflow Question.

It is still seemingly unexpected behavior that this only renders inline styles and not class styles.