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:
committed by
GitHub
parent
bbcdea5450
commit
24e436bfa8
@@ -82,6 +82,6 @@ export const UploadHTMLConverterAsync: HTMLConvertersAsync<SerializedUploadNode>
|
||||
/>
|
||||
`
|
||||
|
||||
return `<picture${providedStyleTag}>${pictureHTML}</picture$>`
|
||||
return `<picture${providedStyleTag}>${pictureHTML}</picture>`
|
||||
},
|
||||
}
|
||||
|
||||
@@ -76,6 +76,6 @@ export const UploadHTMLConverter: HTMLConverters<SerializedUploadNode> = {
|
||||
/>
|
||||
`
|
||||
|
||||
return `<picture${providedStyleTag}>${pictureHTML}</picture$>`
|
||||
return `<picture${providedStyleTag}>${pictureHTML}</picture>`
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user