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

package/src/brand-page/utils/rte-role-lift.util.ts

@@ -0,0 +1,409 @@
+import type { BrandPageModel, TextStyleDeclaration } from '../models';
+import type { TextStyleOptions } from '../models/styles.model';
+import { RTE_SECTION_FIELD_PAIRS } from '@shared/color-strategies/rte-field-pairs';
+import { roleVarRef } from './text-role-css.util';
+
+/**
+ * Migration-22's job C, shared with the success message seed (`text-role-reconnect.util.ts`): lift an RTE field's block typography onto its
+ * runs once it links a role. A linked run follows the role class unless its mark holds a literal,
+ * and the render fill treats a neutral block value (weight `normal`) as "follow the role" — so
+ * without this a reconnected field can change look (a non-bold title under a bold heading).
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: this migration consumes the lift and font-vote behaviour. Before
+ * changing it after migration-22 releases, copy the v22 behaviour into that migration first.
+ */
+
+// The role-typography the RTE baked into each run's `textStyle` mark
+// (`getUpdatedHTMLFromEditor` sets exactly these four; colour is also a textStyle
+// attr but is deliberately NOT touched — it stays in the mark).
+const RTE_TYPOGRAPHY_ATTRS = [
+  'fontFamily',
+  'fontSize',
+  'letterSpacing',
+  'lineHeight',
+] as const;
+
+interface RteNode {
+  type?: string;
+  text?: string;
+  marks?: { type: string; attrs?: Record<string, unknown> }[];
+  content?: RteNode[];
+}
+
+const collectTextNodes = (node: RteNode | undefined, acc: RteNode[]): void => {
+  if (!node) return;
+
+  if (node.type === 'text') acc.push(node);
+
+  node.content?.forEach((child) => collectTextNodes(child, acc));
+};
+
+const textStyleMark = (node: RteNode) =>
+  node.marks?.find((mark) => mark.type === 'textStyle');
+
+/**
+ * R16 (migration-22 job A2): the distinct fonts a doc's non-empty runs show — a run's own literal
+ * `fontFamily` mark, else the block font (`blockFont`, from `drawnFontFamily`); a `var(--role-*)`
+ * ref counts as the block font too, since it carries no font of its own. A doc whose every run
+ * carries its own literal never adds `blockFont` to the set. Read-only, for the font count only.
+ */
+export const textRunFontFamilies = (
+  doc: unknown,
+  blockFont: string,
+): Set<string> => {
+  const fonts = new Set<string>();
+
+  if (!doc || typeof doc !== 'object' || (doc as RteNode).type !== 'doc')
+    return fonts;
+
+  const nodes: RteNode[] = [];
+
+  collectTextNodes(doc as RteNode, nodes);
+
+  for (const node of nodes) {
+    if (!node.text || node.text.trim() === '') continue;
+
+    const literal = textStyleMark(node)?.attrs?.fontFamily;
+    // `''` is FontFamily.ts's "no font of its own" (a colour-only mark parsed from HTML carries
+    // it) — not a literal to vote, so it falls through to the block font like an absent mark.
+    const hasLiteral =
+      typeof literal === 'string' &&
+      literal !== '' &&
+      !literal.startsWith('var(--role-');
+
+    fonts.add(hasLiteral ? literal : blockFont);
+  }
+
+  return fonts;
+};
+
+/**
+ * C (BP-5969 role-var model) — bake each RTE field's EFFECTIVE typography onto its run marks. The
+ * container role class now only DEFINES the vars and the element applies nothing, so the block's
+ * typography (previously applied on the element from `styleObj`) and the role must be carried by the
+ * runs themselves, or they'd fall to the body default. For each run and each attr the ROLE defines,
+ * the effective value = per-run mark override ?? block override (`styleObj`) ?? role, stored as:
+ *   • a role ref (`var(--role-<attr>)`) when the effective value EQUALS the role (so it follows role edits), or
+ *   • a literal when it's a genuine override (per-run, or a block-level override from `styleObj`).
+ * Already-referenced values and attrs the role doesn't define are left alone; colour is untouched.
+ * Mutates in place; a non-Tiptap value (legacy HTML string) is skipped. Load-time twin of the
+ * editor's per-run `roleVarOrLiteral` + fill.
+ */
+export const stripLiftRteDoc = (
+  doc: unknown,
+  roleStyle: Partial<Record<(typeof RTE_TYPOGRAPHY_ATTRS)[number], string>>,
+  styleObj?: Partial<Record<(typeof RTE_TYPOGRAPHY_ATTRS)[number], string>>,
+): void => {
+  if (!doc || typeof doc !== 'object' || (doc as RteNode).type !== 'doc')
+    return;
+
+  const nodes: RteNode[] = [];
+
+  collectTextNodes(doc as RteNode, nodes);
+
+  if (!nodes.length) return;
+
+  for (const node of nodes) {
+    let mark = textStyleMark(node);
+
+    for (const attr of RTE_TYPOGRAPHY_ATTRS) {
+      const roleValue = roleStyle?.[attr];
+
+      // The role doesn't define this attr → the run doesn't carry it (renders `normal`).
+      if (roleValue === undefined || roleValue === null) continue;
+
+      const ref = roleVarRef(attr);
+
+      if (!ref) continue;
+
+      // Ensure a textStyle mark exists to hold the value (a bare run needs one).
+      if (!mark) {
+        mark = { type: 'textStyle', attrs: {} };
+        (node.marks ??= []).push(mark);
+      }
+
+      if (!mark.attrs) mark.attrs = {};
+
+      const value = mark.attrs[attr];
+
+      // already a role ref → keep it
+      if (typeof value === 'string' && value.startsWith('var(--role-'))
+        continue;
+
+      // per-run override present → re-link if it equals the role, else keep the literal
+      if (value !== undefined && value !== null) {
+        if (value === roleValue) mark.attrs[attr] = ref;
+
+        continue;
+      }
+
+      // no per-run value → bake the block-level effective value: a block-level override
+      // (`styleObj` differs from the role) as a literal — it was applied on the element before and
+      // would be lost now — otherwise the role ref.
+      const blockValue = styleObj?.[attr];
+
+      mark.attrs[attr] =
+        blockValue !== undefined &&
+        blockValue !== null &&
+        blockValue !== roleValue
+          ? blockValue
+          : ref;
+    }
+  }
+
+  // drop textStyle marks left with no attributes (defensive; colour/refs usually remain)
+  for (const node of nodes) {
+    if (!node.marks) continue;
+
+    node.marks = node.marks.filter(
+      (mark) =>
+        !(
+          mark.type === 'textStyle' &&
+          (!mark.attrs || Object.keys(mark.attrs).length === 0)
+        ),
+    );
+  }
+};
+
+const SEMANTIC_MARK_TYPES = ['bold', 'italic', 'underline', 'strike'];
+
+/**
+ * C2 (BP-5969 Phase B) — fold the legacy per-run boolean marks (bold/italic/underline/strike) into the
+ * run's `textStyle` attrs (fontWeight/fontStyle/textDecoration), so the whole typography set lives on
+ * ONE mark and follows role edits like the rest. Each formatting mark becomes the matching attr — a
+ * role ref when it equals the role (so a role weight/decoration edit repaints the run), else a literal
+ * override — and the semantic mark is removed. Runs with no formatting mark are left to the render fill
+ * (they follow the role). This is what lets role weight/style/decoration edits reach LEGACY content and
+ * makes the doc self-describing without semantic marks (a prerequisite for retiring the Bold/Underline/
+ * Strike extensions). Mutates in place; a non-Tiptap value is skipped. Runs after `stripLiftRteDoc`
+ * (they touch disjoint attrs — family/size/spacing vs weight/style/decoration).
+ */
+export const foldSemanticFormattingMarks = (
+  doc: unknown,
+  roleStyle: Partial<
+    Record<'fontWeight' | 'fontStyle' | 'textDecoration', string>
+  >,
+): void => {
+  if (!doc || typeof doc !== 'object' || (doc as RteNode).type !== 'doc')
+    return;
+
+  const nodes: RteNode[] = [];
+
+  collectTextNodes(doc as RteNode, nodes);
+
+  if (!nodes.length) return;
+
+  const varOrLiteral = (
+    attr: 'fontWeight' | 'fontStyle' | 'textDecoration',
+    value: string,
+  ): string => {
+    const ref = roleVarRef(attr);
+
+    // equal to the role → the role ref (follows role edits); else the literal per-run override
+    return ref && roleStyle?.[attr] === value ? ref : value;
+  };
+
+  for (const node of nodes) {
+    const marks = node.marks;
+
+    if (!marks?.length) continue;
+
+    const has = (type: string) => marks.some((mark) => mark.type === type);
+    const bold = has('bold');
+    const italic = has('italic');
+    const underline = has('underline');
+    const strike = has('strike');
+
+    if (!bold && !italic && !underline && !strike) continue;
+
+    let mark = textStyleMark(node);
+
+    if (!mark) {
+      mark = { type: 'textStyle', attrs: {} };
+      marks.push(mark);
+    }
+
+    if (!mark.attrs) mark.attrs = {};
+
+    // A per-run boolean mark is an explicit override — write it unless a value is already present.
+    if (bold && mark.attrs.fontWeight == null) {
+      mark.attrs.fontWeight = varOrLiteral('fontWeight', 'bold');
+    }
+
+    if (italic && mark.attrs.fontStyle == null) {
+      mark.attrs.fontStyle = varOrLiteral('fontStyle', 'italic');
+    }
+
+    if ((underline || strike) && mark.attrs.textDecoration == null) {
+      const decoration = [
+        underline ? 'underline' : '',
+        strike ? 'line-through' : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+
+      mark.attrs.textDecoration = varOrLiteral('textDecoration', decoration);
+    }
+
+    node.marks = marks.filter(
+      (mark) => !SEMANTIC_MARK_TYPES.includes(mark.type),
+    );
+  }
+};
+
+/**
+ * C3 (BP-5969) — pin each RTE run's WEIGHT to the block's effective legacy weight, so migrated
+ * content that was NOT bold can't inherit a heading tier's `bold` default. `fontWeight` is the only
+ * role attr with a non-neutral default (headings are bold; style/decoration default to the neutral
+ * `normal`/`none`), so it is the only one that needs this — the render's var-fill treats a block-level
+ * `normal` as inert and would otherwise let the run follow the tier's bold.
+ *
+ * The old roles never set weight, so a legacy run's weight came from its per-run bold mark (already
+ * folded by `foldSemanticFormattingMarks`) or the block's own `fontWeight` — which job B resolved to
+ * `normal` when it was falsy. So for a run the fold left without a weight, bake that block weight as a
+ * LITERAL override whenever it differs from the tier (e.g. `normal` under a bold heading tier). When
+ * block and tier agree, no-op — the render's var-fill already follows the role. Runs after the fold so
+ * a folded bold mark (a genuine per-run weight) is never overwritten. Mutates in place.
+ */
+export const pinLegacyRunWeight = (
+  doc: unknown,
+  roleWeight: string | undefined,
+  blockWeight: string | undefined,
+): void => {
+  if (!doc || typeof doc !== 'object' || (doc as RteNode).type !== 'doc')
+    return;
+
+  // Only a genuine override needs a literal: an absent block weight is a non-legacy (canonical)
+  // block, and a block weight equal to the tier is already supplied by the role class — both follow
+  // the role via the render's var-fill.
+  if (
+    blockWeight === undefined ||
+    blockWeight === null ||
+    blockWeight === '' ||
+    blockWeight === roleWeight
+  ) {
+    return;
+  }
+
+  const nodes: RteNode[] = [];
+
+  collectTextNodes(doc as RteNode, nodes);
+
+  for (const node of nodes) {
+    let mark = textStyleMark(node);
+
+    // A per-run weight (a folded bold mark, or an author's per-run edit) is authoritative.
+    const existing = mark?.attrs?.fontWeight;
+
+    if (existing !== undefined && existing !== null && existing !== '')
+      continue;
+
+    if (!mark) {
+      mark = { type: 'textStyle', attrs: {} };
+      (node.marks ??= []).push(mark);
+    }
+
+    if (!mark.attrs) mark.attrs = {};
+
+    mark.attrs.fontWeight = blockWeight;
+  }
+};
+
+export const liftRteFieldOntoRole = (
+  doc: unknown,
+  styleObj: TextStyleDeclaration | undefined,
+  options: TextStyleOptions,
+): void => {
+  const type = styleObj?.textStyleType;
+
+  if (!type) return;
+
+  const roleStyle = options[type]?.style;
+
+  if (roleStyle) {
+    // Pass the block-level style so a block typography override (applied on the element before this
+    // change) is baked onto the runs, not lost now that the element applies nothing. Family/size/
+    // line-height/spacing are baked here; weight is handled by the fold + `pinLegacyRunWeight` below,
+    // style/decoration by the fold — they follow role edits via the cascade otherwise.
+    stripLiftRteDoc(
+      doc,
+      roleStyle,
+      styleObj as Partial<
+        Record<(typeof RTE_TYPOGRAPHY_ATTRS)[number], string>
+      >,
+    );
+    // Phase B: fold legacy bold/italic/underline/strike marks into the run's textStyle attrs, so
+    // weight/style/decoration follow role edits on legacy content too and no semantic marks remain.
+    foldSemanticFormattingMarks(
+      doc,
+      roleStyle as Partial<
+        Record<'fontWeight' | 'fontStyle' | 'textDecoration', string>
+      >,
+    );
+    // C3: pin a not-bold legacy block's weight so a bold heading tier can't bold its bare runs.
+    pinLegacyRunWeight(doc, roleStyle.fontWeight, styleObj?.fontWeight);
+  }
+};
+
+type RteFieldVisitor = (
+  doc: unknown,
+  styleObj: TextStyleDeclaration | undefined,
+  // The style object as it is now: a reconnect replaces it, so a later step reads it again.
+  readStyle: () => TextStyleDeclaration | undefined,
+) => void;
+
+/**
+ * Every RTE field with its style object: section field-pairs, text `textItems`, and the text
+ * section's single block `text`.
+ */
+export const forEachRteField = (
+  brandPageModel: BrandPageModel,
+  visit: RteFieldVisitor,
+): void => {
+  const visitAt = (
+    holder: Record<string, unknown>,
+    textKey: string,
+    styleKey: string,
+  ): void => {
+    const readStyle = () =>
+      holder[styleKey] as TextStyleDeclaration | undefined;
+
+    visit(holder[textKey], readStyle(), readStyle);
+  };
+
+  for (const page of brandPageModel.pages ?? []) {
+    for (const content of page.contents ?? []) {
+      const fields = content as unknown as Record<string, unknown>;
+      const pairs = RTE_SECTION_FIELD_PAIRS[content.type] ?? [];
+
+      for (const pair of pairs)
+        visitAt(fields, pair.textField, pair.styleField);
+
+      if (content.type === 'text') {
+        const items = fields.textItems as Record<string, unknown>[] | undefined;
+
+        if (Array.isArray(items)) {
+          for (const item of items) {
+            if (item && typeof item === 'object') {
+              visitAt(item, 'text', 'textStyle');
+            }
+          }
+        }
+
+        visitAt(fields, 'text', 'textStyle');
+      }
+    }
+  }
+};
+
+/**
+ * C — run the strip/lift over every RTE field. Runs after reconnect so each field's
+ * `textStyleType` is canonical and its role definition is the remapped one.
+ */
+export const stripLiftContentRte = (
+  brandPageModel: BrandPageModel,
+  options: TextStyleOptions,
+): void =>
+  forEachRteField(brandPageModel, (doc, styleObj) =>
+    liftRteFieldOntoRole(doc, styleObj, options),
+  );

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

@@ -3,7 +3,9 @@ import {
   applyLogoThemeToBrandPageStyleRecursive,
   applyLogoThemeToBrandPageStyles,
   buildPaletteRootCss,
+  buildPaletteRootCssText,
   buildPaletteScopedCss,
+  buildPaletteScopedCssText,
   PALETTE_SCOPED_ATTRIBUTE,
   PAGE_SCOPE_ID_ATTRIBUTE,
   colorMatchCssKeyValue,
@@ -92,7 +94,7 @@ describe('style.util', () => {
    * BP-5886: the bake is a logo INJECTION, so it maps the logo onto the 4 brand
    * roles. It is the only place a logo change can reach the palette on the admin
    * template cards, which re-bake an already-migrated model without re-migrating
-   * (`TemplatePreview.mixin`) — `migration23`'s fill-blank fallback cannot serve
+   * (`TemplatePreview.mixin`) — the removed migration-time fill-blank fallback cannot serve
    * them, because by then the roles are no longer blank.
    */
   describe('applyLogoThemeToBrandPageStyles maps the logo onto the brand roles', () => {
@@ -686,6 +688,14 @@ describe('style.util', () => {
       expect(style?.textContent).toContain('--palette-1: #00ff00;');
     });
 
+    test('the Page-facing CSS text has no wrapper markup', () => {
+      expect(buildPaletteRootCssText(COLORS)).toContain(':root {');
+      expect(buildPaletteRootCssText(COLORS)).not.toContain('<style');
+      expect(buildPaletteScopedCssText(COLORS, 'bp-page-scope-7')).toContain(
+        `[${PAGE_SCOPE_ID_ATTRIBUTE}="bp-page-scope-7"] {`,
+      );
+    });
+
     test('one emitter means exactly one block — a duplicate is countable', () => {
       // `Page` is the only emitter now, so >1 means `Page` mounted twice. Nothing
       // in the library can produce a second block on its own.
@@ -759,7 +769,7 @@ describe('style.util', () => {
   });
 
   // BP-5886 2026-08-07: a cleared template keeps BLANK roles until a real logo
-  // assigns them (migration-23 no longer fills them during migrate), so emission is
+  // assigns them (migration no longer fills them during migrate), so emission is
   // the only place left that can stop `var(--palette-0)` resolving to nothing.
   describe('blank brand roles fall back at emit, never in the model', () => {
     const blankRoles = [
@@ -790,6 +800,29 @@ describe('style.util', () => {
       );
     });
 
+    test('drops custom entries that could escape the style block', () => {
+      const css = paletteToCssVarDeclarations([
+        ...blankRoles,
+        {
+          id: 'palette-custom-unsafe',
+          value: 'red; }</style><script>alert(1)</script><style>{',
+          type: 'custom',
+        },
+      ]);
+
+      expect(css).not.toContain('unsafe');
+      expect(css).not.toContain('<script');
+    });
+
+    test('keeps a slash alpha colour', () => {
+      const css = paletteToCssVarDeclarations([
+        { id: 'palette-0', value: 'rgb(0 0 0 / 50%)', type: 'palette' },
+        ...blankRoles.slice(1),
+      ]);
+
+      expect(css).toContain('--palette-0: rgb(0 0 0 / 50%);');
+    });
+
     test('an assigned role is never replaced by its default', () => {
       const css = paletteToCssVarDeclarations([
         { id: 'palette-0', value: '#d1a151', type: 'palette' },

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

@@ -60,11 +60,17 @@ const paletteCssEntries = (
   const entries: [string, string][] = PALETTE_COLOR_ID_ORDER.flatMap((id) => {
     const value = roleValueOrDefault(id, byId.get(id));
 
-    return value ? [[`--${id}`, value] as [string, string]] : [];
+    return value && isSafePaletteEntry(id, value)
+      ? [[`--${id}`, value] as [string, string]]
+      : [];
   });
 
   byId.forEach((value, id) => {
-    if (!isPaletteRoleId(id) && !isBlankColorValue(value)) {
+    if (
+      !isPaletteRoleId(id) &&
+      !isBlankColorValue(value) &&
+      isSafePaletteEntry(id, value)
+    ) {
       entries.push([`--${id}`, value!]);
     }
   });
@@ -72,6 +78,13 @@ const paletteCssEntries = (
   return entries;
 };
 
+// `/` admits the slash alpha form (`rgb(0 0 0 / 50%)`). Without `*` or `<` it can't open a CSS
+// comment or close the style tag.
+const isSafePaletteEntry = (id: string, value: unknown): value is string =>
+  /^[a-zA-Z0-9_-]+$/.test(id) &&
+  typeof value === 'string' &&
+  /^[a-zA-Z0-9#(),.%\s/-]+$/.test(value);
+
 export const paletteToCssVarDeclarations = (
   colors: ColorItem[],
   options: { forceRoleDefaults?: boolean } = {},
@@ -87,15 +100,24 @@ export const paletteToCssVarDeclarations = (
  */
 export const PALETTE_ROOT_ATTRIBUTE = 'data-palette-root';
 
-/** Full `<style>:root{…}</style>` block for `Page`'s `v-html` (standalone surfaces). */
-export const buildPaletteRootCss = (colors: ColorItem[]): string => {
+/** CSS text for Page's stable native style element on standalone surfaces. */
+export const buildPaletteRootCssText = (colors: ColorItem[]): string => {
   const declarations = paletteToCssVarDeclarations(colors);
 
   return declarations
-    ? `<style ${PALETTE_ROOT_ATTRIBUTE}>
-  :root {
+    ? `:root {
     ${declarations}
-  }
+  }`
+    : '';
+};
+
+/** Full `<style>:root{…}</style>` fragment retained for callers outside Page. */
+export const buildPaletteRootCss = (colors: ColorItem[]): string => {
+  const css = buildPaletteRootCssText(colors);
+
+  return css
+    ? `<style ${PALETTE_ROOT_ATTRIBUTE}>
+  ${css}
 </style>`
     : '';
 };
@@ -116,7 +138,7 @@ export const PAGE_SCOPE_ID_ATTRIBUTE = 'data-page-scope';
  * card's block targets its own nodes instead, shadowing the canvas `:root` for its subtree.
  * Role defaults are forced so no role name falls through to the canvas (see `paletteCssEntries`).
  */
-export const buildPaletteScopedCss = (
+export const buildPaletteScopedCssText = (
   colors: ColorItem[],
   scopeId: string,
 ): string => {
@@ -125,10 +147,22 @@ export const buildPaletteScopedCss = (
   });
 
   return declarations && scopeId
-    ? `<style ${PALETTE_SCOPED_ATTRIBUTE}>
-  [${PAGE_SCOPE_ID_ATTRIBUTE}="${scopeId}"] {
+    ? `[${PAGE_SCOPE_ID_ATTRIBUTE}="${scopeId}"] {
     ${declarations}
-  }
+  }`
+    : '';
+};
+
+/** Full scoped `<style>` fragment retained for callers outside Page. */
+export const buildPaletteScopedCss = (
+  colors: ColorItem[],
+  scopeId: string,
+): string => {
+  const css = buildPaletteScopedCssText(colors, scopeId);
+
+  return css
+    ? `<style ${PALETTE_SCOPED_ATTRIBUTE}>
+  ${css}
 </style>`
     : '';
 };