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

[cdelacombaz]

Fixing invalid html from convertLexicalToHTML with UploadConverter

What?

When using the convertLexicalToHTML function 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.

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

Example before fix

<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

<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>