RichText field not handling proper list-styles?

TheDunco

last week

17

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

• 

  jmikrut

  Payload Team

  last week

  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

• 

  TheDunco

  last week

  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

  
• 

  jmikrut

  Payload Team

  last week

  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

• 

  TheDunco

  last week

  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
• 

  jmikrut

  Payload Team

  last week

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

  
  

  
  

  😏

• 

  TheDunco

  last week

  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