feat(richtext-lexical): Upload html serializer: Output picture element if the image has multiple sizes, improve absolute URL creation

Author: AlessioGr

packages/richtext-lexical/src/field/features/Upload/index.ts

@@ -20,6 +20,13 @@ export type UploadFeatureProps = {
  }
 }
 
+/**
+ * Get the absolute URL for an upload URL by potentially prepending the serverURL
+ */
+function getAbsoluteURL(url: string): string {
+ return url?.startsWith('http') ? url : (payload?.config?.serverURL || '') + url
+}
+
 export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
  return {
  feature: () => {
@@ -29,17 +36,56 @@ export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
  converters: {
  html: {
  converter: async ({ node }) => {
- const uploadDocument = await payload.findByID({
+ const uploadDocument: any = await payload.findByID({
  id: node.value.id,
  collection: node.relationTo,
  })
- const url = (payload?.config?.serverURL || '') + uploadDocument?.url
+ const url: string = getAbsoluteURL(uploadDocument?.url as string)
 
+ /**
+ * If the upload is not an image, return a link to the upload
+ */
  if (!(uploadDocument?.mimeType as string)?.startsWith('image')) {
- return `<a href="${url}" rel="noopener noreferrer">Upload node which is not an image</a>`
+ return `<a href="${url}" rel="noopener noreferrer">${uploadDocument.filename}</a>`
+ }
+
+ /**
+ * If the upload is a simple image with no different sizes, return a simple img tag
+ */
+ if (!uploadDocument?.sizes || !Object.keys(uploadDocument?.sizes).length) {
+ return `<img src="${url}" alt="${uploadDocument?.filename}" width="${uploadDocument?.width}" height="${uploadDocument?.height}"/>`
+ }
+
+ /**
+ * If the upload is an image with different sizes, return a picture element
+ */
+ let pictureHTML = '<picture>'
+
+ // Iterate through each size in the data.sizes object
+ for (const size in uploadDocument.sizes) {
+ const imageSize = uploadDocument.sizes[size]
+
+ // Skip if any property of the size object is null
+ if (
+ !imageSize.width ||
+ !imageSize.height ||
+ !imageSize.mimeType ||
+ !imageSize.filesize ||
+ !imageSize.filename ||
+ !imageSize.url
+ ) {
+ continue
+ }
+ const imageSizeURL: string = getAbsoluteURL(imageSize?.url as string)
+
+ pictureHTML += `<source srcset="${imageSizeURL}" media="(max-width: ${imageSize.width}px)" type="${imageSize.mimeType}">`
  }
 
- return `<img src="${url}" alt="${uploadDocument?.filename}" width="${uploadDocument?.width}" height="${uploadDocument?.height}"/>`
+ // Add the default img tag
+ pictureHTML += `<img src="${url}" alt="Image" width="${uploadDocument.width}" height="${uploadDocument.height}">`
+ pictureHTML += '</picture>'
+
+ return pictureHTML
  },
  nodeTypes: [UploadNode.getType()],
  } as HTMLConverter<SerializedUploadNode>,