fix(richtext-lexical): fix picture closing tag in html converter (#13100)

# Fixing invalid html from convertLexicalToHTML with UploadConverter

## What?

When using the [convertLexicalToHTML
function](https://github.com/payloadcms/payload/blob/main/packages/richtext-lexical/src/features/converters/lexicalToHtml/sync/index.ts#L33C17-L33C37)
to convert richtext into html, the resulting html is incorrect when an
upload is present.

## Why?

The error is within the UploadHTMLConverter, as you can see in my
commits.

The picture closing tag has a Dollar sign in it `</picture$>`, which is
invalid html. This results in the picture not closing at the right
place. The picture element is not only wrapping the img tag, but also
all following content of that richtext field.

> I suppose that dollar sign ended up there due to auto rename tags from
IDE.

```ts
import { convertLexicalToHTML } from "@payloadcms/richtext-lexical/html";
const html = convertLexicalToHTML({ data: content });
```

**Example before fix**

```html
<div class="payload-richtext">
  <h2>Title</h2>
  <p>description</p>
  <picture>
      <img alt="media.png" height="400" src="https://some.url/storage/v1/object/public/media/media.png" width="684">
    <p>Some more text</p>
  </picture>
</div>
```

**Example after fix**

```html
<div class="payload-richtext">
  <h2>Title</h2>
  <p>description</p>
  <picture>
      <img alt="media.png" height="400" src="https://some.url/storage/v1/object/public/media/media.png" width="684">
  </picture>
  <p>Some more text</p>
</div>
```
This commit is contained in:
Cedric Delacombaz
2025-09-06 07:24:56 +02:00
committed by GitHub
parent bbcdea5450
commit 24e436bfa8
2 changed files with 2 additions and 2 deletions

View File

@@ -82,6 +82,6 @@ export const UploadHTMLConverterAsync: HTMLConvertersAsync<SerializedUploadNode>
/> />
` `
return `<picture${providedStyleTag}>${pictureHTML}</picture$>` return `<picture${providedStyleTag}>${pictureHTML}</picture>`
}, },
} }

View File

@@ -76,6 +76,6 @@ export const UploadHTMLConverter: HTMLConverters<SerializedUploadNode> = {
/> />
` `
return `<picture${providedStyleTag}>${pictureHTML}</picture$>` return `<picture${providedStyleTag}>${pictureHTML}</picture>`
}, },
} }