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

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

@@ -1,73 +1,42 @@
-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 { getRteExtensions } from '../../brand-page-maker/composables/rich-text-editor/getRteExtensions';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
 import { rteStyleCheck, textCheck, } 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 = () => 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;
+const getRteSchema = () => (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) => (record) => {
     const value = record[field];
     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();
-    }
 };
 /**
  * Returns [rteSchemaCheck(field), textCheck(field, max), rteStyleCheck(field)].

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

@@ -185,12 +185,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     index: number;
     settings: ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

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

@@ -158,7 +158,20 @@ export default defineComponent({
         },
     },
     watch: {
-        value(newVal) {
+        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;
+            }
             this._value = newVal;
             if (this.showRichTextEditor) {
                 const textValue = escapeContentText(this._value);

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

@@ -6,7 +6,7 @@ interface CategoryTab {
     label: string;
 }
 declare const _default: import("vue").DefineComponent<{}, {
-    mode: import("vue").ComputedRef<"images" | "pages" | "add" | "edit" | "focusedContentItem">;
+    mode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
     pages: import("vue").ComputedRef<{
         id: string;
         title: string;

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

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedItemIndex: import("vue").ComputedRef<number | null>;
     selectedItemValue: import("vue").ComputedRef<string | null>;
     contentType: import("vue").ComputedRef<"website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section" | undefined>;
-    mode: import("vue").ComputedRef<"images" | "pages" | "add" | "edit" | "focusedContentItem">;
+    mode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
     isAdmin: import("vue").ComputedRef<boolean>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
         contentErrorCount(): number;

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

@@ -8,7 +8,7 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { ITEM_FIELD_TYPES } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { getPlainTextFromRTE, replaceTextInRTE, RTE_ALLOWED_SECTION_TYPES, isRTEManagedStyleField, } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE, 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';
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
@@ -267,8 +267,17 @@ export default defineComponent({
         },
         onUseGeneratedText(generatedText) {
             let formattedText = 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({
                 id: this.id,

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -182,12 +182,12 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

package/lib/src/shared/content-settings/components/radio-field/RadioField.mixin.d.ts

@@ -107,9 +107,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     fields: Record<string, MultiFieldOption>;
+    value: string | boolean | Record<string, any>;
     placeholder: string;
     variant: string;
-    value: string | boolean | Record<string, any>;
     multiple: boolean;
     optionsConvertor: OptionsConvertor<unknown>;
     isRequired: boolean;

package/lib/src/shared/content-settings/components/slider-field/SliderField.mixin.d.ts

@@ -69,9 +69,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    value: string;
     minLength: number;
     maxLength: number;
     valueConvertor: ValueConvertor<BrandPageCssStyle, number, BrandPageCssStyle>;
-    value: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -182,12 +182,12 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ColorReplacement, Content, LogoTheme, TestimonialItems } from '@brand-page';
+import type { ColorReplacement, Content, LogoTheme, RichTextValue, TestimonialItems } from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -64,7 +64,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
-    getItemTextPreview(text: string): string;
+    getItemTextPreview(text: RichTextValue): string;
+    rteTextLength(value: RichTextValue): number;
     getPlainTextValue(index: number): string;
     onCaptureSnapshot(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace")[], "update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -3,7 +3,7 @@ import { EMPTY_TESTIMONIAL, MAX_DESCRIPTION_LENGTH, MAX_LENGTH_ERROR_MESSAGE, MA
 import debounce from 'lodash.debounce';
 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';
@@ -73,7 +73,9 @@ export default defineComponent({
     },
     created() {
         this.options = cloneDeep(this.value);
-        this.isEmpty = this.options.map((option) => option.testimonials.trim().length === 0);
+        // 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) => getPlainTextFromRTE(option.testimonials).length === 0);
         if (!this.changeDebounce) {
             this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
         }
@@ -160,7 +162,12 @@ export default defineComponent({
             this.emitChange();
         },
         getItemTextPreview(text) {
-            return decodeHtmlEntities(text.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '));
+            // BP-5787: a JSON doc has no `.replace` — take its visible text first.
+            const value = typeof text === 'string' ? text : getPlainTextFromRTE(text);
+            return decodeHtmlEntities(value.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '));
+        },
+        rteTextLength(value) {
+            return getRteTextLength(value);
         },
         getPlainTextValue(index) {
             const text = this.options[index]?.testimonials || '';

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -182,12 +182,12 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Content, LogoTheme, TextItem, TextStyleDeclaration } from '@brand-page/models';
+import type { Content, LogoTheme, RichTextValue, TextItem, TextStyleDeclaration } from '@brand-page/models';
 import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
@@ -79,6 +79,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
+    rteTextLength(value: RichTextValue): number;
     getPlainTextValue(index: number): string;
     onCaptureSnapshot(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("capture-preview-snapshot" | "update:model-value")[], "capture-preview-snapshot" | "update:model-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 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;
 export default defineComponent({
@@ -172,6 +172,9 @@ export default defineComponent({
             this.options[index][payload.name] = payload.value;
             this.emitChange();
         },
+        rteTextLength(value) {
+            return getRteTextLength(value);
+        },
         getPlainTextValue(index) {
             const text = this.options[index]?.text || '';
             const plainText = getPlainTextFromRTE(text);

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -196,12 +196,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -189,12 +189,12 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -185,12 +185,12 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    role: string;
+    value: string | false | undefined;
     styles: Record<string, any>;
+    role: string;
     placeholder: string;
     minLength: number;
     maxLength: number;
-    value: string | false | undefined;
     attrs: Record<string, any>;
     isRequired: boolean;
     isToggled: boolean;

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -286,7 +286,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[]>;
     selectedTabName: import("vue").ComputedRef<string>;
     isAdmin: import("vue").ComputedRef<boolean>;
-    contentSettingsMode: import("vue").ComputedRef<"images" | "pages" | "add" | "edit" | "focusedContentItem">;
+    contentSettingsMode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
     contentSettingsSelectedItemId: import("vue").ComputedRef<string | null>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("../store").SideBarState, {}, {
         setBrandPageSettingsTabVisibility(payload: {

package/lib/src/utils/minify-brand-page-metadata.js

@@ -1,5 +1,5 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
-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 { findAssetKey, resolveLogoData, } from './build-asset-manifest';
 const BUTTON_TYPES = [
@@ -17,6 +17,9 @@ const BUTTON_TYPES = [
     'tiktok',
 ];
 const convertText = (value, editor) => {
+    // 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.25",
+  "version": "6.0.26-json-prereq-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -74,19 +74,20 @@
     "@designcrowd/fe-shared-lib": "2.0.7",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
-    "@tiptap/extension-bubble-menu": "^2.14.0",
-    "@tiptap/extension-character-count": "2.11.7",
-    "@tiptap/extension-color": "2.11.5",
-    "@tiptap/extension-font-family": "2.11.5",
-    "@tiptap/extension-hard-break": "2.12.0",
-    "@tiptap/extension-highlight": "2.11.5",
-    "@tiptap/extension-link": "2.11.5",
-    "@tiptap/extension-placeholder": "2.11.5",
-    "@tiptap/extension-text-align": "2.11.5",
-    "@tiptap/extension-text-style": "2.11.5",
-    "@tiptap/extension-underline": "2.11.5",
-    "@tiptap/starter-kit": "2.11.5",
-    "@tiptap/vue-3": "2.11.5",
+    "@tiptap/extension-bubble-menu": "3.28.0",
+    "@tiptap/extension-character-count": "3.28.0",
+    "@tiptap/extension-color": "3.28.0",
+    "@tiptap/extension-font-family": "3.28.0",
+    "@tiptap/extension-hard-break": "3.28.0",
+    "@tiptap/extension-highlight": "3.28.0",
+    "@tiptap/extension-link": "3.28.0",
+    "@tiptap/extension-placeholder": "3.28.0",
+    "@tiptap/extension-text-align": "3.28.0",
+    "@tiptap/extension-text-style": "3.28.0",
+    "@tiptap/extension-underline": "3.28.0",
+    "@tiptap/starter-kit": "3.28.0",
+    "@tiptap/static-renderer": "3.28.0",
+    "@tiptap/vue-3": "3.28.0",
     "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
@@ -104,6 +105,7 @@
     "http-proxy-middleware": "2.0.6",
     "i18next": "25.8.5",
     "jquery": "3.7.1",
+    "jsdom": "27.4.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
@@ -160,6 +162,7 @@
     "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
     "@types/jquery": "3.5.33",
+    "@types/jsdom": "21.1.6",
     "@types/lodash.clonedeep": "4.5.9",
     "@types/mssql": "9.1.9",
     "@types/multer": "1.4.11",
@@ -198,7 +201,6 @@
     "imports-loader": "5.0.0",
     "jest-image-snapshot": "6.5.1",
     "js-base64": "3.7.8",
-    "jsdom": "27.4.0",
     "jsdom-global": "3.0.2",
     "lint-staged": "15.2.0",
     "mini-css-extract-plugin": "2.10.0",

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -32,7 +32,7 @@ import {
   mutedTextForBackground,
   backgroundColorFromStyle,
 } from '@brand-page/utils';
-import { hasRTEContent } from '@brand-page-maker/utils';
+import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
 export interface FieldValue {
@@ -180,7 +180,10 @@ export default defineComponent({
     },
 
     title(): string {
-      return this.viewModel.title && this.viewModel.title.trim() !== ''
+      // BP-5787: title may be RTE JSON (not a string), so `.trim()` would
+      // throw — read the visible text via getPlainTextFromRTE to decide
+      // whether to fall back to the default.
+      return getPlainTextFromRTE(this.viewModel.title)
         ? this.viewModel.title
         : 'Contact Us';
     },

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -21,7 +21,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
+import {
+  hasRTEContent,
+  getPlainTextFromRTE,
+  renderRteToHtml,
+  isTiptapDocument,
+  type RichTextValue,
+} from '@brand-page-maker/utils';
 import {
   type FluidTextData,
   type TextStyleDeclaration,
@@ -37,7 +43,8 @@ import {
 
 interface Props {
   textStyle: TextStyleDeclaration | undefined;
-  text: string;
+  // BP-5787: an RTE field is a legacy inline-HTML string or a Tiptap JSON doc.
+  text: RichTextValue;
   element?: string;
   slug?: string;
 }
@@ -79,16 +86,20 @@ const textStyleRTE = computed(() => {
   };
 });
 
+// Render either form (legacy HTML string or Tiptap JSON) to final HTML.
+// For a string this returns it unchanged, so the legacy path is unaffected.
+const renderedHtml = computed(() => renderRteToHtml(props.text));
+
 const isRTEContent = computed(() => {
-  return hasRTEContent(props.text);
+  return isTiptapDocument(props.text) || hasRTEContent(renderedHtml.value);
 });
 
 const sanitizeText = computed(() => {
-  if (isRTEContent.value && !getPlainTextFromRTE(props.text)) {
+  if (isRTEContent.value && !getPlainTextFromRTE(renderedHtml.value)) {
     return '';
   }
 
-  return props.text;
+  return renderedHtml.value;
 });
 
 const fontSize = computed<any>(() => props.textStyle.fontSize);
@@ -160,7 +171,7 @@ const applyScale = () => {
   }
 
   const fontSizeMatchInRTEText = [
-    ...props.text.matchAll(
+    ...renderedHtml.value.matchAll(
       /style="(?:[^"]*?)\bfont-size\s*:\s*(?<fontSize>[^;"']+)[^"]*?"/gm,
     ),
   ].map((x) => parseFloat(x.groups?.fontSize || '1em'));