@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -1,11 +1,11 @@
 import type { BrandPageModel } from '../../models';
 import type { MigrationData } from '../migration.util';
 import {
-  isRteHtmlString,
   toRteJson,
   resolveHtmlParser,
   type HtmlParser,
-} from '../../../brand-page-maker/utils';
+} from '@shared/rte-render.util';
+import { isRteHtmlString } from '@shared/rte-shape.util';
 
 /**
  * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
@@ -52,7 +52,10 @@ const convertRteStringsToJson = (value: unknown, parser: HtmlParser): void => {
 
     if (isRteHtmlString(field)) {
       try {
-        const json = toRteJson(field, parser);
+        // Pin the parse to the v20 schema this migration shipped with (pre-TextEffects). Parsing
+        // legacy HTML with the live schema would drift a released migration's output — a later
+        // schema addition (e.g. TextEffects) would bake attrs it never produced. See docs/decisions.
+        const json = toRteJson(field, parser, 20);
 
         if (json) record[key] = json;
       } catch (error) {

package/src/brand-page/utils/migration/migration-20_5.test.ts

@@ -1,7 +1,10 @@
 import { describe, test, expect } from 'vitest';
 import { migration20_5 } from './migration-20_5';
 import { migration21 } from './migration-21';
-import { migrateBrandPageModel } from '../migration.util';
+import {
+  GetLatestModelVersion,
+  migrateBrandPageModel,
+} from '../migration.util';
 import type { MigrationData, MigrationOptions } from '../migration.util';
 import { DEFAULT_MEDIA_OVERLAY_STYLE } from '../../models';
 
@@ -144,6 +147,6 @@ describe('migration20_5 — complete mediaOverlayStyle default', () => {
     expect(
       brandPageModel.styles.backgroundStyles.mediaOverlayStyle.backgroundColor,
     ).toMatch(/^var\(--/);
-    expect(brandPageModel.v).toBe(21);
+    expect(brandPageModel.v).toBe(GetLatestModelVersion());
   });
 });

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

@@ -2602,6 +2602,40 @@ describe('migration21 — step FINAL+1: bake resolved colour into inherit-only R
     );
   });
 
+  // Released behaviour, pinned: a payment success message style the maker's editor wrote (its
+  // alignment) is not container-bound here, so this migration bakes no colour onto it.
+  test.each(['support-me', 'request-payment'])(
+    '%s: a success message style of its own gets no frame colour',
+    async (type) => {
+      const model = {
+        styles: bakeStyles(),
+        brandPageType: 'brandSite',
+        pages: [
+          {
+            contents: [
+              {
+                type,
+                successMessage: '',
+                successMessageStyle: { textAlign: 'left' },
+                description: rteDoc(''),
+                descriptionStyle: { textStyleType: 'paragraphs' },
+              },
+            ],
+          },
+        ],
+      };
+
+      const { brandPageModel } = await migration21(
+        createMigrationData(model),
+        OPTIONS_NO_LOGO,
+      );
+
+      expect(
+        (brandPageModel.pages[0].contents[0] as any).successMessageStyle,
+      ).toEqual({ textAlign: 'left' });
+    },
+  );
+
   test('request-payment success message: plain string → RTE with the frame colour too', async () => {
     const model = {
       styles: bakeStyles(),

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

@@ -24,17 +24,27 @@ import {
   shapeMatchValue,
   type ShapeMatch,
 } from '../shape-color-match.util';
-import { resolveTextColor } from '../text-style.util';
-import {
-  rteFrameFallbackColour,
-  CONTAINER_BOUND_TEXT_STYLE_KEYS,
-} from '../container-text-color.util';
+import { rteFrameFallbackColour } from '../container-text-color.util';
 import { RTE_SECTION_FIELD_PAIRS } from '@shared/color-strategies/rte-field-pairs';
 import {
   collectRteTextColors,
   fillUncolouredRteText,
 } from '@shared/color-strategies/rte-color';
 
+/**
+ * FROZEN copy of `resolveTextColor`'s three-rung cascade as it was when this migration
+ * shipped: `element.color || fallbackBeforeGlobal || role.color`. migration-21 is
+ * immutable, so it must keep baking the exact colours it always did — but the shared
+ * `resolveTextColor` dropped the role rung (ADR-0020). Resolving against this local copy
+ * keeps this migration's output byte-identical instead of tracking the live util.
+ */
+const resolveTextColorV1 = (
+  elementStyle: { color?: string } | undefined,
+  globalStyle: { color?: string } | undefined,
+  fallbackBeforeGlobal?: string,
+): string | undefined =>
+  elementStyle?.color || fallbackBeforeGlobal || globalStyle?.color;
+
 /**
  * Migration 21 (Global Color V2): move every concrete colour in the metadata into a
  * central `styles.colors` palette and rewrite each reference to `var(--<id>)`. The
@@ -479,7 +489,12 @@ export const moveRootTextColourIntoGlobalStyles = (
 
   // Explicit keys, not Object.values — a stray persisted key is not a text style.
   for (const [type, source] of Object.entries(seedSourceByType)) {
-    const style = options[type as keyof typeof options]?.style;
+    // `color` was retired from `GlobalTextStyleDeclaration` (ADR-0020); this frozen
+    // migration still seeds it as the pre-decouple root colour (a later migration bakes it
+    // onto elements and clears it). Colour view only — typing-only, behaviour-identical.
+    const style = options[type as keyof typeof options]?.style as unknown as
+      | { color?: string }
+      | undefined;
 
     if (style && !isBlankColorValue(source) && isBlankColorValue(style.color)) {
       style.color = source;
@@ -647,6 +662,25 @@ export const seedLogoBackgroundColour = (
  * Step FINAL+1: bake resolved text colours into RTE content
  * -------------------------------------------------------------------------- */
 
+/**
+ * The container-bound text fields as this migration was released with them. Pinned: the live
+ * `CONTAINER_BOUND_TEXT_STYLE_KEYS` later gained the payment success message (BP-5969), which
+ * this released migration never baked.
+ */
+const CONTAINER_BOUND_TEXT_STYLE_KEYS_V21: Partial<
+  Record<string, readonly string[]>
+> = {
+  'mailing-list': ['titleStyle'],
+  'request-payment': ['titleStyle', 'descriptionStyle', 'itemTextStyle'],
+  'support-me': [
+    'titleStyle',
+    'headingStyle',
+    'descriptionStyle',
+    'itemTextStyle',
+  ],
+  'contact-form': ['titleStyle', 'descriptionStyle', 'successMessageStyle'],
+};
+
 /**
  * Blocks whose `successMessage` needs its own baked RTE colour. It carries no colour of
  * its own — no `successMessageStyle`, stored as plain text — so on legacy metadata both
@@ -688,7 +722,7 @@ const bakeSuccessMessageColour = (
 ): void => {
   const successMessage = fields.successMessage;
 
-  const colour = resolveTextColor(
+  const colour = resolveTextColorV1(
     descriptionStyle,
     globalStyleFor(descriptionStyle?.textStyleType),
     frameColour,
@@ -746,7 +780,7 @@ const bakeSuccessMessageColour = (
  * the resolved `titleStyle.color`. So a run whose mark carries no colour inherits the
  * nearest coloured ancestor, and a container block's frame (`sectionFrameStyle`) paints
  * the BUTTON colour: the title renders the button/primary colour, not its linked heading
- * colour. This bakes a resolved colour into the uncoloured runs via `resolveTextColor` —
+ * colour. This bakes a resolved colour into the uncoloured runs via `resolveTextColorV1` —
  * element colour, else the render-neutral frame fallback (`rteFrameFallbackColour`: the
  * section frame's button-label colour for every framed block — text/profile on a solid
  * background and the container-bound blocks — so a legacy run keeps exactly the colour it
@@ -807,8 +841,9 @@ const bakeResolvedTextColoursIntoContents = (
     // `|| baseCoatColour` is the terminal rung: an unframed, unlinked run inherited the page
     // base coat pre-V2 (the root text colour on the Page root element). Baking it reproduces
     // V1 instead of the post-V2 inherit, which re-pointed the root to the paragraphs colour.
+    // Resolve against the frozen V1 copy — the shared resolver dropped the role rung (ADR-0020).
     const resolved =
-      resolveTextColor(
+      resolveTextColorV1(
         styleObj,
         globalStyleFor(styleObj?.textStyleType),
         fallbackBeforeGlobal,
@@ -897,7 +932,8 @@ const bakeResolvedTextColoursIntoContents = (
       if (frameColour) {
         const rteStyleFields = new Set(pairs.map((pair) => pair.styleField));
 
-        for (const key of CONTAINER_BOUND_TEXT_STYLE_KEYS[content.type] ?? []) {
+        for (const key of CONTAINER_BOUND_TEXT_STYLE_KEYS_V21[content.type] ??
+          []) {
           if (rteStyleFields.has(key)) {
             continue; // RTE field — its mark already carries the frame colour.
           }

package/src/brand-page/utils/migration/migration-22.fixed-input.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { BrandPageModel } from '../../models';
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import { migration22 } from './migration-22';
+
+// Frozen v21 sites, generated once on develop and never rebuilt, pin migration-22's output while it
+// still calls live helpers. A diff means a helper change moved that output: see
+// global-text-style.md, "Migration-22 snapshot dependencies", for what to do.
+const FIXTURES = join(__dirname, '../../__fixtures__/migration-22-v21');
+const SITES = readdirSync(FIXTURES).filter((file) =>
+  file.endsWith('.v21.json'),
+);
+
+describe('migration-22 output for fixed v21 sites', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  it('has fixtures to check', () => {
+    expect(SITES.length).toBeGreaterThan(0);
+  });
+
+  it.each(SITES)('%s', async (file) => {
+    const stored = JSON.parse(readFileSync(join(FIXTURES, file), 'utf8'));
+    // The real load path constructs the model before migrating, so the constructor is part of
+    // migration-22's input.
+    const { brandPageModel } = await migration22(
+      {
+        brandPageModel: new BrandPageModel(stored),
+        useOldLogoRenderSize: false,
+      },
+      { isUserDraft: false, isServerRender: true },
+    );
+
+    await expect(
+      `${JSON.stringify(brandPageModel, null, 2)}\n`,
+    ).toMatchFileSnapshot(
+      `./__snapshots__/migration-22-output/${file.replace('.v21.json', '.v22.json')}`,
+    );
+  });
+});