Portable Text: Nested lists / bullets render wrong HTML

[marco-land]

Version

module: 1.6.0
nuxt: 3.2.2

What is expected?

Nested lists HTML format such as

<ul>
  <li>Bullet
    <ul>
      <li>Bullet 2</li>
    </ul>
  </li>
</ul>

What is actually happening?

<ul>
  <li>Bullet</li>
  <li>
    <ul>
      <li>Bullet 2</li>
    </ul>
  </li>
</ul>

Steps to reproduce

Standard blocks with list markDefs

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

[wojtekpiskorz]

Confirmed I have the same issue.

[danielroe]

Would you be able to provide some portable text that renders wrongly? 🙏

[wojtekpiskorz]

documentFile.ts

 defineField({
      name: 'tableOfContent',
      title: 'Table of Content',
      type: 'blockContent',
      hidden: ({ document }) => !document?.isGuidebook,
      description: 'The table of content for the guidebook',
    }),

blockContent.ts is a default one from sanity blog template

import { defineType, defineArrayMember } from 'sanity'

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default defineType({
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    defineArrayMember({
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' },
      ],
      lists: [{ title: 'Bullet', value: 'bullet' }, { title: 'Number', value: 'number' }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
        ],
      },
    }),
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    defineArrayMember({
      type: 'image',
      options: {
        hotspot: true,
      },
      fields: [
        {
          name: 'alt',
          title: 'Alternative text',
          type: 'string',
          options: {
            isHighlighted: true,
          },
        },
      ],
    }),
  ],
})

If I just try to copy-paste from sanity studio body input here it removes all list and it's a plain paragraphs:

Wstęp: o mnie

Przygotowanie do zmiany administratora

Wybór właściwego przewodnika

Metoda 5 kroków

Forma zarządzania nieruchomością wspólną. Dwa rodzaje zarządu we Wspólnocie Mieszkaniowej – od tego trzeba zacząć?

(...)

• *So Its hard to 1:1 give you exactly the same thing here **
  So here's a 1 min video on the subject :)

[1 min video from my sanity studio](https://komododecks.com/recordings/BQooB3WJBWHe832Niq2n)

[danielroe]

I think you should be able to copy-paste the JSON by inspecting your document within the studio.

[wojtekpiskorz]

"tableOfContent": [
{
"_key": "5d4d93dc892d",
"_type": "block",
"children": [
{
"_key": "df7b8b9c4e310",
"_type": "span",
"marks": [],
"text": "Wstęp: o mnie"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "907a62afe950",
"_type": "block",
"children": [
{
"_key": "62adc9e9b87b0",
"_type": "span",
"marks": [],
"text": "Przygotowanie do zmiany administratora"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "c70b758344cb",
"_type": "block",
"children": [
{
"_key": "ef692a14b7310",
"_type": "span",
"marks": [],
"text": "Wybór właściwego przewodnika"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "9df9bf2e5591",
"_type": "block",
"children": [
{
"_key": "e4671c062ed4",
"_type": "span",
"marks": [],
"text": "Metoda 5 kroków"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "de691db0d765",
"_type": "block",
"children": [
{
"_key": "5edd66833aee",
"_type": "span",
"marks": [],
"text": "Forma zarządzania nieruchomością wspólną. Dwa rodzaje zarządu we Wspólnocie Mieszkaniowej – od tego trzeba zacząć?"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "e1b1f2d03e46",
"_type": "block",
"children": [
{
"_key": "ce79d7745b100",
"_type": "span",
"marks": [],
"text": "Zmiana administratora – czy w ogóle trzeba przygotowywać te wszystkie dokumenty?"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "20a199b44517",
"_type": "block",
"children": [
{
"_key": "3277e57ddb600",
"_type": "span",
"marks": [],
"text": "Odwołanie administratora w uchwale podjętej w trybie indywidualnego zbierania głosów"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "a7bc5bad5b93",
"_type": "block",
"children": [
{
"_key": "f89c3d5c47600",
"_type": "span",
"marks": [],
"text": "Czy można odwołać administratora uchwałą zbieraną w trybie obiegowym?"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "5d10ba7f53be",
"_type": "block",
"children": [
{
"_key": "31a44cb68f820",
"_type": "span",
"marks": [],
"text": "W jaki sposób odwołać administratora w trybie indywidualnego zbierania głosów?"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "874dfb025742",
"_type": "block",
"children": [
{
"_key": "2d0d612db0230",
"_type": "span",
"marks": [],
"text": "Podpowiedzi, kiedy lokal może być przedmiotem współwłasności"
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "9c773f441756",
"_type": "block",
"children": [
{
"_key": "78c7a9d1d8d20",
"_type": "span",
"marks": [],
"text": "Głosowanie nad uchwałą w trybie indywidualnego zbierania głosów"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "01dec1e04a6c",
"_type": "block",
"children": [
{
"_key": "4d8f092719eb0",
"_type": "span",
"marks": [],
"text": "Checklista głosowania w trybie indywidualnym"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "afcf7039fdab",
"_type": "block",
"children": [
{
"_key": "e1a9edbed3d50",
"_type": "span",
"marks": [],
"text": "Uchwała rozwiązująca umowę z administratorem podjęta w drodze indywidualnego zbierania głosów a metoda 5 kroków"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "6a5303b84fe9",
"_type": "block",
"children": [
{
"_key": "0c27e86d9e840",
"_type": "span",
"marks": [],
"text": "Odwołanie administratora na zebraniu wspólnoty mieszkaniowej"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "064037ad40d4",
"_type": "block",
"children": [
{
"_key": "5f853d6361f10",
"_type": "span",
"marks": [],
"text": "Czy warto przygotować pełnomocnictwo?"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "d38a940b757b",
"_type": "block",
"children": [
{
"_key": "e2bd9fb1e1ed0",
"_type": "span",
"marks": [],
"text": "Głosowanie 1 właściciel 1 głos."
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "93e99822e427",
"_type": "block",
"children": [
{
"_key": "e30519fe3f1b0",
"_type": "span",
"marks": [],
"text": "Zebranie wspólnoty mieszkaniowej"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "39231bb1043e",
"_type": "block",
"children": [
{
"_key": "33daa202164d0",
"_type": "span",
"marks": [],
"text": "Kto może zwołać zebranie wspólnoty mieszkaniowej?"
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "8fe8a033a686",
"_type": "block",
"children": [
{
"_key": "ff01a723dd4e0",
"_type": "span",
"marks": [],
"text": "Planowe zebranie roczne"
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "f03059b716cb",
"_type": "block",
"children": [
{
"_key": "40b18a2a712b0",
"_type": "span",
"marks": [],
"text": "Złożenie wniosku do administratora o zwołanie zebrania."
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "58b792e52a14",
"_type": "block",
"children": [
{
"_key": "d424026611150",
"_type": "span",
"marks": [],
"text": "Podjęcie uchwały"
}
],
"level": 3,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "09284ef526ba",
"_type": "block",
"children": [
{
"_key": "da207bba61d10",
"_type": "span",
"marks": [],
"text": "Jak złożyć wypowiedzenie administratorowi?"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "25dd7da79b93",
"_type": "block",
"children": [
{
"_key": "4c2fbdbdc6aa0",
"_type": "span",
"marks": [],
"text": "Wzory dokumentów"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "8b3ba2eb5420",
"_type": "block",
"children": [
{
"_key": "030e98c21b8f0",
"_type": "span",
"marks": [],
"text": "Pełnomocnictwo"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "c1e6f3cd3a07",
"_type": "block",
"children": [
{
"_key": "fb54244f98310",
"_type": "span",
"marks": [],
"text": "Wniosek o rozszerzenie porządku obrad zebrania wspólnoty mieszkaniowej"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "38cdd64b043b",
"_type": "block",
"children": [
{
"_key": "98fa08c9f32e0",
"_type": "span",
"marks": [],
"text": "Wniosek o zwołanie zebrania wspólnoty mieszkaniowej"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "fe79c33278ce",
"_type": "block",
"children": [
{
"_key": "73a6d66b65250",
"_type": "span",
"marks": [],
"text": "Uchwała wspólnoty mieszkaniowej w sprawie odwołania administratora"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "f3434219c8b2",
"_type": "block",
"children": [
{
"_key": "663ba23514cf0",
"_type": "span",
"marks": [],
"text": "Wypowiedzenie"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
}
],

[joelisfar]

I'm having the same issue. In case it's of any use, here's a small example of the data and its output:

Nested list JSON output

  "body": [
    {
      "_key": "6910ab1aa5dc",
      "_type": "block",
      "children": [
        {
          "_key": "e1a144d0eb80",
          "_type": "span",
          "marks": [],
          "text": "Item 1 of the Level 1 list"
        }
      ],
      "level": 1,
      "listItem": "bullet",
      "markDefs": [],
      "style": "normal"
    },
    {
      "_key": "56f41e061efa",
      "_type": "block",
      "children": [
        {
          "_key": "82534a0b5bb6",
          "_type": "span",
          "marks": [],
          "text": "Item 1 of the Level 2 list"
        }
      ],
      "level": 2,
      "listItem": "bullet",
      "markDefs": [],
      "style": "normal"
    },
    {
      "_key": "3d6b701f6f7f",
      "_type": "block",
      "children": [
        {
          "_key": "328ea9751c4d",
          "_type": "span",
          "marks": [],
          "text": "Item 2 of the Level 1 list"
        }
      ],
      "level": 1,
      "listItem": "bullet",
      "markDefs": [],
      "style": "normal"
    }
  ],

Nested list HTML output

<ul>
    <li>Item 1 of the Level 1 list</li>
    <li>
        <ul>
            <li>Item 1 of the Level 2 list</li>
        </ul>
    </li>
    <li>Item 2 of the Level 1 list</li>
</ul>

Desired HTML output

<ul>
    <li>Item 1 of the Level 1 list
        <ul>
            <li>Item 1 of the Level 2 list</li>
        </ul>
    </li>
    <li>Item 2 of the Level 1 list</li>
</ul>

Screenshot of "double bullets" issue