Parse Nested Lists

[vgowru]

Hi,

When I pass nested list content to the editor with text in between the list items, the output is getting jumbled

<ul>
  <li>one</li>
  First
  <ul>
    <li>Two</li>
  </ul>
  Last
</ul>

(In realtime the text would be lodash template for loop)

The output is:

I want the output to be

I have tried extending the bulletList extension and updating the content, but list-style won't show up when I try to add a new bullet list from the toolbar options.

How can I achieve the expected output?
Here is the code sandbox - https://codesandbox.io/s/tip-tap-editor-forked-owp7r

[cadars]

I think it's because your markup isn't valid HTML to start with, the nested list should be inside a <li> element of the list in which it is nested: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

[NMVishnuVardhan]

@cadars Hi, I'm facing a similar issue. In my use case, I render the list items dynamically.

      <ul>
       <% for(var comment of comments){ %>
         <li><%=comment.createdBy.firstName%> <%=comment.createdBy.lastName%>: <%=comment.content%></li>
       <% } %>
      </ul>

The editor changes this to below as bullet lists allow only listItem+ content.

     <ul>
       <li><% for(var comment of comments){ %></li>
         <li><%=comment.createdBy.firstName%> <%=comment.createdBy.lastName%>: <%=comment.content%></li>
       <li><% } %></li>
      </ul>

which results in

Having the for loop above ul tag works but adds additional spaces as multiple <ul> s will be created.

I want the output to be single level bullet list

Any suggestions on how to implement loops inside ul without using CSS?

[philippkuehn]

Yeah it’s because this is not valid HTML.