wip rich text floated images

Author: rudietuesdays

backend/public/images/textblock.png

@@ -1,50 +1,29 @@
-import type { CollectionConfig } from 'payload'
+import type { Block, CollectionConfig } from 'payload'
 import { title } from 'process'
 import { text } from 'stream/consumers'
 
 const regex = /\s/
 
-export const Pages: CollectionConfig = {
-  slug: 'pages',
-  access: {
-    read: () => true,
-  },
+const TextBlock: Block = {
+  slug: 'Text editor',
+  imageURL: '/images/textblock.png',
+  imageAltText: 'A screenshot of what text in a text editor can look like on the website.',
   fields: [
     {
-      name: 'title',
-      type: 'text',
-      required: true,
-      unique: true,
-    },
-    {
-      name: 'subtitle',
-      type: 'text',
-      required: true,
-      unique: true,
-    },
-    {
-      name: 'url',
-      type: 'text',
-      required: true,
-      unique: true,
-      admin: {
-        description: "The URL, or slug, of this page. For instance, 'title' or 'page-title'. May not contain whitespace."
-      },
-      // TODO add validation
-    },
-    {
-      name: 'history',
-      label: 'Our History',
+      name: 'text',
       type: 'richText',
+      required: true,
     },
-    {
-      name: 'mission',
-      label: 'Our Mission',
-      type: 'textarea'
-    },
+  ],
+}
+
+const ValuesBlock: Block = {
+  slug: 'Values section',
+  imageURL: '/images/values.png',
+  imageAltText: 'A screenshot of what the values section can look like on the website.',
+  fields: [
     {
       name: 'values',
-      label: 'Our Values',
       type: 'array',
       admin: {
         components: {
@@ -70,6 +49,46 @@ export const Pages: CollectionConfig = {
         },
       ]
     },
+  ]
+}
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      unique: true,
+    },
+    {
+      name: 'subtitle',
+      type: 'text',
+      required: true,
+      unique: true,
+    },
+    {
+      name: 'url',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        description: "The URL, or slug, of this page. For instance, 'title' or 'page-title'. May not contain whitespace."
+      },
+      // TODO add validation
+    },
+    {
+      name: 'sections',
+      type: 'blocks', 
+      blocks: [
+        TextBlock,
+        ValuesBlock,
+      ],
+    },
+    
 
   ],
 }

backend/public/images/values.png

@@ -180,29 +180,42 @@ export interface Page {
    * The URL, or slug, of this page. For instance, 'title' or 'page-title'. May not contain whitespace.
    */
   url: string;
-  history?: {
-    root: {
-      type: string;
-      children: {
-        type: any;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  } | null;
-  mission?: string | null;
-  values?:
-    | {
-        title: string;
-        description: string;
-        image: number | Media;
-        id?: string | null;
-      }[]
+  sections?:
+    | (
+        | {
+            text: {
+              root: {
+                type: string;
+                children: {
+                  type: any;
+                  version: number;
+                  [k: string]: unknown;
+                }[];
+                direction: ('ltr' | 'rtl') | null;
+                format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+                indent: number;
+                version: number;
+              };
+              [k: string]: unknown;
+            };
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'Text editor';
+          }
+        | {
+            values?:
+              | {
+                  title: string;
+                  description: string;
+                  image: number | Media;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'Values section';
+          }
+      )[]
     | null;
   updatedAt: string;
   createdAt: string;
@@ -333,15 +346,30 @@ export interface PagesSelect<T extends boolean = true> {
   title?: T;
   subtitle?: T;
   url?: T;
-  history?: T;
-  mission?: T;
-  values?:
+  sections?:
     | T
     | {
-        title?: T;
-        description?: T;
-        image?: T;
-        id?: T;
+        'Text editor'?:
+          | T
+          | {
+              text?: T;
+              id?: T;
+              blockName?: T;
+            };
+        'Values section'?:
+          | T
+          | {
+              values?:
+                | T
+                | {
+                    title?: T;
+                    description?: T;
+                    image?: T;
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
       };
   updatedAt?: T;
   createdAt?: T;

backend/src/app/(payload)/admin/importMap.js

@@ -1,5 +1,5 @@
 import { postgresAdapter } from '@payloadcms/db-postgres'
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'
 import path from 'path'
 import { buildConfig } from 'payload'
 import { fileURLToPath } from 'url'
@@ -36,7 +36,36 @@ export default buildConfig({
   },
   globals: [Homepage, Nav, Team],
   collections: [Users, Media, Pages],
-  editor: lexicalEditor(),
+  editor: lexicalEditor({
+    features: ({defaultFeatures}) => [
+      ...defaultFeatures,
+      BlocksFeature({
+        blocks: [
+          {
+            slug: 'floatImage',
+            fields: [
+              {
+                name: 'image',
+                type: 'upload',
+                relationTo: 'media',
+                required: true,
+              },
+              {
+                name: 'float',
+                type: 'select',
+                options: [
+                  'Center',
+                  'Left',
+                  'Right',
+                ],
+                defaultValue: 'Left',
+              }
+            ]
+          }
+        ]
+      })
+    ]
+  }),
   secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),