From aefea1e538ab7d6fd4053735f869f9c22c8c5e32 Mon Sep 17 00:00:00 2001 From: Benno Tielen Date: Mon, 9 Mar 2026 10:42:16 +0100 Subject: [PATCH] fix: move away from deprecated lexicalHTML and use RichText component --- src/app/(payload)/admin/importMap.js | 2 ++ src/collections/Groups.ts | 2 -- src/collections/blocks/CollapsibleImageWithText.ts | 2 -- src/collections/blocks/Paragraph.ts | 2 -- src/components/Text/HTMLText.tsx | 9 +++++---- src/compositions/Blocks/Blocks.tsx | 10 ++++------ src/compositions/Blocks/ParishBlocks.tsx | 4 ++-- src/payload-types.ts | 12 ------------ src/payload.config.ts | 13 ++++--------- 9 files changed, 17 insertions(+), 39 deletions(-) diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js index 42ae97e..579e433 100644 --- a/src/app/(payload)/admin/importMap.js +++ b/src/app/(payload)/admin/importMap.js @@ -1,6 +1,7 @@ import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' +import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' @@ -18,6 +19,7 @@ export const importMap = { "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e, "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e, "@payloadcms/richtext-lexical/rsc#LexicalDiffComponent": LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e, + "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, diff --git a/src/collections/Groups.ts b/src/collections/Groups.ts index 0bb8db6..af65ec6 100644 --- a/src/collections/Groups.ts +++ b/src/collections/Groups.ts @@ -4,7 +4,6 @@ import { ParagraphBlock } from '@/collections/blocks/Paragraph' import { GalleryBlock } from '@/collections/blocks/Gallery' import { ContactformBlock } from '@/collections/blocks/Contactform' import { DocumentBlock } from '@/collections/blocks/Document' -import { lexicalHTML } from '@payloadcms/richtext-lexical' import { DonationBlock } from '@/collections/blocks/Donation' import { ButtonBlock } from '@/collections/blocks/Button' import { YoutubePlayerBlock } from '@/collections/blocks/YoutubePlayer' @@ -61,7 +60,6 @@ export const Groups: CollectionConfig = { }, required: false, }, - lexicalHTML('text', { name: 'text_html' }), { name: 'content', type: 'blocks', diff --git a/src/collections/blocks/CollapsibleImageWithText.ts b/src/collections/blocks/CollapsibleImageWithText.ts index fa798c5..ce483c8 100644 --- a/src/collections/blocks/CollapsibleImageWithText.ts +++ b/src/collections/blocks/CollapsibleImageWithText.ts @@ -1,5 +1,4 @@ import { Block } from 'payload' -import { lexicalHTML } from '@payloadcms/richtext-lexical' export const CollapsibleImageWithTextBlock: Block = { slug: 'collapsibleImageWithText', @@ -45,7 +44,6 @@ export const CollapsibleImageWithTextBlock: Block = { de: 'Aufklappbarer Inhalt', }, }, - lexicalHTML('content', { name: 'content_html' }), { name: 'backgroundColor', type: 'select', diff --git a/src/collections/blocks/Paragraph.ts b/src/collections/blocks/Paragraph.ts index 5b719c7..99e1c9b 100644 --- a/src/collections/blocks/Paragraph.ts +++ b/src/collections/blocks/Paragraph.ts @@ -1,5 +1,4 @@ import { Block } from 'payload' -import { lexicalHTML } from '@payloadcms/richtext-lexical' export const ParagraphBlock: Block = { slug: 'text', @@ -17,7 +16,6 @@ export const ParagraphBlock: Block = { type: 'richText', required: true }, - lexicalHTML('content', { name: 'content_html' }), { name: 'width', label: { diff --git a/src/components/Text/HTMLText.tsx b/src/components/Text/HTMLText.tsx index a04c591..1a5e33e 100644 --- a/src/components/Text/HTMLText.tsx +++ b/src/components/Text/HTMLText.tsx @@ -1,19 +1,20 @@ import styles from "./html.module.scss" -import { RawHTML } from '@/components/RawHTML/RawHTML' import classNames from 'classnames' +import { RichText } from '@payloadcms/richtext-lexical/react' +import { SerializedEditorState, SerializedLexicalNode } from 'lexical' type HTMLTextProps = { width: "1/2" | "3/4", - html: string + data: SerializedEditorState } -export const HTMLText = ({width, html}: HTMLTextProps) => { +export const HTMLText = ({width, data}: HTMLTextProps) => { return (
- +
) } \ No newline at end of file diff --git a/src/compositions/Blocks/Blocks.tsx b/src/compositions/Blocks/Blocks.tsx index 21fd885..bd9a8e7 100644 --- a/src/compositions/Blocks/Blocks.tsx +++ b/src/compositions/Blocks/Blocks.tsx @@ -10,8 +10,6 @@ import { DonationForm } from '@/components/DonationForm/DonationForm' import { YoutubePlayer } from '@/components/YoutubePlayer/YoutubePlayer' import { PageHeader } from '@/compositions/PageHeader/PageHeader' import { Title } from '@/components/Title/Title' -import { Row } from '@/components/Flex/Row' -import { Col } from '@/components/Flex/Col' import { Banner } from '@/components/Banner/Banner' import { MainText } from '@/components/MainText/MainText' import { HR } from '@/components/HorizontalRule/HorizontalRule' @@ -35,10 +33,10 @@ export function Blocks({ content }: BlocksProps) { <>
{content.map(item => { - if (item.blockType === 'text' && item.content_html) { + if (item.blockType === 'text') { return ( - + ); } @@ -211,8 +209,8 @@ export function Blocks({ content }: BlocksProps) { backgroundColor={bg} schema={item.schema as 'base' | 'contrast' | undefined} content={ - item.content_html - ? + item.content + ? : <> } /> diff --git a/src/compositions/Blocks/ParishBlocks.tsx b/src/compositions/Blocks/ParishBlocks.tsx index b55f2ab..237917a 100644 --- a/src/compositions/Blocks/ParishBlocks.tsx +++ b/src/compositions/Blocks/ParishBlocks.tsx @@ -23,10 +23,10 @@ export function ParishBlocks({ content }: BlocksProps) { <>
{content.map(item => { - if (item.blockType === "text" && item.content_html) { + if (item.blockType === "text") { return ( - + ); } diff --git a/src/payload-types.ts b/src/payload-types.ts index cc8ab43..1542c58 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -198,7 +198,6 @@ export interface Parish { }; [k: string]: unknown; }; - content_html?: string | null; width: '1/2' | '3/4'; id?: string | null; blockName?: string | null; @@ -415,7 +414,6 @@ export interface Blog { }; [k: string]: unknown; }; - content_html?: string | null; width: '1/2' | '3/4'; id?: string | null; blockName?: string | null; @@ -565,7 +563,6 @@ export interface Group { }; [k: string]: unknown; } | null; - text_html?: string | null; content?: | ( | { @@ -584,7 +581,6 @@ export interface Group { }; [k: string]: unknown; }; - content_html?: string | null; width: '1/2' | '3/4'; id?: string | null; blockName?: string | null; @@ -742,7 +738,6 @@ export interface Page { }; [k: string]: unknown; }; - content_html?: string | null; width: '1/2' | '3/4'; id?: string | null; blockName?: string | null; @@ -874,7 +869,6 @@ export interface Page { }; [k: string]: unknown; }; - content_html?: string | null; backgroundColor?: ('none' | 'soft' | 'off-white') | null; schema?: ('base' | 'contrast') | null; id?: string | null; @@ -1117,7 +1111,6 @@ export interface ParishSelect { | T | { content?: T; - content_html?: T; width?: T; id?: T; blockName?: T; @@ -1239,7 +1232,6 @@ export interface BlogSelect { | T | { content?: T; - content_html?: T; width?: T; id?: T; blockName?: T; @@ -1387,7 +1379,6 @@ export interface GroupSelect { slug?: T; shortDescription?: T; text?: T; - text_html?: T; content?: | T | { @@ -1395,7 +1386,6 @@ export interface GroupSelect { | T | { content?: T; - content_html?: T; width?: T; id?: T; blockName?: T; @@ -1489,7 +1479,6 @@ export interface PagesSelect { | T | { content?: T; - content_html?: T; width?: T; id?: T; blockName?: T; @@ -1611,7 +1600,6 @@ export interface PagesSelect { text?: T; image?: T; content?: T; - content_html?: T; backgroundColor?: T; schema?: T; id?: T; diff --git a/src/payload.config.ts b/src/payload.config.ts index 770355c..e0a1692 100644 --- a/src/payload.config.ts +++ b/src/payload.config.ts @@ -10,7 +10,7 @@ import { AlignFeature, UnorderedListFeature, LinkFeature, - HTMLConverterFeature, + HTMLConverterFeature, FixedToolbarFeature, } from '@payloadcms/richtext-lexical' import path from 'path' import { buildConfig } from 'payload' @@ -44,6 +44,7 @@ import { Magazine } from '@/collections/Magazine' import { DonationForms } from '@/collections/DonationForms' import { Pages } from '@/collections/Pages' import { Prayers } from '@/collections/Prayers' +import { siteConfig } from '@/config/site' const filename = fileURLToPath(import.meta.url) const dirname = path.dirname(filename) @@ -53,18 +54,12 @@ export default buildConfig({ user: Users.slug, meta: { title: 'Dashboard', - titleSuffix: '- Heilige Drei Könige' + titleSuffix: `- ${siteConfig.shortName}` }, importMap: { baseDir: dirname, }, components: { - /*views: { - testCustomView: { - Component: '/admin/components/test/TestView', - path: '/test' - }, - },*/ graphics: { Logo: { path: '/components/Logo/Logo', @@ -125,7 +120,7 @@ export default buildConfig({ LinkFeature(), ParagraphFeature(), InlineToolbarFeature(), - HTMLConverterFeature() + FixedToolbarFeature() ] } ),