@designcrowd/library.brand-page 6.0.19 → 6.0.20

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();
-  });
-};

package/src/brand-page-maker/utils/rte-sanitize-json.test.ts

@@ -1,158 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { sanitizeRteJson } from './rte-sanitize.util';
-import { toRteJson } from './rte-render.util';
-import { COMPLEX_RTE_HTML } from '../__fixtures__/complex-rte.fixture';
-
-/**
- * BP-5787 — native JSON sanitiser (T5). Operates on the Tiptap tree directly
- * (no editor, no HTML, no DOMPurify). Mirrors the HTML allowlist's guarantees.
- */
-const doc = (content: unknown[]): unknown => ({ type: 'doc', content });
-const para = (content: unknown[]) => ({ type: 'paragraph', content });
-const text = (t: string, marks?: unknown[]) => ({
-  type: 'text',
-  text: t,
-  marks,
-});
-const json = (v: unknown) => JSON.stringify(v);
-
-describe('sanitizeRteJson (native)', () => {
-  it('drops unknown node types but keeps their valid text siblings', () => {
-    const out = sanitizeRteJson(
-      doc([
-        para([text('keep me')]),
-        { type: 'image', attrs: { src: 'x', onerror: 'alert(1)' } },
-        { type: 'script', content: [text('alert(1)')] },
-      ]),
-    );
-
-    expect(json(out)).toContain('keep me');
-    expect(json(out)).not.toContain('image');
-    expect(json(out)).not.toContain('script');
-    expect(json(out)).not.toContain('alert(1)');
-  });
-
-  it('drops unknown mark types, keeps allow-listed ones', () => {
-    const out = sanitizeRteJson(
-      doc([
-        para([
-          text('bold', [{ type: 'bold' }]),
-          text('evil', [{ type: 'onclick', attrs: { js: 'alert(1)' } }]),
-        ]),
-      ]),
-    );
-
-    expect(json(out)).toContain('"type":"bold"');
-    expect(json(out)).not.toContain('onclick');
-    expect(json(out)).not.toContain('alert(1)');
-  });
-
-  it('strips javascript: / data: hrefs from link marks (drops the mark)', () => {
-    const out = sanitizeRteJson(
-      doc([
-        para([
-          // eslint-disable-next-line no-script-url
-          text('click', [
-            { type: 'link', attrs: { href: 'javascript:alert(1)' } },
-          ]),
-        ]),
-      ]),
-    );
-
-    expect(json(out)).toContain('click'); // text kept
-    expect(json(out)).not.toContain('javascript:');
-    expect(json(out)).not.toContain('"type":"link"');
-  });
-
-  it('keeps safe links', () => {
-    const out = sanitizeRteJson(
-      doc([
-        para([
-          text('site', [
-            {
-              type: 'link',
-              attrs: { href: 'https://example.com', target: '_blank' },
-            },
-          ]),
-        ]),
-      ]),
-    );
-
-    expect(json(out)).toContain('https://example.com');
-  });
-
-  it('keeps safe textStyle attrs incl. theme token, drops injection values', () => {
-    const out = sanitizeRteJson(
-      doc([
-        para([
-          text('ok', [
-            {
-              type: 'textStyle',
-              attrs: {
-                color: 'var(--logo-text-color)',
-                fontFamily: 'Open Sans',
-                fontSize: '1.5em',
-              },
-            },
-          ]),
-          text('bad', [
-            {
-              type: 'textStyle',
-              attrs: {
-                color: 'red; position: fixed; top: 0',
-                fontSize: '1em" onload="x',
-              },
-            },
-          ]),
-        ]),
-      ]),
-    );
-
-    const s = json(out);
-
-    expect(s).toContain('var(--logo-text-color)');
-    expect(s).toContain('Open Sans');
-    expect(s).toContain('1.5em');
-    // injection values dropped
-    expect(s).not.toContain('position: fixed');
-    expect(s).not.toContain('onload');
-  });
-
-  it('clamps heading level and keeps valid textAlign', () => {
-    const out: any = sanitizeRteJson(
-      doc([
-        {
-          type: 'heading',
-          attrs: { level: 99, textAlign: 'center' },
-          content: [text('H')],
-        },
-        {
-          type: 'paragraph',
-          attrs: { textAlign: 'evil' },
-          content: [text('P')],
-        },
-      ]),
-    );
-
-    expect(out.content[0].attrs.level).toBe(1);
-    expect(out.content[0].attrs.textAlign).toBe('center');
-    expect(out.content[1].attrs?.textAlign).toBeUndefined();
-  });
-
-  it('passes the clean complex fixture through unchanged (idempotent)', () => {
-    const clean = toRteJson(COMPLEX_RTE_HTML);
-    const once = sanitizeRteJson(clean);
-    const twice = sanitizeRteJson(once);
-
-    expect(twice).toEqual(once);
-    // legitimate content preserved
-    expect(json(once)).toContain('var(--logo-text-color)');
-    expect(json(once)).toContain('Montserrat');
-    expect(json(once)).toContain('https://example.com');
-  });
-
-  it('returns an empty doc for non-document input', () => {
-    expect(sanitizeRteJson(null)).toEqual({ type: 'doc', content: [] });
-    expect(sanitizeRteJson('<p>x</p>')).toEqual({ type: 'doc', content: [] });
-  });
-});

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

@@ -1,195 +0,0 @@
-import type { JSONContent } from '@tiptap/vue-3';
-import { validateAndSanitizeHref } from './rich-text-editor.util';
-
-/**
- * BP-5787 — native JSON sanitiser for RTE content.
- *
- * Operates directly on the Tiptap document tree: no editor instantiation, no
- * HTML round-trip, no DOMPurify. This is the hot path (runs on every editor
- * update and on the server sanitise gate), so it is a single, allocation-light
- * recursive walk.
- *
- * Security model (mirrors the HTML allowlist it replaces):
- *  - only allow-listed node and mark types survive; everything else is dropped;
- *  - textStyle / highlight attrs are restricted to known keys whose values must
- *    be "safe CSS values" (no quotes/angle-brackets/extra declarations/url()/
- *    expression()), preventing CSS-injection when the value is later rendered
- *    into a `style="…"` attribute;
- *  - link hrefs go through the same validateAndSanitizeHref used by the HTML
- *    sanitiser; unsafe links lose their href (and the mark);
- *  - heading levels are clamped to 1–6.
- */
-
-// ProseMirror node types the editor schema can legitimately produce.
-const ALLOWED_NODE_TYPES = new Set([
-  'doc',
-  'paragraph',
-  'heading',
-  'text',
-  'hardBreak',
-  'bulletList',
-  'orderedList',
-  'listItem',
-  'blockquote',
-  'codeBlock',
-  'horizontalRule',
-]);
-
-// Inline mark types the editor produces (strong/em/u/s/code/span/mark/a).
-const ALLOWED_MARK_TYPES = new Set([
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  'code',
-  'textStyle',
-  'highlight',
-  'link',
-]);
-
-// textStyle attrs map to the allow-listed CSS properties (font-weight →
-// bold mark, text-decoration → underline/strike, text-align → node attr,
-// background-color → highlight, so they are intentionally not here).
-const ALLOWED_TEXT_STYLE_ATTRS = new Set([
-  'color',
-  'fontFamily',
-  'fontSize',
-  'letterSpacing',
-  'lineHeight',
-]);
-
-type Mark = { type?: string; attrs?: Record<string, unknown> };
-
-/**
- * A safe CSS value is a short string free of characters that could inject an
- * extra declaration or escape the attribute, and free of the url()/expression()
- * vectors. Legitimate values — `rgb(255, 0, 0)`, `#FF0000`,
- * `var(--logo-text-color)`, `Open Sans`, `1.5em` — all pass.
- */
-const isSafeCssValue = (value: unknown): value is string =>
-  typeof value === 'string' &&
-  value.length > 0 &&
-  value.length <= 200 &&
-  !/[<>"';]/.test(value) &&
-  !/url\s*\(/i.test(value) &&
-  !/expression\s*\(/i.test(value);
-
-const sanitizeTextStyleAttrs = (
-  attrs: Record<string, unknown>,
-): Record<string, unknown> | null => {
-  const clean: Record<string, unknown> = {};
-
-  for (const key of Object.keys(attrs)) {
-    if (!ALLOWED_TEXT_STYLE_ATTRS.has(key)) continue;
-
-    const value = attrs[key];
-
-    // Tiptap emits '' for unset textStyle slots — preserve them.
-    if (value === '' || value == null) {
-      clean[key] = '';
-    } else if (isSafeCssValue(value)) {
-      clean[key] = value;
-    }
-    // else: drop the unsafe value
-  }
-
-  return Object.keys(clean).length ? clean : null;
-};
-
-const sanitizeMark = (mark: Mark): Mark | null => {
-  const type = mark?.type;
-
-  if (!type || !ALLOWED_MARK_TYPES.has(type)) return null;
-
-  const attrs = mark.attrs;
-
-  if (type === 'link') {
-    const href =
-      typeof attrs?.href === 'string'
-        ? validateAndSanitizeHref(attrs.href)
-        : null;
-
-    if (!href) return null; // drop links with unsafe/empty href
-
-    const cleanAttrs: Record<string, unknown> = { href };
-
-    if (attrs?.target != null) cleanAttrs.target = attrs.target;
-
-    if (attrs?.rel != null) cleanAttrs.rel = attrs.rel;
-
-    return { type, attrs: cleanAttrs };
-  }
-
-  if (type === 'textStyle') {
-    const clean = attrs ? sanitizeTextStyleAttrs(attrs) : null;
-
-    return clean ? { type, attrs: clean } : null;
-  }
-
-  if (type === 'highlight') {
-    return isSafeCssValue(attrs?.color)
-      ? { type, attrs: { color: attrs!.color } }
-      : { type };
-  }
-
-  // Plain marks (bold/italic/underline/strike/code) carry no attrs.
-  return { type };
-};
-
-const ALIGN_VALUES = new Set(['left', 'center', 'right', 'justify']);
-
-const sanitizeNode = (node: JSONContent): JSONContent | null => {
-  const type = node?.type;
-
-  if (!type || !ALLOWED_NODE_TYPES.has(type)) return null;
-
-  const clean: JSONContent = { type };
-  const attrs: Record<string, unknown> = {};
-
-  if (type === 'heading') {
-    const level = Number((node.attrs as { level?: unknown })?.level);
-
-    attrs.level = level >= 1 && level <= 6 ? level : 1;
-  }
-
-  if (type === 'heading' || type === 'paragraph') {
-    const align = (node.attrs as { textAlign?: unknown })?.textAlign;
-
-    if (typeof align === 'string' && ALIGN_VALUES.has(align)) {
-      attrs.textAlign = align;
-    }
-  }
-
-  if (Object.keys(attrs).length) clean.attrs = attrs;
-
-  if (typeof node.text === 'string') clean.text = node.text;
-
-  if (Array.isArray(node.marks)) {
-    const marks = node.marks
-      .map((m) => sanitizeMark(m as Mark))
-      .filter(Boolean) as JSONContent['marks'];
-
-    if (marks && marks.length) clean.marks = marks;
-  }
-
-  if (Array.isArray(node.content)) {
-    const content = node.content
-      .map(sanitizeNode)
-      .filter(Boolean) as JSONContent[];
-
-    if (content.length) clean.content = content;
-  }
-
-  return clean;
-};
-
-/**
- * Sanitise a Tiptap JSON document (returns a new clean doc). Returns a minimal
- * empty doc if the input isn't a usable document.
- */
-export const sanitizeRteJson = (doc: unknown): JSONContent => {
-  const clean =
-    doc && typeof doc === 'object' ? sanitizeNode(doc as JSONContent) : null;
-
-  return clean && clean.type === 'doc' ? clean : { type: 'doc', content: [] };
-};

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

@@ -1,172 +0,0 @@
-import type { JSONContent } from '@tiptap/vue-3';
-
-/**
- * BP-5787 — DOM-less Tiptap-JSON → HTML serialiser.
- *
- * The editor-based render (`new Editor().getHTML()`) needs a browser DOM and
- * throws "document is not defined" on the server (web-renderer SSR / publish),
- * which is where published pages are rendered. This pure-function serialiser
- * walks the JSON and emits the equivalent HTML with no editor and no DOM, so it
- * runs anywhere (SSR, node, browser) and is far cheaper than instantiating an
- * editor per field.
- *
- * The output is semantically identical to the editor's (same tags, same inline
- * styles); the Playwright visual golden-master is the authority on pixel parity.
- */
-
-type Mark = { type?: string; attrs?: Record<string, unknown> };
-
-type Node = {
-  type?: string;
-  text?: string;
-  marks?: Mark[];
-  attrs?: Record<string, unknown>;
-  content?: Node[];
-};
-
-const escapeHtml = (value: string): string =>
-  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-const escapeAttr = (value: string): string =>
-  escapeHtml(value).replace(/"/g, '&quot;');
-
-// textStyle attr → CSS property, in a stable order.
-const TEXT_STYLE_PROPS: [string, string][] = [
-  ['fontFamily', 'font-family'],
-  ['fontSize', 'font-size'],
-  ['letterSpacing', 'letter-spacing'],
-  ['lineHeight', 'line-height'],
-  ['color', 'color'],
-];
-
-const textStyleCss = (attrs: Record<string, unknown>): string =>
-  TEXT_STYLE_PROPS.filter(
-    ([key]) => typeof attrs[key] === 'string' && attrs[key],
-  )
-    .map(([key, css]) => `${css}: ${attrs[key] as string}`)
-    .join('; ');
-
-// Outermost → innermost. Reversed at wrap time so links wrap outside spans,
-// which wrap outside the plain formatting marks.
-const MARK_ORDER = [
-  'link',
-  'textStyle',
-  'highlight',
-  'strike',
-  'underline',
-  'italic',
-  'bold',
-  'code',
-];
-
-const wrapMark = (
-  type: string,
-  attrs: Record<string, unknown>,
-  inner: string,
-): string => {
-  switch (type) {
-    case 'bold':
-      return `<strong>${inner}</strong>`;
-    case 'italic':
-      return `<em>${inner}</em>`;
-    case 'underline':
-      return `<u>${inner}</u>`;
-    case 'strike':
-      return `<s>${inner}</s>`;
-    case 'code':
-      return `<code>${inner}</code>`;
-
-    case 'textStyle': {
-      const css = textStyleCss(attrs);
-
-      return css ? `<span style="${escapeAttr(css)}">${inner}</span>` : inner;
-    }
-
-    case 'highlight': {
-      const color = typeof attrs.color === 'string' ? attrs.color : '';
-
-      return color
-        ? `<mark data-color="${escapeAttr(color)}" style="background-color: ${escapeAttr(color)}; color: inherit;">${inner}</mark>`
-        : `<mark>${inner}</mark>`;
-    }
-
-    case 'link': {
-      const href = typeof attrs.href === 'string' ? attrs.href : '';
-      let open = `<a href="${escapeAttr(href)}"`;
-
-      if (attrs.target) open += ` target="${escapeAttr(String(attrs.target))}"`;
-
-      if (attrs.rel) open += ` rel="${escapeAttr(String(attrs.rel))}"`;
-
-      return `${open}>${inner}</a>`;
-    }
-
-    default:
-      return inner;
-  }
-};
-
-const renderText = (node: Node): string => {
-  let html = escapeHtml(node.text ?? '');
-  const marks = Array.isArray(node.marks) ? node.marks : [];
-
-  for (const type of [...MARK_ORDER].reverse()) {
-    const mark = marks.find((m) => m?.type === type);
-
-    if (mark) html = wrapMark(type, mark.attrs ?? {}, html);
-  }
-
-  return html;
-};
-
-const alignAttr = (node: Node): string => {
-  const align = node.attrs?.textAlign;
-
-  return typeof align === 'string' && align
-    ? ` style="text-align: ${escapeAttr(align)}"`
-    : '';
-};
-
-const renderChildren = (node: Node): string =>
-  (node.content ?? []).map(renderNode).join('');
-
-const renderNode = (node: Node): string => {
-  if (!node || typeof node !== 'object') return '';
-
-  switch (node.type) {
-    case 'text':
-      return renderText(node);
-    case 'hardBreak':
-      return '<br>';
-    case 'horizontalRule':
-      return '<hr>';
-    case 'paragraph':
-      return `<p${alignAttr(node)}>${renderChildren(node)}</p>`;
-
-    case 'heading': {
-      const level = Math.min(6, Math.max(1, Number(node.attrs?.level) || 1));
-
-      return `<h${level}${alignAttr(node)}>${renderChildren(node)}</h${level}>`;
-    }
-
-    case 'bulletList':
-      return `<ul>${renderChildren(node)}</ul>`;
-    case 'orderedList':
-      return `<ol>${renderChildren(node)}</ol>`;
-    case 'listItem':
-      return `<li>${renderChildren(node)}</li>`;
-    case 'blockquote':
-      return `<blockquote>${renderChildren(node)}</blockquote>`;
-    case 'codeBlock':
-      return `<pre><code>${renderChildren(node)}</code></pre>`;
-    // doc and any unknown container: render children.
-    default:
-      return renderChildren(node);
-  }
-};
-
-/**
- * Serialise a Tiptap JSON document to HTML without an editor/DOM.
- */
-export const serializeRteJsonToHtml = (doc: JSONContent): string =>
-  renderChildren(doc as Node);

package/src/brand-page-maker/validators/field.validator.test.ts

@@ -1,55 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { validatorDict } from './field.validator';
-
-/**
- * BP-5857 — the `title` validator must preserve pre-JSON (staging) semantics.
- * An RTE field's value used to be inline HTML: an empty editor was "<p></p>",
- * a non-empty string, so the required check always PASSED for RTE fields — it
- * only failed for genuinely empty PLAIN inputs. RTE fields are now Tiptap JSON
- * docs, so any doc must likewise count as "present" (valid); a plain string is
- * still required to be non-empty.
- */
-describe('field.validator — title (nonEmptyString)', () => {
-  const titleValidator = validatorDict.title;
-
-  const jsonDoc = (text: string) => ({
-    type: 'doc',
-    content: [
-      {
-        type: 'paragraph',
-        content: text
-          ? [{ type: 'text', text, marks: [{ type: 'bold' }] }]
-          : [],
-      },
-    ],
-  });
-
-  it('accepts a non-empty plain string', () => {
-    expect(titleValidator.validate('title', 'Payments').isValid).toBe(true);
-  });
-
-  it('rejects an empty plain string (required still enforced for plain inputs)', () => {
-    expect(titleValidator.validate('title', '').isValid).toBe(false);
-  });
-
-  it('accepts legacy empty RTE HTML "<p></p>" (non-empty string — staging parity)', () => {
-    expect(titleValidator.validate('title', '<p></p>').isValid).toBe(true);
-  });
-
-  it('accepts a Tiptap JSON doc with visible text', () => {
-    expect(titleValidator.validate('title', jsonDoc('Payments')).isValid).toBe(
-      true,
-    );
-  });
-
-  it('accepts an empty Tiptap JSON doc (RTE parity — empty editor is "present")', () => {
-    expect(titleValidator.validate('title', jsonDoc('')).isValid).toBe(true);
-  });
-
-  it('rejects null/undefined without throwing', () => {
-    expect(titleValidator.validate('title', null as any).isValid).toBe(false);
-    expect(titleValidator.validate('title', undefined as any).isValid).toBe(
-      false,
-    );
-  });
-});