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

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

@@ -1,85 +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 const LineHeight = Extension.create<LineHeightOptions>({
-  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/src/metadata-builder/builders/update-content-text-builder.ts

@@ -1,148 +0,0 @@
-import { type BrandPageModel } from '../../brand-page/models';
-import type { Logger } from '../logger';
-import {
-  BaseMetadataBuilder,
-  BUILDER_TYPES,
-  type BuilderResult,
-  type MetadataBuilderRequest,
-} from '../models';
-import { hasRTEContent, replaceTextInRTE } from '../../brand-page-maker/utils';
-
-export interface UpdateTextPayload {
-  contentId: string;
-  fieldName: string;
-  newText: string;
-  maxCharacters?: number;
-}
-
-export const buildUpdateTextRequest = (
-  id: string,
-  payload: UpdateTextPayload,
-): MetadataBuilderRequest<UpdateTextPayload> => {
-  return {
-    id,
-    type: BUILDER_TYPES.UPDATE_CONTENT_TEXT,
-    payload,
-  };
-};
-
-const updateTextField = (target: any, fieldName: string, newText: string) => {
-  // 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<UpdateTextPayload> {
-  constructor(
-    request: MetadataBuilderRequest<UpdateTextPayload>,
-    logger?: Logger,
-  ) {
-    super(request, logger);
-  }
-
-  validateAsync(): Promise<{ errors: string[] }> {
-    const newText = this.request.payload?.newText ?? '';
-
-    const errors: string[] = [];
-
-    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: BrandPageModel): Promise<BuilderResult> {
-    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/src/metadata-builder/builders/update-content-text-style-builder.ts

@@ -1,352 +0,0 @@
-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.`,
-          ],
-    };
-  }
-}