@designcrowd/library.brand-page 6.0.19 → 6.0.20

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-features.test.ts

@@ -1,330 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from '../composables/rich-text-editor/getRteExtensions';
-import { toRteJson, renderRteToHtml } from './rte-render.util';
-import { sanitizeRteJson } from './rte-sanitize.util';
-
-/**
- * BP-5787 — feature-by-feature coverage of the whole RTE JSON pipeline.
- *
- * Each case runs a piece of authored HTML through the exact production path:
- *   HTML → toRteJson (headless editor parse) → sanitizeRteJson → renderRteToHtml
- *          (DOM-less serialiser)
- * and asserts the feature survives end-to-end. One combined golden-master lives
- * in rte-render-parity.test.ts; this file isolates every feature so a
- * regression in any single one (a mark, a textStyle attr, a link, alignment, a
- * block node) fails on its own line instead of inside one opaque snapshot.
- */
-const pipe = (html: string): string => {
-  const json = toRteJson(html);
-
-  return renderRteToHtml(sanitizeRteJson(json));
-};
-
-describe('RTE features — inline marks', () => {
-  it('bold → <strong>', () => {
-    expect(pipe('<p><strong>x</strong></p>')).toContain('<strong>x</strong>');
-  });
-  it('italic → <em>', () => {
-    expect(pipe('<p><em>x</em></p>')).toContain('<em>x</em>');
-  });
-  it('underline → <u>', () => {
-    expect(pipe('<p><u>x</u></p>')).toContain('<u>x</u>');
-  });
-  it('strikethrough → <s>', () => {
-    expect(pipe('<p><s>x</s></p>')).toContain('<s>x</s>');
-  });
-  it('inline code → <code>', () => {
-    expect(pipe('<p><code>x</code></p>')).toContain('<code>x</code>');
-  });
-});
-
-describe('RTE features — textStyle attrs (colour/font/spacing)', () => {
-  it('rgb colour is preserved', () => {
-    expect(
-      pipe('<p><span style="color: rgb(255, 0, 0)">x</span></p>'),
-    ).toContain('color: rgb(255, 0, 0)');
-  });
-
-  it('hex colour is normalised to rgb() by the editor', () => {
-    expect(pipe('<p><span style="color: #00ff00">x</span></p>')).toContain(
-      'color: rgb(0, 255, 0)',
-    );
-  });
-
-  it('theme token var(--…) colour survives verbatim (NOT flattened to rgb)', () => {
-    const out = pipe(
-      '<p><span style="color: var(--logo-text-color)">x</span></p>',
-    );
-
-    expect(out).toContain('color: var(--logo-text-color)');
-    expect(out).not.toContain('rgb(');
-  });
-
-  it('single-word font-family is preserved', () => {
-    expect(
-      pipe('<p><span style="font-family: Montserrat">x</span></p>'),
-    ).toContain('font-family: Montserrat');
-  });
-
-  it('multi-word font-family is preserved UNQUOTED (BP-5787 quote-strip)', () => {
-    const out = pipe('<p><span style="font-family: Open Sans">x</span></p>');
-
-    expect(out).toContain('font-family: Open Sans');
-    // must not carry the CSS quotes that the sanitiser would otherwise drop
-    expect(out).not.toContain('font-family: "Open Sans"');
-    expect(out).not.toContain('&quot;');
-  });
-
-  it('font-size / letter-spacing / line-height are preserved', () => {
-    expect(pipe('<p><span style="font-size: 2em">x</span></p>')).toContain(
-      'font-size: 2em',
-    );
-    expect(
-      pipe('<p><span style="letter-spacing: 0.1em">x</span></p>'),
-    ).toContain('letter-spacing: 0.1em');
-    expect(pipe('<p><span style="line-height: 1.5">x</span></p>')).toContain(
-      'line-height: 1.5',
-    );
-  });
-});
-
-describe('RTE features — background colour (highlight)', () => {
-  it('highlight → <mark> with data-color + background-color + color:inherit', () => {
-    const out = pipe(
-      '<p><mark data-color="#ffe08a" style="background-color: #ffe08a">x</mark></p>',
-    );
-
-    expect(out).toContain(
-      '<mark data-color="#ffe08a" style="background-color: #ffe08a; color: inherit;">x</mark>',
-    );
-  });
-
-  it('theme token background colour survives verbatim', () => {
-    const out = pipe(
-      '<p><mark data-color="var(--logo-primary-color)" style="background-color: var(--logo-primary-color)">x</mark></p>',
-    );
-
-    expect(out).toContain('background-color: var(--logo-primary-color)');
-  });
-});
-
-describe('RTE features — hyperlinks', () => {
-  it('external link keeps href + target + rel', () => {
-    const out = pipe(
-      '<p><a target="_blank" rel="noopener noreferrer" href="https://example.com">x</a></p>',
-    );
-
-    expect(out).toContain('href="https://example.com"');
-    expect(out).toContain('target="_blank"');
-    expect(out).toContain('rel="noopener noreferrer"');
-  });
-
-  it('internal relative link keeps its href', () => {
-    expect(pipe('<p><a href="/about">x</a></p>')).toContain('href="/about"');
-  });
-
-  it('internal page reference (pageid:) survives the sanitiser', () => {
-    // pageid: hrefs are resolved to real routes later in the view-model
-    // transform; the sanitiser must not strip them.
-    expect(pipe('<p><a href="pageid:abc-123">x</a></p>')).toContain(
-      'href="pageid:abc-123"',
-    );
-  });
-
-  it('javascript: link is dropped (mark removed, text kept)', () => {
-    const out = pipe('<p><a href="javascript:alert(1)">x</a></p>');
-
-    expect(out).not.toContain('<a');
-    expect(out).not.toContain('javascript:');
-    expect(out).toContain('x');
-  });
-
-  it('data: link is dropped', () => {
-    const out = pipe(
-      '<p><a href="data:text/html,<script>1</script>">x</a></p>',
-    );
-
-    expect(out).not.toContain('<a');
-    expect(out).not.toContain('data:');
-  });
-});
-
-describe('RTE features — text alignment', () => {
-  for (const align of ['center', 'right', 'justify', 'left'] as const) {
-    it(`paragraph text-align: ${align}`, () => {
-      expect(pipe(`<p style="text-align: ${align}">x</p>`)).toContain(
-        `<p style="text-align: ${align}">`,
-      );
-    });
-  }
-
-  it('heading carries its alignment', () => {
-    expect(pipe('<h2 style="text-align: center">x</h2>')).toContain(
-      '<h2 style="text-align: center">',
-    );
-  });
-});
-
-describe('RTE features — block nodes', () => {
-  it('headings h1–h6', () => {
-    for (const level of [1, 2, 3, 4, 5, 6]) {
-      expect(pipe(`<h${level}>x</h${level}>`)).toContain(`<h${level}`);
-      expect(pipe(`<h${level}>x</h${level}>`)).toContain(`</h${level}>`);
-    }
-  });
-
-  it('bullet list → <ul><li>', () => {
-    const out = pipe('<ul><li>a</li><li>b</li></ul>');
-
-    expect(out).toContain('<ul>');
-    expect(out).toContain('<li>');
-    expect(out).toContain('a');
-    expect(out).toContain('b');
-  });
-
-  it('ordered list → <ol><li>', () => {
-    expect(pipe('<ol><li>a</li></ol>')).toContain('<ol>');
-  });
-
-  it('blockquote → <blockquote>', () => {
-    expect(pipe('<blockquote><p>q</p></blockquote>')).toContain('<blockquote>');
-  });
-
-  it('code block → <pre><code>', () => {
-    expect(pipe('<pre><code>c</code></pre>')).toContain('<pre><code>');
-  });
-
-  it('hard break → <br>', () => {
-    expect(pipe('<p>a<br>b</p>')).toContain('<br>');
-  });
-
-  it('horizontal rule → <hr>', () => {
-    expect(pipe('<p>a</p><hr><p>b</p>')).toContain('<hr>');
-  });
-});
-
-describe('RTE features — combinations & escaping', () => {
-  it('nested marks (colour + bold + italic) all survive on the same run', () => {
-    const out = pipe(
-      '<p><span style="color: rgb(1, 2, 3)"><strong><em>x</em></strong></span></p>',
-    );
-
-    expect(out).toContain('color: rgb(1, 2, 3)');
-    expect(out).toContain('<strong>');
-    expect(out).toContain('<em>');
-  });
-
-  it('a styled hyperlink keeps both the colour and the link', () => {
-    const out = pipe(
-      '<p><a href="https://x.com"><span style="color: rgb(0, 151, 215)">x</span></a></p>',
-    );
-
-    expect(out).toContain('href="https://x.com"');
-    expect(out).toContain('color: rgb(0, 151, 215)');
-  });
-
-  it('HTML-special characters in text are escaped', () => {
-    const out = pipe('<p>a &lt;b&gt; &amp; "c"</p>');
-
-    expect(out).toContain('&lt;b&gt;');
-    expect(out).toContain('&amp;');
-    expect(out).not.toContain('<b>');
-  });
-
-  it('serialisation is idempotent (serialize(json) === serialize(reparse))', () => {
-    const html =
-      '<h2 style="text-align: center"><span style="color: var(--logo-text-color); font-family: Open Sans; font-size: 1.5em">Heading</span></h2>' +
-      '<p><strong>bold</strong> <em>italic</em> <u>u</u> <s>s</s> ' +
-      '<mark data-color="#ffe08a" style="background-color: #ffe08a">hl</mark> ' +
-      '<a target="_blank" rel="noopener noreferrer" href="https://x.com">link</a></p>';
-    const once = pipe(html);
-    const twice = renderRteToHtml(sanitizeRteJson(toRteJson(once)));
-
-    expect(twice).toEqual(once);
-  });
-});
-
-describe('RTE features — maker toolbar commands (emit path)', () => {
-  let editors: Editor[] = [];
-
-  afterEach(() => {
-    editors.forEach((e) => e.destroy());
-    editors = [];
-  });
-
-  // Apply a real editor command to a full selection (as the toolbar does),
-  // then run the emitted JSON through sanitise + serialise.
-  const applied = (fn: (e: Editor) => void): string => {
-    const editor = new Editor({
-      extensions: getRteExtensions({ restrictStarterKit: true }),
-    });
-
-    editors.push(editor);
-    editor.commands.setContent('<p>styled text</p>');
-    editor.commands.selectAll();
-    fn(editor);
-
-    return renderRteToHtml(sanitizeRteJson(editor.getJSON()));
-  };
-
-  it('setColor', () => {
-    expect(applied((e) => e.commands.setColor('rgb(255, 0, 0)'))).toContain(
-      'color: rgb(255, 0, 0)',
-    );
-  });
-
-  it('setHighlight (background colour)', () => {
-    const out = applied((e) => e.commands.setHighlight({ color: '#ffe08a' }));
-
-    expect(out).toContain('background-color: #ffe08a');
-    expect(out).toContain('<mark');
-  });
-
-  it('toggleBold / toggleItalic / toggleUnderline / toggleStrike', () => {
-    expect(applied((e) => e.commands.toggleBold())).toContain('<strong>');
-    expect(applied((e) => e.commands.toggleItalic())).toContain('<em>');
-    expect(applied((e) => e.commands.toggleUnderline())).toContain('<u>');
-    expect(applied((e) => e.commands.toggleStrike())).toContain('<s>');
-  });
-
-  it('setFontFamily (multi-word, unquoted)', () => {
-    const out = applied((e) =>
-      (e.commands as { setFontFamily: (f: string) => boolean }).setFontFamily(
-        'Open Sans',
-      ),
-    );
-
-    expect(out).toContain('font-family: Open Sans');
-    expect(out).not.toContain('&quot;');
-  });
-
-  it('setFontSize / setLetterSpacing', () => {
-    expect(
-      applied((e) =>
-        (e.commands as { setFontSize: (v: string) => boolean }).setFontSize(
-          '2em',
-        ),
-      ),
-    ).toContain('font-size: 2em');
-    expect(
-      applied((e) =>
-        (
-          e.commands as { setLetterSpacing: (v: string) => boolean }
-        ).setLetterSpacing('0.1em'),
-      ),
-    ).toContain('letter-spacing: 0.1em');
-  });
-
-  it('setTextAlign', () => {
-    expect(applied((e) => e.commands.setTextAlign('center'))).toContain(
-      'text-align: center',
-    );
-  });
-
-  it('setLink keeps the href through the pipeline', () => {
-    expect(
-      applied((e) => e.commands.setLink({ href: 'https://x.com' })),
-    ).toContain('href="https://x.com"');
-  });
-});

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"');
-  });
-});