How do I render a lexical data to HTML?

dingkai0313 months ago

4

• 

  jorisbn3 months ago

  The recommended way is either on-demand, or to JSX

  
  
  

  On-demand

  
  
  https://payloadcms.com/docs/rich-text/converting-html#on-demand
  
  

  JSX

  
  
  https://payloadcms.com/docs/rich-text/converting-jsx
  
  

  You can convert it using HTML field but this is not recommended

  
  
  https://payloadcms.com/docs/rich-text/converting-html#html-field
• 

  dingkai0313 months ago

  Hello, I have try this but got a typescript error.

  
  
  

  this is my code :

  
  

  import { gqlRequest } from './api'
  import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
  
  interface Leader {
    id: string
    name: string
    title: string
    bio: SerializedEditorState
  }
  
  type LeaderResponse = {
    Leaders: {
      docs: Leader[]
    }
  }
  
  export function getLeaders(): Promise<LeaderResponse> {
    return gqlRequest<LeaderResponse>(`
      query {
        Leaders {
          docs {
            id
            name
            title
            bio
          }
        }
      }
    `)
  }

  
  
  

  error :

  
  
  

  Sorry I ss it, because i cant post long text
• 

  jorisbn3 months ago

  Your error is caused by how Lexical content is stored. the error basically says your Leaders: { docs: Leader[] } } doesn't match the obtained response.

  
  
  

  Could you check

  import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'

  If this returns this interface?

  
  
  

  export interface SerializedEditorState<T extends SerializedLexicalNode = SerializedLexicalNode> {
      root: SerializedRootNode<T>;
  }

  
  
  

  I've used payload as an CMS for an Astro website so my example will come from that.

  
  
  

  For dependancy i have

  
  
  

   "@payloadcms/richtext-lexical": "3.70.0", 

  
  
  

  Importing this type

  
  
  

   import type { SerializedEditorState } from "node_modules/lexical/LexicalEditorState"; 

  
  
  

  And using it like this

  
  
  

  interface ContentBlock{
      title: string;
      content: SerializedEditorState;
      button: Button;
      id: string;
  }

  
  
  

  this is how I have defined my Lexical Editor interfaces.

• 

  dingkai0313 months ago

  oh thank you sir!, your insight is really helpfull. I have got it working