Lexical parser not picking up different text types

lzyaclast year

25

• 

  tyteen4a03last year

  @360823574644129795

  I think the LexicalEditor config might need adjusting?

  https://github.com/payloadcms/payload/blob/beta/templates/website/src/payload.config.ts#L87

  it does not load all the defaultFeatures

  
  
  

  oh,

  https://github.com/payloadcms/payload/blob/beta/templates/website/src/payload/collections/Posts/index.ts#L67

  it does load the

  rootFeatures

  here

  
  
  @473221703418511360

  can you show us your

  Blogs

  collection config?

• 

  lzyaclast year

  yep will do

  
  
  

  lemme get on my pc

  
  
  https://codefile.io/f/SlPUZp3btc
  
  

  here

• 

  tyteen4a03last year

  I'm heading to bed soon so maybe Alessio can save the day, but the config looks correct

  
  
  

  when you highlight over First heading, does it tell you it's "heading 1" in the toolbar?

• 

  lzyaclast year

  yes
• 

  tyteen4a03last year

  If you include the TreeViewFeature in your editor, what does the tree look like?

• 

  lzyaclast year

  like this?

  
  
  

  in my content field in the tabs for the Blog schema
• 

  tyteen4a03last year

  Yep

• 

  lzyaclast year

  ah 1 sec

  
  
  

  lemme reload

  
  
  

  here ya go

  
  
  
  
  

  it seems right to me
• 

  tyteen4a03last year

  Ohhhhh I didn't see that you were looping through the children

  
  
  

  If you inspect

  post.content.root

  the tree should be correct?

  
  
  

  basically, you were looping through all the heading nodes and grabbing the text nodes inside the heading node

• 

  lzyaclast year

  oh 💀

  
  
  

  ok but i thought the component from website template should handle that

  
  
  

              <RichText
                className="lg:grid lg:grid-cols-subgrid col-start-1 col-span-3 grid-rows-[1fr]"
                content={post.content}
                enableGutter={false}
              />

• 

  tyteen4a03last year

  I'm not very familiar with the website template, it's possible it's handing it

• 

  lzyaclast year

  yes

  
  
  

  serializeLexical({ nodes: content?.root?.children })}

  
  
  

  this is the function it uses

• 

  tyteen4a03last year

  you were mapping over children

• 

  lzyaclast year

  so just content.root should be fine?

  
  
  https://codefile.io/f/49o6TsAeoT
• 

  tyteen4a03last year

  content.root.children, yes

• 

  lzyaclast year

  this is the serializeLexical component if you need

• 

  tyteen4a03last year

  If you need a more complete example:

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

  lzyaclast year

  this is what it was originally

• 

  tyteen4a03last year

  (it doesn't do tables yet but I'm working on that)

• 

  lzyaclast year

  thank you

  
  
  

  ill have a look later

  
  
  

  gotta jet now

  
  
  

  thanks so much for the help

  
  
  

  have a good night :)

  
  
  

  im slightly confused by the Pages and Posts collections on this template

  
  
  

  I don't need a Pages collection...

• 

  tyteen4a03last year

  If you're sure, you can delete it

• 

  lzyaclast year

  yep

  
  
  
  
  

  so i was debugging my richtext component

  
  
  

  const RichText: React.FC<Props> = ({
    className,
    content,
    enableGutter = true,
    enableProse = true,
  }) => {
    if (!content) {
      return null
    }
  
    if (content &&
      !Array.isArray(content) &&
      typeof content === 'object' &&
      'root' in content) 
    {
      const serialized = serializeLexical({ nodes: content.root?.children })
      console.log(serialized.props)
    }
  
    return (
      <div
        className={cn(
          {
            'container ': enableGutter,
            'max-w-none': !enableGutter,
            'mx-auto prose dark:prose-invert ': enableProse,
          },
          className,
        )}
      >
        {content &&
          !Array.isArray(content) &&
          typeof content === 'object' &&
          'root' in content &&
          serializeLexical({ nodes: content.root?.children })}
      </div>
    )
  }
  
  export default RichText

  
  
  

  in the if statement before the

  return

  at the end

  
  
  

  it correctly prints out the serialized JSX object

  
  
  

  but when I load the page

  
  
  
  
  

  it looks like the rendering worked 😅 but it doesn't look like a h1 or a h3

  
  
  

  if you know what i mean
• 

  tyteen4a03last year

  give my renderer a try

• 

  lzyaclast year

  I think i fixed it 😅 (had to do with just supplying a custom classname)

  
  
  

  btw how is your renderer different to the website template one?

  
  
  

  just curious

• 

  tyteen4a03last year

  Not much, it's just more spread out and it has examples dealing with blocks (but not relationships yet)