@designcrowd/library.brand-page 6.0.25 → 6.0.26-json-prereq-2

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.ts

@@ -3,6 +3,7 @@ import type { PropType } from 'vue';
 import type {
   Content,
   LogoTheme,
+  RichTextValue,
   TextItem,
   TextStyleDeclaration,
 } from '@brand-page/models';
@@ -19,7 +20,7 @@ import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { decodeHtmlEntities, escapeContentText } from '@brand-page/utils';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE, getRteTextLength } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 
 const DEBOUNCE_IN_MS = 250;
@@ -234,6 +235,10 @@ export default defineComponent({
       this.emitChange();
     },
 
+    rteTextLength(value: RichTextValue): number {
+      return getRteTextLength(value);
+    },
+
     getPlainTextValue(index: number): string {
       const text = this.options[index]?.text || '';
       const plainText = getPlainTextFromRTE(text);

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -32,7 +32,7 @@
           size="sm"
           :error="
             isEmpty[option.index] ||
-            options[option.index].text.length >= maxTextLength
+            rteTextLength(options[option.index].text) >= maxTextLength
           "
           :resize="false"
           class="tw-w-full"

package/src/utils/minify-brand-page-metadata.ts

@@ -10,7 +10,7 @@ import {
 } from '../brand-page/models';
 import type { Content, ContentType } from '../brand-page/models/content.model';
 import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
-import { hasRTEContent } from '../brand-page-maker/utils';
+import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import {
@@ -106,6 +106,9 @@ const convertText = (
   value: unknown,
   editor: Editor,
 ): RichTextValue | undefined => {
+  // Already Tiptap JSON (BP-5787 storage) — keep as-is.
+  if (isTiptapDocument(value)) return value;
+
   if (typeof value !== 'string' || !value) return undefined;
 
   if (hasRTEContent(value)) {

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.d.ts

@@ -1,20 +0,0 @@
-import { Extension } from '@tiptap/core';
-import '@tiptap/extension-text-style';
-export type FontSizeOptions = {
-    types: string[];
-};
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        fontSize: {
-            /**
-             * Set the font size
-             */
-            setFontSize: (fontSize: string) => ReturnType;
-            /**
-             * Unset the font size
-             */
-            unsetFontSize: () => ReturnType;
-        };
-    }
-}
-export declare const FontSize: Extension<FontSizeOptions, any>;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.js

@@ -1,44 +0,0 @@
-import { Extension } from '@tiptap/core';
-import '@tiptap/extension-text-style';
-export const FontSize = Extension.create({
-    name: 'fontSize',
-    addOptions() {
-        return {
-            types: ['textStyle'],
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    fontSize: {
-                        default: null,
-                        parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ''),
-                        renderHTML: (attributes) => {
-                            if (!attributes.fontSize) {
-                                return {};
-                            }
-                            return {
-                                style: `font-size: ${attributes.fontSize}`,
-                            };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setFontSize: (fontSize) => ({ chain }) => {
-                return chain().setMark('textStyle', { fontSize }).run();
-            },
-            unsetFontSize: () => ({ chain }) => {
-                return chain()
-                    .setMark('textStyle', { fontSize: null })
-                    .removeEmptyTextStyle()
-                    .run();
-            },
-        };
-    },
-});

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.d.ts

@@ -1,27 +0,0 @@
-import { Extension } from '@tiptap/core';
-export type LineHeightOptions = {
-    /**
-     * Node / mark types that should carry the `lineHeight` attribute.
-     * Defaults to `['textStyle']` to piggy‑back on TipTap’s built‑in mark.
-     */
-    types: string[];
-};
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            /**
-             * Apply a line‑height to the current selection (or stored marks).
-             */
-            setLineHeight: (heightValue: string) => ReturnType;
-            /**
-             * Remove any line‑height attribute.
-             */
-            unsetLineHeight: () => ReturnType;
-            /**
-             * Read the current line‑height from the selection / stored marks.
-             */
-            getLineHeight: () => ReturnType;
-        };
-    }
-}
-export declare const LineHeight: Extension<LineHeightOptions, any>;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.js

@@ -1,44 +0,0 @@
-import { Extension } from '@tiptap/core';
-export const LineHeight = Extension.create({
-    name: 'lineHeight',
-    addOptions() {
-        return {
-            types: ['textStyle'],
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    lineHeight: {
-                        default: null,
-                        parseHTML: (element) => (element.style.lineHeight || '').replace(/['"]+/g, ''),
-                        renderHTML: (attributes) => {
-                            if (!attributes.lineHeight) {
-                                return {};
-                            }
-                            return { style: `line-height: ${attributes.lineHeight}` };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setLineHeight: (lineHeight) => ({ chain }) => {
-                return chain().setMark('textStyle', { lineHeight }).run();
-            },
-            unsetLineHeight: () => ({ chain }) => {
-                return chain()
-                    .setMark('textStyle', { lineHeight: null })
-                    .removeEmptyTextStyle()
-                    .run();
-            },
-            getLineHeight: () => ({ editor }) => {
-                return editor.getAttributes('textStyle').lineHeight;
-            },
-        };
-    },
-});

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

@@ -1,17 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,216 +0,0 @@
-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/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.ts

@@ -1,73 +0,0 @@
-import { Extension } from '@tiptap/core';
-import '@tiptap/extension-text-style';
-
-export type FontSizeOptions = {
-  types: string[];
-};
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    fontSize: {
-      /**
-       * Set the font size
-       */
-      setFontSize: (fontSize: string) => ReturnType;
-      /**
-       * Unset the font size
-       */
-      unsetFontSize: () => ReturnType;
-    };
-  }
-}
-
-export const FontSize = Extension.create<FontSizeOptions>({
-  name: 'fontSize',
-
-  addOptions() {
-    return {
-      types: ['textStyle'],
-    };
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          fontSize: {
-            default: null,
-            parseHTML: (element) =>
-              element.style.fontSize.replace(/['"]+/g, ''),
-            renderHTML: (attributes) => {
-              if (!attributes.fontSize) {
-                return {};
-              }
-
-              return {
-                style: `font-size: ${attributes.fontSize}`,
-              };
-            },
-          },
-        },
-      },
-    ];
-  },
-
-  addCommands() {
-    return {
-      setFontSize:
-        (fontSize) =>
-        ({ chain }) => {
-          return chain().setMark('textStyle', { fontSize }).run();
-        },
-      unsetFontSize:
-        () =>
-        ({ chain }) => {
-          return chain()
-            .setMark('textStyle', { fontSize: null })
-            .removeEmptyTextStyle()
-            .run();
-        },
-    };
-  },
-});