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

package/src/metadata-builder/builders/section-builders/profile-section-builder.ts

@@ -3,7 +3,6 @@ import type {
   BrandPageModel,
   TextStyleDeclaration,
 } from '../../../brand-page/models';
-import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import type { BuilderResult } from '../../models';
 import {
   isTiptapDocument,
@@ -41,7 +40,7 @@ export class ProfileSectionBuilder extends BaseSectionBuilder<ProfileContent> {
 
     if (profileArgs.name !== undefined) {
       if (isTiptapDocument(profileArgs.name)) {
-        resolved.content.name = tiptapJsonToHtml(profileArgs.name);
+        resolved.content.name = profileArgs.name;
         resolved.content.nameStyle = resolveGlobalPresetIntoStyle(
           resolved.content.nameStyle,
           textStyleOptions,
@@ -53,7 +52,7 @@ export class ProfileSectionBuilder extends BaseSectionBuilder<ProfileContent> {
 
     if (profileArgs.title !== undefined) {
       if (isTiptapDocument(profileArgs.title)) {
-        resolved.content.title = tiptapJsonToHtml(profileArgs.title);
+        resolved.content.title = profileArgs.title;
         resolved.content.titleStyle = resolveGlobalPresetIntoStyle(
           resolved.content.titleStyle,
           textStyleOptions,
@@ -65,9 +64,7 @@ export class ProfileSectionBuilder extends BaseSectionBuilder<ProfileContent> {
 
     if (profileArgs.description !== undefined) {
       if (isTiptapDocument(profileArgs.description)) {
-        resolved.content.description = tiptapJsonToHtml(
-          profileArgs.description,
-        );
+        resolved.content.description = profileArgs.description;
         resolved.content.descriptionStyle = resolveGlobalPresetIntoStyle(
           resolved.content.descriptionStyle,
           textStyleOptions,

package/src/metadata-builder/builders/section-builders/shapes-section-builder.ts

@@ -5,7 +5,6 @@ import type {
   TextShapeItem,
   TextStyleDeclaration,
 } from '../../../brand-page/models';
-import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import type { BuilderResult } from '../../models';
 import {
   isTiptapDocument,
@@ -195,7 +194,7 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
 
     if (args.title !== undefined) {
       if (isTiptapDocument(args.title)) {
-        content.title = tiptapJsonToHtml(args.title);
+        content.title = args.title;
         content.titleStyle = resolveGlobalPresetIntoStyle(
           content.titleStyle,
           textStyleOptions,
@@ -207,7 +206,7 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
 
     if (args.description !== undefined) {
       if (isTiptapDocument(args.description)) {
-        content.description = tiptapJsonToHtml(args.description);
+        content.description = args.description;
         content.descriptionStyle = resolveGlobalPresetIntoStyle(
           content.descriptionStyle,
           textStyleOptions,

package/src/metadata-builder/builders/section-builders/testimonial-section-builder.ts

@@ -4,7 +4,6 @@ import type {
   BrandPageModel,
   TextStyleDeclaration,
 } from '../../../brand-page/models';
-import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import {
   isTiptapDocument,
   type TestimonialItem,
@@ -173,7 +172,7 @@ export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSec
 
     if (args.title !== undefined) {
       if (isTiptapDocument(args.title)) {
-        content.title = tiptapJsonToHtml(args.title);
+        content.title = args.title;
         content.titleStyle = resolveGlobalPresetIntoStyle(
           content.titleStyle,
           textStyleOptions,

package/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -4,9 +4,9 @@ import type {
   TextItem,
   TextStyleDeclaration,
   BrandPageModel,
+  RichTextValue,
 } from '../../../brand-page/models';
 import type { TextStyleOptions } from '../../../brand-page/models/styles.model';
-import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import {
   isTiptapDocument,
   type TextSectionArguments,
@@ -26,12 +26,18 @@ import {
   repositionItemByAnchor,
 } from '../item-id-utils';
 
-/** Resolve a RichTextField (string or TiptapDocument) to a plain HTML string. */
-const resolveText = (value: unknown): { html: string; wasTiptap: boolean } => {
-  if (isTiptapDocument(value))
-    return { html: tiptapJsonToHtml(value), wasTiptap: true };
+/**
+ * Resolve a RichTextField to its stored RTE value. BP-5787: Tiptap JSON is
+ * stored as-is (no JSON→HTML round-trip — migration-20 is now a one-time
+ * legacy conversion), plain strings pass through. `wasTiptap` drives the
+ * text-style preset resolution for rich content.
+ */
+const resolveText = (
+  value: unknown,
+): { value: RichTextValue; wasTiptap: boolean } => {
+  if (isTiptapDocument(value)) return { value, wasTiptap: true };
 
-  return { html: typeof value === 'string' ? value : '', wasTiptap: false };
+  return { value: typeof value === 'string' ? value : '', wasTiptap: false };
 };
 
 const clearTextStyleTypeIfTiptap = (
@@ -55,11 +61,11 @@ const createTextItem = (
     item.text_style ? { ...baseStyle, ...item.text_style } : { ...baseStyle }
   ) as TextStyleDeclaration;
 
-  const { html, wasTiptap } = resolveText(item.text);
+  const { value, wasTiptap } = resolveText(item.text);
 
   return {
     id: item.item_id || generateItemId(),
-    text: html,
+    text: value,
     textStyle: clearTextStyleTypeIfTiptap(
       textStyle,
       wasTiptap,
@@ -111,9 +117,9 @@ const mergeTextItems = (
       if (!existing) continue;
 
       if (item.text !== undefined) {
-        const { html, wasTiptap } = resolveText(item.text);
+        const { value, wasTiptap } = resolveText(item.text);
 
-        existing.text = html;
+        existing.text = value;
         existing.textStyle = clearTextStyleTypeIfTiptap(
           existing.textStyle || {},
           wasTiptap,
@@ -160,12 +166,12 @@ const applySingleTextField = (
   textStyleOptions: TextStyleOptions | undefined,
 ): void => {
   if (args.text !== undefined) {
-    const { html, wasTiptap } = resolveText(args.text);
+    const { value, wasTiptap } = resolveText(args.text);
 
     if (Array.isArray(content.textItems) && content.textItems.length > 0) {
       content.textItems[0] = {
         ...content.textItems[0],
-        text: html,
+        text: value,
         textStyle: clearTextStyleTypeIfTiptap(
           content.textItems[0].textStyle || {},
           wasTiptap,
@@ -176,7 +182,7 @@ const applySingleTextField = (
       content.textItems = [
         {
           id: generateItemId(),
-          text: html,
+          text: value,
           textStyle: clearTextStyleTypeIfTiptap(
             { ...(content.textStyle || {}) },
             wasTiptap,

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

@@ -1,114 +1,28 @@
-import type { TextStyleDeclaration } from '../../brand-page';
-import { getRTEColor } from '../../brand-page-maker/utils';
-import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { getRenderText } from '../../brand-page/utils';
-import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
-import type { Editor } from '@tiptap/vue-3';
-import {
-  isTiptapDocument,
-  type TiptapDocument,
-} from '../parsers/section-tool-arguments';
-
-export const applyStyleToRTEText = (
-  externalEditor: Editor,
-  contentText: string,
-  newContentStyle: TextStyleDeclaration,
-) => {
-  if (!contentText) {
-    return contentText;
-  }
-
-  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
-    ? getRenderText(contentText)
-    : contentText;
-
-  externalEditor.commands.setContent(content);
-
-  let chain = externalEditor.chain().selectAll();
-
-  if (newContentStyle?.fontFamily) {
-    chain = chain.setFontFamily(newContentStyle.fontFamily);
-  }
-
-  if (newContentStyle?.fontSize) {
-    chain = chain.setFontSize(newContentStyle.fontSize);
-  }
-
-  if (newContentStyle?.letterSpacing) {
-    chain = chain.setLetterSpacing(newContentStyle.letterSpacing);
-  }
-
-  if (newContentStyle?.lineHeight) {
-    chain = chain.setLineHeight(newContentStyle.lineHeight);
-  }
-
-  if (newContentStyle?.color) {
-    chain = chain.setMark('textStyle', {
-      color: getRTEColor(newContentStyle.color, 'text'),
-    });
-  }
-
-  // Handle backgroundColor
-  if ('backgroundColor' in (newContentStyle || {})) {
-    chain = newContentStyle.backgroundColor
-      ? chain.setMark('highlight', {
-          color: getRTEColor(newContentStyle.backgroundColor, 'background'),
-        })
-      : chain.unsetHighlight();
-  }
-
-  if (newContentStyle?.textAlign) {
-    chain = chain.setTextAlign(newContentStyle.textAlign);
-  }
-
-  const hasStrike = newContentStyle?.textDecoration?.includes('line-through');
-  const hasUnderline = newContentStyle?.textDecoration?.includes('underline');
-
-  chain = hasStrike ? chain.setStrike() : chain.unsetStrike();
-  chain = hasUnderline ? chain.setUnderline() : chain.unsetUnderline();
-
-  chain =
-    newContentStyle?.fontWeight === 'bold'
-      ? chain.setBold()
-      : chain.unsetBold();
-  chain =
-    newContentStyle?.fontStyle === 'italic'
-      ? chain.setItalic()
-      : chain.unsetItalic();
-
-  chain.run();
-  const html = externalEditor.getHTML();
-
-  return html;
-};
+import type { RichTextValue } from '../../brand-page';
+import { renderRteToHtml } from '../../brand-page-maker/utils';
+import { isTiptapDocument } from '../parsers/section-tool-arguments';
 
 /**
  * Converts a Tiptap JSON document (ProseMirror document model) to an HTML
- * string using a headless Tiptap Editor instance.
+ * 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`).
  *
  * Returns the value unchanged if it is already a string.
- * Returns an empty string for null/undefined.
+ * Returns an empty string for null/undefined or any non-Tiptap-document value.
  *
- * 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.
+ * 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.
  */
 export const tiptapJsonToHtml = (value: unknown): string => {
   if (typeof value === 'string') return value;
 
   if (!isTiptapDocument(value)) return '';
 
-  const { externalEditor } = useExternalRichTextEditor();
-
-  externalEditor.commands.setContent(value as TiptapDocument);
-  const html = externalEditor.getHTML();
-
-  externalEditor.destroy();
-
-  return html;
+  return renderRteToHtml(value as RichTextValue);
 };

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

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

package/src/metadata-builder/models.ts

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

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

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

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

@@ -1,16 +1,6 @@
-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 { getSchema } from '@tiptap/core';
+import type { Schema } from '@tiptap/pm/model';
+import { getRteExtensions } from '../../brand-page-maker/composables/rich-text-editor/getRteExtensions';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
 import {
   rteStyleCheck,
@@ -19,45 +9,30 @@ import {
 } from './section-args-validator';
 
 /**
- * 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.
+ * 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.
  */
-const buildHeadlessEditor = (): Editor =>
-  new Editor({
-    editable: false,
-    extensions: [
-      StarterKit,
-      Underline,
-      TextStyle.configure({ mergeNestedSpanStyles: true }),
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
-      FontFamily.configure({ types: ['textStyle'] }),
-      FontSize,
-      LetterSpacing,
-      LineHeight,
-      ColorExtension.configure({ types: ['textStyle'] }),
-      Highlight.configure({ multicolor: true }),
-      Link.configure({
-        openOnClick: false,
-        defaultProtocol: 'https',
-        autolink: true,
-      }),
-      AutoLink,
-    ],
-  });
+let cachedSchema: Schema | undefined;
+
+const getRteSchema = (): Schema =>
+  (cachedSchema ??= getSchema(getRteExtensions({ includeLinkRel: true })));
 
 /**
- * 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).
+ * 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).
  *
- * Returns the field-prefixed error string so the AI's tool-call retry
- * loop reads it via `BuilderResult.errors` → `tool_result.errorMessage`
- * and re-emits a corrected payload.
+ * Returns the field-prefixed error string so the AI's tool-call retry loop reads
+ * it via `BuilderResult.errors` → `tool_result.errorMessage` and re-emits a
+ * corrected payload.
  */
 export const rteSchemaCheck =
   (field: string): SectionCheck =>
@@ -66,18 +41,14 @@ export const rteSchemaCheck =
 
     if (!isTiptapDocument(value)) return null;
 
-    const editor = buildHeadlessEditor();
-
     try {
-      editor.schema.nodeFromJSON(value);
+      getRteSchema().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();
     }
   };
 

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

@@ -175,7 +175,23 @@ export default defineComponent({
     },
   },
   watch: {
-    value(newVal: string | undefined) {
+    value(newVal: string | undefined, oldVal: string | undefined) {
+      // 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;
+      }
+
       this._value = newVal;
 
       if (this.showRichTextEditor) {

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

@@ -21,6 +21,9 @@ import {
   replaceTextInRTE,
   RTE_ALLOWED_SECTION_TYPES,
   isRTEManagedStyleField,
+  isTiptapDocument,
+  renderRteToHtml,
+  toRteJson,
 } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
@@ -327,10 +330,20 @@ export default defineComponent({
       this.isToggled = isToggled;
     },
     onUseGeneratedText(generatedText: string) {
-      let formattedText = generatedText;
+      let formattedText: unknown = generatedText;
 
-      if (this.showRichTextEditor && typeof this.value === 'string') {
-        formattedText = replaceTextInRTE(this.value, generatedText);
+      // BP-5787: preserve the field's formatting when dropping in AI text.
+      // replaceTextInRTE is HTML-based, so JSON is rendered/parsed around it
+      // (cold AI path, shared editor); string fields use it directly.
+      if (this.showRichTextEditor) {
+        if (isTiptapDocument(this.value)) {
+          formattedText =
+            toRteJson(
+              replaceTextInRTE(renderRteToHtml(this.value), generatedText),
+            ) ?? generatedText;
+        } else if (typeof this.value === 'string') {
+          formattedText = replaceTextInRTE(this.value, generatedText);
+        }
       }
 
       this.contentSettingsStore.updateItemValue({

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.ts

@@ -4,6 +4,7 @@ import type {
   ColorReplacement,
   Content,
   LogoTheme,
+  RichTextValue,
   TestimonialItems,
 } from '@brand-page';
 import {
@@ -17,7 +18,7 @@ import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 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';
 import { decodeHtmlEntities } from '@brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../../../constants/ui';
@@ -91,8 +92,10 @@ export default defineComponent({
   created() {
     this.options = cloneDeep(this.value);
 
+    // BP-5787: testimonials may be Tiptap JSON (migrated legacy content), so
+    // read visible text via getPlainTextFromRTE rather than `.trim()` on a doc.
     this.isEmpty = this.options.map(
-      (option) => option.testimonials.trim().length === 0,
+      (option) => getPlainTextFromRTE(option.testimonials).length === 0,
     );
 
     if (!this.changeDebounce) {
@@ -206,11 +209,17 @@ export default defineComponent({
       this.options[index][payload.name] = payload.value;
       this.emitChange();
     },
-    getItemTextPreview(text: string): string {
+    getItemTextPreview(text: RichTextValue): string {
+      // BP-5787: a JSON doc has no `.replace` — take its visible text first.
+      const value = typeof text === 'string' ? text : getPlainTextFromRTE(text);
+
       return decodeHtmlEntities(
-        text.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '),
+        value.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '),
       );
     },
+    rteTextLength(value: RichTextValue): number {
+      return getRteTextLength(value);
+    },
     getPlainTextValue(index: number): string {
       const text = this.options[index]?.testimonials || '';
       const plainText = getPlainTextFromRTE(text);

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -26,7 +26,8 @@
           :error="
             isEmpty[option.index] ||
             (options[option.index].testimonials &&
-              options[option.index].testimonials.length >= maxTestimonialLength)
+              rteTextLength(options[option.index].testimonials) >=
+                maxTestimonialLength)
           "
           :resize="false"
           class="tw-w-full"
@@ -42,7 +43,8 @@
         <p
           v-else-if="
             options[option.index].testimonials &&
-            options[option.index].testimonials.length >= maxTestimonialLength
+            rteTextLength(options[option.index].testimonials) >=
+              maxTestimonialLength
           "
           class="tw-text-error-500 tw-text-sm"
         >
@@ -127,7 +129,7 @@
           v-if="
             options[option.index] &&
             options[option.index].name &&
-            options[option.index].name.length >= maxTitleLength
+            rteTextLength(options[option.index].name) >= maxTitleLength
           "
           class="tw-text-error-500 tw-text-sm"
         >
@@ -158,7 +160,7 @@
           v-if="
             options[option.index] &&
             options[option.index].position &&
-            options[option.index].position.length >= maxTitleLength
+            rteTextLength(options[option.index].position) >= maxTitleLength
           "
           class="tw-text-error-500 tw-text-sm"
         >

package/src/shared/content-settings/components/text-image-field/TextImageField.vue

@@ -97,10 +97,10 @@
           :attrs="{
             'data-test-tag': 'image-title-text-input',
           }"
-          :error="options[option.index].title.length >= titleLength"
+          :error="rteTextLength(options[option.index].title) >= titleLength"
         />
         <p
-          v-if="options[option.index].title.length >= titleLength"
+          v-if="rteTextLength(options[option.index].title) >= titleLength"
           class="tw-text-error-500 tw-text-sm tw-mt-2"
         >
           {{ maxLengthError }}
@@ -134,7 +134,9 @@
           :attrs="{
             'data-test-tag': 'image-description-text-input',
           }"
-          :error="options[option.index].paragraph.length >= descriptionLength"
+          :error="
+            rteTextLength(options[option.index].paragraph) >= descriptionLength
+          "
           @update:model-value="onTextAreaTextChange($event, option.index)"
         />
         <PersonalisationOverrideField
@@ -311,6 +313,7 @@ import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { isURL } from '../../../../utils/validator.util';
+import { getRteTextLength as rteTextLength } from '@brand-page-maker/utils';
 
 const DEBOUNCE_IN_MS = 250;