new, first-party import type textToEditorState helper

This commit is contained in:
Alessio Gravili
2025-08-29 16:53:41 -07:00
parent ddc2b58f47
commit 369b3fe46d
11 changed files with 133 additions and 166 deletions

View File

@@ -4,11 +4,12 @@ const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
import type { FieldAccess } from 'payload'
import { textToEditorState } from '@payloadcms/richtext-lexical'
import type { Config, User } from './payload-types.js'
import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
import { devUser } from '../credentials.js'
import { textToLexicalJSON } from '../lexical/collections/LexicalLocalized/textToLexicalJSON.js'
import { Auth } from './collections/Auth/index.js'
import { Disabled } from './collections/Disabled/index.js'
import { Hooks } from './collections/hooks/index.js'
@@ -718,33 +719,33 @@ export default buildConfigWithDefaults(
await payload.create({
collection: 'regression1',
data: {
richText4: textToLexicalJSON({ text: 'Text1' }),
array: [{ art: textToLexicalJSON({ text: 'Text2' }) }],
arrayWithAccessFalse: [{ richText6: textToLexicalJSON({ text: 'Text3' }) }],
richText4: textToEditorState({ text: 'Text1' }),
array: [{ art: textToEditorState({ text: 'Text2' }) }],
arrayWithAccessFalse: [{ richText6: textToEditorState({ text: 'Text3' }) }],
group1: {
text: 'Text4',
richText1: textToLexicalJSON({ text: 'Text5' }),
richText1: textToEditorState({ text: 'Text5' }),
},
blocks: [
{
blockType: 'myBlock3',
richText7: textToLexicalJSON({ text: 'Text6' }),
richText7: textToEditorState({ text: 'Text6' }),
blockName: 'My Block 1',
},
],
blocks3: [
{
blockType: 'myBlock2',
richText5: textToLexicalJSON({ text: 'Text7' }),
richText5: textToEditorState({ text: 'Text7' }),
blockName: 'My Block 2',
},
],
tab1: {
richText2: textToLexicalJSON({ text: 'Text8' }),
richText2: textToEditorState({ text: 'Text8' }),
blocks2: [
{
blockType: 'myBlock',
richText3: textToLexicalJSON({ text: 'Text9' }),
richText3: textToEditorState({ text: 'Text9' }),
blockName: 'My Block 3',
},
],
@@ -757,12 +758,12 @@ export default buildConfigWithDefaults(
data: {
array: [
{
richText2: textToLexicalJSON({ text: 'Text1' }),
richText2: textToEditorState({ text: 'Text1' }),
},
],
group: {
text: 'Text2',
richText1: textToLexicalJSON({ text: 'Text3' }),
richText1: textToEditorState({ text: 'Text3' }),
},
},
})

View File

@@ -1,60 +0,0 @@
import type { SerializedRelationshipNode } from '@payloadcms/richtext-lexical'
import type {
SerializedEditorState,
SerializedParagraphNode,
SerializedTextNode,
} from '@payloadcms/richtext-lexical/lexical'
import { lexicalLocalizedFieldsSlug } from '../../slugs.js'
export function textToLexicalJSON({
text,
lexicalLocalizedRelID,
}: {
lexicalLocalizedRelID?: number | string
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,
],
},
}
if (lexicalLocalizedRelID) {
editorJSON.root.children.push({
format: '',
type: 'relationship',
version: 2,
relationTo: lexicalLocalizedFieldsSlug,
value: lexicalLocalizedRelID,
} as SerializedRelationshipNode)
}
return editorJSON
}

View File

@@ -18,5 +18,5 @@ export const OnDemand: React.FC = () => {
void renderLexical()
mounted.current = true
}, [renderLexical])
return <div>Component: {Component ? Component : 'Loading...'}</div>
return <div>Default Component: {Component ? Component : 'Loading...'}</div>
}

View File

@@ -1,5 +1,7 @@
'use client'
import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
import { useRenderEditor_internal_ } from '@payloadcms/richtext-lexical/client'
import { useEffect, useRef } from 'react'
@@ -9,7 +11,7 @@ export const OnDemand: React.FC = () => {
const { Component, renderLexical } = useRenderEditor_internal_({
name: 'richText',
editorTarget: `collections.${lexicalFullyFeaturedSlug}.richText`,
initialState: {} as any,
initialState: {} as DefaultTypedEditorState,
})
const mounted = useRef(false)
@@ -20,5 +22,5 @@ export const OnDemand: React.FC = () => {
void renderLexical()
mounted.current = true
}, [renderLexical])
return <div>Component: {Component ? Component : 'Loading...'}</div>
return <div>Fully-Featured Component: {Component ? Component : 'Loading...'}</div>
}

View File

@@ -1,16 +1,17 @@
/* eslint-disable jest/no-conditional-in-test */
import type {
SerializedBlockNode,
SerializedLinkNode,
SerializedRelationshipNode,
SerializedUploadNode,
} from '@payloadcms/richtext-lexical'
import type {
SerializedEditorState,
SerializedParagraphNode,
} from '@payloadcms/richtext-lexical/lexical'
import type { PaginatedDocs, Payload } from 'payload'
/* eslint-disable jest/no-conditional-in-test */
import {
type SerializedBlockNode,
type SerializedLinkNode,
type SerializedRelationshipNode,
type SerializedUploadNode,
textToEditorState,
} from '@payloadcms/richtext-lexical'
import path from 'path'
import { fileURLToPath } from 'url'
@@ -21,7 +22,6 @@ import { initPayloadInt } from '../helpers/initPayloadInt.js'
import { NextRESTClient } from '../helpers/NextRESTClient.js'
import { lexicalDocData } from './collections/Lexical/data.js'
import { generateLexicalLocalizedRichText } from './collections/LexicalLocalized/generateLexicalRichText.js'
import { textToLexicalJSON } from './collections/LexicalLocalized/textToLexicalJSON.js'
import { lexicalMigrateDocData } from './collections/LexicalMigrate/data.js'
import { richTextDocData } from './collections/RichText/data.js'
import { generateLexicalRichText } from './collections/RichText/generateLexicalRichText.js'
@@ -655,7 +655,7 @@ describe('Lexical', () => {
locale: 'en',
data: {
title: 'Localized Lexical hooks',
lexicalBlocksLocalized: textToLexicalJSON({ text: 'some text' }),
lexicalBlocksLocalized: textToEditorState({ text: 'some text' }),
lexicalBlocksSubLocalized: generateLexicalLocalizedRichText(
'Shared text',
'English text in block',

View File

@@ -1,3 +1,4 @@
import { textToEditorState } from '@payloadcms/richtext-lexical'
import path from 'path'
import { getFileByPath, type Payload } from 'payload'
import { fileURLToPath } from 'url'
@@ -14,7 +15,6 @@ import {
media2CollectionSlug,
mediaCollectionSlug,
} from './slugs.js'
import { textToLexicalJSON } from './textToLexicalJSON.js'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
@@ -269,7 +269,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
textID: doc1ID,
updated: false,
}) as any,
richtextWithCustomDiff: textToLexicalJSON({ text: 'richtextWithCustomDiff' }),
richtextWithCustomDiff: textToEditorState({ text: 'richtextWithCustomDiff' }),
select: 'option1',
text: 'text',
textArea: 'textArea',
@@ -431,7 +431,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
textID: doc2ID,
updated: true,
}) as any,
richtextWithCustomDiff: textToLexicalJSON({ text: 'richtextWithCustomDiff2' }),
richtextWithCustomDiff: textToEditorState({ text: 'richtextWithCustomDiff2' }),
select: 'option2',
text: 'text2',
textArea: 'textArea2',

View File

@@ -1,41 +0,0 @@
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
}