new, first-party import type textToEditorState helper
This commit is contained in:
@@ -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' }),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user