👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Question about Portable Text editor and ul/ol lists in Sanity CMS

8 replies
Last updated: Sep 1, 2021
Hi everyone and thanks for a very sane CMS solution! I have a question about Portable text editor and showing of ol/ul lists.
Aug 30, 2021, 6:44 PM
This is how my editor looks. I’d like to have it ul/ol buttons as well.
Aug 30, 2021, 6:45 PM
I’ve checked the documentation and this is the config I’m using:

/**
 * 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 {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      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: "Numbered", 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.
    {
      type: "image",
      options: { hotspot: true }
    }
  ]
};

Aug 30, 2021, 6:46 PM
I’m probably missing some config gotcha. 🙂 Would you please point me in the right direction? Thanks in advance!
Aug 30, 2021, 6:47 PM
Hi
user A
, thanks for a fast reply! In the end it was my mistake - because of i18n I use two different schemas for Portable text. The code I’ve showed you was correct, the other one (on the screenshot) had duplicated properties.
Sep 1, 2021, 9:49 AM
Hi
user A
, thanks for a fast reply! In the end it was my mistake - because of i18n I use two different schemas for Portable text. The code I’ve showed you was correct, the other one (on the screenshot) had duplicated properties.
Sep 1, 2021, 9:49 AM
On unrelated note - I’m quite amazed how nice and fast your community support is! So keep up the good work please, you make developer’s lives easier and much more pleasant. 🙂
Sep 1, 2021, 9:51 AM
Hi Petr. I’m glad to hear you got that worked out. Also, thank you for the kind words. We’re really happy to hear that. Thank you!
Sep 1, 2021, 1:12 PM
Hi Petr. I’m glad to hear you got that worked out. Also, thank you for the kind words. We’re really happy to hear that. Thank you!
Sep 1, 2021, 1:12 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?