payload 3.0: Adding frontend nextjs component into a lexical textarea | Payload | Page 1

Hi everyone,
I need help with the lexical feature. My frontend app shows a product comparison table based on the 'products' collection.

I want to add and view this comparison table in the admin page before publishing the collection. Also, I'd like to place the table flexibly within the text editor to create articles.

I'm unsure how to do this. Here’s the current frontend and server implementation:

# payload 3.0 server side
#collections/products.tsx
const products: CollectionConfig = {
  fields:[{
    name: 'description',
    type: 'richText',
    editor: lexicalEditor({
      features: ({ defaultFeatures }:any) => [
        ...defaultFeatures,
        HTMLConverterFeature({}),
      ],
    }),
  },
  (() => { return lexicalHTML('description', { name: 'descriptionHtml' })})()
]}

# nextjs frontend side:

# ./pages/top-items.tsx
export default function TopItems() {
  const products = await getProducts(); // This function implemented in the frontend application
  return (<ComparisonTable products={products} />)
})


# ./components/comparison-table.tsx
export default function ComparisonTable({products} {
  return (
    { products.map((product, index) => {
      return <>{product.title}</>
    }}
  )
});

#payload 3.0: Adding frontend nextjs component into a lexical textarea

Documentation: