pavittarx / editorjs-html

A javascript library to parse editorjs clean data to html. It is adaptable and usable in all kind of projects.
https://runkit.com/pavittarx/editorjs-html-example
MIT License
328 stars 61 forks source link

Nested list (<ul>, <ol>) should be child of <li>, not sibling #49

Open karloku opened 1 year ago

karloku commented 1 year ago

Expected behaviour

Given nested list as below

- Green
  1. Lime
  2. Mint
- Red
  - Garnet
  - Crimson
- Blue

Should be parsed into

<ul>
  <li>
    Green
    <ol>
      <li>Lime</li>
      <li>Mint</li>
    </ol>
  </li>
  <li>
    Red
    <ul>
      <li>Garnet</li>
      <li>Crimson</li>
    </ul>
  </li>
  <li>Blue</li>
</ul>

<ul> and <ol> should be child of <li>

Actual behaviour

<ul> and <ol> were parsed as siblings of <li>

<ul>
  <li>Green</li>
  <ol>
    <li>Lime</li>
    <li>Mint</li>
  </ol>
  <li>Red</li>
  <ul>
    <li>Garnet</li>
    <li>Crimson</li>
  </ul>
  <li>Blue</li>
</ul>

This could cause some problems:

  1. In W3C standards <ul> and <ol> cound only have zero or more <li> as their content. Nesting <ul> and <ol> directly is not correct (would fail validation by The Nu Html Checker).
  2. The official @editorjs/nested-list handles html (NestedList.pasteHandler) in the W3C way, making current result not handleable by the official NestedList component.
Luzefiru commented 7 months ago

This issue was resolved in #50. Please close this @pavittarx.