@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/metadata-builder/builders/global-font-propagation.ts

@@ -1,238 +0,0 @@
-import type { JSONContent } from '@tiptap/vue-3';
-import type { BrandPageModel, Content } from '../../brand-page/models';
-import type { TextStyleDeclaration } from '../../brand-page/models';
-import { hasRTEContent } from '../../brand-page-maker/utils';
-import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { applyStyleToRTEText } from '../helpers/rte.helpers';
-import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
-import { isTiptapDocument } from '../parsers/section-tool-arguments';
-
-/**
- * Propagation of AI global font-family changes into existing section content.
- *
- * A `tool_update_global_styles` call merges new per-category font families into
- * `styles.textStyles.textStyleOptions` — but only content whose style is still
- * bound to a preset (`textStyleType`) follows that change. Template-authored
- * content carries detached `*Style` objects AND inline `font-family` marks in
- * its RTE HTML, both of which override the preset at render time, so a global
- * font change was invisible on most templates (BP-5780 ISSUE-01).
- *
- * This module walks every page's contents and, for each text field whose
- * resolved category received a new family, aligns the detached style object and
- * rewrites the RTE field's inline font-family marks. Preset-bound styles are NOT
- * detached — they already follow the preset; only their RTE inline marks are
- * rewritten (the marks would otherwise still win over the preset).
- *
- * RTE fields come in two shapes: legacy inline HTML strings (rewritten through
- * the headless Tiptap editor) and the migrated Tiptap JSON document (rewritten
- * in place — `textStyle` mark attrs). Missing the JSON shape left every mark on
- * the old family while the `*Style` objects moved (BP-6079).
- */
-
-export type GlobalFontCategory =
-  | 'titles'
-  | 'headings'
-  | 'paragraphs'
-  | 'buttons';
-
-/**
- * Default category per text field when its style is detached (no `textStyleType`).
- * Mirrors the AI service's slot→category stamping (titles←h1, headings←h2-h4,
- * paragraphs←body, buttons←button). `title` upgrades to `titles` on banner
- * sections (the hero headline) via `resolveFieldCategory`.
- */
-const FIELD_DEFAULT_CATEGORY: Record<string, GlobalFontCategory> = {
-  title: 'headings',
-  heading: 'headings',
-  name: 'headings',
-  description: 'paragraphs',
-  paragraph: 'paragraphs',
-  text: 'paragraphs',
-  testimonial: 'paragraphs',
-  position: 'paragraphs',
-  question: 'headings',
-  answer: 'paragraphs',
-  buttonText: 'buttons',
-  successMessage: 'paragraphs',
-};
-
-const CATEGORIES: readonly GlobalFontCategory[] = [
-  'titles',
-  'headings',
-  'paragraphs',
-  'buttons',
-];
-
-const isPlainObject = (v: unknown): v is Record<string, unknown> =>
-  !!v && typeof v === 'object' && !Array.isArray(v);
-
-/** Extract the per-category families this AI call actually changes. */
-export const collectChangedFontFamilies = (
-  textStyles: UpdateGlobalStylesArguments['textStyles'],
-): Partial<Record<GlobalFontCategory, string>> => {
-  const changed: Partial<Record<GlobalFontCategory, string>> = {};
-
-  if (!textStyles) return changed;
-
-  for (const category of CATEGORIES) {
-    const family = textStyles.textStyleOptions?.[category]?.style?.fontFamily;
-
-    if (typeof family === 'string' && family.trim()) {
-      changed[category] = family;
-    }
-  }
-
-  // Base text family covers paragraphs when no explicit paragraphs entry came in.
-  if (
-    !changed.paragraphs &&
-    typeof textStyles.textFontFamily === 'string' &&
-    textStyles.textFontFamily.trim()
-  ) {
-    changed.paragraphs = textStyles.textFontFamily;
-  }
-
-  return changed;
-};
-
-const resolveFieldCategory = (
-  fieldName: string,
-  style: unknown,
-  content: Content,
-): GlobalFontCategory | undefined => {
-  const preset = isPlainObject(style)
-    ? (style.textStyleType as GlobalFontCategory | undefined)
-    : undefined;
-
-  if (preset && CATEGORIES.includes(preset)) return preset;
-
-  if (fieldName === 'title' && content.type === 'banner-section') {
-    return 'titles';
-  }
-
-  return FIELD_DEFAULT_CATEGORY[fieldName];
-};
-
-/** `testimonialsStyle` → `testimonial`, `titleStyle` → `title`. */
-const styleKeyToFieldName = (styleKey: string): string => {
-  const base = styleKey.slice(0, -'Style'.length);
-
-  return base.endsWith('s') && !(base in FIELD_DEFAULT_CATEGORY)
-    ? base.slice(0, -1)
-    : base;
-};
-
-export type ApplyFontToRTE = (text: string, fontFamily: string) => string;
-
-/**
- * Rewrite the `fontFamily` attr of every `textStyle` mark in a Tiptap document.
- * Only marks that already carry a family are touched: a run without one inherits
- * the (already updated) `*Style` / preset at render, so adding a mark would pin
- * it needlessly.
- */
-export const applyFontToTiptapDoc = (
-  doc: JSONContent,
-  fontFamily: string,
-): JSONContent => {
-  const visit = (node: JSONContent): JSONContent => {
-    const marks = node.marks?.map((mark) =>
-      mark.type === 'textStyle' && mark.attrs?.fontFamily
-        ? { ...mark, attrs: { ...mark.attrs, fontFamily } }
-        : mark,
-    );
-    const content = node.content?.map(visit);
-
-    return {
-      ...node,
-      ...(marks ? { marks } : {}),
-      ...(content ? { content } : {}),
-    };
-  };
-
-  return visit(doc);
-};
-
-const walkRecord = (
-  record: Record<string, unknown>,
-  content: Content,
-  changed: Partial<Record<GlobalFontCategory, string>>,
-  applyFont: ApplyFontToRTE,
-): void => {
-  for (const [key, value] of Object.entries(record)) {
-    if (key.endsWith('Style') && isPlainObject(value)) {
-      // Detached style objects carry their own fontFamily override — align it.
-      // Preset-bound styles keep following the preset (never detach here).
-      const category = resolveFieldCategory(
-        styleKeyToFieldName(key),
-        value,
-        content,
-      );
-      const family = category ? changed[category] : undefined;
-
-      if (family && !value.textStyleType) {
-        (value as TextStyleDeclaration).fontFamily =
-          family as TextStyleDeclaration['fontFamily'];
-      }
-    } else if (key in FIELD_DEFAULT_CATEGORY && hasRTEContent(value)) {
-      // Inline RTE marks override every style layer at render — rewrite them.
-      const category = resolveFieldCategory(
-        key,
-        record[`${key}Style`],
-        content,
-      );
-      const family = category ? changed[category] : undefined;
-
-      if (family) {
-        record[key] = isTiptapDocument(value)
-          ? applyFontToTiptapDoc(value, family)
-          : applyFont(value as string, family);
-      }
-    } else if (Array.isArray(value)) {
-      for (const item of value) {
-        if (isPlainObject(item)) {
-          walkRecord(item, content, changed, applyFont);
-        }
-      }
-    }
-  }
-};
-
-/**
- * Walk every page's contents and propagate the changed families.
- * `applyFont` is injectable for tests; the default rewrites inline marks via
- * the external Tiptap editor.
- */
-export const propagateFontFamiliesToContents = (
-  model: BrandPageModel,
-  changed: Partial<Record<GlobalFontCategory, string>>,
-  applyFont?: ApplyFontToRTE,
-): void => {
-  if (!Object.keys(changed).length) return;
-
-  let editor:
-    | ReturnType<typeof useExternalRichTextEditor>['externalEditor']
-    | undefined;
-  const apply: ApplyFontToRTE =
-    applyFont ??
-    ((text, fontFamily) => {
-      editor = editor ?? useExternalRichTextEditor().externalEditor;
-
-      return applyStyleToRTEText(editor, text, {
-        fontFamily,
-      } as TextStyleDeclaration);
-    });
-
-  try {
-    for (const page of model.pages) {
-      for (const content of page.contents) {
-        walkRecord(
-          content as unknown as Record<string, unknown>,
-          content,
-          changed,
-          apply,
-        );
-      }
-    }
-  } finally {
-    editor?.destroy();
-  }
-};

package/src/shared/style-settings/components/StyleSettingsSection.vue

@@ -1,8 +0,0 @@
-<template>
-  <div
-    data-component="style-settings-section"
-    class="tw-flex tw-items-center tw-justify-between tw-pb-4 tw-mb-4 tw-border-b tw-border-solid tw-border-grayscale-500 tw-px-1"
-  >
-    <slot />
-  </div>
-</template>