feature: collapsible text

src/collections/Pages.ts

@@ -94,6 +94,7 @@ export const Pages: CollectionConfig = {
         MainTextBlock,
         HorizontalRuleBlock,
         BlogSliderBlock,
+        CollapsibleImageWithTextBlock,
         MassTimesBlock,
         EventsBlock,
       ],

src/collections/blocks/CollapsibleImageWithText.ts

@@ -10,6 +10,7 @@ export const CollapsibleImageWithTextBlock: Block = {
       de: 'Aufklappbare Bildtexte',
     },
   },
+  dbName: 'collaps',
   fields: [
     {
       name: 'title',
@@ -45,29 +46,18 @@ export const CollapsibleImageWithTextBlock: Block = {
       },
     },
     {
-      name: 'backgroundColor',
+      name: 'colorStyle',
       type: 'select',
       label: {
-        de: 'Hintergrundfarbe',
+        de: 'Farbstil',
       },
       options: [
-        { label: 'Keine', value: 'none' },
+        { label: 'Standard', value: 'default' },
         { label: 'Soft', value: 'soft' },
         { label: 'Off-White', value: 'off-white' },
-      ],
-      defaultValue: 'none',
-    },
-    {
-      name: 'schema',
-      type: 'select',
-      label: {
-        de: 'Farbschema',
-      },
-      options: [
-        { label: 'Base', value: 'base' },
         { label: 'Kontrast', value: 'contrast' },
       ],
-      defaultValue: 'base',
+      defaultValue: 'default',
     },
   ],
 }

src/compositions/Blocks/Blocks.tsx

@@ -193,29 +193,33 @@ export function Blocks({ content }: BlocksProps) {
             )
           }
 
-          // if (item.blockType === 'collapsibleImageWithText') {
+          if (item.blockType === 'collapsibleImageWithText') {
-          //   const imageUrl = typeof item.image === 'object' && item.image?.url
+            const imageUrl = typeof item.image === 'object' && item.image?.url
-          //     ? item.image.url
+              ? item.image.url
-          //     : ''
+              : ''
-          //   const bg = item.backgroundColor === 'none'
+            const colorStyle = item.colorStyle || 'default'
-          //     ? undefined
+            const bg = colorStyle === 'soft' || colorStyle === 'off-white'
-          //     : item.backgroundColor as 'soft' | 'off-white' | undefined
+              ? colorStyle as 'soft' | 'off-white'
-          //   return (
+              : undefined
-          //     <CollapsibleImageWithText
+            const schema = colorStyle === 'contrast'
-          //       key={item.id}
+              ? 'contrast' as const
-          //       title={item.title}
+              : 'base' as const
-          //       text={item.text}
+            return (
-          //       image={imageUrl}
+              <CollapsibleImageWithText
-          //       backgroundColor={bg}
+                key={item.id}
-          //       schema={item.schema as 'base' | 'contrast' | undefined}
+                title={item.title}
-          //       content={
+                text={item.text}
-          //         item.content
+                image={imageUrl}
-          //           ? <HTMLText width={'1/2'} data={item.content} />
+                backgroundColor={bg}
-          //           : <></>
+                schema={schema}
-          //       }
+                content={
-          //     />
+                  item.content
-          //   )
+                    ? <HTMLText width={'3/4'} data={item.content} />
-          // }
+                    : <></>
+                }
+              />
+            )
+          }
 
           if (item.blockType === 'events') {
             return (

src/migrations/20260319_215840_collaps_item.ts

@@ -0,0 +1,62 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+   CREATE TYPE "public"."enum_collaps_color_style" AS ENUM('default', 'soft', 'off-white', 'contrast');
+  CREATE TYPE "public"."enum__collaps_v_color_style" AS ENUM('default', 'soft', 'off-white', 'contrast');
+  CREATE TABLE "collaps" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" uuid NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"title" varchar,
+  	"text" varchar,
+  	"image_id" uuid,
+  	"content" jsonb,
+  	"color_style" "enum_collaps_color_style" DEFAULT 'default',
+  	"block_name" varchar
+  );
+  
+  CREATE TABLE "_collaps_v" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" uuid NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+  	"title" varchar,
+  	"text" varchar,
+  	"image_id" uuid,
+  	"content" jsonb,
+  	"color_style" "enum__collaps_v_color_style" DEFAULT 'default',
+  	"_uuid" varchar,
+  	"block_name" varchar
+  );
+  
+  ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-03-22T21:58:39.666Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-03-22T21:58:39.963Z';
+  ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-04-18T20:58:40.019Z';
+  ALTER TABLE "collaps" ADD CONSTRAINT "collaps_image_id_media_id_fk" FOREIGN KEY ("image_id") REFERENCES "public"."media"("id") ON DELETE set null ON UPDATE no action;
+  ALTER TABLE "collaps" ADD CONSTRAINT "collaps_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."pages"("id") ON DELETE cascade ON UPDATE no action;
+  ALTER TABLE "_collaps_v" ADD CONSTRAINT "_collaps_v_image_id_media_id_fk" FOREIGN KEY ("image_id") REFERENCES "public"."media"("id") ON DELETE set null ON UPDATE no action;
+  ALTER TABLE "_collaps_v" ADD CONSTRAINT "_collaps_v_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."_pages_v"("id") ON DELETE cascade ON UPDATE no action;
+  CREATE INDEX "collaps_order_idx" ON "collaps" USING btree ("_order");
+  CREATE INDEX "collaps_parent_id_idx" ON "collaps" USING btree ("_parent_id");
+  CREATE INDEX "collaps_path_idx" ON "collaps" USING btree ("_path");
+  CREATE INDEX "collaps_image_idx" ON "collaps" USING btree ("image_id");
+  CREATE INDEX "_collaps_v_order_idx" ON "_collaps_v" USING btree ("_order");
+  CREATE INDEX "_collaps_v_parent_id_idx" ON "_collaps_v" USING btree ("_parent_id");
+  CREATE INDEX "_collaps_v_path_idx" ON "_collaps_v" USING btree ("_path");
+  CREATE INDEX "_collaps_v_image_idx" ON "_collaps_v" USING btree ("image_id");`)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+   ALTER TABLE "collaps" DISABLE ROW LEVEL SECURITY;
+  ALTER TABLE "_collaps_v" DISABLE ROW LEVEL SECURITY;
+  DROP TABLE "collaps" CASCADE;
+  DROP TABLE "_collaps_v" CASCADE;
+  ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-03-15T11:02:35.690Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-03-15T11:02:35.969Z';
+  ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-04-10T10:02:36.027Z';
+  DROP TYPE "public"."enum_collaps_color_style";
+  DROP TYPE "public"."enum__collaps_v_color_style";`)
+}

src/migrations/index.ts

@@ -21,6 +21,7 @@ import * as migration_20260310_105814 from './20260310_105814';
 import * as migration_20260310_143800 from './20260310_143800';
 import * as migration_20260311_105947_drop_features from './20260311_105947_drop_features';
 import * as migration_20260311_110236_live_preview from './20260311_110236_live_preview';
+import * as migration_20260319_215840_collaps_item from './20260319_215840_collaps_item';
 
 export const migrations = [
   {
@@ -138,4 +139,9 @@ export const migrations = [
     down: migration_20260311_110236_live_preview.down,
     name: '20260311_110236_live_preview',
   },
+  {
+    up: migration_20260319_215840_collaps_item.up,
+    down: migration_20260319_215840_collaps_item.down,
+    name: '20260319_215840_collaps_item'
+  },
 ];

src/payload-types.ts

@@ -847,6 +847,30 @@ export interface Page {
             blockName?: string | null;
             blockType: 'blogSlider';
           }
+        | {
+            title: string;
+            text: string;
+            image: string | Media;
+            content: {
+              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;
+            };
+            colorStyle?: ('default' | 'soft' | 'off-white' | 'contrast') | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'collapsibleImageWithText';
+          }
         | {
             title?: string | null;
             subtitle?: string | null;
@@ -1564,6 +1588,17 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        collapsibleImageWithText?:
+          | T
+          | {
+              title?: T;
+              text?: T;
+              image?: T;
+              content?: T;
+              colorStyle?: T;
+              id?: T;
+              blockName?: T;
+            };
         massTimes?:
           | T
           | {