convertLexicalToHTML doesn't converting Media Block to HTML in RichText

[rjay-hb]

Describe the Bug

I have been using Media Block in the BlocksFeature of the RichText. Actually I'm managing 2 fields for richtext, one is the normal richtext field and other is hidden with code type where I put a beforeValidate hook to convert richText content to equivalent HTML using convertLexicalToHTML converter.

It is working fine without Media Block, but unable to handle Media Block and getting this on conversion
<div class=\"payload-richtext\"><p><br /></p><span>unknown node</span></div>

Link to the code that reproduces this issue

npx create-payload-app@latest -t website

Reproduction Steps

• Create RichText field in any of the collection and also create equivalent HTML hidden field

fields: [
  ... other fields,
  {
          name: 'serviceconditions',
          type: 'richText',
          label: 'Service Conditions',
          localized: true,
           editor: lexicalEditor({
              features: ({ rootFeatures }) => {
                return [
                  ...rootFeatures,
                 BlocksFeature({ blocks: [MediaBlock] }),
              ];
            },
          }),
   },
  {
     name: `serviceconditions_html`,
        type: 'code',
        admin: {
          hidden: true,
        },
        localized: field.localized || false,
        hooks: {
          beforeValidate: [
            ({ req, data }) => {
                return convertLexicalToHTML({
                  data: data?.serviceconditions,
                });
            },
          ],
        }
  }
]

• Here is the Media Block

import type { Block } from 'payload';

export const MediaBlock: Block = {
  slug: 'mediaBlock',
  interfaceName: 'MediaBlock',
  fields: [
    {
      name: 'media',
      type: 'upload',
      relationTo: 'media',
      required: true,
    },
  ],
};

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Binaries:
  Node: 20.18.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.33.0
  next: 15.2.2
  @payloadcms/db-postgres: 3.33.0
  @payloadcms/email-nodemailer: 3.33.0
  @payloadcms/graphql: 3.33.0
  @payloadcms/next/utilities: 3.33.0
  @payloadcms/payload-cloud: 3.33.0
  @payloadcms/plugin-cloud-storage: 3.33.0
  @payloadcms/richtext-lexical: 3.33.0
  @payloadcms/storage-azure: 3.33.0
  @payloadcms/storage-s3: 3.33.0
  @payloadcms/translations: 3.33.0
  @payloadcms/ui/shared: 3.33.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16159
  Available CPU cores: 8

[AlessioGr]

You will need to pass converters for your blocks to the convertLexicalToHTML function. Check out the documentation here: https://payloadcms.com/docs/rich-text/converting-html#converting-lexical-blocks

[rjay-hb]

@AlessioGr Thanks for your reply. How I can access Payload object inside the converter and call await method?

Actually I want to set the image src, but I'm only getting media ID inside the converter function.

[nlvcodes]

Bumping this up, as I'm running into the same problem.

This is defined in my blog collection, for example.

//@ts-expect-error
lexicalHTMLField({
    htmlFieldName: 'content_html',
    lexicalFieldName: 'content',
    converters: (({ defaultConverters }) => ({
        ...defaultConverters,
         blocks: {
             contentWithMedia: ({node}) => {
                 const richText = node.fields.content && convertLexicalToHTML({ data: node.fields.content })
                 const image = node.fields.image as Media
                     return `<div><div>${richText}</div><img alt="${image.alt}" src="${process.env.S3}/${image.filename}" /></div>`
            },
        },
    })) as HTMLConvertersFunction<DefaultNodeTypes | SerializedBlockNode<ContentWithMediaProps>>,
}),

I need to use expect error because defaultConverters doesn't match the types provided for this implementation. The content field contains a richText editor that has a block with content and an image. The content renders no problem, but the media comes back as an ID. It's not a depth issue, as changing default depth does not fix the issue.

As far as I can tell, there also isn't a prop available that will allow me to fetch the image myself.

Also, this converter function works when provided in the first example in the docs: https://payloadcms.com/docs/rich-text/converting-html#converting-lexical-blocks