@designcrowd/library.brand-page 6.0.26-json-prereq-2 → 6.0.27-websitev2-dev-1

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

@@ -1,72 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { migration20 } from './migration-20';
-import type { MigrationData } from '../migration.util';
-import { isTiptapDocument, getRteJsonPlainText } from '@brand-page-maker/utils';
-
-const createMigrationData = (brandPageData: any): MigrationData =>
-  ({ brandPageModel: brandPageData }) as MigrationData;
-
-const model = (contents: any[]) => ({
-  pages: [{ id: 'p1', title: 'Home', slug: 'home', contents }],
-});
-
-describe('migration20 — HTML RTE → Tiptap JSON', () => {
-  test('converts a top-level HTML RTE field to a JSON document', async () => {
-    const data = model([
-      {
-        id: '1',
-        type: 'banner-section',
-        title:
-          '<p><span style="color: var(--logo-text-color)">Hello</span></p>',
-      },
-    ]);
-
-    const result = await migration20(createMigrationData(data));
-    const title = (result.brandPageModel.pages[0].contents[0] as any).title;
-
-    expect(isTiptapDocument(title)).toBe(true);
-    expect(getRteJsonPlainText(title)).toContain('Hello');
-    // theme token ref preserved through migration
-    expect(JSON.stringify(title)).toContain('var(--logo-text-color)');
-  });
-
-  test('converts RTE inside item arrays (text items / testimonials)', async () => {
-    const data = model([
-      {
-        id: '2',
-        type: 'text',
-        textItems: [{ id: 'ti1', text: '<p><strong>bold</strong> item</p>' }],
-      },
-    ]);
-
-    const result = await migration20(createMigrationData(data));
-    const item = (result.brandPageModel.pages[0].contents[0] as any)
-      .textItems[0];
-
-    expect(isTiptapDocument(item.text)).toBe(true);
-    expect(getRteJsonPlainText(item.text)).toContain('bold');
-  });
-
-  test('leaves plain strings and already-JSON content untouched (idempotent)', async () => {
-    const jsonDoc = {
-      type: 'doc',
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'X' }] }],
-    };
-    const data = model([
-      {
-        id: '3',
-        type: 'banner-section',
-        title: jsonDoc, // already JSON
-        url: 'https://example.com', // plain string, not RTE
-        titleStyle: { color: '#fff', fontSize: '1em' }, // style object, untouched
-      },
-    ]);
-
-    const result = await migration20(createMigrationData(data));
-    const c = result.brandPageModel.pages[0].contents[0] as any;
-
-    expect(c.title).toEqual(jsonDoc);
-    expect(c.url).toBe('https://example.com');
-    expect(c.titleStyle).toEqual({ color: '#fff', fontSize: '1em' });
-  });
-});

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

@@ -1,87 +0,0 @@
-import type { BrandPageModel } from '../../models';
-import type { MigrationData } from '../migration.util';
-import {
-  hasRTEContent,
-  toRteJson,
-  resolveHtmlParser,
-  type HtmlParser,
-} from '../../../brand-page-maker/utils';
-
-/**
- * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
- *
- * The editor emits, and the renderer reads, Tiptap JSON. Existing
- * published/saved sites still hold RTE fields as HTML strings. This converts
- * them on load, in EVERY environment:
- *   - maker (browser): the loaded model is JSON, so the next save persists JSON.
- *   - web-renderer (SSR / server API routes): converted on read, so old sites
- *     are normalised without a re-save and downstream code can treat RTE as JSON.
- *
- * This is a one-time, versioned migration (runAlways is NOT set): legacy sites
- * are at model version < 20 and convert on first load in any environment; once
- * `v` is stamped to 20 the conversion is skipped. This is only safe because the
- * AI section builders now emit Tiptap JSON directly (they no longer write HTML),
- * so there is no recurring post-load source of HTML to normalise.
- *
- * HTML→JSON parsing needs a DOM parser. Rather than mutate a global `window`,
- * the parser is resolved once (native `DOMParser` in the browser, a jsdom
- * `DOMParser` instance on the server) and threaded explicitly through the
- * conversion — see resolveHtmlParser / toRteJson. No global state is touched, so
- * the pass is safe on any server runtime and under concurrent requests.
- *
- * Scope: only HTML-RTE strings (hasRTEContent) are converted. Plain strings,
- * numbers, and already-JSON docs are left untouched, so the migration is
- * idempotent (re-running on JSON content is a no-op — non-string values are
- * skipped). Nested RTE inside item arrays (textItems, testimonials, images…)
- * is handled by recursing into arrays; style objects are intentionally not
- * descended into (they never hold RTE content).
- */
-const convertRteStringsToJson = (value: unknown, parser: HtmlParser): void => {
-  if (Array.isArray(value)) {
-    value.forEach((item) => convertRteStringsToJson(item, parser));
-
-    return;
-  }
-
-  if (!value || typeof value !== 'object') return;
-
-  const record = value as Record<string, unknown>;
-
-  Object.keys(record).forEach((key) => {
-    const field = record[key];
-
-    if (typeof field === 'string' && hasRTEContent(field)) {
-      const json = toRteJson(field, parser);
-
-      if (json) record[key] = json;
-    } else if (Array.isArray(field)) {
-      convertRteStringsToJson(field, parser);
-    }
-  });
-};
-
-const convertModel = (
-  brandPageModel: BrandPageModel,
-  parser: HtmlParser,
-): void => {
-  for (const page of brandPageModel.pages) {
-    for (const content of page.contents) {
-      convertRteStringsToJson(content, parser);
-    }
-  }
-};
-
-export const migration20 = async (
-  migrationResult: MigrationData,
-): Promise<MigrationData> => {
-  const { brandPageModel } = migrationResult;
-
-  // Resolve a DOM parser for this environment (native in the browser, a jsdom
-  // instance on the server — never touching globals), then convert every
-  // HTML-RTE field to Tiptap JSON with it.
-  const parser = await resolveHtmlParser();
-
-  convertModel(brandPageModel, parser);
-
-  return migrationResult;
-};

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

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { escapeContentText, getRenderText } from './text.util';
-
-/**
- * BP-5787 — escapeContentText / getRenderText must accept either a legacy
- * inline-HTML string or a Tiptap JSON document without throwing. Section
- * components call these on RTE fields (e.g. banner description), which are now
- * JSON; the previous string-only versions threw `.replace is not a function`
- * and broke the field's reactivity (strike/format edits stopped rendering).
- */
-const doc = {
-  type: 'doc',
-  content: [
-    {
-      type: 'paragraph',
-      content: [
-        { type: 'text', text: 'WARNING', marks: [{ type: 'strike' }] },
-        { type: 'text', text: ': take flight' },
-      ],
-    },
-  ],
-};
-
-describe('escapeContentText (BP-5787 dual-read)', () => {
-  it('extracts plain text from a Tiptap JSON document', () => {
-    expect(escapeContentText(doc)).toBe('WARNING : take flight');
-  });
-
-  it('still strips tags from a legacy HTML string', () => {
-    expect(escapeContentText('<p><s>WARNING</s></p>')).toBe('WARNING');
-  });
-
-  it('returns falsy input unchanged', () => {
-    expect(escapeContentText('')).toBe('');
-    expect(escapeContentText(undefined)).toBeUndefined();
-  });
-});
-
-describe('getRenderText (BP-5787 JSON-safe)', () => {
-  it('passes a Tiptap JSON document through untouched (no throw)', () => {
-    expect(getRenderText(doc as unknown as string)).toBe(doc);
-  });
-
-  it('still converts newlines to <br/> for plain strings', () => {
-    expect(getRenderText('a\nb')).toBe('a<br/>b');
-  });
-});

package/src/brand-page/utils/view-model.pageid-rte.test.ts

@@ -1,104 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { resolvePageIdsInRteJson } from './view-model.util';
-import type { NavViewModel } from '../view-models';
-
-/**
- * BP-5847 — internal RTE hyperlinks are stored as `href="pageid:<id>"`. On the
- * published site these must resolve to the page's relative path. The string
- * (legacy HTML) path already did this; once RTE moved to Tiptap JSON the link
- * marks were skipped, so links rendered as raw `pageid:` and didn't navigate.
- */
-describe('resolvePageIdsInRteJson (BP-5847)', () => {
-  const nav: NavViewModel = {
-    navItems: [
-      {
-        pageId: 'home-id',
-        slug: 'home',
-        displayName: 'Home',
-        routeName: 'home',
-        routeParams: { slug: 'mysite' },
-        isRoot: true,
-        isHidden: false,
-        relativePath: '',
-        nestedNavItems: [],
-      },
-      {
-        pageId: 'about-id',
-        slug: 'about',
-        displayName: 'About',
-        routeName: 'about',
-        routeParams: { slug: 'mysite' },
-        isRoot: false,
-        isHidden: false,
-        relativePath: 'about',
-        nestedNavItems: [],
-      },
-    ],
-  };
-
-  const options = { brandPageSlug: 'mysite' } as any;
-
-  const docWithLink = (href: string) => ({
-    type: 'doc',
-    content: [
-      {
-        type: 'paragraph',
-        content: [
-          {
-            type: 'text',
-            text: 'link',
-            marks: [{ type: 'link', attrs: { href, target: '_blank' } }],
-          },
-        ],
-      },
-    ],
-  });
-
-  const linkHref = (doc: any) => doc.content[0].content[0].marks[0].attrs.href;
-
-  it('resolves a pageid link to a sub-page relative path', () => {
-    const out = resolvePageIdsInRteJson(
-      docWithLink('pageid:about-id'),
-      nav,
-      options,
-    );
-
-    expect(linkHref(out)).toBe('/mysite/about');
-  });
-
-  it('resolves a root pageid link to the site root', () => {
-    const out = resolvePageIdsInRteJson(
-      docWithLink('pageid:home-id'),
-      nav,
-      options,
-    );
-
-    expect(linkHref(out)).toBe('/mysite');
-  });
-
-  it('falls back to root when the pageid cannot be matched', () => {
-    const out = resolvePageIdsInRteJson(
-      docWithLink('pageid:missing-id'),
-      nav,
-      options,
-    );
-
-    expect(linkHref(out)).toBe('/mysite');
-  });
-
-  it('leaves external links untouched and returns the same reference', () => {
-    const doc = docWithLink('https://example.com');
-    const out = resolvePageIdsInRteJson(doc, nav, options);
-
-    expect(linkHref(out)).toBe('https://example.com');
-    expect(out).toBe(doc);
-  });
-
-  it('does not mutate the source doc (returns a new object) when resolving', () => {
-    const doc = docWithLink('pageid:about-id');
-    const out = resolvePageIdsInRteJson(doc, nav, options);
-
-    expect(out).not.toBe(doc);
-    expect(linkHref(doc)).toBe('pageid:about-id');
-  });
-});

package/src/brand-page-maker/__fixtures__/complex-rte.fixture.ts

@@ -1,23 +0,0 @@
-/**
- * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
- *
- * A single rich-text value that exercises every mark/node the editor can emit,
- * so one snapshot guards the whole serialisation surface. Captured as a baseline
- * on the current HTML pipeline; after the migration the JSON pipeline must
- * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
- *
- * Coverage:
- *  - block nodes: heading (h2), paragraph, text-align (center / right)
- *  - inline marks: bold, italic, underline, strike
- *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
- *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
- *  - highlight (background colour via <mark>)
- *  - links: internal (target=_self) and external (target=_blank rel=noopener)
- */
-export const COMPLEX_RTE_HTML = `<h2 style="text-align: center"><span style="color: var(--logo-text-color)">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style="font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4">styled span</span> <mark data-color="#ffe08a" style="background-color: #ffe08a">highlight</mark> <span style="color: #FF0000">literal hex</span> <a target="_self" href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>`;
-
-/**
- * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
- * (BP-5787 stores token refs instead of flattening them to rgb()).
- */
-export const THEME_TOKEN_REF = 'var(--logo-text-color)';

package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.test.ts

@@ -1,52 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from '../getRteExtensions';
-import { sanitizeRteJson } from '@brand-page-maker/utils/rte-sanitize.util';
-
-/**
- * BP-5787 — multi-word font families ("Open Sans") are quoted in CSS, so
- * re-parsing HTML (pasting RTE-styled text between editors) previously yielded
- * a value WITH quote chars, which the native sanitiser then dropped — losing
- * the font. The custom FontFamily extension strips the quotes on parse.
- */
-describe('FontFamily — quote-stripping parse (BP-5787)', () => {
-  let editors: Editor[] = [];
-  const mk = () => {
-    const e = new Editor({
-      extensions: getRteExtensions({ restrictStarterKit: true }),
-    });
-
-    editors.push(e);
-
-    return e;
-  };
-
-  afterEach(() => {
-    editors.forEach((e) => e.destroy());
-    editors = [];
-  });
-
-  const fontFamilyOf = (json: any) =>
-    json.content?.[0]?.content?.[0]?.marks?.find(
-      (m: any) => m.type === 'textStyle',
-    )?.attrs?.fontFamily;
-
-  for (const font of ['Montserrat', 'Open Sans', 'Playwrite AU']) {
-    it(`"${font}" survives an HTML re-parse + sanitise unquoted`, () => {
-      const src = mk();
-
-      src.commands.setContent('<p>Hello world</p>');
-      src.commands.selectAll();
-      src.commands.setFontFamily(font);
-
-      // Re-parse the serialised HTML — mirrors an RTE→RTE paste.
-      const tgt = mk();
-
-      tgt.commands.setContent(src.getHTML());
-
-      expect(fontFamilyOf(tgt.getJSON())).toBe(font);
-      // and the sanitiser must keep it (isSafeCssValue rejects quote chars).
-      expect(fontFamilyOf(sanitizeRteJson(tgt.getJSON()))).toBe(font);
-    });
-  }
-});

package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.ts

@@ -1,42 +0,0 @@
-import TiptapFontFamily from '@tiptap/extension-font-family';
-
-/**
- * BP-5787 — font-family with quote-stripping parse.
- *
- * The stock extension stores whatever `element.style.fontFamily` returns. For
- * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
- * value, so parsing HTML — pasting RTE-styled text between editors, or the
- * HTML→JSON migration — yields a value that still contains the quote chars
- * (`"Open Sans"`). That value then (a) no longer matches the font list and,
- * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
- * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
- * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
- * quotes on parse so the stored value is always the bare family name.
- */
-export const FontFamily = TiptapFontFamily.extend({
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          fontFamily: {
-            default: null,
-            // Strip quotes only — keep '' for an absent value so the stored
-            // JSON shape matches the other textStyle attrs (FontSize etc.).
-            parseHTML: (element) =>
-              element.style.fontFamily?.replace(/['"]+/g, ''),
-            renderHTML: (attributes) => {
-              if (!attributes.fontFamily) {
-                return {};
-              }
-
-              return {
-                style: `font-family: ${attributes.fontFamily}`,
-              };
-            },
-          },
-        },
-      },
-    ];
-  },
-});

package/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.ts

@@ -1,137 +0,0 @@
-import type { Extensions } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import { TextStyle, FontSize, LineHeight } from '@tiptap/extension-text-style';
-import TextAlign from '@tiptap/extension-text-align';
-import ColorExtension from '@tiptap/extension-color';
-import Highlight from '@tiptap/extension-highlight';
-import Placeholder from '@tiptap/extension-placeholder';
-import Link from '@tiptap/extension-link';
-import { FontFamily } from './extensions/FontFamily';
-import { LetterSpacing } from './extensions/LetterSpacing';
-import { MaxLength } from './extensions/MaxLength';
-import { AutoLink } from './extensions/AutoLink';
-import { isHrefPageId } from './hyperlink';
-
-/**
- * Single source of truth for the Tiptap extension set (BP-5787).
- *
- * The live editor, the headless serialiser (useExternalRichTextEditor), and
- * the upcoming render-from-JSON path must all use the SAME extensions, or
- * rendered output drifts from what the user authored. This factory removes the
- * previous duplication while preserving each consumer's exact configuration.
- *
- * Known, intentional differences are parameterised:
- *  - `restrictStarterKit` — the live editor disables list/hr/code nodes.
- *  - `includeLinkRel` — the headless/render path emits rel="noopener noreferrer";
- *    the live editing surface does not.
- *  - `editing` — only the live editor carries the Placeholder + MaxLength plugins
- *    (neither affects serialised output; they are editing-time only).
- */
-export interface RteExtensionOptions {
-  /** Disable StarterKit nodes the editor doesn't use (lists, hr, code). */
-  restrictStarterKit?: boolean;
-  /** Emit rel="noopener noreferrer" on link HTMLAttributes (render path). */
-  includeLinkRel?: boolean;
-  /** When present, add the live-editing-only plugins (Placeholder, MaxLength). */
-  editing?: {
-    placeholder?: string;
-    maxLength?: number;
-  };
-}
-
-export const getRteExtensions = (
-  options: RteExtensionOptions = {},
-): Extensions => {
-  const {
-    restrictStarterKit = false,
-    includeLinkRel = false,
-    editing,
-  } = options;
-
-  const extensions: Extensions = [
-    // v3 StarterKit bundles Link + Underline; we register both separately (with
-    // custom Link config), so disable the bundled copies to avoid duplicate
-    // extension errors.
-    // trailingNode: false — v3 StarterKit adds a TrailingNode plugin (not in v2)
-    // that appends an empty paragraph after any non-paragraph trailing block.
-    // Disabled to keep editor/stored-content behaviour identical to v2 (BP-5787
-    // is backward-compat-first); revisit as a standalone UX change if wanted.
-    restrictStarterKit
-      ? StarterKit.configure({
-          link: false,
-          underline: false,
-          trailingNode: false,
-          bulletList: false,
-          orderedList: false,
-          listItem: false,
-          horizontalRule: false,
-          codeBlock: false,
-          code: false,
-        })
-      : StarterKit.configure({
-          link: false,
-          underline: false,
-          trailingNode: false,
-        }),
-    Underline,
-    // priority: 99 — render the textStyle <span> (which carries font-size) as the
-    // OUTERMOST inline mark, so decoration marks (<u>/<s>) nest INSIDE it and
-    // inherit the applied font-size. v3's extension-text-style defaults to
-    // priority 101, which flips this: <u>/<s> end up outside the font-size span
-    // and inherit only the base paragraph size. Since text-decoration thickness
-    // AND vertical position are computed from the decorating element's own font,
-    // that produced thin, mis-centred underline/strike on large text — a
-    // regression vs v2's serializer, which emitted the font-size span outermost
-    // (BP-5787, backward-compat-first).
-    TextStyle.extend({ priority: 99 }).configure({
-      mergeNestedSpanStyles: true,
-    }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
-    FontFamily.configure({
-      types: ['textStyle'],
-    }),
-    // FontSize + LineHeight are now shipped natively by @tiptap/extension-text-style.
-    FontSize.configure({ types: ['textStyle'] }),
-    LetterSpacing,
-    LineHeight.configure({ types: ['textStyle'] }),
-    ColorExtension.configure({
-      types: ['textStyle'],
-    }),
-    Highlight.configure({
-      multicolor: true,
-    }),
-  ];
-
-  // Live-editing-only plugins sit between Highlight and Link (original order).
-  if (editing) {
-    extensions.push(
-      Placeholder.configure({ placeholder: editing.placeholder }),
-      MaxLength.configure({ maxLength: editing.maxLength }),
-    );
-  }
-
-  extensions.push(
-    Link.configure({
-      openOnClick: false,
-      defaultProtocol: 'https',
-      autolink: true,
-      HTMLAttributes: (attrs) => {
-        const href = attrs.href;
-        const isExternal =
-          href && (href.startsWith('http://') || href.startsWith('https://'));
-
-        return {
-          ...(includeLinkRel && { rel: 'noopener noreferrer' }),
-          target: isExternal ? '_blank' : null,
-        };
-      },
-      isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
-    }),
-    AutoLink,
-  );
-
-  return extensions;
-};