Cannot change src of image url in Lexical Richtext Editor

[vaibhav0524]

Link to reproduction

No response

Payload Version

3.0.0-beta.68

Node Version

18.19.0

Next.js Version

15.0.0-canary.53

Describe the Bug

I have a media collection, of which media is stored in azure blob storage url. I have a field name called 'fileUrl' which is a blob url of the image. I'm using Lexical Richtext Editor, in that when I upload in the Thumbnail I've used that fileUrl i.e. is a blob url of a image. When I save the collection in the generated html string I see the local path of the img like 'api/media/file/car.jpg' in src attribute but what i want it should use the fileUrl instead of local path of image. As in frontend, I've a call get the collections data and I'm directly using the generated Html string to display the data of lexical richtext editor.

Also, how we can override/change the url path in the media collection to fileUrl i.e. blob url.

Here are some images for references of the issue-

The 'fileUrl' in above img is a blob url of a image. I want this image url in the lexical rich text editor as a src.

In the above img you can see src is a local path, in that place it should be a fileUrl.

How we can change the src path of the image?

Reproduction Steps

Create a Media collection
Create a collection called 'Pages'
In that add Lexical Richtext Editor and the HTML converter which converts the lexical content into html in a string form as shown in ss "generatedHtml" field.
Create a new record in that in lexical editor select upload type and upload a media.
Save the record and open the API tab scroll to down and see the generatedHtml string in the img src path it is a local path url instead of blob url. So, instead of the local path I want to add that 'fileUrl' i.e. blob Url path.

Adapters and Plugins

@payloadcms/richtext-lexical": "3.0.0-beta.68"

[jmikrut]

Hey @GermanJablo — if you'd like to pair on this one when you get started, let me know!

[GermanJablo]

Hi @vaibhav0524, it looks like you want to customize the HTML output of the editor. The easiest way to achieve this is by creating your own converter for the link node: https://payloadcms.com/docs/rich-text/lexical#creating-your-own-html-converter.