@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/utils/rte-render.util.ts

@@ -1,179 +0,0 @@
-import { getSchema } from '@tiptap/core';
-import { DOMParser as ProseMirrorDOMParser } from '@tiptap/pm/model';
-import type { JSONContent } from '@tiptap/vue-3';
-import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string';
-import { getRteExtensions } from '../composables/rich-text-editor/getRteExtensions';
-import { isTiptapDocument, getRteJsonPlainText } from './rich-text-editor.util';
-
-export { isTiptapDocument, getRteJsonPlainText };
-
-/**
- * BP-5787 — the boundary plumbing for storing RTE as Tiptap JSON.
- *
- * An RTE field is either a legacy inline-HTML string (pre-migration, or a
- * not-yet-migrated published site) or a Tiptap JSON document (post-migration).
- * These helpers let every consumer treat the two uniformly:
- *
- *   - isTiptapDocument — the canonical discriminator (object with type 'doc').
- *   - renderRteToHtml  — render either form to final HTML for display.
- *   - toRteJson        — normalise either form to JSON for storage.
- *
- * The schema-driven core of both directions is Tiptap/ProseMirror, fed by the
- * single-source-of-truth extension set (getRteExtensions) — so the mapping lives
- * in the extensions' schema, not a hand-maintained copy that drifts:
- *
- *   - renderRteToHtml uses @tiptap/static-renderer (renderToHTMLString). It is
- *     DOM-less, so it runs on the server (SSR/publish/preview), not just the
- *     browser, and needs no Editor instance.
- *   - toRteJson turns an HTML string into a DOM node with an INJECTED parser and
- *     feeds it to ProseMirror's schema-driven DOMParser. The HTML→DOM step needs
- *     a DOM parser; rather than read the global `window.DOMParser` (as Tiptap's
- *     `generateJSON` does — unusable on a pure-node server and fragile across SSR
- *     execution contexts), the parser is supplied by the caller: the native
- *     `DOMParser` in the browser, a jsdom `DOMParser` *instance* on the server
- *     (see resolveHtmlParser). No global is ever mutated, so the conversion is
- *     fully isomorphic regardless of how the SSR host bundles/executes this code.
- */
-export type RichTextValue = string | JSONContent;
-
-// One extension set shared by both directions (render + parse). Schema knowledge
-// lives here, once — Tiptap/extension upgrades propagate to both automatically.
-const RTE_EXTENSIONS = getRteExtensions();
-
-// ProseMirror schema derived once from the shared extension set. This is the
-// schema-driven heart of HTML→JSON (no drift); only the HTML→DOM step is injected.
-const RTE_SCHEMA = getSchema(RTE_EXTENSIONS);
-
-/**
- * A `DOMParser`-compatible object: turns an HTML string into a Document whose
- * `body` is a DOM node ProseMirror can parse. The browser's native `DOMParser`
- * and jsdom's `DOMParser` both satisfy this, so the DOM dependency is injected
- * rather than read from a global.
- */
-export interface HtmlParser {
-  parseFromString(html: string, type: 'text/html'): Document;
-}
-
-/**
- * Render an RTE value to final HTML. Legacy HTML strings pass through untouched
- * (they are already HTML); Tiptap JSON is serialised by @tiptap/static-renderer
- * from the extension schema — no editor, no DOM — so it works on the server
- * (SSR/publish), not just the browser.
- */
-export const renderRteToHtml = (
-  value: RichTextValue | null | undefined,
-): string => {
-  if (value == null || value === '') return '';
-
-  if (typeof value === 'string') return value;
-
-  try {
-    return renderToHTMLString({ content: value, extensions: RTE_EXTENSIONS });
-  } catch (error) {
-    // renderToHTMLString throws on a node/mark type this renderer's schema
-    // doesn't know. The realistic trigger is version skew — the library ships to
-    // multiple apps, so a maker on a newer schema can persist a node an older
-    // deployed renderer can't render. Degrade to visible text rather than let
-    // one field throw out of its (unguarded) computed and 500 the whole page.
-    console.error(
-      'renderRteToHtml: unrenderable doc, falling back to plain text',
-      error,
-    );
-
-    return getRteJsonPlainText(value);
-  }
-};
-
-// Tiptap's elementFromString strips whitespace-only text nodes (pretty-print
-// indentation between tags) before parsing; replicate it so injected-parser
-// output stays identical to the previous generateJSON-based conversion.
-const stripIndentationTextNodes = (node: Node): Node => {
-  const children = node.childNodes;
-
-  for (let i = children.length - 1; i >= 0; i -= 1) {
-    const child = children[i];
-
-    if (
-      child.nodeType === 3 &&
-      child.nodeValue &&
-      /^(\n\s\s|\n)$/.test(child.nodeValue)
-    ) {
-      node.removeChild(child);
-    } else if (child.nodeType === 1) {
-      stripIndentationTextNodes(child);
-    }
-  }
-
-  return node;
-};
-
-const htmlToRteJson = (html: string, parser: HtmlParser): JSONContent => {
-  const body = parser.parseFromString(`<body>${html}</body>`, 'text/html').body;
-  const dom = stripIndentationTextNodes(body);
-
-  return ProseMirrorDOMParser.fromSchema(RTE_SCHEMA).parse(dom).toJSON();
-};
-
-let serverParserPromise: Promise<HtmlParser> | null = null;
-
-/**
- * Resolve an HtmlParser for the current runtime: the native `DOMParser` in the
- * browser (and jsdom-based test envs), or a jsdom `DOMParser` INSTANCE on a
- * pure-node server — created and returned directly, never assigned to a global,
- * so it is immune to SSR execution-context differences. The jsdom specifier is
- * assembled at runtime so no bundler follows it into a browser build. Memoised
- * on the server (JSDOM construction is relatively expensive).
- */
-export const resolveHtmlParser = async (): Promise<HtmlParser> => {
-  if (typeof DOMParser !== 'undefined') return new DOMParser();
-
-  if (!serverParserPromise) {
-    const jsdomModuleId = ['js', 'dom'].join('');
-
-    serverParserPromise = import(/* @vite-ignore */ jsdomModuleId)
-      .then((mod) => {
-        const { JSDOM } = mod as {
-          JSDOM: new (html?: string) => {
-            window: { DOMParser: new () => HtmlParser };
-          };
-        };
-        const { DOMParser: JsdomDOMParser } = new JSDOM('').window;
-
-        return new JsdomDOMParser();
-      })
-      .catch((error) => {
-        // Don't cache the failure — let a later call retry the import.
-        serverParserPromise = null;
-
-        throw error;
-      });
-  }
-
-  return serverParserPromise;
-};
-
-const getDefaultParser = (): HtmlParser => {
-  if (typeof DOMParser !== 'undefined') return new DOMParser();
-
-  throw new Error(
-    'toRteJson: no global DOMParser in this environment. On the server, pass an ' +
-      'explicit parser as the second argument (see resolveHtmlParser).',
-  );
-};
-
-/**
- * Normalise an RTE value to a Tiptap JSON document. HTML strings are parsed with
- * `parser` (defaults to the browser's native DOMParser); JSON documents pass
- * through unchanged. Returns undefined for empty/blank input so callers can omit
- * empty fields.
- */
-export const toRteJson = (
-  value: RichTextValue | null | undefined,
-  parser?: HtmlParser,
-): JSONContent | undefined => {
-  if (value == null || value === '') return undefined;
-
-  if (isTiptapDocument(value)) return value;
-
-  return htmlToRteJson(value, parser ?? getDefaultParser());
-};

package/src/brand-page-maker/utils/rte-shape.ts

@@ -1,29 +0,0 @@
-import type { JSONContent } from '@tiptap/vue-3';
-
-/**
- * Is this value RTE content, and in which shape?
- *
- * Pure predicates with NO runtime imports, kept out of `rich-text-editor.util.ts`
- * (which pulls `dompurify` and the render helpers) so a pure consumer — the Color
- * Matches panel, which must tell a plain string from legacy RTE HTML — doesn't drag
- * in the editor toolchain. That module re-exports both, so callers are unchanged.
- */
-
-/** Canonical discriminator for the JSON RTE model: an object with `type: 'doc'`. */
-export const isTiptapDocument = (value: unknown): value is JSONContent =>
-  typeof value === 'object' &&
-  value !== null &&
-  (value as JSONContent).type === 'doc';
-
-/**
- * A legacy inline-HTML RTE string: opens with a tag and closes with one. It does
- * NOT match plain strings (`Price < 10`), CSS values, or text with merely embedded
- * HTML, because genuine RTE always begins with a block tag. Legacy shape only —
- * post-migration use isTiptapDocument, or hasRTEContent for either shape.
- */
-export const isRteHtmlString = (value: unknown): value is string =>
-  typeof value === 'string' &&
-  value.length > 0 &&
-  /^<[A-Za-z][A-Za-z0-9-]*\b[^>]*>[\s\S]*<\/[A-Za-z][A-Za-z0-9-]*>$/.test(
-    value.trim(),
-  );

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

@@ -1,401 +0,0 @@
-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)`);
-  });
-});