@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

package/src/brand-page/utils/migration.util.test.ts

@@ -1,6 +1,8 @@
-import { migrateBrandPageModel } from './migration.util';
+import { migrateBrandPageModel, GetLatestModelVersion } from './migration.util';
 import { migrateNewLogoLogic } from './migration/migration-01';
 import { migration17 } from './migration/migration-17';
+import { migration22 } from './migration/migration-22';
+import type * as Migration22Module from './migration/migration-22';
 import {
   BrandPageModel,
   type BrandPageData,
@@ -18,6 +20,7 @@ import {
   BRAND_PAGE_TYPES,
   type LogoContent,
   type ButtonWithModalContent,
+  type TextStyleDeclaration,
 } from '../models';
 import {
   createInitialAboutSectionContent,
@@ -39,6 +42,13 @@ import {
   TESTIMONIAL_DEFAULT_PADDING,
 } from '../constants';
 
+// Spies that call through, so the table's run order is observable without changing either migration.
+vi.mock('./migration/migration-22', async (importOriginal) => {
+  const actual = await importOriginal<typeof Migration22Module>();
+
+  return { ...actual, migration22: vi.fn(actual.migration22) };
+});
+
 describe('migration.util', () => {
   const getBsModel: () => BrandPageModel = () => {
     return {
@@ -1023,8 +1033,12 @@ describe('migration.util', () => {
         const content = model.brandPageModel.pages[0]
           .contents[1] as ProfileContent;
 
-        expect(content.titleStyle.fontFamily).toBe('Lato');
-        expect(content.titleStyle.lineHeight).toBe('1.5');
+        expect((content.titleStyle as TextStyleDeclaration).fontFamily).toBe(
+          'Lato',
+        );
+        expect((content.titleStyle as TextStyleDeclaration).lineHeight).toBe(
+          '1.5',
+        );
       });
     });
   });
@@ -1043,11 +1057,19 @@ describe('migration.util', () => {
       expect(bannerContent.titleStyle.textAlign).toBe('center');
       expect(bannerContent.descriptionStyle.textAlign).toBe('center');
       expect(bannerContent.buttonTextStyle.textAlign).toBe('center');
-      expect(bannerContent.titleStyle.fontFamily).toBe('Lato');
-      expect(bannerContent.descriptionStyle.fontFamily).toBe('Lato');
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(bannerContent.buttonTextStyle.fontFamily).toBe('Lato');
-      expect(bannerContent.titleStyle.lineHeight).toBe(LINE_HEIGHT_TITLE);
-      expect(bannerContent.descriptionStyle.lineHeight).toBe(LINE_HEIGHT_BODY);
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).lineHeight,
+      ).toBe(LINE_HEIGHT_TITLE);
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).lineHeight,
+      ).toBe(LINE_HEIGHT_BODY);
       expect(bannerContent.buttonTextStyle.lineHeight).toBe(LINE_HEIGHT_BODY);
     });
 
@@ -1153,8 +1175,12 @@ describe('migration.util', () => {
       expect(bannerContent.titleStyle.textAlign).toBe('center');
       expect(bannerContent.descriptionStyle.textAlign).toBe('center');
       expect(bannerContent.buttonTextStyle.textAlign).toBe('center');
-      expect(bannerContent.titleStyle.fontFamily).toBe('Lato');
-      expect(bannerContent.descriptionStyle.fontFamily).toBe('Lato');
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(bannerContent.buttonTextStyle.fontFamily).toBe('Lato');
     });
 
@@ -1171,8 +1197,12 @@ describe('migration.util', () => {
       expect(bannerContent.titleStyle.textAlign).toBe('right');
       expect(bannerContent.descriptionStyle.textAlign).toBe('left');
       expect(bannerContent.buttonTextStyle.textAlign).toBe('right');
-      expect(bannerContent.titleStyle.fontFamily).toBe('Lato');
-      expect(bannerContent.descriptionStyle.fontFamily).toBe('Lato');
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(bannerContent.buttonTextStyle.fontFamily).toBe('Lato');
     });
 
@@ -1186,8 +1216,12 @@ describe('migration.util', () => {
       const bannerContent = model.brandPageModel.pages[0]
         .contents[0] as BannerSectionContent;
 
-      expect(bannerContent.titleStyle.lineHeight).toBe(LINE_HEIGHT_TITLE);
-      expect(bannerContent.descriptionStyle.lineHeight).toBe(LINE_HEIGHT_BODY);
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).lineHeight,
+      ).toBe(LINE_HEIGHT_TITLE);
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).lineHeight,
+      ).toBe(LINE_HEIGHT_BODY);
       expect(bannerContent.buttonTextStyle.lineHeight).toBe(LINE_HEIGHT_BODY);
     });
     test('migrateBrandPageModel should not replace lineheight if theres existing', async () => {
@@ -1200,8 +1234,12 @@ describe('migration.util', () => {
       const bannerContent = model.brandPageModel.pages[1]
         .contents[1] as BannerSectionContent;
 
-      expect(bannerContent.titleStyle.lineHeight).toBe('1.6');
-      expect(bannerContent.descriptionStyle.lineHeight).toBe('1.2');
+      expect(
+        (bannerContent.titleStyle as TextStyleDeclaration).lineHeight,
+      ).toBe('1.6');
+      expect(
+        (bannerContent.descriptionStyle as TextStyleDeclaration).lineHeight,
+      ).toBe('1.2');
       expect(bannerContent.buttonTextStyle.lineHeight).toBe('1.2');
     });
   });
@@ -1221,7 +1259,9 @@ describe('migration.util', () => {
       expect(testimonialContent.testimonialStyle.textAlign).toBe('center');
       expect(testimonialContent.nameStyle.textAlign).toBe('center');
       expect(testimonialContent.positionStyle.textAlign).toBe('center');
-      expect(testimonialContent.titleStyle.fontFamily).toBe('Lato');
+      expect(
+        (testimonialContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(testimonialContent.testimonialStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.nameStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.positionStyle.fontFamily).toBe('Lato');
@@ -1241,7 +1281,9 @@ describe('migration.util', () => {
       expect(testimonialContent.testimonialStyle.textAlign).toBe('center');
       expect(testimonialContent.nameStyle.textAlign).toBe('center');
       expect(testimonialContent.positionStyle.textAlign).toBe('center');
-      expect(testimonialContent.titleStyle.fontFamily).toBe('Lato');
+      expect(
+        (testimonialContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(testimonialContent.testimonialStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.nameStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.positionStyle.fontFamily).toBe('Lato');
@@ -1260,7 +1302,9 @@ describe('migration.util', () => {
       expect(testimonialContent.testimonialStyle.textAlign).toBe('center');
       expect(testimonialContent.nameStyle.textAlign).toBe('center');
       expect(testimonialContent.positionStyle.textAlign).toBe('right');
-      expect(testimonialContent.titleStyle.fontFamily).toBe('Lato');
+      expect(
+        (testimonialContent.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
       expect(testimonialContent.testimonialStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.nameStyle.fontFamily).toBe('Lato');
       expect(testimonialContent.positionStyle.fontFamily).toBe('Lato');
@@ -1279,8 +1323,12 @@ describe('migration.util', () => {
 
       expect(aboutContents.titleStyle.textAlign).toBe('center');
       expect(aboutContents.paragraphStyle.textAlign).toBe('center');
-      expect(aboutContents.titleStyle.fontFamily).toBe('Lato');
-      expect(aboutContents.paragraphStyle.fontFamily).toBe('Lato');
+      expect(
+        (aboutContents.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (aboutContents.paragraphStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
     });
     test('migrateBrandPageModel should return Newly Added About contents with text style to have textAlign and FontFamily', async () => {
       // Act
@@ -1294,8 +1342,12 @@ describe('migration.util', () => {
 
       expect(aboutContents.titleStyle.textAlign).toBe('center');
       expect(aboutContents.paragraphStyle.textAlign).toBe('center');
-      expect(aboutContents.titleStyle.fontFamily).toBe('Lato');
-      expect(aboutContents.paragraphStyle.fontFamily).toBe('Lato');
+      expect(
+        (aboutContents.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (aboutContents.paragraphStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
     });
     test('migrateBrandPageModel should return text Align and Font family with the correct alignment based on display style', async () => {
       // Act
@@ -1309,8 +1361,12 @@ describe('migration.util', () => {
 
       expect(aboutContents.titleStyle.textAlign).toBe('left');
       expect(aboutContents.paragraphStyle.textAlign).toBe('left');
-      expect(aboutContents.titleStyle.fontFamily).toBe('Lato');
-      expect(aboutContents.paragraphStyle.fontFamily).toBe('Lato');
+      expect(
+        (aboutContents.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (aboutContents.paragraphStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
     });
     test('migrateBrandPageModel should  not change text alignment of existing contents', async () => {
       // Act
@@ -1324,8 +1380,12 @@ describe('migration.util', () => {
 
       expect(aboutContents.titleStyle.textAlign).toBe('left');
       expect(aboutContents.paragraphStyle.textAlign).toBe('right');
-      expect(aboutContents.titleStyle.fontFamily).toBe('Lato');
-      expect(aboutContents.paragraphStyle.fontFamily).toBe('Lato');
+      expect(
+        (aboutContents.titleStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
+      expect(
+        (aboutContents.paragraphStyle as TextStyleDeclaration).fontFamily,
+      ).toBe('Lato');
     });
   });
 
@@ -1341,9 +1401,13 @@ describe('migration.util', () => {
     expect(content.titleStyle.textAlign).toBe('center');
     expect(content.nameStyle.textAlign).toBe('center');
     expect(content.descriptionStyle.textAlign).toBe('center');
-    expect(content.titleStyle.fontFamily).toBe('Lato');
-    expect(content.nameStyle.fontFamily).toBe('Lato');
-    expect(content.descriptionStyle.fontFamily).toBe('Lato');
+    expect((content.titleStyle as TextStyleDeclaration).fontFamily).toBe(
+      'Lato',
+    );
+    expect((content.nameStyle as TextStyleDeclaration).fontFamily).toBe('Lato');
+    expect((content.descriptionStyle as TextStyleDeclaration).fontFamily).toBe(
+      'Lato',
+    );
   });
 
   test('migrateBrandPageModel should return mailing list contents with text style to have textAlign and FontFamily', async () => {
@@ -1358,7 +1422,9 @@ describe('migration.util', () => {
 
     expect(content.titleStyle.textAlign).toBe('center');
     expect(content.buttonTextStyle.textAlign).toBe('center');
-    expect(content.titleStyle.fontFamily).toBe('Lato');
+    expect((content.titleStyle as TextStyleDeclaration).fontFamily).toBe(
+      'Lato',
+    );
     expect(content.buttonTextStyle.fontFamily).toBe('Lato');
   });
 
@@ -1397,7 +1463,9 @@ describe('migration.util', () => {
     expect(content.titleStyle.textAlign).toBe('center');
     expect(content.headingStyle.textAlign).toBe('center');
     expect(content.paragraphStyle.textAlign).toBe('center');
-    expect(content.titleStyle.fontFamily).toBe('Lato');
+    expect((content.titleStyle as TextStyleDeclaration).fontFamily).toBe(
+      'Lato',
+    );
     expect(content.headingStyle.fontFamily).toBe('Lato');
     expect(content.paragraphStyle.fontFamily).toBe('Lato');
   });
@@ -1427,7 +1495,9 @@ describe('migration.util', () => {
       .contents[9] as SocialLinksContent;
 
     expect(content.titleStyle.textAlign).toBe('center');
-    expect(content.titleStyle.fontFamily).toBe('Lato');
+    expect((content.titleStyle as TextStyleDeclaration).fontFamily).toBe(
+      'Lato',
+    );
   });
 
   describe('Contact Form Content - Layout style testing', () => {
@@ -2410,4 +2480,48 @@ describe('migration.util', () => {
       );
     });
   });
+
+  describe('migration 22 - Global Text Style V2', () => {
+    const options = { isUserDraft: true, isServerRender: false };
+
+    beforeEach(() => {
+      vi.mocked(migration22).mockClear();
+    });
+
+    test('22 is the latest model version', () => {
+      expect(GetLatestModelVersion()).toBe(22);
+    });
+
+    test('migration 22 upgrades a v=21 model to v=22', async () => {
+      const { brandPageModel } = await migrateBrandPageModel(
+        {
+          v: 21,
+          pages: [{ contents: [] }],
+          styles: {},
+        } as unknown as BrandPageModel,
+        options,
+      );
+
+      expect(migration22).toHaveBeenCalledTimes(1);
+      expect(brandPageModel.v).toBe(22);
+    });
+
+    test('migration 22 does not rerun on a v=22 model', async () => {
+      const { brandPageModel } = await migrateBrandPageModel(
+        {
+          v: 22,
+          pages: [{ contents: [] }],
+          styles: {},
+        } as unknown as BrandPageModel,
+        options,
+      );
+
+      expect(migration22).not.toHaveBeenCalled();
+      expect(brandPageModel.v).toBe(22);
+
+      await migrateBrandPageModel(brandPageModel, options);
+
+      expect(migration22).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/brand-page/utils/migration.util.ts

@@ -25,6 +25,7 @@ import { migration19 } from './migration/migration-19';
 import { migration20 } from './migration/migration-20';
 import { migration20_5 } from './migration/migration-20_5';
 import { migration21 } from './migration/migration-21';
+import { migration22 } from './migration/migration-22';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -228,6 +229,23 @@ const MIGRATION_TABLE = [
     description:
       'BP-5886 Global Color V2: extract every colour into a central styles.colors palette (4 palette roles + palette-custom-<uuid>) and rewrite references to var(--id) — RTE, shapes, box-shadow, gradients included (lossless, once)',
   },
+  {
+    version: 22,
+    migrateFn: migration22,
+    // Version-gated (runs once, when modelVersion < 22): the BP-5969 single-source
+    // text-style migration (ADR-0019/0020/0021, §7a D1–D5). The 10 roles KEEP their §4
+    // default typography; each old role's COLOUR is seeded onto its target tier so the
+    // colour bake stays byte-identical (paragraph1 takes the base-coat colour). Every
+    // text field (content, nav, header button, Save Contact) outside the ten reconnects
+    // onto its nearest canonical tier, the values that differ from it kept as overrides
+    // so it renders unchanged, and the baked role-typography is stripped out of RTE
+    // marks (uniform-but-divergent values lifted into block overrides, genuine per-run
+    // marks kept). Ordered after v21 so RTE colours are already referencified. The
+    // version gate runs it once; on a hypothetical re-run every job is a no-op (see
+    // migration-22's header).
+    description:
+      'BP-5969 Global Text Style V2: expand 4 roles -> 10 (H1-6/P1-3/button); roles keep default typography, reconnect all content to its nearest tier with its size kept as a per-block override, seed role colour + strip baked RTE typography (appearance-preserving, once)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/model.util.ts

@@ -1,3 +1,7 @@
+/**
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its reconnect and colour bake call `isButtonContent`. After
+ * migration-22 releases, pin its v22 behaviour in the migration before changing it.
+ */
 import {
   type Content,
   type AboutSectionContent,

package/src/brand-page/utils/personalisation.util.test.ts

@@ -30,6 +30,7 @@ import {
   createInitialButtonContent,
 } from '@brand-page-maker/models';
 import { faker } from '@faker-js/faker';
+import { isTiptapDocument } from '@brand-page-maker/utils';
 
 describe('personalisation.util', async () => {
   test('applyUserPersonalisationToBrandPageModelAsync should return not modified when input has no contents', async () => {
@@ -973,11 +974,13 @@ describe('personalisation.util', async () => {
     fetchSpy.mockRestore();
   });
 
-  test('applyUserPersonalisationToBrandPageModelAsync should not throw when shape SVG fetch fails and should still apply shape URL', async () => {
+  test('applyUserPersonalisationToBrandPageModelAsync should apply shape URL and color replacements', async () => {
     // Arrange
+    const svgContent =
+      '<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#ff0000"/></svg>';
     const fetchSpy = vi
       .spyOn(globalThis, 'fetch')
-      .mockRejectedValue(new Error('Network error'));
+      .mockResolvedValue(new Response(svgContent, { status: 200 }));
 
     const expectedShapeUrl =
       PERSONALISATION.mediaSection.mainShapesCollection!.tall[0].url;
@@ -1013,7 +1016,7 @@ describe('personalisation.util', async () => {
       ],
     });
 
-    // Act - should not throw even though fetch fails
+    // Act - fetch is fully local so this test does not depend on CDN/WAF access.
     const result = await applyUserPersonalisationToBrandPageModelAsync(
       PERSONALISATION,
       model,
@@ -1030,6 +1033,69 @@ describe('personalisation.util', async () => {
     fetchSpy.mockRestore();
   });
 
+  test('applyUserPersonalisationToBrandPageModelAsync should not throw when shape SVG fetch fails and should still apply shape URL', async () => {
+    // Arrange
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockRejectedValue(new Error('Network error'));
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+
+    const expectedShapeUrl =
+      PERSONALISATION.mediaSection.mainShapesCollection!.tall[0].url;
+
+    const model = new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      pages: [
+        {
+          title: 'home',
+          slug: 'home',
+          contents: [
+            {
+              ...createInitialShapesSectionContent(),
+              personalisationRole: 'media',
+              items: [
+                {
+                  id: 'shapes-item-1',
+                  colorReplacements: [],
+                  height: -1,
+                  imageUrl: 'shape-1.svg',
+                  imageTitle: '',
+                  paragraph: '',
+                  title: '',
+                  width: -1,
+                  mediaType: 'shape',
+                  imageLink: '',
+                  itemsId: -1,
+                },
+              ],
+            } as ShapesSectionContent,
+          ],
+        },
+      ],
+    });
+
+    // Act
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      PERSONALISATION,
+      model,
+    );
+
+    // Assert
+    const content = result.model.pages[0].contents[0] as ShapesSectionContent;
+
+    expect(content.items[0].imageUrl).toBe(expectedShapeUrl);
+    expect(content.items[0].colorReplacements).toEqual([]);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Failed to fetch or parse shape SVG'),
+      expect.any(Error),
+    );
+
+    fetchSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+  });
+
   test('applyUserPersonalisationToBrandPageModelAsync should use mainShapesCollection when shapes is an empty array', async () => {
     // Arrange - personalisation with shapes: [] but populated mainShapesCollection
     const svgContent =
@@ -1260,3 +1326,82 @@ describe('personalisation.util', async () => {
     ]);
   });
 });
+
+/**
+ * BP-5969 — post-migration an RTE field is a Tiptap doc whose colour + typography live in the run
+ * marks. The seed must inject the plain personalisation text WITHOUT dropping that style: the write
+ * step reflows the new text through the template doc's style skeleton (`reflowRteDoc`).
+ */
+describe('personalisation.util — RTE doc fields keep the template style', () => {
+  const templateDoc = () => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        attrs: { textAlign: 'center' },
+        content: [
+          {
+            type: 'text',
+            text: 'Placeholder heading',
+            marks: [
+              { type: 'textStyle', attrs: { color: 'var(--palette-0)' } },
+            ],
+          },
+        ],
+      },
+    ],
+  });
+
+  const modelWith = (textField: unknown, role: string | undefined) => {
+    const textContent = {
+      ...createInitialTextContent({
+        brandPageType: BRAND_PAGE_TYPES.brandSite,
+      }),
+      text: textField,
+      personalisationRole: role,
+    } as unknown as TextContent;
+
+    return new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      pages: [{ title: 'home', slug: 'home', contents: [textContent] }],
+    });
+  };
+
+  test('reflows the AI text into the template doc, keeping colour + alignment', async () => {
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      PERSONALISATION,
+      modelWith(templateDoc(), 'about'),
+    );
+
+    const out = (result.model.pages[0].contents[0] as TextContent)
+      .text as unknown as any;
+
+    expect(result.isModified).toBe(true);
+    // still a doc — not flattened to a bare string
+    expect(isTiptapDocument(out)).toBe(true);
+
+    const run = out.content[0].content[0];
+
+    // new copy injected …
+    expect(run.text).toBe(PERSONALISATION.aboutSection.descriptionShort);
+    // … and the template's embedded style preserved
+    expect(run.marks.find((m: any) => m.type === 'textStyle').attrs.color).toBe(
+      'var(--palette-0)',
+    );
+    expect(out.content[0].attrs.textAlign).toBe('center');
+  });
+
+  test('leaves a doc field untouched when the block has no personalisation role', async () => {
+    const original = templateDoc();
+
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      PERSONALISATION,
+      modelWith(original, undefined),
+    );
+
+    expect(result.isModified).toBe(false);
+    expect((result.model.pages[0].contents[0] as TextContent).text).toEqual(
+      original,
+    );
+  });
+});

package/src/brand-page/utils/personalisation.util.ts

@@ -4,6 +4,9 @@ import {
   PERSONALISATION_MAPPINGS,
   TEXT_MEDIA_CONTENT_TYPES,
 } from '@brand-page-maker/constants/personalisation.constant';
+// Leaf import, not the `@brand-page-maker/utils` barrel: the barrel would drag the whole maker-utils
+// graph into this brand-page module and risk a cycle (cf. the same guard in section-color-matches.ts).
+import { reflowRteDoc, isTiptapDocument } from '@shared/rte-render.util';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import type {
   BrandPageModel,
@@ -581,7 +584,12 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (
         newPersonalisation = updatedPersonalisation;
 
         if (personalisationValue) {
-          newContents[key] = personalisationValue;
+          // BP-5969: an RTE field is a Tiptap doc whose colour + typography live in its run marks.
+          // Writing the plain personalisation string raw would drop that style, so reflow the new
+          // text through the template doc's style skeleton instead; plain/URL fields write raw.
+          newContents[key] = isTiptapDocument(value)
+            ? reflowRteDoc(value, personalisationValue)
+            : personalisationValue;
 
           if (newValuesToUpdate) {
             for (const [k, v] of Object.entries(newValuesToUpdate)) {