#How do I render a lexical data to HTML?

8 messages · Page 1 of 1 (latest)

slim flicker
#

Hello!
I have a separate setup, using payloadcms and tanstack start. one of my collection has richtext input, the communication between them is using API. How do i convert it? is there a payload way?

thank you

sudden basinBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

rain raptor
sudden basinBOT
slim flicker
# rain raptor The recommended way is either on-demand, or to JSX On-demand https://payloadcm...

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

image.png
rain raptor
# slim flicker Hello, I have try this but got a typescript error. this is my code : ```js impo...

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.