@designcrowd/library.brand-page 6.0.6-json-prereq-7 → 6.0.6-undo-2

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,113 +0,0 @@
-import type { Extensions } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import TextStyle 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 { FontSize } from './extensions/FontSize';
-import { LetterSpacing } from './extensions/LetterSpacing';
-import { LineHeight } from './extensions/LineHeight';
-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 = [
-    restrictStarterKit
-      ? StarterKit.configure({
-          bulletList: false,
-          orderedList: false,
-          listItem: false,
-          horizontalRule: false,
-          codeBlock: false,
-          code: false,
-        })
-      : StarterKit,
-    Underline,
-    TextStyle.configure({ mergeNestedSpanStyles: true }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
-    FontFamily.configure({
-      types: ['textStyle'],
-    }),
-    FontSize,
-    LetterSpacing,
-    LineHeight,
-    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;
-};

package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap

@@ -1,200 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`BP-5787 RTE render parity (golden master) > T1 — editor renders the complex fixture to the frozen HTML baseline > editor-normalized-html 1`] = `"<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: rgb(255, 224, 138); color: inherit;">highlight</mark> <span style="color: rgb(255, 0, 0);">literal hex</span> <a href="/about" target="_self">internal link</a> <a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">external link</a></p><p style="text-align: right;">second paragraph, right-aligned</p>"`;
-
-exports[`BP-5787 RTE render parity (golden master) > T1 — render-from-JSON (DOM-less serialiser) produces equivalent HTML > serializer-html 1`] = `"<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; color: inherit;">highlight</mark> <span style="color: rgb(255, 0, 0)">literal hex</span> <a href="/about" target="_self">internal link</a> <a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>"`;
-
-exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the JSON shape that becomes the stored form > editor-json 1`] = `
-{
-  "content": [
-    {
-      "attrs": {
-        "level": 2,
-        "textAlign": "center",
-      },
-      "content": [
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "var(--logo-text-color)",
-                "fontFamily": "",
-                "fontSize": "",
-                "letterSpacing": "",
-                "lineHeight": "",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "Themed heading",
-          "type": "text",
-        },
-      ],
-      "type": "heading",
-    },
-    {
-      "attrs": {
-        "textAlign": null,
-      },
-      "content": [
-        {
-          "marks": [
-            {
-              "type": "bold",
-            },
-          ],
-          "text": "bold",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "italic",
-            },
-          ],
-          "text": "italic",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "underline",
-            },
-          ],
-          "text": "underline",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "strike",
-            },
-          ],
-          "text": "strike",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "",
-                "fontFamily": "Montserrat",
-                "fontSize": "1.5em",
-                "letterSpacing": "0.05em",
-                "lineHeight": "1.4",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "styled span",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "#ffe08a",
-              },
-              "type": "highlight",
-            },
-          ],
-          "text": "highlight",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "rgb(255, 0, 0)",
-                "fontFamily": "",
-                "fontSize": "",
-                "letterSpacing": "",
-                "lineHeight": "",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "literal hex",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": undefined,
-                "href": "/about",
-                "rel": undefined,
-                "target": "_self",
-              },
-              "type": "link",
-            },
-          ],
-          "text": "internal link",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": undefined,
-                "href": "https://example.com",
-                "rel": "noopener noreferrer nofollow",
-                "target": "_blank",
-              },
-              "type": "link",
-            },
-          ],
-          "text": "external link",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-    {
-      "attrs": {
-        "textAlign": "right",
-      },
-      "content": [
-        {
-          "text": "second paragraph, right-aligned",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-  ],
-  "type": "doc",
-}
-`;

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

@@ -1,156 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import type { Editor } from '@tiptap/vue-3';
-import { useExternalRichTextEditor } from '../composables/rich-text-editor/useRichTextEditor';
-import {
-  renderRteToHtml,
-  toRteJson,
-  getRteJsonPlainText,
-} from './rte-render.util';
-import {
-  COMPLEX_RTE_HTML,
-  THEME_TOKEN_REF,
-} from '../__fixtures__/complex-rte.fixture';
-
-/**
- * BP-5787 — golden-master render-parity baseline.
- *
- * Captured on the CURRENT (HTML) pipeline. These committed snapshots are the
- * frozen reference for the HTML→JSON migration:
- *
- *   - `editor-normalized-html` is what the editor renders the fixture to today.
- *     After the migration, `htmlFromJson(getJSON())` MUST equal this snapshot —
- *     i.e. the JSON pipeline reproduces identical rendered output (no drift).
- *
- *   - `editor-json` freezes the JSON shape that BECOMES the stored form. It is
- *     expected to change exactly once, intentionally, when storage flips to JSON
- *     (see "expected vs forbidden drift" in docs/plans/BP-5787-...html).
- *
- * The headless editor uses the SAME extension set as the live editor
- * (useExternalRichTextEditor), so it is a faithful stand-in for the renderer.
- */
-describe('BP-5787 RTE render parity (golden master)', () => {
-  let editor: Editor;
-
-  const makeEditor = (): Editor => {
-    editor = useExternalRichTextEditor().externalEditor;
-
-    return editor;
-  };
-
-  afterEach(() => {
-    editor?.destroy();
-  });
-
-  it('T1 — editor renders the complex fixture to the frozen HTML baseline', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    // The golden master. The JSON pipeline must reproduce this exactly.
-    expect(ed.getHTML()).toMatchSnapshot('editor-normalized-html');
-  });
-
-  it('T1 — round-trip is idempotent (html → json → html === json → html)', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-    const pass1 = ed.getHTML();
-    const json = ed.getJSON();
-
-    // Re-seed from the JSON the migration will store, render again.
-    ed.commands.setContent(json);
-    const pass2 = ed.getHTML();
-
-    expect(pass2).toEqual(pass1);
-  });
-
-  it('T6 — freezes the JSON shape that becomes the stored form', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    expect(ed.getJSON()).toMatchSnapshot('editor-json');
-  });
-
-  it('T2 — theme token ref survives the round-trip (NOT flattened to rgb)', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    // Today the editor preserves var(--…) in marks; the migration must keep it.
-    expect(ed.getHTML()).toContain(THEME_TOKEN_REF);
-    expect(JSON.stringify(ed.getJSON())).toContain(THEME_TOKEN_REF);
-  });
-
-  it('T1 — render-from-JSON (DOM-less serialiser) produces equivalent HTML', () => {
-    // renderRteToHtml now serialises JSON → HTML with a pure function (no
-    // editor/DOM, so it works on the server). Output is semantically identical
-    // to the editor's — the Playwright visual golden-master is the authority on
-    // pixel parity; here we freeze the serialiser output and assert structure.
-    const viaJson = renderRteToHtml(toRteJson(COMPLEX_RTE_HTML));
-
-    expect(viaJson).toMatchSnapshot('serializer-html');
-
-    // marks/nodes preserved
-    expect(viaJson).toContain('<strong>bold</strong>');
-    expect(viaJson).toContain('<em>italic</em>');
-    expect(viaJson).toContain('<u>underline</u>');
-    expect(viaJson).toContain('<s>strike</s>');
-    expect(viaJson).toContain('font-family: Montserrat');
-    expect(viaJson).toContain('font-size: 1.5em');
-    // theme token ref preserved (the crux of BP-5787)
-    expect(viaJson).toContain('color: var(--logo-text-color)');
-    // links + alignment
-    expect(viaJson).toContain('href="/about"');
-    expect(viaJson).toContain('href="https://example.com"');
-    expect(viaJson).toContain('text-align: center');
-    expect(viaJson).toContain('text-align: right');
-  });
-
-  it('T4 — legacy HTML strings render unchanged (back-compat passthrough)', () => {
-    expect(renderRteToHtml(COMPLEX_RTE_HTML)).toEqual(COMPLEX_RTE_HTML);
-  });
-
-  it('T8 — getRteJsonPlainText extracts visible text only (for fraud/translate)', () => {
-    const json = toRteJson(COMPLEX_RTE_HTML)!;
-    const text = getRteJsonPlainText(json);
-
-    expect(text).toContain('Themed heading');
-    expect(text).toContain('bold');
-    expect(text).toContain('external link');
-    // no markup or token refs leak into the extracted text
-    expect(text).not.toContain('<');
-    expect(text).not.toContain('var(--');
-    expect(text).not.toContain('font-size');
-  });
-
-  it('T1 — preserves every mark/node in the fixture', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-    const html = ed.getHTML();
-
-    // bold / italic / underline / strike
-    expect(html).toContain('<strong>');
-    expect(html).toContain('<em>');
-    expect(html).toContain('<u>');
-    expect(html).toContain('<s>');
-    // textStyle attrs
-    expect(html).toContain('font-family: Montserrat');
-    expect(html).toContain('font-size: 1.5em');
-    expect(html).toContain('letter-spacing: 0.05em');
-    expect(html).toContain('line-height: 1.4');
-    // highlight: data-color keeps the hex; the rendered style is normalised to rgb()
-    expect(html).toContain('data-color="#ffe08a"');
-    expect(html).toContain('background-color: rgb(255, 224, 138)');
-    // literal hex colour is normalised to rgb() by the editor...
-    expect(html).toContain('color: rgb(255, 0, 0)');
-    // ...but the THEME TOKEN ref is preserved verbatim (the crux of BP-5787)
-    expect(html).toContain('color: var(--logo-text-color)');
-    expect(html).toContain('text-align: center');
-    expect(html).toContain('text-align: right');
-    // links
-    expect(html).toContain('href="/about"');
-    expect(html).toContain('href="https://example.com"');
-  });
-});

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

@@ -1,77 +0,0 @@
-import { Editor, type JSONContent } from '@tiptap/vue-3';
-import { getRteExtensions } from '../composables/rich-text-editor/getRteExtensions';
-import { isTiptapDocument, getRteJsonPlainText } from './rich-text-editor.util';
-import { serializeRteJsonToHtml } from './rte-serializer';
-
-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.
- *
- *   - renderRteToHtml uses a DOM-less serialiser (works on the server).
- *   - toRteJson uses a headless editor to PARSE HTML → JSON, so it only runs
- *     where a DOM exists (browser, or jsdom in tests); the server never parses
- *     HTML (migration-18 is DOM-guarded, translation/fraud walk JSON directly).
- */
-export type RichTextValue = string | JSONContent;
-
-/**
- * Run a function with a short-lived headless editor (created then destroyed).
- * Used only by toRteJson (HTML → JSON parsing), which needs a real DOM. Not
- * used by the render path, which is DOM-less.
- */
-const withHeadlessEditor = <T>(fn: (editor: Editor) => T): T => {
-  const editor = new Editor({
-    editable: false,
-    extensions: getRteExtensions({ includeLinkRel: true }),
-  });
-
-  try {
-    return fn(editor);
-  } finally {
-    editor.destroy();
-  }
-};
-
-/**
- * Render an RTE value to final HTML. Legacy HTML strings pass through untouched
- * (they are already HTML); Tiptap JSON is serialised by a DOM-less pure
- * function (rte-serializer) — no editor, no DOM — so it works on the server
- * (SSR/publish), not just the browser, and is cheap enough to run per render.
- */
-export const renderRteToHtml = (
-  value: RichTextValue | null | undefined,
-): string => {
-  if (value == null || value === '') return '';
-
-  if (typeof value === 'string') return value;
-
-  return serializeRteJsonToHtml(value);
-};
-
-/**
- * Normalise an RTE value to a Tiptap JSON document. HTML strings are parsed
- * via the headless editor; documents pass through unchanged. Returns
- * undefined for empty/blank input so callers can omit empty fields.
- */
-export const toRteJson = (
-  value: RichTextValue | null | undefined,
-): JSONContent | undefined => {
-  if (value == null || value === '') return undefined;
-
-  if (isTiptapDocument(value)) return value;
-
-  return withHeadlessEditor((editor) => {
-    editor.commands.setContent(value);
-
-    return editor.getJSON();
-  });
-};