@designcrowd/library.brand-page 6.1.1-json-prereq-3 → 6.1.1

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

@@ -1,202 +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">internal link</a> <a target="_blank" rel="noopener noreferrer" href="https://example.com">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 renderer) 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: #FF0000">literal hex</span> <a href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer" href="https://example.com">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 RAW editor JSON (pre-sanitise; not the persisted 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": "#FF0000",
-                "fontFamily": "",
-                "fontSize": "",
-                "letterSpacing": "",
-                "lineHeight": "",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "literal hex",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": null,
-                "href": "/about",
-                "rel": null,
-                "target": "_self",
-                "title": null,
-              },
-              "type": "link",
-            },
-          ],
-          "text": "internal link",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": null,
-                "href": "https://example.com",
-                "rel": "noopener noreferrer nofollow",
-                "target": "_blank",
-                "title": null,
-              },
-              "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,378 +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 — mark nesting (decoration must inherit font-size)', () => {
-  // BP-5787 regression: the textStyle <span> that carries font-size must render
-  // OUTSIDE <u>/<s>, so the decoration marks inherit the applied size. Otherwise
-  // text-decoration thickness AND vertical position are computed from the base
-  // paragraph font, giving thin, mis-centred lines on large text (v3 default
-  // priority regression vs v2). Guarded by TextStyle priority: 99.
-  it('font-size <span> wraps <u> (not the reverse)', () => {
-    const out = pipe('<p><span style="font-size: 40px"><u>x</u></span></p>');
-
-    expect(out).toContain('<span style="font-size: 40px"><u>x</u></span>');
-    expect(out).not.toMatch(/<u><span/);
-  });
-
-  it('font-size <span> wraps <s> (not the reverse)', () => {
-    const out = pipe('<p><span style="font-size: 40px"><s>x</s></span></p>');
-
-    expect(out).toContain('<span style="font-size: 40px"><s>x</s></span>');
-    expect(out).not.toMatch(/<s><span/);
-  });
-});
-
-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 preserved verbatim (Tiptap v3 no longer normalises to rgb)', () => {
-    expect(pipe('<p><span style="color: #00ff00">x</span></p>')).toContain(
-      'color: #00ff00',
-    );
-  });
-
-  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('freshly authored external link (no target/rel in source) still renders target + rel', () => {
-    // Regression: target/rel are derived at render time from the href, so a link
-    // authored as a bare <a href> — the normal editor case — must still open in a
-    // new tab with noopener. Before the render-time policy, these were injected by
-    // the HTML DOMPurify sanitiser and were lost when storage moved to JSON.
-    const out = pipe('<p><a 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('external link with a stale target is normalised to _blank', () => {
-    const out = pipe(
-      '<p><a target="_self" href="https://example.com">x</a></p>',
-    );
-
-    expect(out).toContain('target="_blank"');
-    expect(out).not.toContain('target="_self"');
-  });
-
-  it('internal relative link keeps its href and gets no target/rel', () => {
-    const out = pipe('<p><a href="/about">x</a></p>');
-
-    expect(out).toContain('href="/about"');
-    expect(out).not.toContain('target=');
-    expect(out).not.toContain('rel=');
-  });
-
-  it('internal page reference (pageid:) survives the sanitiser with no target/rel', () => {
-    // pageid: hrefs are resolved to real routes later in the view-model
-    // transform; the sanitiser must not strip them, and they are not external so
-    // they get no target/rel.
-    const out = pipe('<p><a href="pageid:abc-123">x</a></p>');
-
-    expect(out).toContain('href="pageid:abc-123"');
-    expect(out).not.toContain('target=');
-  });
-
-  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"');
-  });
-});