Using two Bullet point lists do not render correctly

Question

Using two Bullet point lists do not render correctly

mitchellwarr opened this issue 5 years ago · comments

If you have content as displayed in the convertToRaw of the editorState.

7: {key: "5qoqm", text: "NumberedList   ", type: "ordered-list-item", depth: 0, inlineStyleRanges: Array(0), …}
8: {key: "dn5n", text: "sub", type: "ordered-list-item", depth: 1, inlineStyleRanges: Array(0), …}
9: {key: "53r0c", text: "sub 2", type: "ordered-list-item", depth: 2, inlineStyleRanges: Array(0), …}
10: {key: "8kagr", text: "BulletList", type: "unordered-list-item", depth: 0, inlineStyleRanges: Array(0), …}
11: {key: "2u2p6", text: "sub", type: "unordered-list-item", depth: 1, inlineStyleRanges: Array(0), …}
12: {key: "cffgo", text: "sub 2", type: "unordered-list-item", depth: 2, inlineStyleRanges: Array(0), …}

Which looks like

1. NumberedList
   1. sub
      1. sub 2
* BulletList
   * sub
       * sub 2

The html produced is

<ol>
  <li>NumberedList</li>
</ol>
<ul>
  <li>BulletList</li>
  <ol>
    <li>sub</li>
  </ol>
  <ul>
    <li>sub</li>
    <ol>
      <li>sub 2</li>
    </ol>
  <ul>
  <li>sub 2</li>
</ul>
</ul>
</ul>

Which looks like

1. NumberedList
* BulletList
   1. sub
   * sub
      1. sub 2
       * sub 2

mitchellwarr · Answer 1 · Tue Jul 16 2019 11:17:32 GMT+0800 (China Standard Time)

Adding a new line between the end of the numbered lists and the bullet points, makes it all render correctly

João Eirinha · Answer 2 · Tue May 11 2021 20:50:18 GMT+0800 (China Standard Time)

Facing the exact same issue. @mitchellwarr did you manage to work around it?

mitchellwarr · Answer 3 · Thu May 13 2021 11:43:01 GMT+0800 (China Standard Time)

Facing the exact same issue. @mitchellwarr did you manage to work around it?

i cant remember. but this edge case is such that im ignoring the issue until my codebase can phase this WYSIWYG out with a better one

Chris Rickard · Answer 4 · Thu Oct 07 2021 07:00:35 GMT+0800 (China Standard Time)

Facing the same issue, the problem is this creates invalid HTML.

A ul or ol can only contain li's - where currently the output is nesting the second level list directly in the parent list, where it should be nested in the list item itself.

Psycholisk · Answer 5 · Tue Oct 26 2021 15:03:10 GMT+0800 (China Standard Time)

Same issue here. Lists are directly nested under the parent list, when it should be wrapped with a <li>.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#nesting_lists

Any updates on this issue or how to work around it?

Derek Morrison · Answer 6 · Tue Oct 26 2021 22:48:53 GMT+0800 (China Standard Time)

I really like this tool, and I greatly appreciate the work that went into it. Is it abandoned, though? Maybe the creator/maintainer got busy with work/life.

Duyle Campos · Answer 7 · Thu Mar 10 2022 00:06:05 GMT+0800 (China Standard Time)

Same issue here. Lists are directly nested under the parent list, when it should be wrapped with a <li>. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#nesting_lists

Any updates on this issue or how to work around it?

I've just created a PR (#107) to fix this issue. Now we need a help from @jpuri to merge it.