diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/upload.tsx b/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/upload.tsx index 76ac03781cf..bf9ad0c08c7 100644 --- a/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/upload.tsx +++ b/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/upload.tsx @@ -1,4 +1,4 @@ -import type { FileSizeImproved } from 'payload' +import type { FileData, FileSizeImproved, TypeWithID } from 'payload' import type { UploadDataImproved } from '../../../../../../features/upload/server/nodes/UploadNode.js' import type { SerializedUploadNode } from '../../../../../../nodeTypes.js' @@ -7,21 +7,21 @@ import type { JSXConverters } from '../types.js' export const UploadJSXConverter: JSXConverters = { upload: ({ node }) => { // TO-DO (v4): SerializedUploadNode should use UploadData_P4 - const uploadDocument = node as UploadDataImproved - if (typeof uploadDocument?.value !== 'object') { + const uploadNode = node as UploadDataImproved + if (typeof uploadNode.value !== 'object') { return null } - const value = uploadDocument.value - const url = value.url + const uploadDoc = uploadNode.value as FileData & TypeWithID + const url = uploadDoc.url /** * If the upload is not an image, return a link to the upload */ - if (!value.mimeType.startsWith('image')) { + if (!uploadDoc.mimeType.startsWith('image')) { return ( - {value.filename} + {uploadDoc.filename} ) } @@ -29,8 +29,10 @@ export const UploadJSXConverter: JSXConverters = { /** * If the upload is a simple image with no different sizes, return a simple img tag */ - if (!Object.keys(value.sizes).length) { - return {value.filename} + if (!Object.keys(uploadDoc.sizes).length) { + return ( + {uploadDoc.filename} + ) } /** @@ -39,8 +41,8 @@ export const UploadJSXConverter: JSXConverters = { const pictureJSX: React.ReactNode[] = [] // Iterate through each size in the data.sizes object - for (const size in value.sizes) { - const imageSize = value.sizes[size] as FileSizeImproved + for (const size in uploadDoc.sizes) { + const imageSize = uploadDoc.sizes[size] as FileSizeImproved // Skip if any property of the size object is null if ( @@ -69,11 +71,11 @@ export const UploadJSXConverter: JSXConverters = { // Add the default img tag pictureJSX.push( {value?.filename}, ) return {pictureJSX} diff --git a/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx b/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx index a7b004996a1..15120f34b77 100644 --- a/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx +++ b/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx @@ -25,24 +25,36 @@ import * as React from 'react' export type UploadData = { [TCollectionSlug in CollectionSlug]: { fields: TUploadExtraFieldsData - // Every lexical node that has sub-fields needs to have a unique ID. This is the ID of this upload node, not the ID of the linked upload document + /** + * Every lexical node that has sub-fields needs to have a unique ID. This is the ID of this upload node, not the ID of the linked upload document + */ id: string relationTo: TCollectionSlug - // Value can be just the document ID, or the full, populated document + /** + * Value can be just the document ID, or the full, populated document + */ value: DataFromCollectionSlug | number | string } }[CollectionSlug] /** - * @todo Replace UploadData with UploadDataImproved + * UploadDataImproved is a more precise type, and will replace UploadData in Payload v4. + * This type is for internal use only as it will be deprecated in the future. + * @internal + * + * @todo Replace UploadData with UploadDataImproved in 4.0 */ export type UploadDataImproved = { [TCollectionSlug in UploadCollectionSlug]: { fields: TUploadExtraFieldsData - // Every lexical node that has sub-fields needs to have a unique ID. This is the ID of this upload node, not the ID of the linked upload document + /** + * Every lexical node that has sub-fields needs to have a unique ID. This is the ID of this upload node, not the ID of the linked upload document + */ id: string relationTo: TCollectionSlug - // Value can be just the document ID, or the full, populated document + /** + * Value can be just the document ID, or the full, populated document + */ value: number | string | TypedUploadCollection[TCollectionSlug] } }[UploadCollectionSlug]