import { RichText as PayloadRichText } from '@payloadcms/richtext-lexical/react'
import { SerializedEditorState } from 'lexical'
import { jsxConverters } from './converters'
import styles from "./richtext.module.scss"


type RichTextProps = {
  data: SerializedEditorState
}

// Thin wrapper around Payload's RichText that always wires up our custom JSX
// converters (e.g. rendering links marked as "Button" via the Button component).
// Use this everywhere instead of importing RichText directly from Payload, so
// the converters can never be forgotten.
export const RichText = ({ data }: RichTextProps) => (
  <PayloadRichText data={data} converters={jsxConverters} className={styles.container}/>
)
