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

package/src/metadata-builder/builders/update-content-text-style-builder.ts

@@ -0,0 +1,352 @@
+import {
+  type BrandPageModel,
+  type Content,
+  type TextStyleDeclaration,
+  type TextStyleOptions,
+} from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  BUILDER_TYPES,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import { hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import type { Logger } from '../logger';
+import { applyStyleToRTEText } from '../helpers/rte.helpers';
+import { letterSpacingValueConvertor } from '../../brand-page-maker/convertors/letter-spacing-value.convertor';
+
+export interface UpdateTextStylePayload {
+  contentId: string;
+  fieldName: string;
+  newStyles: TextStyleDeclaration;
+}
+
+export const buildUpdateTextStyleRequest = (
+  id: string,
+  payload: UpdateTextStylePayload,
+): MetadataBuilderRequest<UpdateTextStylePayload> => {
+  return {
+    id,
+    type: BUILDER_TYPES.UPDATE_CONTENT_TEXT_STYLE,
+    payload,
+  };
+};
+
+const mergeStyles = (
+  currentStyle: Partial<TextStyleDeclaration>,
+  stylesToUpdate: TextStyleDeclaration,
+  textStyleOptions?: TextStyleOptions,
+): Partial<TextStyleDeclaration> => {
+  let merged = { ...currentStyle };
+
+  // If content uses a textStyleType preset (e.g. "titles"), resolve the preset
+  // styles into the style object before clearing the preset reference.
+  // This ensures properties like fontSize, fontFamily etc. are preserved
+  // when the AI only changes a single property like color.
+  if (merged.textStyleType && textStyleOptions?.[merged.textStyleType]) {
+    const presetStyle = textStyleOptions[merged.textStyleType].style;
+
+    merged = { ...merged, ...presetStyle };
+    merged.textStyleType = undefined;
+  }
+
+  Object.entries(stylesToUpdate).forEach(([key, value]) => {
+    if (value === null) {
+      // backgroundColor: null means "remove background color"
+      if (key === 'backgroundColor') {
+        merged.backgroundColor = '';
+      }
+
+      // All other null values mean "not changed" — skip to preserve existing values
+      return;
+    }
+
+    (merged as Record<string, unknown>)[key] = value;
+  });
+
+  return merged;
+};
+
+const updateRTEText = (text: string, style: TextStyleDeclaration): string => {
+  if (!text || typeof text !== 'string' || !hasRTEContent(text)) {
+    return text;
+  }
+
+  const { externalEditor } = useExternalRichTextEditor();
+  const updatedText = applyStyleToRTEText(externalEditor, text, style);
+
+  externalEditor.destroy();
+
+  return updatedText;
+};
+
+const findStyleKey = (target: Content, property: string): string | null => {
+  // Try exact match first (e.g., 'testimonialsStyle')
+  const exactKey = `${property}Style`;
+
+  if (exactKey in target) return exactKey;
+
+  // Try singular form (e.g., 'testimonialStyle' for 'testimonials')
+  if (property.endsWith('s')) {
+    const singularKey = `${property.slice(0, -1)}Style`;
+
+    if (singularKey in target) return singularKey;
+  }
+
+  // Try plural form (edge case)
+  const pluralKey = `${property}sStyle`;
+
+  if (pluralKey in target) return pluralKey;
+
+  return exactKey; // fallback to exact match
+};
+
+const updateSharedArrayStyle = (
+  content: Content,
+  property: string,
+  stylesToUpdate: TextStyleDeclaration,
+  textStyleOptions?: TextStyleOptions,
+) => {
+  const styleKey = findStyleKey(content, property);
+
+  if (!styleKey) return;
+
+  const currentStyle = content[styleKey] || {};
+  const mergedStyle = mergeStyles(
+    currentStyle,
+    stylesToUpdate,
+    textStyleOptions,
+  );
+
+  content[styleKey] = mergedStyle;
+};
+
+const updateArrayItemStyle = (
+  content: Content,
+  fieldName: string,
+  index: number,
+  property: string,
+  stylesToUpdate: TextStyleDeclaration,
+  textStyleOptions?: TextStyleOptions,
+) => {
+  const currentContentItems = content[fieldName];
+
+  if (!Array.isArray(currentContentItems) || !currentContentItems[+index])
+    return;
+
+  const contentItem = currentContentItems[+index];
+  const styleKey = `${property}Style`;
+  const currentStyle =
+    (contentItem[styleKey] as Partial<TextStyleDeclaration>) || {};
+  const mergedStyle = mergeStyles(
+    currentStyle,
+    stylesToUpdate,
+    textStyleOptions,
+  );
+
+  const newContentItems = [...currentContentItems];
+
+  newContentItems[+index] = {
+    ...newContentItems[+index],
+    [styleKey]: mergedStyle,
+    [property]: updateRTEText(contentItem[property], mergedStyle),
+  };
+  content[fieldName] = newContentItems;
+};
+
+const updateTextStyle = (
+  content: Content,
+  fieldName: string,
+  stylesToUpdate: TextStyleDeclaration,
+  textStyleOptions?: TextStyleOptions,
+) => {
+  // Check if fieldName is in the format of "fieldName.index.fieldItem"
+  const matchFieldItems = fieldName.match(/^(\w+)\.(\d+)\.(.+)$/);
+
+  if (matchFieldItems) {
+    const [, fieldName, index, fieldItem] = matchFieldItems;
+    const array = content[fieldName];
+
+    if (!Array.isArray(array) || !array[+index]) return;
+
+    const item = array[+index];
+    const itemStyleKey = `${fieldItem}Style`;
+    const hasItemStyle = itemStyleKey in item;
+
+    if (hasItemStyle) {
+      updateArrayItemStyle(
+        content,
+        fieldName,
+        +index,
+        fieldItem,
+        stylesToUpdate,
+        textStyleOptions,
+      );
+    } else {
+      updateSharedArrayStyle(
+        content,
+        fieldItem,
+        stylesToUpdate,
+        textStyleOptions,
+      );
+    }
+  } else {
+    const styleKey = `${fieldName}Style`;
+    const currentStyle =
+      (content[styleKey] as Partial<TextStyleDeclaration>) || {};
+    const mergedStyle = mergeStyles(
+      currentStyle,
+      stylesToUpdate,
+      textStyleOptions,
+    );
+
+    content[styleKey] = mergedStyle;
+    content[fieldName] = updateRTEText(content[fieldName], mergedStyle);
+  }
+};
+
+export class UpdateContentTextStyleBuilder extends BaseMetadataBuilder<UpdateTextStylePayload> {
+  constructor(
+    request: MetadataBuilderRequest<UpdateTextStylePayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  validateAsync(): Promise<{ errors: string[] }> {
+    const { newStyles } = this.request.payload!;
+    const errors: string[] = [];
+
+    // Validate lineHeight: must be between 0 and 2.5 inclusive, snap to 0.1 step
+    if (newStyles.lineHeight !== undefined && newStyles.lineHeight !== null) {
+      const lineHeightValue = parseFloat(String(newStyles.lineHeight));
+
+      if (
+        isNaN(lineHeightValue) ||
+        lineHeightValue < 0 ||
+        lineHeightValue > 2.5
+      ) {
+        errors.push('Line height must be a value between 0 and 2.5 inclusive.');
+      } else {
+        // Snap to 0.1 increments to match the UI slider step
+        newStyles.lineHeight = String(Math.floor(lineHeightValue * 10) / 10);
+      }
+    }
+
+    // Validate and normalize letterSpacing: AI sends unitless 0-100, convert to em
+    if (
+      newStyles.letterSpacing !== undefined &&
+      newStyles.letterSpacing !== null
+    ) {
+      const letterSpacingStr = String(newStyles.letterSpacing);
+
+      if (/[a-zA-Z]/.test(letterSpacingStr)) {
+        errors.push(
+          'Letter spacing must be a unitless value between 0 and 100.',
+        );
+      } else {
+        const letterSpacingValue = parseFloat(letterSpacingStr);
+
+        if (
+          isNaN(letterSpacingValue) ||
+          letterSpacingValue < 0 ||
+          letterSpacingValue > 100
+        ) {
+          errors.push('Letter spacing must be between 0 and 100 inclusive.');
+        } else {
+          newStyles.letterSpacing = letterSpacingValueConvertor.convertBack(
+            String(letterSpacingValue),
+          ).letterSpacing;
+        }
+      }
+    }
+
+    // Validate fontSize: must be in 'em' unit and between 0.75em and 8em inclusive
+    if (newStyles?.fontSize != null) {
+      const fontSizeStr = String(newStyles.fontSize);
+      const fontSizeMatch = fontSizeStr.match(/^(-?\d*\.?\d+)em$/);
+
+      if (!fontSizeMatch) {
+        errors.push('Font size must be in "em" unit (e.g., "1.5em").');
+      } else {
+        const fontSizeValue = parseFloat(fontSizeMatch[1]);
+
+        if (isNaN(fontSizeValue) || fontSizeValue < 0.75 || fontSizeValue > 8) {
+          errors.push(
+            'Font size must be between 0.75em and 8em inclusive. If unitless from user always treat as px and convert to em using 16px = 1em ratio.',
+          );
+        }
+      }
+    }
+
+    return Promise.resolve({ errors });
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log(`Build called`);
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return {
+        request: this.request,
+        model,
+        errors: validation.errors,
+      };
+    }
+
+    const { contentId, fieldName, newStyles } = this.request.payload!;
+
+    // Filter out undefined values
+    const stylesToUpdate: TextStyleDeclaration = Object.entries(
+      newStyles,
+    ).reduce((acc, [key, value]) => {
+      if (value !== undefined) {
+        acc[key as keyof TextStyleDeclaration] = value;
+      }
+
+      return acc;
+    }, {} as TextStyleDeclaration);
+
+    let updated = false;
+
+    for (const page of model.pages) {
+      for (const content of page.contents) {
+        // Use includes to handle potential ID format differences
+        if (content.id.includes(contentId) || contentId.includes(content.id)) {
+          this.log({
+            message: `Content found`,
+            model,
+          });
+
+          updateTextStyle(
+            content,
+            fieldName,
+            stylesToUpdate,
+            model.styles?.textStyles?.textStyleOptions,
+          );
+
+          this.log({
+            message: `Successfully updated text style content.`,
+            model,
+          });
+
+          updated = true;
+
+          break;
+        }
+      }
+    }
+
+    return {
+      request: this.request,
+      model,
+      errors: updated
+        ? undefined
+        : [
+            `Could not update the text style because content with ID "${contentId}" not found.`,
+          ],
+    };
+  }
+}

package/src/metadata-builder/helpers/rte.helpers.ts

@@ -1,28 +1,114 @@
-import type { RichTextValue } from '../../brand-page';
-import { renderRteToHtml } from '../../brand-page-maker/utils';
-import { isTiptapDocument } from '../parsers/section-tool-arguments';
+import type { TextStyleDeclaration } from '../../brand-page';
+import { getRTEColor } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { getRenderText } from '../../brand-page/utils';
+import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
+import type { Editor } from '@tiptap/vue-3';
+import {
+  isTiptapDocument,
+  type TiptapDocument,
+} from '../parsers/section-tool-arguments';
+
+export const applyStyleToRTEText = (
+  externalEditor: Editor,
+  contentText: string,
+  newContentStyle: TextStyleDeclaration,
+) => {
+  if (!contentText) {
+    return contentText;
+  }
+
+  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+    ? getRenderText(contentText)
+    : contentText;
+
+  externalEditor.commands.setContent(content);
+
+  let chain = externalEditor.chain().selectAll();
+
+  if (newContentStyle?.fontFamily) {
+    chain = chain.setFontFamily(newContentStyle.fontFamily);
+  }
+
+  if (newContentStyle?.fontSize) {
+    chain = chain.setFontSize(newContentStyle.fontSize);
+  }
+
+  if (newContentStyle?.letterSpacing) {
+    chain = chain.setLetterSpacing(newContentStyle.letterSpacing);
+  }
+
+  if (newContentStyle?.lineHeight) {
+    chain = chain.setLineHeight(newContentStyle.lineHeight);
+  }
+
+  if (newContentStyle?.color) {
+    chain = chain.setMark('textStyle', {
+      color: getRTEColor(newContentStyle.color, 'text'),
+    });
+  }
+
+  // Handle backgroundColor
+  if ('backgroundColor' in (newContentStyle || {})) {
+    chain = newContentStyle.backgroundColor
+      ? chain.setMark('highlight', {
+          color: getRTEColor(newContentStyle.backgroundColor, 'background'),
+        })
+      : chain.unsetHighlight();
+  }
+
+  if (newContentStyle?.textAlign) {
+    chain = chain.setTextAlign(newContentStyle.textAlign);
+  }
+
+  const hasStrike = newContentStyle?.textDecoration?.includes('line-through');
+  const hasUnderline = newContentStyle?.textDecoration?.includes('underline');
+
+  chain = hasStrike ? chain.setStrike() : chain.unsetStrike();
+  chain = hasUnderline ? chain.setUnderline() : chain.unsetUnderline();
+
+  chain =
+    newContentStyle?.fontWeight === 'bold'
+      ? chain.setBold()
+      : chain.unsetBold();
+  chain =
+    newContentStyle?.fontStyle === 'italic'
+      ? chain.setItalic()
+      : chain.unsetItalic();
+
+  chain.run();
+  const html = externalEditor.getHTML();
+
+  return html;
+};
 
 /**
  * Converts a Tiptap JSON document (ProseMirror document model) to an HTML
- * string via Tiptap's schema-driven static renderer (renderRteToHtml →
- * renderToHTMLString). DOM-less and editor-free, so it runs on the server
- * (Nitro/Node), not just the browser — unlike the previous headless-Editor
- * implementation (BP-5787: the AI section builders no longer need a `document`).
+ * string using a headless Tiptap Editor instance.
  *
  * Returns the value unchanged if it is already a string.
- * Returns an empty string for null/undefined or any non-Tiptap-document value.
+ * Returns an empty string for null/undefined.
  *
- * Note: to prevent saved copy being wiped (BP-5669), structural validity of any
- * AI-emitted Tiptap doc is checked upstream by `rteSchemaCheck` in
- * `section-args-validator.ts` against the editor's real ProseMirror schema. The
- * validator surfaces a clear error into `BuilderResult.errors`, which the
- * AI-chat retry loop reads via `tool_result.errorMessage` and uses to re-emit a
- * corrected payload.
+ * Note: Tiptap's `setContent` does NOT throw on malformed input — it
+ * silently drops content and returns `<p></p>`. To prevent saved copy
+ * being wiped (BP-5669), structural validity of any AI-emitted Tiptap
+ * doc is checked upstream by `rteSchemaCheck` in
+ * `section-args-validator.ts` using the editor's real ProseMirror
+ * schema. The validator surfaces a clear error into
+ * `BuilderResult.errors`, which the AI-chat retry loop reads via
+ * `tool_result.errorMessage` and uses to re-emit a corrected payload.
  */
 export const tiptapJsonToHtml = (value: unknown): string => {
   if (typeof value === 'string') return value;
 
   if (!isTiptapDocument(value)) return '';
 
-  return renderRteToHtml(value as RichTextValue);
+  const { externalEditor } = useExternalRichTextEditor();
+
+  externalEditor.commands.setContent(value as TiptapDocument);
+  const html = externalEditor.getHTML();
+
+  externalEditor.destroy();
+
+  return html;
 };

package/src/metadata-builder/metadata-executor.ts

@@ -8,6 +8,8 @@ import {
   BUILDER_TYPES,
   type BuilderResult,
 } from './models';
+import { UpdateContentTextBuilder } from './builders/update-content-text-builder';
+import { UpdateContentTextStyleBuilder } from './builders/update-content-text-style-builder';
 import {
   BannerSectionBuilder,
   BookingSectionBuilder,
@@ -46,6 +48,9 @@ type BuilderConstructor = new (
 
 // Lazy initialization to avoid circular dependency issues
 const getBuilderRegistry = (): Record<BuilderType, BuilderConstructor> => ({
+  [BUILDER_TYPES.UPDATE_CONTENT_TEXT]: UpdateContentTextBuilder,
+  [BUILDER_TYPES.UPDATE_CONTENT_TEXT_STYLE]: UpdateContentTextStyleBuilder,
+
   // Section builders (create)
   [BUILDER_TYPES.CREATE_BANNER_SECTION]: BannerSectionBuilder,
   [BUILDER_TYPES.CREATE_BOOKING_SECTION]: BookingSectionBuilder,

package/src/metadata-builder/models.ts

@@ -3,6 +3,9 @@ import type { EventTracker } from '../brand-page-maker/composables/useEventTrack
 import type { Logger } from './logger';
 
 export const BUILDER_TYPES = {
+  UPDATE_CONTENT_TEXT: 'update-content-text',
+  UPDATE_CONTENT_TEXT_STYLE: 'update-content-text-style',
+
   // Per-section builder types (create)
   CREATE_BANNER_SECTION: 'create-banner-section',
   CREATE_ABOUT_SECTION: 'create-about-section',

package/src/metadata-builder/parsers/ai-toolcall-parser.ts

@@ -7,10 +7,15 @@ import type {
 import type { SectionType, TextStyleArguments } from './section-tool-arguments';
 
 // Tool names — must match the function names generated by the AI pipeline.
+// Text element tools use camelCase names.
 // Section tools follow the pattern: build_{sectionType}_section
 // where sectionType matches the ContentType value (e.g. 'banner-section', 'profile').
 // The mode ('create' | 'update') is a field in the tool arguments, not the tool name.
 export const AI_ASSISTANT_TOOL_NAMES = {
+  // Text element agent tools
+  UPDATE_TEXT: 'updateText',
+  UPDATE_STYLE: 'updateStyle',
+
   // Website builder agent tools — unified build
   BUILD_PROFILE_SECTION: 'build_profile_section',
   BUILD_TEXT_SECTION: 'build_text_section',
@@ -79,6 +84,28 @@ export interface ParsedToolCall {
   usage_type?: 'free' | 'paid';
 }
 
+export interface BaseArguments {
+  message?: string;
+}
+
+// updateText tool arguments
+export interface UpdateTextToolArguments extends BaseArguments {
+  contentId: string;
+  fieldName: string;
+  metadata: {
+    text: string;
+  };
+}
+
+// updateStyle tool arguments
+export interface UpdateStyleToolArguments extends BaseArguments {
+  contentId: string;
+  fieldName: string;
+  metadata: {
+    style: BrandPageCssStyle;
+  };
+}
+
 // Maps each section tool name to its SectionType.
 // Mode is now determined from the tool arguments, not the tool name.
 export const SECTION_TOOL_MAP: Record<string, { sectionType: SectionType }> = {

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

@@ -1,6 +1,16 @@
-import { getSchema } from '@tiptap/core';
-import type { Schema } from '@tiptap/pm/model';
-import { getRteExtensions } from '../../brand-page-maker/composables/rich-text-editor/getRteExtensions';
+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,
@@ -9,30 +19,45 @@ import {
 } from './section-args-validator';
 
 /**
- * The ProseMirror schema built from the SAME extension set the editor and
- * renderer use (`getRteExtensions`), so validation matches real editor output.
- * `getSchema` is DOM-less (no Editor instance) and the schema is pure, so it is
- * built once and cached.
- *
- * We import `getRteExtensions` (a leaf module — @tiptap + prosemirror only), not
- * the maker composable (`useExternalRichTextEditor`), which would pull in the
- * AI executor → section-builders → section-rules graph and re-enter this file
- * before its exports are bound.
+ * 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.
  */
-let cachedSchema: Schema | undefined;
-
-const getRteSchema = (): Schema =>
-  (cachedSchema ??= getSchema(getRteExtensions()));
+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 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).
+ * 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.
+ * 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 =>
@@ -41,14 +66,18 @@ export const rteSchemaCheck =
 
     if (!isTiptapDocument(value)) return null;
 
+    const editor = buildHeadlessEditor();
+
     try {
-      getRteSchema().nodeFromJSON(value);
+      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();
     }
   };