Render open and closing list tags for list items using draft-js and draft-convert

Question

I am using [email protected] and [email protected]

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).

Answer 1

I have actually found a solution to this.

Method 1 is the preferred solution to correctly render the DOM elements, but styling only works with style="" and not className="".

The working return for the draft-js block type is:

        return {
          start: `<li 
                     style="
                       list-style-position: inside;
                       list-style-type: lower-alpha;
                       text-indent: 1.5rem;"
                   >`,
          end: '</li>',
          nest: '<ol>',
          nestStart: '<ol>',
          nestEnd: '</ol>',
        };

The Lists are now rendering as expected: