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

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,6 +1,8 @@
 import cloneDeep from 'lodash.clonedeep';
 import {} from '../brand-page/models';
 import { BUILDER_TYPES, } from './models';
+import { UpdateContentTextBuilder } from './builders/update-content-text-builder';
+import { UpdateContentTextStyleBuilder } from './builders/update-content-text-style-builder';
 import { BannerSectionBuilder, BookingSectionBuilder, 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';
@@ -13,6 +15,8 @@ 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,

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";

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

@@ -1,5 +1,7 @@
 import {} from '../brand-page/models';
 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/lib/src/metadata-builder/parsers/ai-toolcall-parser.d.ts

@@ -2,6 +2,8 @@ import type { AiAssistantToolCall } from '../../clients/ai-assistant-client';
 import type { FooterDisplayStyle, HeaderDisplayStyle, NavigationDisplayType } from '../../brand-page/constants';
 import type { SectionType, TextStyleArguments } from './section-tool-arguments';
 export declare const AI_ASSISTANT_TOOL_NAMES: {
+    readonly UPDATE_TEXT: "updateText";
+    readonly UPDATE_STYLE: "updateStyle";
     readonly BUILD_PROFILE_SECTION: "build_profile_section";
     readonly BUILD_TEXT_SECTION: "build_text_section";
     readonly BUILD_IMAGE_SECTION: "build_image_section";
@@ -47,6 +49,23 @@ export interface ParsedToolCall {
     arguments: Record<string, unknown>;
     usage_type?: 'free' | 'paid';
 }
+export interface BaseArguments {
+    message?: string;
+}
+export interface UpdateTextToolArguments extends BaseArguments {
+    contentId: string;
+    fieldName: string;
+    metadata: {
+        text: string;
+    };
+}
+export interface UpdateStyleToolArguments extends BaseArguments {
+    contentId: string;
+    fieldName: string;
+    metadata: {
+        style: BrandPageCssStyle;
+    };
+}
 export declare const SECTION_TOOL_MAP: Record<string, {
     sectionType: SectionType;
 }>;

package/lib/src/metadata-builder/parsers/ai-toolcall-parser.js

@@ -1,8 +1,12 @@
 // 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',

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

@@ -1,13 +1,14 @@
 import { type SectionCheck } from './section-args-validator';
 /**
- * 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 declare const rteSchemaCheck: (field: string) => SectionCheck;
 /**

package/lib/src/metadata-builder/sanitizers/rte-schema-check.js

@@ -1,42 +1,73 @@
-import { getSchema } from '@tiptap/core';
-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, textCheck, } 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;
-const getRteSchema = () => (cachedSchema ??= getSchema(getRteExtensions()));
+const buildHeadlessEditor = () => 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) => (record) => {
     const value = record[field];
     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();
+    }
 };
 /**
  * Returns [rteSchemaCheck(field), textCheck(field, max), rteStyleCheck(field)].

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.d.ts

@@ -83,13 +83,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import debounce from 'lodash.debounce';
 import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
-import { encodeContentText, getContentTextLength, unescapeContentText, } from '@brand-page/utils';
+import { encodeContentText, escapeContentText, unescapeContentText, } from '@brand-page/utils';
 import { genericTextInputTr } from '@src/composables/useTranslate';
 const DEBOUNCE_WAIT_MS = 100;
 export default defineComponent({
@@ -98,6 +98,7 @@ export default defineComponent({
             _oldValue: '',
             isDirty: false,
             emitChangeDebounce: undefined,
+            lengthError: false,
             // Whether every write in the current debounce burst was an RTE
             // hydration write-back (see UpdateItemValuePayload.isHydrationWrite).
             // undefined = no burst pending; any user write downgrades it to false.
@@ -117,26 +118,6 @@ export default defineComponent({
         isValid() {
             return this.settings?.isValid;
         },
-        // Derived from the current value + maxLength (not hand-synced in a watcher):
-        // stays correct when maxLength or showRichTextEditor change and on first
-        // render, and flips the instant `_value` updates rather than after the emit
-        // round-trips back through the `value` prop. `>=` (not `>`) because the RTE
-        // MaxLength extension hard-gates the length, so "reached the cap" is the
-        // signal to surface. Length is measured with getContentTextLength so it
-        // matches the editor's own char count (ProseMirror textContent) — NOT
-        // escapeContentText, whose space-join over-counts by one per mark boundary
-        // (e.g. hyperlinking a word), reporting length+1 at the cap (BP-5787).
-        lengthError() {
-            const value = this._value;
-            const maxLength = this.maxLength;
-            if (maxLength == null || value === false || value == null) {
-                return false;
-            }
-            const length = this.showRichTextEditor
-                ? getContentTextLength(value)
-                : value.length;
-            return length >= maxLength;
-        },
         label() {
             return this.name.replace(/./, (c) => c.toUpperCase());
         },
@@ -177,21 +158,15 @@ export default defineComponent({
         },
     },
     watch: {
-        value(newVal, oldVal) {
-            // BP-5787: RTE values are Tiptap JSON objects. The parent (TextItemsField)
-            // re-clones its items array (cloneDeep) on ANY change — including a sibling
-            // field's style sync — yielding a NEW object reference with identical text
-            // content. For objects Vue fires this watcher on reference change, so that
-            // spurious re-clone would overwrite `_value` and clobber an in-flight edit
-            // (a mark applied but not yet debounced to the store), silently dropping
-            // the user's formatting. Strings never hit this (same content = same
-            // reference = no fire), so mirror that: ignore re-clones whose content is
-            // unchanged from the previous prop value.
-            if (this.showRichTextEditor &&
-                JSON.stringify(newVal) === JSON.stringify(oldVal)) {
-                return;
-            }
+        value(newVal) {
             this._value = newVal;
+            if (this.showRichTextEditor) {
+                const textValue = escapeContentText(this._value);
+                this.lengthError = textValue && textValue.length >= this.maxLength;
+            }
+            else {
+                this.lengthError = this._value.length >= this.maxLength;
+            }
         },
         isToggled(newVal) {
             if (newVal) {

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -688,7 +688,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("@brand-page").UserPersonalisationContent[];
+            personalisationData: import("@brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;