Lexical nesting lists (v3)

lzyaclast year

14

• 

  tyteen4a03last year

  try mine:

  https://github.com/tyteen4a03/payload-lexical-renderer-example
  
  

  but I suspect it might just be a css issue

• 

  lzyaclast year

  😅

  
  
  

  yeah im not that great with css

  
  
  
  
  

  this is the relevant parse section on the list type nodes

  
  
  

  ill use the TreeViewFeature

  
  
  

  and see how it's being stored by lexical

  
  
  @114557048678514693

  what is your ''@/modules/core/ui/link'' component btw?

  
  
  

  just want to know what the textDecoration bit means

  
  
  

  or can i just remove that Link tag and just have {childrenText}
• 

  tyteen4a03last year

  internal component (it's just park ui)

  
  
  

  CSS text-decoration, you can kill it

• 

  lzyaclast year

  nah i don't think that's the issue

  
  
  

  its more like this being the issue:

  
  

      <ol>
        <li>Item 1</li>
        <li>Item 3</li>
        <li>Item 5</li>
        <li>
          <ul>
            <li>Sublist item</li>
          </ul>
        </li>
      </ol>

  
  
  

  the nested list is treated like that, so it gets rendered weird

• 

  tyteen4a03last year

  that looks correct

• 

  lzyaclast year

  but it should actually be like

  
  
  

      <ol>
        <li>Item 1</li>
        <li>Item 3</li>
        <li>
          Item 5
          <ul>
            <li>Sublist item</li>
          </ul>
        </li>
      </ol>

  
  
  

  you see the problem right

  
  
  

  an extra list item gets created

  
  
  

  but the sublist should actually be part of the previous list item

• 

  tyteen4a03last year

  I'm not sure how lexical is supposed to handle this so I'll ping

  @360823574644129795
• 

  lzyaclast year

  
  
  

  ok i loaded the treeviewfeature

  
  
  

  is this an issue with lexical itself ?

  
  
  

  the treeview explains the problem clearly btw ^^

  
  
  https://playground.lexical.dev/#doc=H4sIAAAAAAAAE9VVwWoDIRD9FZmzhN1Nl6V-RaG9lR7MOpsIroZxDA0h_17cBNqUUsJiF3pSR33zns_RE6CxHOiZNSOoE1AInNt-Z50h9KBefxsYZG0dqErCEGjUPHXHYBAU-BxxICHy0eUASGB8Z1DgbGRhGUcRPObwcZ8XTLMSDkjRBg-qPr9JMJaw52kMjgk-U2VA6w36S9orSMbO0DdAEg7aJcyQ8s_V9cFzJlVCVz1b11z22gfeIYmYNtd0y6lo5hr-DS6HXi6zm-Qc8qRU05WK3oKC5KD89WqK2bDXhJ5Fs2h1FKe_XpT-eoHiHixFFhOUCEMhgfdX-T-vj4diF2ywXjtR7IW6X0BxB3waN0g_OBDmOTD94TencJbgdORnfUADqu6atqq7x6ptu1ZCDIn6vO_J6eOWQvLm626oVnW3quH8AYLGlaUsCAAA
  
  

  yeah seems like an issue on lexical :(
• 

  alessiogr

  last year

  you just need some css, see

  https://payloadcms.com/docs/beta/lexical/converters#css
• 

  lzyaclast year

  so do I just have to import the css/scss file containing these styles into the serializer tsx file?

  
  
  

  like what im inferring is, that the classnames will be added to the components, but those classnames don't have a definition yet

  
  
  

  so by adding the css file, it'll pickup what styles to apply to those classes

  
  
  https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css#L371-L373
  
  

  I can see that there are some classnames on lexical for this

  
  
  

  but unsure of how to put Alessio's suggestion into practise

  
  
  @114557048678514693

  do you know how i can solve this?

  
  
  
  
  

  because the node doesn't have any styles stored

  
  
  

  so i need to figure out what styles to apply to it
• 

  wkd1079last year

  this CSS fixed it for me:

  
  
  

    li:has(ul),
    li:has(ol) {
      list-style-type: none;
    }

• 

  lzyaclast year

  ok do i just put this into a scss file?

  
  
  

  and import that file

  
  
  

  sorry for the dumb questions 😅

• 

  wkd1079last year

  yes 🙂

• 

  lzyaclast year

  thank you so much, that worked