From 1d3228269e6c45fd6e1e2fc5a71d5c47208c4615 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 19 Feb 2025 15:04:35 -0700 Subject: [PATCH 1/4] chore: improve UploadData JSDocs --- .../upload/server/nodes/UploadNode.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) 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..830ddb8c33e 100644 --- a/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx +++ b/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx @@ -25,25 +25,35 @@ 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 - id: string + /** + * 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: number | string | TypedUploadCollection[TCollectionSlug] + /** + * Value can be just the document ID, or the full, populated document + */ value: number | string | TypedUploadCollection[TCollectionSlug] } }[UploadCollectionSlug] From 2f0c4417b75afa4d34cb3e8f2c253a34fe9776a4 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 19 Feb 2025 15:05:27 -0700 Subject: [PATCH 2/4] fix spacing --- .../src/features/upload/server/nodes/UploadNode.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 830ddb8c33e..15120f34b77 100644 --- a/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx +++ b/packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx @@ -49,11 +49,13 @@ export type UploadDataImproved Date: Wed, 19 Feb 2025 15:08:40 -0700 Subject: [PATCH 3/4] improve naming, remove optional chaining --- .../RichText/converter/converters/upload.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) 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..5d788666e69 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 @@ -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 + 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} From 06c12ffdd29bb73ed47fec805697fb989b2ee919 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 19 Feb 2025 15:18:07 -0700 Subject: [PATCH 4/4] add type assertion --- .../react/components/RichText/converter/converters/upload.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 5d788666e69..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' @@ -12,7 +12,7 @@ export const UploadJSXConverter: JSXConverters = { return null } - const uploadDoc = uploadNode.value + const uploadDoc = uploadNode.value as FileData & TypeWithID const url = uploadDoc.url /**