@designcrowd/library.brand-page 6.0.26-json-prereq-2 → 6.0.27-websitev2-dev-1

package/lib/src/metadata-builder/builders/section-field-utils.d.ts

@@ -53,5 +53,10 @@ export declare const resolveGlobalPresetIntoStyle: (style: object | undefined, t
  * updates without re-resolving a preset.
  */
 export declare const applyDetachedStyleOverride: <T extends object>(current: T | undefined, updates: Partial<T>, textStyleOptions: TextStyleOptions | undefined) => T;
-export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions) => void;
+/**
+ * Rewrites the stored RTE HTML's inline colour marks. Injectable for tests;
+ * the default uses the external Tiptap editor (font-propagation precedent).
+ */
+export type ApplyColorToRTE = (html: string, color: string) => string;
+export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions, applyColor?: ApplyColorToRTE) => void;
 export {};

package/lib/src/metadata-builder/builders/section-field-utils.js

@@ -1,5 +1,8 @@
 import { BUTTON_LINK_TYPE } from '../../brand-page/models';
 import { isTiptapDocument, } from '../parsers/section-tool-arguments';
+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 { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 const isUrlField = (aiKey) => aiKey.endsWith('_url');
 export const isValidUrl = (value) => {
@@ -117,22 +120,55 @@ export const applyDetachedStyleOverride = (current, updates, textStyleOptions) =
     ...resolveGlobalPresetIntoStyle(current, textStyleOptions),
     ...updates,
 });
-export const applyStyleFields = (content, args, sectionType, textStyleOptions) => {
+export const applyStyleFields = (content, args, sectionType, textStyleOptions, applyColor) => {
     const styleMap = getStyleFieldMap(sectionType);
     if (!styleMap)
         return;
     const record = content;
-    for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-        if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
-            continue;
-        const aiStyle = args[aiKey];
-        const filtered = {};
-        for (const [k, v] of Object.entries(aiStyle)) {
-            const normalized = normalizeStyleValue(k, v);
-            if (normalized !== undefined)
-                filtered[k] = normalized;
+    let editor;
+    const applyColorToHtml = applyColor ??
+        ((html, color) => {
+            editor = editor ?? useExternalRichTextEditor().externalEditor;
+            return applyStyleToRTEText(editor, html, {
+                color,
+            });
+        });
+    try {
+        for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+            if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
+                continue;
+            const aiStyle = args[aiKey];
+            const filtered = {};
+            for (const [k, v] of Object.entries(aiStyle)) {
+                const normalized = normalizeStyleValue(k, v);
+                if (normalized !== undefined)
+                    filtered[k] = normalized;
+            }
+            const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
+            record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+            // A colour patch without new text leaves the field's EXISTING inline
+            // textStyle marks in place — and inline marks override every style layer
+            // at render, so the old colour survives on a recoloured band (invisible
+            // text, AI QA 2026-07-05 rerun). Propagate the new colour into the
+            // stored HTML, mirroring global-font-propagation for font families.
+            const textKey = modelKey.endsWith('Style')
+                ? modelKey.slice(0, -'Style'.length)
+                : undefined;
+            const textAiKey = aiKey.endsWith('_style')
+                ? aiKey.slice(0, -'_style'.length)
+                : undefined;
+            const newColor = filtered.color;
+            if (textKey &&
+                typeof newColor === 'string' &&
+                newColor &&
+                !(textAiKey && textAiKey in args) &&
+                typeof record[textKey] === 'string' &&
+                hasRTEContent(record[textKey])) {
+                record[textKey] = applyColorToHtml(record[textKey], newColor);
+            }
         }
-        const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
-        record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+    }
+    finally {
+        editor?.destroy();
     }
 };

package/lib/src/metadata-builder/builders/section-rules/support-me.rules.d.ts

@@ -0,0 +1,2 @@
+import { type ValidationContext } from '../../sanitizers/section-args-validator';
+export declare function validateSupportMe(args: Record<string, unknown>, ctx: ValidationContext): string[];

package/lib/src/metadata-builder/builders/section-rules/support-me.rules.js

@@ -0,0 +1,17 @@
+import { MAX_TITLE_LENGTH, MAX_DESCRIPTION_LENGTH, } from '../../../brand-page/constants/font.constants';
+import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../../brand-page/constants';
+import { enumCheck, runChecks, styleCheck, textCheck, } from '../../sanitizers/section-args-validator';
+const CHECKS = [
+    textCheck('title', MAX_TITLE_LENGTH),
+    textCheck('description', MAX_DESCRIPTION_LENGTH),
+    textCheck('success_message', MAX_DESCRIPTION_LENGTH),
+    styleCheck('title_style'),
+    styleCheck('heading_style'),
+    styleCheck('description_style'),
+    styleCheck('item_text_style'),
+    styleCheck('button_text_style'),
+    enumCheck('display_style', [DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED], 'support-me'),
+];
+export function validateSupportMe(args, ctx) {
+    return runChecks(CHECKS, args, ctx);
+}

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

@@ -0,0 +1,17 @@
+import { type BrandPageModel } from '../../brand-page/models';
+import type { Logger } from '../logger';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+export interface UpdateTextPayload {
+    contentId: string;
+    fieldName: string;
+    newText: string;
+    maxCharacters?: number;
+}
+export declare const buildUpdateTextRequest: (id: string, payload: UpdateTextPayload) => MetadataBuilderRequest<UpdateTextPayload>;
+export declare class UpdateContentTextBuilder extends BaseMetadataBuilder<UpdateTextPayload> {
+    constructor(request: MetadataBuilderRequest<UpdateTextPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/update-content-text-builder.js

@@ -0,0 +1,103 @@
+import {} from '../../brand-page/models';
+import { BaseMetadataBuilder, BUILDER_TYPES, } from '../models';
+import { hasRTEContent, replaceTextInRTE } from '../../brand-page-maker/utils';
+export const buildUpdateTextRequest = (id, payload) => {
+    return {
+        id,
+        type: BUILDER_TYPES.UPDATE_CONTENT_TEXT,
+        payload,
+    };
+};
+const updateTextField = (target, fieldName, newText) => {
+    // Check if this is an array item path like "textItems.0.text"
+    const match = fieldName.match(/^(\w+)\.(\d+)\.(\w+)$/);
+    if (match) {
+        const [, arrayName, index, property] = match;
+        const array = target[arrayName];
+        if (Array.isArray(array) && array[+index]) {
+            const existingText = array[+index][property];
+            const updatedValue = existingText &&
+                typeof existingText === 'string' &&
+                hasRTEContent(existingText)
+                ? replaceTextInRTE(existingText, newText)
+                : newText;
+            // Create a new array with the updated item to trigger reactivity
+            const newArray = [...array];
+            newArray[+index] = {
+                ...newArray[+index],
+                [property]: updatedValue,
+            };
+            target[arrayName] = newArray;
+        }
+    }
+    else {
+        // Simple field
+        const existingText = target[fieldName];
+        if (existingText &&
+            typeof existingText === 'string' &&
+            hasRTEContent(existingText)) {
+            target[fieldName] = replaceTextInRTE(existingText, newText);
+        }
+        else {
+            target[fieldName] = newText;
+        }
+    }
+};
+export class UpdateContentTextBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    validateAsync() {
+        const newText = this.request.payload?.newText ?? '';
+        const errors = [];
+        const maxChars = this.request.payload?.maxCharacters ?? 2000;
+        if (newText.length > maxChars) {
+            errors.push(`Text exceeds maximum allowed length of ${maxChars}`);
+        }
+        this.log({
+            message: `Validation called`,
+            errors,
+        });
+        return Promise.resolve({ errors: errors });
+    }
+    async buildAsync(model) {
+        this.log(`Build called`);
+        const { contentId, fieldName, newText } = this.request.payload;
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return {
+                request: this.request,
+                model,
+                errors: validation.errors,
+            };
+        }
+        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,
+                    });
+                    updateTextField(content, fieldName, newText);
+                    this.log({
+                        message: `Successfully updated text content.`,
+                        model,
+                    });
+                    updated = true;
+                    break;
+                }
+            }
+        }
+        return {
+            request: this.request,
+            model,
+            errors: updated
+                ? undefined
+                : [
+                    `Could not update the text because content with ID "${contentId}" not found.`,
+                ],
+        };
+    }
+}

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

@@ -0,0 +1,16 @@
+import { type BrandPageModel, type TextStyleDeclaration } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface UpdateTextStylePayload {
+    contentId: string;
+    fieldName: string;
+    newStyles: TextStyleDeclaration;
+}
+export declare const buildUpdateTextStyleRequest: (id: string, payload: UpdateTextStylePayload) => MetadataBuilderRequest<UpdateTextStylePayload>;
+export declare class UpdateContentTextStyleBuilder extends BaseMetadataBuilder<UpdateTextStylePayload> {
+    constructor(request: MetadataBuilderRequest<UpdateTextStylePayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

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

@@ -0,0 +1,216 @@
+import {} from '../../brand-page/models';
+import { BaseMetadataBuilder, BUILDER_TYPES, } from '../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 { letterSpacingValueConvertor } from '../../brand-page-maker/convertors/letter-spacing-value.convertor';
+export const buildUpdateTextStyleRequest = (id, payload) => {
+    return {
+        id,
+        type: BUILDER_TYPES.UPDATE_CONTENT_TEXT_STYLE,
+        payload,
+    };
+};
+const mergeStyles = (currentStyle, stylesToUpdate, textStyleOptions) => {
+    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[key] = value;
+    });
+    return merged;
+};
+const updateRTEText = (text, style) => {
+    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, property) => {
+    // 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, property, stylesToUpdate, 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, fieldName, index, property, stylesToUpdate, textStyleOptions) => {
+    const currentContentItems = content[fieldName];
+    if (!Array.isArray(currentContentItems) || !currentContentItems[+index])
+        return;
+    const contentItem = currentContentItems[+index];
+    const styleKey = `${property}Style`;
+    const currentStyle = contentItem[styleKey] || {};
+    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, fieldName, stylesToUpdate, 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] || {};
+        const mergedStyle = mergeStyles(currentStyle, stylesToUpdate, textStyleOptions);
+        content[styleKey] = mergedStyle;
+        content[fieldName] = updateRTEText(content[fieldName], mergedStyle);
+    }
+};
+export class UpdateContentTextStyleBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    validateAsync() {
+        const { newStyles } = this.request.payload;
+        const errors = [];
+        // 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) {
+        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 = Object.entries(newStyles).reduce((acc, [key, value]) => {
+            if (value !== undefined) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        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/lib/src/metadata-builder/helpers/rte.helpers.d.ts

@@ -1,18 +1,20 @@
+import type { TextStyleDeclaration } from '../../brand-page';
+import type { Editor } from '@tiptap/vue-3';
+export declare const applyStyleToRTEText: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;
 /**
  * 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 declare const tiptapJsonToHtml: (value: unknown) => string;

package/lib/src/metadata-builder/helpers/rte.helpers.js

@@ -1,26 +1,85 @@
-import { renderRteToHtml } from '../../brand-page-maker/utils';
-import { isTiptapDocument } from '../parsers/section-tool-arguments';
+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 { isTiptapDocument, } from '../parsers/section-tool-arguments';
+export const applyStyleToRTEText = (externalEditor, contentText, newContentStyle) => {
+    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) => {
     if (typeof value === 'string')
         return value;
     if (!isTiptapDocument(value))
         return '';
-    return renderRteToHtml(value);
+    const { externalEditor } = useExternalRichTextEditor();
+    externalEditor.commands.setContent(value);
+    const html = externalEditor.getHTML();
+    externalEditor.destroy();
+    return html;
 };

package/lib/src/metadata-builder/metadata-executor.js

@@ -1,7 +1,9 @@
 import cloneDeep from 'lodash.clonedeep';
 import {} from '../brand-page/models';
 import { BUILDER_TYPES, } from './models';
-import { BannerSectionBuilder, BookingSectionBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
+import { UpdateContentTextBuilder } from './builders/update-content-text-builder';
+import { UpdateContentTextStyleBuilder } from './builders/update-content-text-style-builder';
+import { BannerSectionBuilder, BookingSectionBuilder, SupportMeBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
 import { AddPageBuilder } from './builders/add-page-builder';
 import { RemovePageBuilder } from './builders/remove-page-builder';
 import { RenamePageBuilder } from './builders/rename-page-builder';
@@ -13,9 +15,12 @@ import { HeaderBuilder } from './builders/header-builder';
 import { UndoBuilder } from './builders/undo-builder';
 // Lazy initialization to avoid circular dependency issues
 const getBuilderRegistry = () => ({
+    [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,
+    [BUILDER_TYPES.CREATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.CREATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.CREATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.CREATE_DIVIDER_SECTION]: DividerSectionBuilder,
@@ -42,6 +47,7 @@ const getBuilderRegistry = () => ({
     // Section builders (update)
     [BUILDER_TYPES.UPDATE_BANNER_SECTION]: BannerSectionBuilder,
     [BUILDER_TYPES.UPDATE_BOOKING_SECTION]: BookingSectionBuilder,
+    [BUILDER_TYPES.UPDATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.UPDATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.UPDATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.UPDATE_DIVIDER_SECTION]: DividerSectionBuilder,

package/lib/src/metadata-builder/models.d.ts

@@ -2,6 +2,8 @@ import { type BrandPageModel } from '../brand-page/models';
 import type { EventTracker } from '../brand-page-maker/composables/useEventTracker';
 import type { Logger } from './logger';
 export declare const BUILDER_TYPES: {
+    readonly UPDATE_CONTENT_TEXT: "update-content-text";
+    readonly UPDATE_CONTENT_TEXT_STYLE: "update-content-text-style";
     readonly CREATE_BANNER_SECTION: "create-banner-section";
     readonly CREATE_ABOUT_SECTION: "create-about-section";
     readonly CREATE_CONTACT_FORM: "create-contact-form";
@@ -27,6 +29,7 @@ export declare const BUILDER_TYPES: {
     readonly CREATE_TWITCH: "create-twitch";
     readonly CREATE_TIKTOK: "create-tiktok";
     readonly CREATE_BOOKING_SECTION: "create-booking-section";
+    readonly CREATE_SUPPORT_ME: "create-support-me";
     readonly UPDATE_BANNER_SECTION: "update-banner-section";
     readonly UPDATE_ABOUT_SECTION: "update-about-section";
     readonly UPDATE_CONTACT_FORM: "update-contact-form";
@@ -52,6 +55,7 @@ export declare const BUILDER_TYPES: {
     readonly UPDATE_TWITCH: "update-twitch";
     readonly UPDATE_TIKTOK: "update-tiktok";
     readonly UPDATE_BOOKING_SECTION: "update-booking-section";
+    readonly UPDATE_SUPPORT_ME: "update-support-me";
     readonly DELETE_SECTION: "delete-section";
     readonly MOVE_SECTION: "move-section";
     readonly ADD_PAGE: "add-page";