RichText field not handling proper list-styles?

default discord avatar
TheDunco
6 months ago
17

I would expect to see something along the lines of this or something of this nature where the symbols change per indent level...


No Indent Level
    1. Indent Level 1
        A. Indent Level 2
            i. Indent Level 3

Is this something I would be doing wrong? I'm not seeing this when I'm rendering it out on my frontend either, where I'm setting the list style property on the lists.

  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    this is actually just a CSS thing that payload could do



    but you'd have to do it on your frontend as well i believe



    worth looking into it for sure

  • default discord avatar
    TheDunco
    6 months ago

    I am using a modified version of the serialization found in the documentation (and Tailwind for styling 🙏 ), and am applying this list style to the

    <ol>

    s and

    <ul>

    s so i'd assume that would do it but perhaps I'm wrong



    @jmikrut Is this something that Slate supports by default? Or do you know how do people normally handle this in their frontends? For now I plan on doing this with CSS and having it apply the styles to nested lists, but if there's a better way I'd love to know. I think Tailwind is overriding the default user agent styles in my case which is usually where these sorts of styles come from

    image.png
  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    this is just straight CSS



    https://www.w3schools.com/cssref/pr_list-style-type.php


    you'd want to define a different list-style-type for each one of your nested li levels



    this should / could also totally be done within payload, but it wouldn't help you on the frontend



    as far as the output HTML is concerned, they're all just

    li

    's - from there, it's up to you to style it



    it's not a slate thing at all really

  • default discord avatar
    TheDunco
    6 months ago

    Yeah, I did figure out how to do this with Tailwind but I have other styles elsewhere that are overriding them so I'll have to sort that out



    This is the sort of thing I had to do in Tailwind...

    [&_ol_ol_ol]:list-[lower-roman] [&_ol_ol]:list-[lower-alpha] [&_ol]:list-decimal [&_ul_ul_ul]:list-[square] [&_ul_ul]:list-[circle] [&_ul]:list-disc
  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    being not familiar with tailwind, this looks like hieroglyphics for me, but i'm happy that you resolved it!



    😏

  • default discord avatar
    TheDunco
    6 months ago

    Hahaha, yeah this is the UGLIEST Tailwind I've ever written 🤣



    It's because I'm using non-default selectors and non-default styles, and the syntax becomes messy when you break out of the standard utility classes

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.