@designcrowd/library.brand-page 6.2.3 → 6.2.4

package/src/metadata-builder/builders/global-font-propagation.test.ts

@@ -0,0 +1,401 @@
+import { describe, it, expect } from 'vitest';
+import type { BrandPageModel, Content } from '../../brand-page/models';
+import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
+import { BUILDER_TYPES } from '../models';
+import { GlobalStylesBuilder } from './global-styles-builder';
+import {
+  collectChangedFontFamilies,
+  propagateFontFamiliesToContents,
+} from './global-font-propagation';
+
+/**
+ * BP-5780 ISSUE-01: an AI global font change only reached preset-bound content.
+ * Template-authored sections carry detached `*Style` objects and inline RTE
+ * `font-family` marks that override the preset at render, so "use a serif font"
+ * produced a confident reply and a pixel-identical page. Propagation must align
+ * detached styles and rewrite inline marks for every changed category.
+ */
+
+const RTE_TITLE =
+  '<p><span style="font-family: Playfair Display">Bloom</span></p>';
+
+// Injectable stand-in for the Tiptap rewrite — tags the string so tests can
+// assert exactly which fields were rewritten and with which family.
+const fakeApplyFont = (text: string, fontFamily: string) =>
+  `${text}::rewritten(${fontFamily})`;
+
+const makeModel = (contents: Partial<Content>[]): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions: {} } },
+    pages: [{ id: 'p1', contents }],
+  }) as unknown as BrandPageModel;
+
+describe('collectChangedFontFamilies', () => {
+  it('extracts per-category families from textStyleOptions', () => {
+    const changed = collectChangedFontFamilies({
+      textStyleOptions: {
+        titles: { style: { fontFamily: 'EB Garamond' } },
+        headings: { style: { fontFamily: 'EB Garamond' } },
+        buttons: { style: { fontFamily: 'Inter' } },
+      },
+    } as UpdateGlobalStylesArguments['textStyles']);
+
+    expect(changed).toEqual({
+      titles: 'EB Garamond',
+      headings: 'EB Garamond',
+      buttons: 'Inter',
+    });
+  });
+
+  it('falls back textFontFamily → paragraphs when no explicit paragraphs entry', () => {
+    const changed = collectChangedFontFamilies({
+      textFontFamily: 'Inter',
+    } as UpdateGlobalStylesArguments['textStyles']);
+
+    expect(changed).toEqual({ paragraphs: 'Inter' });
+  });
+
+  it('returns empty for calls that change no fonts', () => {
+    expect(collectChangedFontFamilies(undefined)).toEqual({});
+    expect(
+      collectChangedFontFamilies({
+        style: { color: '#111111' },
+      } as UpdateGlobalStylesArguments['textStyles']),
+    ).toEqual({});
+  });
+});
+
+describe('propagateFontFamiliesToContents', () => {
+  it('aligns detached styles and rewrites RTE marks for the changed category', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: RTE_TITLE,
+      titleStyle: { fontFamily: 'Playfair Display' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'EB Garamond' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+
+    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
+      'EB Garamond',
+    );
+    expect(c.title).toBe(`${RTE_TITLE}::rewritten(EB Garamond)`);
+  });
+
+  it('banner-section titles follow the titles category, not headings', () => {
+    const content = {
+      id: 'c1',
+      type: 'banner-section',
+      title: RTE_TITLE,
+      titleStyle: { fontFamily: 'Playfair Display' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { titles: 'Lexend Deca', headings: 'EB Garamond' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+
+    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
+      'Lexend Deca',
+    );
+    expect(c.title).toBe(`${RTE_TITLE}::rewritten(Lexend Deca)`);
+  });
+
+  it('preset-bound styles stay preset-bound; only their RTE marks are rewritten', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: RTE_TITLE,
+      titleStyle: { textStyleType: 'headings' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'EB Garamond' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+    const style = c.titleStyle as unknown as Record<string, unknown>;
+
+    expect(style.textStyleType).toBe('headings');
+    expect(style.fontFamily).toBeUndefined();
+    expect(c.title).toBe(`${RTE_TITLE}::rewritten(EB Garamond)`);
+  });
+
+  it('walks items arrays (per-item text fields and styles)', () => {
+    const itemText = '<p>Live music</p>';
+    const content = {
+      id: 'c1',
+      type: 'shapes-section',
+      items: [
+        {
+          heading: itemText,
+          headingStyle: { fontFamily: 'Playfair Display' },
+          text: itemText,
+        },
+      ],
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'EB Garamond', paragraphs: 'Inter' },
+      fakeApplyFont,
+    );
+
+    const item = (
+      model.pages[0].contents[0] as unknown as Record<string, unknown>
+    ).items as Record<string, unknown>[];
+
+    expect((item[0].headingStyle as Record<string, unknown>).fontFamily).toBe(
+      'EB Garamond',
+    );
+    expect(item[0].heading).toBe(`${itemText}::rewritten(EB Garamond)`);
+    expect(item[0].text).toBe(`${itemText}::rewritten(Inter)`);
+  });
+
+  it('leaves fields alone when their category did not change', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: RTE_TITLE,
+      titleStyle: { fontFamily: 'Playfair Display' },
+      description: RTE_TITLE,
+      descriptionStyle: { fontFamily: 'Lato' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { paragraphs: 'Inter' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+
+    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
+      'Playfair Display',
+    );
+    expect(c.title).toBe(RTE_TITLE);
+    expect((c.descriptionStyle as Record<string, unknown>).fontFamily).toBe(
+      'Inter',
+    );
+    expect(c.description).toBe(`${RTE_TITLE}::rewritten(Inter)`);
+  });
+
+  it('non-RTE plain text fields are not rewritten (style still aligned)', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: 'Plain title',
+      titleStyle: { fontFamily: 'Playfair Display' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'EB Garamond' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+
+    expect(c.title).toBe('Plain title');
+    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
+      'EB Garamond',
+    );
+  });
+});
+
+describe('GlobalStylesBuilder font propagation wiring', () => {
+  it('buildAsync propagates changed category families into existing detached styles', async () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: 'Plain title', // plain text — the builder path must not need the RTE editor here
+      titleStyle: { fontFamily: 'Playfair Display' },
+    } as unknown as Content;
+    const model = {
+      styles: {
+        textStyles: {
+          textStyleOptions: {
+            headings: { style: { fontFamily: 'Lato' }, isModified: false },
+          },
+        },
+        buttonStyles: { style: {} },
+        backgroundStyles: { style: {} },
+      },
+      pages: [{ id: 'p1', contents: [content] }],
+    } as unknown as BrandPageModel;
+
+    const builder = new GlobalStylesBuilder({
+      id: 'g1',
+      type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
+      payload: {
+        textStyles: {
+          textStyleOptions: {
+            headings: { style: { fontFamily: 'EB Garamond' } },
+          },
+        },
+      } as UpdateGlobalStylesArguments,
+    });
+
+    const result = await builder.buildAsync(model);
+
+    expect(result.errors).toBeUndefined();
+    // Preset updated (pre-existing behaviour)…
+    expect(
+      model.styles.textStyles.textStyleOptions.headings.style.fontFamily,
+    ).toBe('EB Garamond');
+    // …AND the detached section style now follows (the fix).
+    expect(
+      (model.pages[0].contents[0] as unknown as Record<string, unknown>)
+        .titleStyle,
+    ).toMatchObject({ fontFamily: 'EB Garamond' });
+  });
+});
+
+describe('propagateFontFamiliesToContents — Tiptap JSON docs (BP-6079)', () => {
+  // The migrated model stores RTE fields as Tiptap JSON; the string-only path
+  // skipped them, so every inline mark kept the old family while the *Style
+  // objects moved (eval TYP-BP5540, compact-site).
+  const doc = (
+    family: string | undefined,
+    text = 'Your Local Music Destination',
+  ) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        attrs: { textAlign: 'left' },
+        content: [
+          {
+            type: 'text',
+            marks: [
+              { type: 'bold' },
+              {
+                type: 'textStyle',
+                attrs: {
+                  ...(family ? { fontFamily: family } : {}),
+                  fontSize: '4.52em',
+                  lineHeight: '1.3',
+                  color: 'rgb(255, 244, 224)',
+                },
+              },
+            ],
+            text,
+          },
+        ],
+      },
+    ],
+  });
+
+  it('rewrites the fontFamily attr of every textStyle mark, keeping the other attrs and marks', () => {
+    const content = {
+      id: 'c1',
+      type: 'banner-section',
+      title: doc('Aboreto'),
+      titleStyle: { fontFamily: 'Aboreto' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(model, { titles: 'Oswald' }, fakeApplyFont);
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+    const run = (c.title as ReturnType<typeof doc>).content[0].content[0];
+
+    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe('Oswald');
+    expect(run.marks[0]).toEqual({ type: 'bold' });
+    expect(run.marks[1].attrs).toEqual({
+      fontFamily: 'Oswald',
+      fontSize: '4.52em',
+      lineHeight: '1.3',
+      color: 'rgb(255, 244, 224)',
+    });
+    expect(run.text).toBe('Your Local Music Destination');
+  });
+
+  it('leaves a textStyle mark without a family alone (it inherits the updated style)', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: doc(undefined),
+      titleStyle: { fontFamily: 'Aboreto' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'Oswald' },
+      fakeApplyFont,
+    );
+
+    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
+    const run = (c.title as ReturnType<typeof doc>).content[0].content[0];
+
+    expect(run.marks[1].attrs?.fontFamily).toBeUndefined();
+  });
+
+  it('walks item docs (text section textItems)', () => {
+    const content = {
+      id: 'c1',
+      type: 'text',
+      textItems: [
+        {
+          text: doc('Tenor Sans', 'Lessons'),
+          textStyle: { fontFamily: 'Tenor Sans' },
+        },
+      ],
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { paragraphs: 'Oswald' },
+      fakeApplyFont,
+    );
+
+    const items = (
+      model.pages[0].contents[0] as unknown as Record<string, unknown>
+    ).textItems as Record<string, unknown>[];
+    const run = (items[0].text as ReturnType<typeof doc>).content[0].content[0];
+
+    expect((items[0].textStyle as Record<string, unknown>).fontFamily).toBe(
+      'Oswald',
+    );
+    expect(run.marks[1].attrs?.fontFamily).toBe('Oswald');
+  });
+
+  it('legacy HTML strings still go through the editor rewrite', () => {
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: RTE_TITLE,
+      titleStyle: { fontFamily: 'Playfair Display' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateFontFamiliesToContents(
+      model,
+      { headings: 'Oswald' },
+      fakeApplyFont,
+    );
+
+    expect(
+      (model.pages[0].contents[0] as unknown as Record<string, unknown>).title,
+    ).toBe(`${RTE_TITLE}::rewritten(Oswald)`);
+  });
+});

package/src/metadata-builder/builders/global-font-propagation.ts

@@ -0,0 +1,238 @@
+import type { JSONContent } from '@tiptap/vue-3';
+import type { BrandPageModel, Content } from '../../brand-page/models';
+import type { TextStyleDeclaration } from '../../brand-page/models';
+import { hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { applyStyleToRTEText } from '../helpers/rte.helpers';
+import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
+import { isTiptapDocument } from '../parsers/section-tool-arguments';
+
+/**
+ * Propagation of AI global font-family changes into existing section content.
+ *
+ * A `tool_update_global_styles` call merges new per-category font families into
+ * `styles.textStyles.textStyleOptions` — but only content whose style is still
+ * bound to a preset (`textStyleType`) follows that change. Template-authored
+ * content carries detached `*Style` objects AND inline `font-family` marks in
+ * its RTE HTML, both of which override the preset at render time, so a global
+ * font change was invisible on most templates (BP-5780 ISSUE-01).
+ *
+ * This module walks every page's contents and, for each text field whose
+ * resolved category received a new family, aligns the detached style object and
+ * rewrites the RTE field's inline font-family marks. Preset-bound styles are NOT
+ * detached — they already follow the preset; only their RTE inline marks are
+ * rewritten (the marks would otherwise still win over the preset).
+ *
+ * RTE fields come in two shapes: legacy inline HTML strings (rewritten through
+ * the headless Tiptap editor) and the migrated Tiptap JSON document (rewritten
+ * in place — `textStyle` mark attrs). Missing the JSON shape left every mark on
+ * the old family while the `*Style` objects moved (BP-6079).
+ */
+
+export type GlobalFontCategory =
+  | 'titles'
+  | 'headings'
+  | 'paragraphs'
+  | 'buttons';
+
+/**
+ * Default category per text field when its style is detached (no `textStyleType`).
+ * Mirrors the AI service's slot→category stamping (titles←h1, headings←h2-h4,
+ * paragraphs←body, buttons←button). `title` upgrades to `titles` on banner
+ * sections (the hero headline) via `resolveFieldCategory`.
+ */
+const FIELD_DEFAULT_CATEGORY: Record<string, GlobalFontCategory> = {
+  title: 'headings',
+  heading: 'headings',
+  name: 'headings',
+  description: 'paragraphs',
+  paragraph: 'paragraphs',
+  text: 'paragraphs',
+  testimonial: 'paragraphs',
+  position: 'paragraphs',
+  question: 'headings',
+  answer: 'paragraphs',
+  buttonText: 'buttons',
+  successMessage: 'paragraphs',
+};
+
+const CATEGORIES: readonly GlobalFontCategory[] = [
+  'titles',
+  'headings',
+  'paragraphs',
+  'buttons',
+];
+
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+  !!v && typeof v === 'object' && !Array.isArray(v);
+
+/** Extract the per-category families this AI call actually changes. */
+export const collectChangedFontFamilies = (
+  textStyles: UpdateGlobalStylesArguments['textStyles'],
+): Partial<Record<GlobalFontCategory, string>> => {
+  const changed: Partial<Record<GlobalFontCategory, string>> = {};
+
+  if (!textStyles) return changed;
+
+  for (const category of CATEGORIES) {
+    const family = textStyles.textStyleOptions?.[category]?.style?.fontFamily;
+
+    if (typeof family === 'string' && family.trim()) {
+      changed[category] = family;
+    }
+  }
+
+  // Base text family covers paragraphs when no explicit paragraphs entry came in.
+  if (
+    !changed.paragraphs &&
+    typeof textStyles.textFontFamily === 'string' &&
+    textStyles.textFontFamily.trim()
+  ) {
+    changed.paragraphs = textStyles.textFontFamily;
+  }
+
+  return changed;
+};
+
+const resolveFieldCategory = (
+  fieldName: string,
+  style: unknown,
+  content: Content,
+): GlobalFontCategory | undefined => {
+  const preset = isPlainObject(style)
+    ? (style.textStyleType as GlobalFontCategory | undefined)
+    : undefined;
+
+  if (preset && CATEGORIES.includes(preset)) return preset;
+
+  if (fieldName === 'title' && content.type === 'banner-section') {
+    return 'titles';
+  }
+
+  return FIELD_DEFAULT_CATEGORY[fieldName];
+};
+
+/** `testimonialsStyle` → `testimonial`, `titleStyle` → `title`. */
+const styleKeyToFieldName = (styleKey: string): string => {
+  const base = styleKey.slice(0, -'Style'.length);
+
+  return base.endsWith('s') && !(base in FIELD_DEFAULT_CATEGORY)
+    ? base.slice(0, -1)
+    : base;
+};
+
+export type ApplyFontToRTE = (text: string, fontFamily: string) => string;
+
+/**
+ * Rewrite the `fontFamily` attr of every `textStyle` mark in a Tiptap document.
+ * Only marks that already carry a family are touched: a run without one inherits
+ * the (already updated) `*Style` / preset at render, so adding a mark would pin
+ * it needlessly.
+ */
+export const applyFontToTiptapDoc = (
+  doc: JSONContent,
+  fontFamily: string,
+): JSONContent => {
+  const visit = (node: JSONContent): JSONContent => {
+    const marks = node.marks?.map((mark) =>
+      mark.type === 'textStyle' && mark.attrs?.fontFamily
+        ? { ...mark, attrs: { ...mark.attrs, fontFamily } }
+        : mark,
+    );
+    const content = node.content?.map(visit);
+
+    return {
+      ...node,
+      ...(marks ? { marks } : {}),
+      ...(content ? { content } : {}),
+    };
+  };
+
+  return visit(doc);
+};
+
+const walkRecord = (
+  record: Record<string, unknown>,
+  content: Content,
+  changed: Partial<Record<GlobalFontCategory, string>>,
+  applyFont: ApplyFontToRTE,
+): void => {
+  for (const [key, value] of Object.entries(record)) {
+    if (key.endsWith('Style') && isPlainObject(value)) {
+      // Detached style objects carry their own fontFamily override — align it.
+      // Preset-bound styles keep following the preset (never detach here).
+      const category = resolveFieldCategory(
+        styleKeyToFieldName(key),
+        value,
+        content,
+      );
+      const family = category ? changed[category] : undefined;
+
+      if (family && !value.textStyleType) {
+        (value as TextStyleDeclaration).fontFamily =
+          family as TextStyleDeclaration['fontFamily'];
+      }
+    } else if (key in FIELD_DEFAULT_CATEGORY && hasRTEContent(value)) {
+      // Inline RTE marks override every style layer at render — rewrite them.
+      const category = resolveFieldCategory(
+        key,
+        record[`${key}Style`],
+        content,
+      );
+      const family = category ? changed[category] : undefined;
+
+      if (family) {
+        record[key] = isTiptapDocument(value)
+          ? applyFontToTiptapDoc(value, family)
+          : applyFont(value as string, family);
+      }
+    } else if (Array.isArray(value)) {
+      for (const item of value) {
+        if (isPlainObject(item)) {
+          walkRecord(item, content, changed, applyFont);
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Walk every page's contents and propagate the changed families.
+ * `applyFont` is injectable for tests; the default rewrites inline marks via
+ * the external Tiptap editor.
+ */
+export const propagateFontFamiliesToContents = (
+  model: BrandPageModel,
+  changed: Partial<Record<GlobalFontCategory, string>>,
+  applyFont?: ApplyFontToRTE,
+): void => {
+  if (!Object.keys(changed).length) return;
+
+  let editor:
+    | ReturnType<typeof useExternalRichTextEditor>['externalEditor']
+    | undefined;
+  const apply: ApplyFontToRTE =
+    applyFont ??
+    ((text, fontFamily) => {
+      editor = editor ?? useExternalRichTextEditor().externalEditor;
+
+      return applyStyleToRTEText(editor, text, {
+        fontFamily,
+      } as TextStyleDeclaration);
+    });
+
+  try {
+    for (const page of model.pages) {
+      for (const content of page.contents) {
+        walkRecord(
+          content as unknown as Record<string, unknown>,
+          content,
+          changed,
+          apply,
+        );
+      }
+    }
+  } finally {
+    editor?.destroy();
+  }
+};