to-html icon indicating copy to clipboard operation
to-html copied to clipboard

Deeply nested lists rendering incorrectly

Open schalk-b opened this issue 1 year ago • 1 comments

I'm working on a rust portable text library. I'm checking against @portabletext/to-html for correctness. Deeply nested, orphaned lists are rendering incorrectly.

Editor: image

To HTML: image

<ul>
  <li>first</li>
</ul>
<ul>
  <li>second <ul>
      <li>third</li>
    </ul>
  </li>
</ul>
<ul>
  <li>forth <ol>
      <li>what</li>
    </ol>
  </li>
</ul>
<ol>
  <li>is this</li>
</ol>

Expected: image

<ul>
  <li>
    <ul>
      <li>
        <ul>
          <li>first</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>second <ul>
      <li>
        <ul>
          <li>
            <ul>
              <li>
                <ul>
                  <li>third</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>forth</li>
    </ul>
  </li>
</ul>
<ol>
  <li>
    <ol>
      <li>
        <ol>
          <li>
            <ol>
              <li>
                <ol>
                  <li>what</li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>is this</li>
</ol>

Data:

[
   {
      "style":"normal",
      "_key":"9333573cb3b3",
      "listItem":"bullet",
      "markDefs":[
         
      ],
      "children":[
         {
            "marks":[
               
            ],
            "text":"first",
            "_key":"cc69677971e7",
            "_type":"span"
         }
      ],
      "level":3,
      "_type":"block"
   },
   {
      "children":[
         {
            "_type":"span",
            "marks":[
               
            ],
            "text":"second",
            "_key":"5709fa2ce7e2"
         }
      ],
      "level":1,
      "_type":"block",
      "style":"normal",
      "_key":"8f4b1692d9df",
      "listItem":"bullet",
      "markDefs":[
         
      ]
   },
   {
      "listItem":"bullet",
      "markDefs":[
         
      ],
      "children":[
         {
            "marks":[
               
            ],
            "text":"third",
            "_key":"77523a19752e",
            "_type":"span"
         }
      ],
      "level":5,
      "_type":"block",
      "style":"normal",
      "_key":"6a4d1e1cb26a"
   },
   {
      "level":2,
      "_type":"block",
      "style":"normal",
      "_key":"ca4cb79ff48d",
      "listItem":"bullet",
      "markDefs":[
         
      ],
      "children":[
         {
            "_type":"span",
            "marks":[
               
            ],
            "text":"forth",
            "_key":"9a539b337911"
         }
      ]
   },
   {
      "level":5,
      "_type":"block",
      "style":"normal",
      "_key":"bb240543afcb",
      "listItem":"number",
      "markDefs":[
         
      ],
      "children":[
         {
            "_type":"span",
            "marks":[
               
            ],
            "text":"what",
            "_key":"2c73cd215c87"
         }
      ]
   },
   {
      "_key":"aecde7e5ac87",
      "listItem":"number",
      "markDefs":[
         
      ],
      "children":[
         {
            "_type":"span",
            "marks":[
               
            ],
            "text":"is this",
            "_key":"3463474af021"
         }
      ],
      "level":1,
      "_type":"block",
      "style":"normal"
   }
]

schalk-b avatar May 30 '24 21:05 schalk-b

It looks like this is an issue with nestLists in @portabletext/toolkit - https://github.com/portabletext/toolkit/blob/main/src/nestLists.ts

I think it doesn't handle when list block level > 1 and also doesn't handle when the level changes more than once between list elements.

https://github.com/portabletext/toolkit/issues/100

rmarscher avatar Apr 24 '25 02:04 rmarscher