fix: move away from deprecated lexicalHTML and use RichText component

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,

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',

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',

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: {

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<SerializedLexicalNode>
 }
 
-export const HTMLText = ({width, html}: HTMLTextProps) => {
+export const HTMLText = ({width, data}: HTMLTextProps) => {
   return (
     <div className={classNames({
       [styles.half]: width === "1/2",
       [styles.threeFourth]: width === "3/4"
     })}>
-      <RawHTML html={html} />
+      <RichText data={data} />
     </div>
   )
 }

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) {
     <>
       <div>
         {content.map(item => {
-          if (item.blockType === 'text' && item.content_html) {
+          if (item.blockType === 'text') {
             return (
               <Container key={item.id}>
-                <HTMLText width={item.width} html={item.content_html} />
+                <HTMLText width={item.width} data={item.content} />
               </Container>
             );
           }
@@ -211,8 +209,8 @@ export function Blocks({ content }: BlocksProps) {
                 backgroundColor={bg}
                 schema={item.schema as 'base' | 'contrast' | undefined}
                 content={
-                  item.content_html
+                  item.content
-                    ? <HTMLText width={'1/2'} html={item.content_html} />
+                    ? <HTMLText width={'1/2'} data={item.content} />
                     : <></>
                 }
               />

src/compositions/Blocks/ParishBlocks.tsx

@@ -23,10 +23,10 @@ export function ParishBlocks({ content }: BlocksProps) {
     <>
       <div>
         {content.map(item => {
-          if (item.blockType === "text" && item.content_html) {
+          if (item.blockType === "text") {
             return (
               <Container key={item.id}>
-                <HTMLText width={item.width} html={item.content_html} />
+                <HTMLText width={item.width} data={item.content} />
               </Container>
             );
           }

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 extends boolean = true> {
           | T
           | {
               content?: T;
-              content_html?: T;
               width?: T;
               id?: T;
               blockName?: T;
@@ -1239,7 +1232,6 @@ export interface BlogSelect<T extends boolean = true> {
                 | T
                 | {
                     content?: T;
-                    content_html?: T;
                     width?: T;
                     id?: T;
                     blockName?: T;
@@ -1387,7 +1379,6 @@ export interface GroupSelect<T extends boolean = true> {
   slug?: T;
   shortDescription?: T;
   text?: T;
-  text_html?: T;
   content?:
     | T
     | {
@@ -1395,7 +1386,6 @@ export interface GroupSelect<T extends boolean = true> {
           | T
           | {
               content?: T;
-              content_html?: T;
               width?: T;
               id?: T;
               blockName?: T;
@@ -1489,7 +1479,6 @@ export interface PagesSelect<T extends boolean = true> {
           | T
           | {
               content?: T;
-              content_html?: T;
               width?: T;
               id?: T;
               blockName?: T;
@@ -1611,7 +1600,6 @@ export interface PagesSelect<T extends boolean = true> {
               text?: T;
               image?: T;
               content?: T;
-              content_html?: T;
               backgroundColor?: T;
               schema?: T;
               id?: T;

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()
       ]
     }
   ),