@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/metadata-builder/sanitizers/rte-schema-check.ts

@@ -0,0 +1,99 @@
+import { Editor } 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 FontFamily from '@tiptap/extension-font-family';
+import ColorExtension from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
+import { FontSize } from '../../brand-page-maker/composables/rich-text-editor/extensions/FontSize';
+import { LetterSpacing } from '../../brand-page-maker/composables/rich-text-editor/extensions/LetterSpacing';
+import { LineHeight } from '../../brand-page-maker/composables/rich-text-editor/extensions/LineHeight';
+import { AutoLink } from '../../brand-page-maker/composables/rich-text-editor/extensions/AutoLink';
+import { isTiptapDocument } from '../parsers/section-tool-arguments';
+import {
+  rteStyleCheck,
+  textCheck,
+  type SectionCheck,
+} from './section-args-validator';
+
+/**
+ * Constructs a headless Tiptap Editor with the same extension set as
+ * `useExternalRichTextEditor` in the maker. We import the Tiptap extension
+ * files directly (they are leaf modules) instead of going through the maker
+ * composable, which would pull in the AI executor → section-builders →
+ * section-rules graph and re-enter this file before its exports are bound.
+ */
+const buildHeadlessEditor = (): Editor =>
+  new Editor({
+    editable: false,
+    extensions: [
+      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 }),
+      Link.configure({
+        openOnClick: false,
+        defaultProtocol: 'https',
+        autolink: true,
+      }),
+      AutoLink,
+    ],
+  });
+
+/**
+ * Validates a Tiptap doc against the headless editor's real ProseMirror
+ * schema (`schema.nodeFromJSON`). Catches malformed AI input — stray
+ * non-node children in `content`, unknown node types, malformed attrs —
+ * before the builder runs and the renderer's silent `setContent` drops
+ * the doc to `<p></p>` (BP-5669).
+ *
+ * Returns the field-prefixed error string so the AI's tool-call retry
+ * loop reads it via `BuilderResult.errors` → `tool_result.errorMessage`
+ * and re-emits a corrected payload.
+ */
+export const rteSchemaCheck =
+  (field: string): SectionCheck =>
+  (record) => {
+    const value = record[field];
+
+    if (!isTiptapDocument(value)) return null;
+
+    const editor = buildHeadlessEditor();
+
+    try {
+      editor.schema.nodeFromJSON(value);
+
+      return null;
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : String(err);
+
+      return `"${field}" is not valid Tiptap JSON: ${detail}`;
+    } finally {
+      editor.destroy();
+    }
+  };
+
+/**
+ * Returns [rteSchemaCheck(field), textCheck(field, max), rteStyleCheck(field)].
+ * Use with spread in a CHECKS array to validate the Tiptap doc structure
+ * (against the editor's real ProseMirror schema), plain text length, and
+ * inline RTE mark styles for the same field. Schema check runs first so
+ * a malformed doc surfaces an actionable error to the AI retry loop
+ * before the renderer can silently swallow it.
+ */
+export const textAndRteChecks = (
+  field: string,
+  max: number,
+): SectionCheck[] => [
+  rteSchemaCheck(field),
+  textCheck(field, max),
+  rteStyleCheck(field),
+];

package/src/metadata-builder/sanitizers/sanitizer-rules.ts

@@ -0,0 +1,97 @@
+/**
+ * sanitizer-rules.ts
+ *
+ * Shared style/logo/page constraint rules and the SectionRules interface.
+ * Per-section rules live colocated with each builder (e.g. banner-section.rules.ts).
+ */
+
+import {
+  MIN_TEXT_SIZE_PX,
+  MAX_TEXT_SIZE_PX,
+  MIN_LINE_HEIGHT,
+  MAX_LINE_HEIGHT,
+  MIN_LETTER_SPACING_PERCENT,
+  MAX_LETTER_SPACING_PERCENT,
+  FONT_FAMILY_CONFIGS,
+  FONT_FAMILY_KEYS,
+} from '../../brand-page/constants/font.constants';
+import {
+  MAX_PAGE_TITLE_LENGTH,
+  MAX_SUBPAGE_TITLE_LENGTH,
+} from '../../shared/page-settings/utils';
+import {
+  LOGO_SLIDER_DESKTOP_MIN,
+  LOGO_SLIDER_DESKTOP_MAX,
+  LOGO_SLIDER_MOBILE_MIN,
+  LOGO_SLIDER_MOBILE_MAX,
+} from '../../brand-page/constants/styles.constants';
+import { pxToEm } from '../../brand-page-maker/utils/text.util';
+
+// ─── 1. Style property rules ──────────────────────────────────────────────────
+// Applies to any TextStyleArguments object (section styles, global styles,
+// header/footer viewport overrides).
+//
+// fontFamilyNames / fontFamilyKeys use Set (not readonly arrays) because both
+// are derived dynamically from FONT_FAMILY_CONFIGS at runtime — as const
+// literal narrowing is not possible. Consumers call .has(value).
+
+export const STYLE_RULES = {
+  // fontSize bounds are in px (natural unit for clamping).
+  // Flow: parse input unit → convert to px → clamp → pxToEm(clampedPx)
+  fontUnit: {
+    allowedUnits: ['em'] as const,
+  },
+  fontSize: {
+    minEm: pxToEm(String(MIN_TEXT_SIZE_PX)),
+    maxEm: pxToEm(String(MAX_TEXT_SIZE_PX)),
+  },
+  lineHeight: {
+    min: MIN_LINE_HEIGHT,
+    max: MAX_LINE_HEIGHT,
+  },
+  letterSpacing: {
+    min: MIN_LETTER_SPACING_PERCENT,
+    max: MAX_LETTER_SPACING_PERCENT,
+  },
+  // Two separate sets because the format differs by context:
+  //   TextStyleArguments.fontFamily             → display name (e.g. 'Playfair Display')
+  //   UpdateGlobalStylesArguments.textFontFamily → camelCase key (e.g. 'playfairDisplay')
+  fontFamilyNames: new Set(
+    Object.values(FONT_FAMILY_CONFIGS).map((c) =>
+      // Some font names are stored with surrounding single-quotes (e.g. "'Exo 2'").
+      // Strip them so the Set matches the bare names the AI sends.
+      c.name.replace(/^'(.*)'$/, '$1'),
+    ),
+  ),
+  fontFamilyKeys: new Set(Object.keys(FONT_FAMILY_KEYS)),
+} as const;
+
+// ─── 2. Logo size rules ───────────────────────────────────────────────────────
+// Applies to logo_image_height / logo_image_width in UpdateHeaderArguments and
+// UpdateFooterArguments viewport overrides. Values are in rem units.
+
+export const LOGO_SIZE_RULES = {
+  unit: 'rem' as const,
+  desktop: { min: LOGO_SLIDER_DESKTOP_MIN, max: LOGO_SLIDER_DESKTOP_MAX },
+  mobile: { min: LOGO_SLIDER_MOBILE_MIN, max: LOGO_SLIDER_MOBILE_MAX },
+} as const;
+
+// ─── 3. Page rules ────────────────────────────────────────────────────────────
+// Applies to add_page (page_name), rename_page (page_name), and update_header
+// (nav_routes[].display_name).
+
+export const PAGE_RULES = {
+  pageName: MAX_PAGE_TITLE_LENGTH,
+  subPageName: MAX_SUBPAGE_TITLE_LENGTH,
+  navDisplayName: MAX_PAGE_TITLE_LENGTH,
+} as const;
+
+// ─── 4. Item cap rule ─────────────────────────────────────────────────────────
+// Parameter type for itemCapCheck() in section-args-validator.ts.
+
+export interface ItemCapRule {
+  brandSite: number;
+  brandPage: number;
+  /** The args field name that holds the items array (e.g. 'items', 'links'). */
+  arrayField: string;
+}

package/src/metadata-builder/sanitizers/section-args-validator.ts

@@ -0,0 +1,445 @@
+import {
+  isTiptapDocument,
+  type TextStyleArguments,
+  type TiptapDocument,
+  type TiptapMark,
+} from '../parsers/section-tool-arguments';
+import {
+  LOGO_SIZE_RULES,
+  STYLE_RULES,
+  type ItemCapRule,
+} from './sanitizer-rules';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function extractPlainText(value: string | TiptapDocument): string {
+  if (typeof value === 'string') return value;
+
+  return value.content
+    .flatMap((block) => block.content ?? [])
+    .filter((node) => node.type === 'text')
+    .map((node) => node.text)
+    .join('');
+}
+
+// ─── Style property checks (compiled from STYLE_RULES at module init) ─────────
+//
+// Each check takes (fieldLabel, style) → string | null.
+// STYLE_RULES is the base — no if-conditions in validateStyleArgs itself.
+//
+// TiptapDocument inline mark styles (textStyle marks within RTE content) are
+// validated by validateRteMarkStyle / validateRteDocument below.
+
+type StylePropertyCheck = (
+  fieldLabel: string,
+  style: TextStyleArguments,
+) => string | null;
+
+const { fontUnit, fontSize, lineHeight, letterSpacing, fontFamilyNames } =
+  STYLE_RULES;
+
+const STYLE_PROPERTY_CHECKS: StylePropertyCheck[] = [
+  (fieldLabel, style) => {
+    if (style.fontSize == null) return null;
+
+    const raw = style.fontSize.trim().toLowerCase();
+    const unit = fontUnit.allowedUnits[0];
+    const match = raw.match(new RegExp(`^(\\d+(?:\\.\\d+)?)${unit}$`));
+
+    if (!match) {
+      return `"${fieldLabel}.fontSize" must use "${unit}" units (got "${style.fontSize}")`;
+    }
+
+    const val = parseFloat(match[1]);
+    const min = parseFloat(fontSize.minEm);
+    const max = parseFloat(fontSize.maxEm);
+
+    return isNaN(val) || val < min || val > max
+      ? `"${fieldLabel}.fontSize" "${style.fontSize}" is out of bounds (${fontSize.minEm}–${fontSize.maxEm})`
+      : null;
+  },
+
+  (fieldLabel, style) => {
+    if (style.lineHeight == null) return null;
+
+    const { min, max } = lineHeight;
+    const val = parseFloat(String(style.lineHeight));
+
+    return isNaN(val) || val < min || val > max
+      ? `"${fieldLabel}.lineHeight" ${style.lineHeight} is out of bounds (${min}–${max})`
+      : null;
+  },
+
+  (fieldLabel, style) => {
+    if (style.letterSpacing == null) return null;
+
+    const { min, max } = letterSpacing;
+    const val = parseFloat(String(style.letterSpacing));
+
+    return isNaN(val) || val < min || val > max
+      ? `"${fieldLabel}.letterSpacing" ${style.letterSpacing} is out of bounds (${min}–${max})`
+      : null;
+  },
+
+  (fieldLabel, style) => {
+    if (style.fontFamily == null) return null;
+
+    return !fontFamilyNames.has(style.fontFamily)
+      ? `"${fieldLabel}.fontFamily" "${style.fontFamily}" is not a recognized font family`
+      : null;
+  },
+];
+
+function validateStyleArgs(
+  fieldLabel: string,
+  style: TextStyleArguments,
+): string[] {
+  return STYLE_PROPERTY_CHECKS.flatMap((check) => {
+    const err = check(fieldLabel, style);
+
+    return err ? [err] : [];
+  });
+}
+
+// ─── RTE mark style validation ───────────────────────────────────────────────
+//
+// Mark attrs are all strings, unlike TextStyleArguments which uses numbers for
+// lineHeight and letterSpacing. Key format differences:
+//   lineHeight    → unitless string "1.5"  (not a number)
+//   letterSpacing → em string "0.05em"     (percent / 100; range: [0em, 1em])
+
+type RteMarkCheck = (
+  path: string,
+  attrs: NonNullable<TiptapMark['attrs']>,
+) => string | null;
+
+const RTE_MARK_PROPERTY_CHECKS: RteMarkCheck[] = [
+  (path, attrs) => {
+    if (attrs.fontSize == null) return null;
+
+    const raw = attrs.fontSize.trim().toLowerCase();
+    const unit = fontUnit.allowedUnits[0];
+    const match = raw.match(new RegExp(`^(\\d+(?:\\.\\d+)?)${unit}$`));
+
+    if (!match) {
+      return `"${path}.fontSize" must use "em" units (got "${attrs.fontSize}")`;
+    }
+
+    const val = parseFloat(match[1]);
+    const min = parseFloat(fontSize.minEm);
+    const max = parseFloat(fontSize.maxEm);
+
+    return isNaN(val) || val < min || val > max
+      ? `"${path}.fontSize" "${attrs.fontSize}" is out of bounds (${fontSize.minEm}–${fontSize.maxEm})`
+      : null;
+  },
+
+  (path, attrs) => {
+    if (attrs.fontFamily == null) return null;
+
+    return !fontFamilyNames.has(attrs.fontFamily)
+      ? `"${path}.fontFamily" "${attrs.fontFamily}" is not a recognized font family`
+      : null;
+  },
+
+  (path, attrs) => {
+    if (attrs.lineHeight == null) return null;
+
+    const val = parseFloat(attrs.lineHeight);
+    const isUnitless = !isNaN(val) && attrs.lineHeight.trim() === String(val);
+
+    if (!isUnitless) {
+      return `"${path}.lineHeight" must be a unitless number (got "${attrs.lineHeight}")`;
+    }
+
+    return val < lineHeight.min || val > lineHeight.max
+      ? `"${path}.lineHeight" ${val} is out of bounds (${lineHeight.min}–${lineHeight.max})`
+      : null;
+  },
+
+  (path, attrs) => {
+    if (attrs.letterSpacing == null) return null;
+
+    const raw = attrs.letterSpacing.trim().toLowerCase();
+
+    // "0" is valid CSS without units — treat as 0em.
+    if (raw === '0') return null;
+
+    const match = raw.match(/^(\d+(?:\.\d+)?)em$/);
+
+    if (!match) {
+      return `"${path}.letterSpacing" must use "em" units (got "${attrs.letterSpacing}")`;
+    }
+
+    const val = parseFloat(match[1]);
+    const minEm = letterSpacing.min / 100;
+    const maxEm = letterSpacing.max / 100;
+
+    return val < minEm || val > maxEm
+      ? `"${path}.letterSpacing" ${attrs.letterSpacing} is out of bounds (${minEm}em–${maxEm}em)`
+      : null;
+  },
+];
+
+/**
+ * Validates CSS string-format style attrs (fontSize em, fontFamily name,
+ * lineHeight unitless, letterSpacing em) against STYLE_RULES bounds.
+ * Used for both RTE textStyle mark attrs and GlobalStyles textStyleOptions.
+ * Returns the first error string, or null if all attrs are valid / absent.
+ */
+export function validateStringStyleAttrs(
+  path: string,
+  attrs: {
+    fontSize?: string | null;
+    fontFamily?: string | null;
+    lineHeight?: string | null;
+    letterSpacing?: string | null;
+  },
+): string | null {
+  for (const check of RTE_MARK_PROPERTY_CHECKS) {
+    const err = check(path, attrs as NonNullable<TiptapMark['attrs']>);
+
+    if (err) return err;
+  }
+
+  return null;
+}
+
+function validateRteMarkStyle(
+  path: string,
+  attrs: NonNullable<TiptapMark['attrs']>,
+): string | null {
+  return validateStringStyleAttrs(path, attrs);
+}
+
+function validateRteDocument(
+  fieldLabel: string,
+  doc: TiptapDocument,
+): string | null {
+  for (const block of doc.content) {
+    for (const node of block.content ?? []) {
+      if (node.type !== 'text') continue;
+
+      for (const mark of node.marks ?? []) {
+        if (mark.type !== 'textStyle' || !mark.attrs) continue;
+
+        const err = validateRteMarkStyle(fieldLabel, mark.attrs);
+
+        if (err) return err;
+      }
+    }
+  }
+
+  return null;
+}
+
+// ─── Public check API ─────────────────────────────────────────────────────────
+
+export interface ValidationContext {
+  brandPageType?: string;
+  mode?: 'create' | 'update';
+}
+
+/**
+ * A pure validation check: record + context → one error string or null.
+ * All checks operate on Record<string, unknown> — no concrete section type casting.
+ */
+export type SectionCheck = (
+  record: Record<string, unknown>,
+  ctx: ValidationContext,
+) => string | null;
+
+// ─── Check factories ──────────────────────────────────────────────────────────
+
+export const textCheck =
+  (field: string, max: number): SectionCheck =>
+  (record) => {
+    const value = record[field];
+
+    if (value == null) return null;
+
+    const text = isTiptapDocument(value)
+      ? extractPlainText(value)
+      : String(value);
+
+    return text.length > max
+      ? `"${field}" exceeds the maximum length of ${max} characters (got ${text.length})`
+      : null;
+  };
+
+export const styleCheck =
+  (field: string): SectionCheck =>
+  (record) => {
+    const value = record[field];
+
+    if (value == null || typeof value !== 'object') return null;
+
+    const errs = validateStyleArgs(field, value as TextStyleArguments);
+
+    return errs[0] ?? null;
+  };
+
+export const rteStyleCheck =
+  (field: string): SectionCheck =>
+  (record) => {
+    const value = record[field];
+
+    if (!isTiptapDocument(value)) return null;
+
+    return validateRteDocument(field, value);
+  };
+
+export const itemTextCheck =
+  (arrayField: string, itemField: string, max: number): SectionCheck =>
+  (record) => {
+    const items = record[arrayField];
+
+    if (!Array.isArray(items)) return null;
+
+    for (let i = 0; i < items.length; i++) {
+      const value = (items[i] as Record<string, unknown>)[itemField];
+
+      if (value == null) continue;
+
+      const text = isTiptapDocument(value)
+        ? extractPlainText(value)
+        : String(value);
+
+      if (text.length > max) {
+        return `"${arrayField}[${i}].${itemField}" exceeds the maximum length of ${max} characters (got ${text.length})`;
+      }
+    }
+
+    return null;
+  };
+
+export const itemStyleCheck =
+  (arrayField: string, itemField: string): SectionCheck =>
+  (record) => {
+    const items = record[arrayField];
+
+    if (!Array.isArray(items)) return null;
+
+    for (let i = 0; i < items.length; i++) {
+      const value = (items[i] as Record<string, unknown>)[itemField];
+
+      if (value == null || typeof value !== 'object') continue;
+
+      const errs = validateStyleArgs(
+        `${arrayField}[${i}].${itemField}`,
+        value as TextStyleArguments,
+      );
+
+      if (errs[0]) return errs[0];
+    }
+
+    return null;
+  };
+
+export const itemRteStyleCheck =
+  (arrayField: string, itemField: string): SectionCheck =>
+  (record) => {
+    const items = record[arrayField];
+
+    if (!Array.isArray(items)) return null;
+
+    for (let i = 0; i < items.length; i++) {
+      const value = (items[i] as Record<string, unknown>)[itemField];
+
+      if (!isTiptapDocument(value)) continue;
+
+      const err = validateRteDocument(
+        `${arrayField}[${i}].${itemField}`,
+        value,
+      );
+
+      if (err) return err;
+    }
+
+    return null;
+  };
+
+export const enumCheck =
+  (field: string, allowed: readonly string[], label?: string): SectionCheck =>
+  (record) => {
+    const value = record[field];
+
+    if (value == null) return null;
+
+    return !allowed.includes(value as string)
+      ? `"${field}" value "${value}" is not valid${label ? ` for "${label}"` : ''}. Valid values: ${allowed.join(', ')}`
+      : null;
+  };
+
+export const itemCapCheck =
+  (cap: ItemCapRule, label?: string): SectionCheck =>
+  (record, ctx) => {
+    if (ctx.brandPageType == null) return null;
+
+    const shouldCheck =
+      ctx.mode === 'create' ||
+      (ctx.mode === 'update' &&
+        (record['_replace_items'] as boolean | undefined));
+
+    if (!shouldCheck) return null;
+
+    const items = record[cap.arrayField];
+    const limit =
+      ctx.brandPageType === 'brandSite' ? cap.brandSite : cap.brandPage;
+
+    return Array.isArray(items) && items.length > limit
+      ? `"${cap.arrayField}" has ${items.length} items but "${label ?? 'section'}" supports a maximum of ${limit}`
+      : null;
+  };
+
+/**
+ * Runs an array of SectionChecks against the given args and context.
+ * Returns all non-null error strings.
+ */
+export function runChecks(
+  checks: SectionCheck[],
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return checks.flatMap((check) => {
+    const err = check(args, ctx);
+
+    return err ? [err] : [];
+  });
+}
+
+// ─── Logo size regex (compiled once at module init) ───────────────────────────
+
+const LOGO_SIZE_REGEX = new RegExp(
+  `^(\\d+(?:\\.\\d+)?)${LOGO_SIZE_RULES.unit}$`,
+);
+
+// ─── Shared field validators ──────────────────────────────────────────────────
+
+/**
+ * Validates a logo size value against LOGO_SIZE_RULES for the given viewport.
+ * The value must use "rem" units and fall within the viewport-specific bounds.
+ * Returns an error string, or null if valid / absent.
+ */
+export function validateLogoSize(
+  fieldLabel: string,
+  value: string | undefined | null,
+  viewport: 'desktop' | 'mobile',
+): string | null {
+  if (value == null) return null;
+
+  const match = value.trim().toLowerCase().match(LOGO_SIZE_REGEX);
+
+  if (!match) {
+    return `"${fieldLabel}" must use "${LOGO_SIZE_RULES.unit}" units (got "${value}")`;
+  }
+
+  const num = parseFloat(match[1]);
+  const { min, max } = LOGO_SIZE_RULES[viewport];
+
+  if (num < min || num > max) {
+    return `"${fieldLabel}" ${value} is out of bounds (${min}rem–${max}rem)`;
+  }
+
+  return null;
+}

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -146,14 +146,11 @@ export default defineComponent({
       }
 
       // Send MixPanel add event
-      this.eventTracker.sendWebsiteEvent({
-        eventName: EVENTS.WEBSITE_MAKER_ADD_CONTENT,
-        eventProps: {
-          content_category: option.category,
-          content_type: option.type,
-          select_location: SELECT_LOCATIONS.SIDEBAR,
-        },
-      });
+      this.eventTracker.sendAddContentEvent(
+        option.type,
+        SELECT_LOCATIONS.SIDEBAR,
+        option.category,
+      );
 
       if (option.displayMode === 'focused') {
         this.contentSettingsStore.pushMode({
@@ -212,14 +209,11 @@ export default defineComponent({
       this.contentSettingsStore.deleteItem(payload);
 
       // Send MixPanel remove event
-      this.eventTracker.sendWebsiteEvent({
-        eventName: EVENTS.WEBSITE_MAKER_REMOVE_CONTENT,
-        eventProps: {
-          content_category: this.contentSettingsStore.getContentCategory(type),
-          content_type: type,
-          select_location: SELECT_LOCATIONS.SIDEBAR,
-        },
-      });
+      this.eventTracker.sendRemoveContentEvent(
+        type,
+        SELECT_LOCATIONS.SIDEBAR,
+        this.contentSettingsStore.getContentCategory(type),
+      );
     },
     onManagePageButtonClick(): void {
       this.contentSettingsStore.pushMode({

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -32,7 +32,6 @@ export const Sample = (): any => {
     canUseGettyVideos: true,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
-    canUseAITextGenerator: true,
   };
 
   const pinia = setupStoryPinia();