- {field.tabs.map((tab, i) => {
+ {baseVersionField.tabs.map((tab, i) => {
+ if (!tab?.fields?.length) {
+ return null
+ }
+ const fieldTab = field.tabs?.[i]
return (
{(() => {
- if ('name' in tab && locales && tab.localized) {
+ if ('name' in fieldTab && selectedLocales && fieldTab.localized) {
// Named localized tab
- return locales.map((locale, index) => {
+ return selectedLocales.map((locale, index) => {
const localizedTabProps = {
...props,
- comparison: comparison?.[tab.name]?.[locale],
- version: version?.[tab.name]?.[locale],
+ comparison: comparisonValue?.[tab.name]?.[locale],
+ version: versionValue?.[tab.name]?.[locale],
}
return (
)
@@ -40,13 +58,13 @@ export const Tabs: React.FC
> = (props) => {
// Named tab
const namedTabProps = {
...props,
- comparison: comparison?.[tab.name],
- version: version?.[tab.name],
+ comparison: comparisonValue?.[tab.name],
+ version: versionValue?.[tab.name],
}
- return
+ return
} else {
// Unnamed tab
- return
+ return
}
})()}
@@ -57,24 +75,22 @@ export const Tabs: React.FC
> = (props) => {
}
type TabProps = {
- tab: ClientTab
-} & DiffComponentProps
+ fieldTab: ClientTab
+ tab: VersionTab
+} & FieldDiffClientProps
+
+const Tab: React.FC = ({ comparisonValue, fieldTab, locale, tab, versionValue }) => {
+ const { i18n } = useTranslation()
+ const { selectedLocales } = useSelectedLocales()
+
+ if (!tab.fields?.length) {
+ return null
+ }
-const Tab: React.FC = ({
- comparison,
- diffComponents,
- fieldPermissions,
- i18n,
- locale,
- locales,
- modifiedOnly,
- tab,
- version,
-}) => {
return (
= ({
)
}
- locales={locales}
- version={version}
+ locales={selectedLocales}
+ version={versionValue}
>
-
+
)
}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
index 3425eeb4933..8ecffc0c3eb 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
@@ -1,44 +1,36 @@
'use client'
-import type { TextFieldClient } from 'payload'
+import type { TextFieldDiffClientComponent } from 'payload'
import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
import React from 'react'
-import type { DiffComponentProps } from '../types.js'
-
import Label from '../../Label/index.js'
+import './index.scss'
import { diffStyles } from '../styles.js'
import { DiffViewer } from './DiffViewer/index.js'
-import './index.scss'
const baseClass = 'text-diff'
-export const Text: React.FC> = ({
- comparison,
+export const Text: TextFieldDiffClientComponent = ({
+ comparisonValue,
diffMethod,
field,
- i18n,
- isRichText = false,
locale,
- version,
+ versionValue,
}) => {
+ const { i18n } = useTranslation()
+
let placeholder = ''
- if (version === comparison) {
+ if (versionValue == comparisonValue) {
placeholder = `[${i18n.t('general:noValue')}]`
}
- let versionToRender = version
- let comparisonToRender = comparison
-
- if (isRichText) {
- if (typeof version === 'object') {
- versionToRender = JSON.stringify(version, null, 2)
- }
- if (typeof comparison === 'object') {
- comparisonToRender = JSON.stringify(comparison, null, 2)
- }
- }
+ const versionToRender: string =
+ typeof versionValue === 'string' ? versionValue : JSON.stringify(versionValue, null, 2)
+ const comparisonToRender =
+ typeof comparisonValue === 'string' ? comparisonValue : JSON.stringify(comparisonValue, null, 2)
return (
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.tsx
index 1601fed5043..33ef2025d2c 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.tsx
@@ -1,3 +1,5 @@
+import type { FieldDiffClientProps, FieldTypes } from 'payload'
+
import { Collapsible } from './Collapsible/index.js'
import { Group } from './Group/index.js'
import { Iterable } from './Iterable/index.js'
@@ -7,7 +9,7 @@ import { Select } from './Select/index.js'
import { Tabs } from './Tabs/index.js'
import { Text } from './Text/index.js'
-export const diffComponents = {
+export const diffComponents: Record
> = {
array: Iterable,
blocks: Iterable,
checkbox: Text,
@@ -16,6 +18,7 @@ export const diffComponents = {
date: Text,
email: Text,
group: Group,
+ join: null,
json: Text,
number: Text,
point: Text,
@@ -27,5 +30,6 @@ export const diffComponents = {
tabs: Tabs,
text: Text,
textarea: Text,
+ ui: null,
upload: Relationship,
}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts b/packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts
deleted file mode 100644
index 89a7c6c34ea..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { I18nClient } from '@payloadcms/translations'
-import type { ClientField, SanitizedFieldPermissions } from 'payload'
-import type React from 'react'
-import type { DiffMethod } from 'react-diff-viewer-continued'
-
-export type DiffComponents = Record>
-
-export type DiffComponentProps = {
- readonly comparison: any
- readonly diffComponents: DiffComponents
- readonly diffMethod?: DiffMethod
- readonly field: TField
- readonly fieldPermissions?:
- | {
- [key: string]: SanitizedFieldPermissions
- }
- | true
- readonly fields: ClientField[]
- readonly i18n: I18nClient
- readonly isRichText?: boolean
- readonly locale?: string
- readonly locales?: string[]
- readonly modifiedOnly?: boolean
- readonly version: any
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx
index 1410306fe55..08b903f6b73 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx
@@ -1,177 +1,8 @@
-'use client'
-import type { DiffMethod } from 'react-diff-viewer-continued'
+import { buildVersionFields, type BuildVersionFieldsArgs } from './buildVersionFields.js'
+import { RenderVersionFieldsToDiff } from './RenderVersionFieldsToDiff.js'
-import { ShimmerEffect } from '@payloadcms/ui'
-import { dequal } from 'dequal/lite'
-import { fieldAffectsData, fieldIsID } from 'payload/shared'
-import React, { Fragment, useEffect } from 'react'
+export const RenderDiff = (args: BuildVersionFieldsArgs): React.ReactNode => {
+ const { versionFields } = buildVersionFields(args)
-import type { diffComponents as _diffComponents } from './fields/index.js'
-import type { FieldDiffProps, Props } from './types.js'
-
-import { diffMethods } from './fields/diffMethods.js'
-import './index.scss'
-
-const baseClass = 'render-field-diffs'
-
-export const RenderFieldsToDiff: React.FC = ({
- comparison,
- diffComponents: __diffComponents,
- fieldPermissions,
- fields,
- i18n,
- locales,
- modifiedOnly,
- version,
-}) => {
- // typing it as `as typeof _diffComponents` here ensures the TField generics of DiffComponentProps are respected.
- // Without it, you could pass a UI field to the Tabs component, without it erroring
- const diffComponents: typeof _diffComponents = __diffComponents as typeof _diffComponents
-
- const [hasMounted, setHasMounted] = React.useState(false)
-
- // defer rendering until after the first mount as the CSS is loaded with Emotion
- // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS
- useEffect(() => {
- setHasMounted(true)
- }, [])
-
- return (
-
- {!hasMounted ? (
-
-
-
- ) : (
-
- {fields?.map((field, i) => {
- if (fieldIsID(field)) {
- return null
- }
-
- const Component = diffComponents[field.type]
-
- const isRichText = field.type === 'richText'
- const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS'
-
- if (Component) {
- if (fieldAffectsData(field)) {
- const fieldName = field.name
- const valueIsObject = field.type === 'code' || field.type === 'json'
-
- const versionValue = valueIsObject
- ? JSON.stringify(version?.[fieldName])
- : version?.[fieldName]
-
- const comparisonValue = valueIsObject
- ? JSON.stringify(comparison?.[fieldName])
- : comparison?.[fieldName]
-
- if (modifiedOnly && dequal(versionValue, comparisonValue)) {
- return null
- }
-
- const hasPermission =
- fieldPermissions === true ||
- fieldPermissions?.[fieldName] === true ||
- fieldPermissions?.[fieldName]?.read
-
- const subFieldPermissions =
- fieldPermissions === true ||
- fieldPermissions?.[fieldName] === true ||
- fieldPermissions?.[fieldName]?.fields
-
- if (!hasPermission) {
- return null
- }
-
- const baseCellProps: FieldDiffProps = {
- comparison: comparisonValue,
- diffComponents,
- diffMethod,
- field,
- fieldPermissions: subFieldPermissions,
- fields: 'fields' in field ? field?.fields : fields,
- i18n,
- isRichText,
- locales,
- modifiedOnly,
- version: versionValue,
- }
-
- if (field.localized) {
- return (
-
- {locales.map((locale, index) => {
- const versionLocaleValue = versionValue?.[locale]
- const comparisonLocaleValue = comparisonValue?.[locale]
-
- const cellProps = {
- ...baseCellProps,
- comparison: comparisonLocaleValue,
- version: versionLocaleValue,
- }
-
- return (
-
- )
- })}
-
-
-
- )
- }
-
- if (field.type === 'tabs' && 'tabs' in field) {
- const Tabs = diffComponents.tabs
-
- return (
-
- )
- }
-
- // At this point, we are dealing with a field with subfields but no
- // nested data, eg. row, collapsible, etc.
- if ('fields' in field) {
- return (
-
- )
- }
- }
-
- return null
- })}
-
- )}
-
Test
+}
diff --git a/test/versions/image.jpg b/test/versions/image.jpg
new file mode 100644
index 00000000000..4d2dfc3457f
Binary files /dev/null and b/test/versions/image.jpg differ
diff --git a/test/versions/image.png b/test/versions/image.png
new file mode 100644
index 00000000000..23787ee3d71
Binary files /dev/null and b/test/versions/image.png differ
diff --git a/test/versions/payload-types.ts b/test/versions/payload-types.ts
index 9ac13011662..78ac2192c5e 100644
--- a/test/versions/payload-types.ts
+++ b/test/versions/payload-types.ts
@@ -19,6 +19,8 @@ export interface Config {
'localized-posts': LocalizedPost;
'version-posts': VersionPost;
'custom-ids': CustomId;
+ diff: Diff;
+ media: Media;
users: User;
'payload-jobs': PayloadJob;
'payload-locked-documents': PayloadLockedDocument;
@@ -35,6 +37,8 @@ export interface Config {
'localized-posts': LocalizedPostsSelect | LocalizedPostsSelect;
'version-posts': VersionPostsSelect | VersionPostsSelect;
'custom-ids': CustomIdsSelect | CustomIdsSelect;
+ diff: DiffSelect | DiffSelect;
+ media: MediaSelect | MediaSelect;
users: UsersSelect | UsersSelect;
'payload-jobs': PayloadJobsSelect | PayloadJobsSelect;
'payload-locked-documents': PayloadLockedDocumentsSelect | PayloadLockedDocumentsSelect;
@@ -208,6 +212,102 @@ export interface CustomId {
updatedAt: string;
createdAt: string;
}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "diff".
+ */
+export interface Diff {
+ id: string;
+ array?:
+ | {
+ textInArray?: string | null;
+ id?: string | null;
+ }[]
+ | null;
+ blocks?:
+ | {
+ textInBlock?: string | null;
+ id?: string | null;
+ blockName?: string | null;
+ blockType: 'TextBlock';
+ }[]
+ | null;
+ checkbox?: boolean | null;
+ code?: string | null;
+ textInCollapsible?: string | null;
+ date?: string | null;
+ email?: string | null;
+ group?: {
+ textInGroup?: string | null;
+ };
+ number?: number | null;
+ /**
+ * @minItems 2
+ * @maxItems 2
+ */
+ point?: [number, number] | null;
+ radio?: ('option1' | 'option2') | null;
+ relationship?: (string | null) | DraftPost;
+ richtext?: {
+ root: {
+ type: string;
+ children: {
+ type: string;
+ version: number;
+ [k: string]: unknown;
+ }[];
+ direction: ('ltr' | 'rtl') | null;
+ format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+ indent: number;
+ version: number;
+ };
+ [k: string]: unknown;
+ } | null;
+ richtextWithCustomDiff?: {
+ root: {
+ type: string;
+ children: {
+ type: string;
+ version: number;
+ [k: string]: unknown;
+ }[];
+ direction: ('ltr' | 'rtl') | null;
+ format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+ indent: number;
+ version: number;
+ };
+ [k: string]: unknown;
+ } | null;
+ textInRow?: string | null;
+ select?: ('option1' | 'option2') | null;
+ namedTab1?: {
+ textInNamedTab1?: string | null;
+ };
+ textInUnnamedTab2?: string | null;
+ text?: string | null;
+ textArea?: string | null;
+ upload?: (string | null) | Media;
+ updatedAt: string;
+ createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+ id: string;
+ updatedAt: string;
+ createdAt: string;
+ url?: string | null;
+ thumbnailURL?: string | null;
+ filename?: string | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ width?: number | null;
+ height?: number | null;
+ focalX?: number | null;
+ focalY?: number | null;
+}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users".
@@ -356,6 +456,14 @@ export interface PayloadLockedDocument {
relationTo: 'custom-ids';
value: string | CustomId;
} | null)
+ | ({
+ relationTo: 'diff';
+ value: string | Diff;
+ } | null)
+ | ({
+ relationTo: 'media';
+ value: string | Media;
+ } | null)
| ({
relationTo: 'users';
value: string | User;
@@ -522,6 +630,75 @@ export interface CustomIdsSelect {
updatedAt?: T;
createdAt?: T;
}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "diff_select".
+ */
+export interface DiffSelect {
+ array?:
+ | T
+ | {
+ textInArray?: T;
+ id?: T;
+ };
+ blocks?:
+ | T
+ | {
+ TextBlock?:
+ | T
+ | {
+ textInBlock?: T;
+ id?: T;
+ blockName?: T;
+ };
+ };
+ checkbox?: T;
+ code?: T;
+ textInCollapsible?: T;
+ date?: T;
+ email?: T;
+ group?:
+ | T
+ | {
+ textInGroup?: T;
+ };
+ number?: T;
+ point?: T;
+ radio?: T;
+ relationship?: T;
+ richtext?: T;
+ richtextWithCustomDiff?: T;
+ textInRow?: T;
+ select?: T;
+ namedTab1?:
+ | T
+ | {
+ textInNamedTab1?: T;
+ };
+ textInUnnamedTab2?: T;
+ text?: T;
+ textArea?: T;
+ upload?: T;
+ updatedAt?: T;
+ createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media_select".
+ */
+export interface MediaSelect {
+ updatedAt?: T;
+ createdAt?: T;
+ url?: T;
+ thumbnailURL?: T;
+ filename?: T;
+ mimeType?: T;
+ filesize?: T;
+ width?: T;
+ height?: T;
+ focalX?: T;
+ focalY?: T;
+}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users_select".
diff --git a/test/versions/seed.ts b/test/versions/seed.ts
index 1f00522c921..4d6d41261e8 100644
--- a/test/versions/seed.ts
+++ b/test/versions/seed.ts
@@ -1,11 +1,17 @@
-import { type Payload } from 'payload'
+import path from 'path'
+import { getFileByPath, type Payload } from 'payload'
+import { fileURLToPath } from 'url'
import type { DraftPost } from './payload-types.js'
import { devUser } from '../credentials.js'
import { executePromises } from '../helpers/executePromises.js'
import { titleToDelete } from './shared.js'
-import { draftCollectionSlug } from './slugs.js'
+import { diffCollectionSlug, draftCollectionSlug, mediaCollectionSlug } from './slugs.js'
+import { textToLexicalJSON } from './textToLexicalJSON.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
export async function seed(_payload: Payload, parallel: boolean = false) {
const blocksField: DraftPost['blocksField'] = [
@@ -16,6 +22,24 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
},
]
+ const imageFilePath = path.resolve(dirname, './image.jpg')
+ const imageFile = await getFileByPath(imageFilePath)
+
+ const { id: uploadedImage } = await _payload.create({
+ collection: mediaCollectionSlug,
+ data: {},
+ file: imageFile,
+ })
+
+ const imageFilePath2 = path.resolve(dirname, './image.png')
+ const imageFile2 = await getFileByPath(imageFilePath2)
+
+ const { id: uploadedImage2 } = await _payload.create({
+ collection: mediaCollectionSlug,
+ data: {},
+ file: imageFile2,
+ })
+
await executePromises(
[
() =>
@@ -70,7 +94,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
})
}
- await _payload.create({
+ const draft2 = await _payload.create({
collection: draftCollectionSlug,
data: {
_status: 'published',
@@ -95,4 +119,87 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
overrideAccess: true,
draft: true,
})
+
+ const diffDoc = await _payload.create({
+ collection: diffCollectionSlug,
+ data: {
+ array: [
+ {
+ textInArray: 'textInArray',
+ },
+ ],
+ blocks: [
+ {
+ blockType: 'TextBlock',
+ textInBlock: 'textInBlock',
+ },
+ ],
+ checkbox: true,
+ code: 'code',
+ date: '2021-01-01T00:00:00.000Z',
+ email: 'email@email.com',
+ group: {
+ textInGroup: 'textInGroup',
+ },
+ namedTab1: {
+ textInNamedTab1: 'textInNamedTab1',
+ },
+ number: 1,
+ point: [1, 2],
+ radio: 'option1',
+ relationship: manyDraftsID,
+ richtext: textToLexicalJSON({ text: 'richtext' }),
+ richtextWithCustomDiff: textToLexicalJSON({ text: 'richtextWithCustomDiff' }),
+ select: 'option1',
+ text: 'text',
+ textArea: 'textArea',
+ textInCollapsible: 'textInCollapsible',
+ textInRow: 'textInRow',
+ textInUnnamedTab2: 'textInUnnamedTab2',
+ upload: uploadedImage,
+ },
+ depth: 0,
+ })
+
+ const updatedDiffDoc = await _payload.update({
+ id: diffDoc.id,
+ collection: diffCollectionSlug,
+ data: {
+ array: [
+ {
+ textInArray: 'textInArray2',
+ },
+ ],
+ blocks: [
+ {
+ blockType: 'TextBlock',
+ textInBlock: 'textInBlock2',
+ },
+ ],
+ checkbox: false,
+ code: 'code2',
+ date: '2023-01-01T00:00:00.000Z',
+ email: 'email2@email.com',
+ group: {
+ textInGroup: 'textInGroup2',
+ },
+ namedTab1: {
+ textInNamedTab1: 'textInNamedTab12',
+ },
+ number: 2,
+ point: [1, 3],
+ radio: 'option2',
+ relationship: draft2.id,
+ richtext: textToLexicalJSON({ text: 'richtext2' }),
+ richtextWithCustomDiff: textToLexicalJSON({ text: 'richtextWithCustomDiff2' }),
+ select: 'option2',
+ text: 'text2',
+ textArea: 'textArea2',
+ textInCollapsible: 'textInCollapsible2',
+ textInRow: 'textInRow2',
+ textInUnnamedTab2: 'textInUnnamedTab22',
+ upload: uploadedImage2,
+ },
+ depth: 0,
+ })
}
diff --git a/test/versions/slugs.ts b/test/versions/slugs.ts
index 30769af8da0..007aa3dd545 100644
--- a/test/versions/slugs.ts
+++ b/test/versions/slugs.ts
@@ -7,6 +7,9 @@ export const draftWithMaxCollectionSlug = 'draft-with-max-posts'
export const postCollectionSlug = 'posts'
+export const diffCollectionSlug = 'diff'
+export const mediaCollectionSlug = 'media'
+
export const versionCollectionSlug = 'version-posts'
export const disablePublishSlug = 'disable-publish'
@@ -17,6 +20,8 @@ export const collectionSlugs = [
autosaveCollectionSlug,
draftCollectionSlug,
postCollectionSlug,
+ diffCollectionSlug,
+ mediaCollectionSlug,
versionCollectionSlug,
]
diff --git a/test/versions/textToLexicalJSON.ts b/test/versions/textToLexicalJSON.ts
new file mode 100644
index 00000000000..c2f12c9e50c
--- /dev/null
+++ b/test/versions/textToLexicalJSON.ts
@@ -0,0 +1,41 @@
+import type {
+ SerializedEditorState,
+ SerializedParagraphNode,
+ SerializedTextNode,
+} from '@payloadcms/richtext-lexical/lexical'
+
+export function textToLexicalJSON({ text }: { text: string }): any {
+ const editorJSON: SerializedEditorState = {
+ root: {
+ type: 'root',
+ format: '',
+ indent: 0,
+ version: 1,
+ direction: 'ltr',
+ children: [
+ {
+ children: [
+ {
+ detail: 0,
+ format: 0,
+ mode: 'normal',
+ style: '',
+ text,
+ type: 'text',
+ version: 1,
+ } as SerializedTextNode,
+ ],
+ direction: 'ltr',
+ format: '',
+ indent: 0,
+ textFormat: 0,
+ type: 'paragraph',
+ textStyle: '',
+ version: 1,
+ } as SerializedParagraphNode,
+ ],
+ },
+ }
+
+ return editorJSON
+}