Files
payload/test/versions/collections/Diff/index.ts
Alessio Gravili d29bdfc10f feat(next): improved lexical richText diffing in version view (#11760)
This replaces our JSON-based richtext diffing with HTML-based richtext
diffing for lexical. It uses [this HTML diff
library](https://github.com/Arman19941113/html-diff) that I then
modified to handle diffing more complex elements like links, uploads and
relationships.

This makes it way easier to spot changes, replacing the lengthy Lexical
JSON with a clean visual diff that shows exactly what's different.

## Before

![CleanShot 2025-03-18 at 13 54
51@2x](https://github.com/user-attachments/assets/811a7c14-d592-4fdc-a1f4-07eeb78255fe)


## After


![CleanShot 2025-03-31 at 18 14
10@2x](https://github.com/user-attachments/assets/efb64da0-4ff8-4965-a458-558a18375c46)
![CleanShot 2025-03-31 at 18 14
26@2x](https://github.com/user-attachments/assets/133652ce-503b-4b86-9c4c-e5c7706d8ea6)
2025-04-02 20:10:20 +00:00

242 lines
4.5 KiB
TypeScript

import type { CollectionConfig } from 'payload'
import { diffCollectionSlug, draftCollectionSlug } from '../../slugs.js'
export const Diff: CollectionConfig = {
slug: diffCollectionSlug,
fields: [
{
name: 'array',
type: 'array',
fields: [
{
name: 'textInArray',
type: 'text',
},
],
},
{
name: 'arrayLocalized',
type: 'array',
localized: true,
fields: [
{
name: 'textInArrayLocalized',
type: 'text',
},
],
},
{
name: 'blocks',
type: 'blocks',
blocks: [
{
slug: 'TextBlock',
fields: [
{
name: 'textInBlock',
type: 'text',
},
],
},
{
slug: 'CollapsibleBlock',
fields: [
{
type: 'collapsible',
label: 'Collapsible',
fields: [
{
type: 'collapsible',
label: 'Nested Collapsible',
fields: [
{
name: 'textInCollapsibleInCollapsibleBlock',
type: 'text',
},
],
},
{
type: 'row',
fields: [
{
name: 'textInRowInCollapsibleBlock',
type: 'text',
},
],
},
],
},
],
},
{
slug: 'TabsBlock',
fields: [
{
type: 'tabs',
tabs: [
{
name: 'namedTab1InBlock',
fields: [
{
name: 'textInNamedTab1InBlock',
type: 'text',
},
],
},
{
label: 'Unnamed Tab 2 In Block',
fields: [
{
name: 'textInUnnamedTab2InBlock',
type: 'text',
},
],
},
],
},
],
},
],
},
{
type: 'checkbox',
name: 'checkbox',
},
{
type: 'code',
name: 'code',
},
{
type: 'collapsible',
label: 'Collapsible',
fields: [
{
name: 'textInCollapsible',
type: 'text',
},
],
},
{
type: 'date',
name: 'date',
},
{
type: 'email',
name: 'email',
},
{
type: 'group',
name: 'group',
fields: [
{
name: 'textInGroup',
type: 'text',
},
],
},
{
type: 'number',
name: 'number',
},
{
type: 'point',
name: 'point',
},
{
type: 'radio',
name: 'radio',
options: [
{
label: 'Option 1',
value: 'option1',
},
{
label: 'Option 2',
value: 'option2',
},
],
},
{
type: 'relationship',
name: 'relationship',
relationTo: draftCollectionSlug,
},
{
name: 'richtext',
type: 'richText',
},
{
name: 'richtextWithCustomDiff',
type: 'richText',
admin: {
components: {
Diff: './elements/RichTextDiffComponent/index.js#RichTextDiffComponent',
},
},
},
{
fields: [
{
name: 'textInRow',
type: 'text',
},
],
type: 'row',
},
{
name: 'select',
type: 'select',
options: [
{
label: 'Option 1',
value: 'option1',
},
{
label: 'Option 2',
value: 'option2',
},
],
},
{
type: 'tabs',
tabs: [
{
name: 'namedTab1',
fields: [
{
name: 'textInNamedTab1',
type: 'text',
},
],
},
{
label: 'Unnamed Tab 2',
fields: [
{
name: 'textInUnnamedTab2',
type: 'text',
},
],
},
],
},
{
name: 'text',
type: 'text',
},
{
name: 'textArea',
type: 'textarea',
},
{
name: 'upload',
relationTo: 'media',
type: 'upload',
},
],
versions: {
maxPerDoc: 35,
},
}