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

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, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 import { decodeHtmlEntities } from '@brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../../../constants/ui';
@@ -73,9 +73,7 @@ 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) => getPlainTextFromRTE(option.testimonials).length === 0);
+        this.isEmpty = this.options.map((option) => option.testimonials.trim().length === 0);
         if (!this.changeDebounce) {
             this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
         }
@@ -162,12 +160,7 @@ export default defineComponent({
             this.emitChange();
         },
         getItemTextPreview(text) {
-            // 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);
+            return decodeHtmlEntities(text.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '));
         },
         getPlainTextValue(index) {
             const text = this.options[index]?.testimonials || '';

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, RichTextValue, TextItem, TextStyleDeclaration } from '@brand-page/models';
+import type { Content, LogoTheme, TextItem, TextStyleDeclaration } from '@brand-page/models';
 import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
@@ -79,7 +79,6 @@ 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, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
@@ -172,9 +172,6 @@ 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/utils/minify-brand-page-metadata.js

@@ -1,5 +1,5 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
-import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
+import { hasRTEContent } 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,9 +17,6 @@ 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.26-json-prereq-2",
+  "version": "6.0.26",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -74,20 +74,19 @@
     "@designcrowd/fe-shared-lib": "2.0.7",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
-    "@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",
+    "@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",
     "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
@@ -105,7 +104,6 @@
     "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",
@@ -162,7 +160,6 @@
     "@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",
@@ -201,6 +198,7 @@
     "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, getPlainTextFromRTE } from '@brand-page-maker/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
 export interface FieldValue {
@@ -180,10 +180,7 @@ export default defineComponent({
     },
 
     title(): string {
-      // 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)
+      return this.viewModel.title && this.viewModel.title.trim() !== ''
         ? this.viewModel.title
         : 'Contact Us';
     },

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

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

package/src/brand-page/models/index.ts

@@ -30,15 +30,6 @@ import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
 import * as uuid from 'uuid';
 import type { BrandPagePaymentConfig } from './payment.model';
-import type { JSONContent } from '@tiptap/vue-3';
-
-/**
- * BP-5787 — a rich-text field is either a legacy inline-HTML string or a
- * Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
- * `string`) forces every consumer to handle both forms — surfacing at compile
- * time any code that assumes a plain string (e.g. `.replace`, `.length`).
- */
-export type RichTextValue = string | JSONContent;
 
 export * from './brand-page-context.model';
 export * from './payment.model';
@@ -289,7 +280,7 @@ export interface TextContent extends Content {
   /**
    * For BrandPage/BrandContact only
    */
-  text: RichTextValue;
+  text: string;
   /**
    * For BrandSite
    */
@@ -313,9 +304,9 @@ export interface TextContent extends Content {
 
 export interface ProfileContent extends Content {
   avatarImageUrl: string;
-  name: RichTextValue;
-  title: RichTextValue;
-  description: RichTextValue;
+  name: string;
+  title: string;
+  description: string;
   backgroundColor: BrandPageCssStyle;
   colorReplacements: ColorReplacement[];
   mediaType?: string;
@@ -336,7 +327,7 @@ export interface MapContent extends Content {
 
 export interface MailingListContent extends Content {
   acceptedFields?: 'emailOnly' | 'nameAndEmail';
-  title: RichTextValue;
+  title: string;
   buttonText: string;
   titleStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
@@ -396,10 +387,10 @@ export interface FormField {
 export interface ContactFormContent extends Content {
   type: 'contact-form';
   displayStyle: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
-  successMessage: RichTextValue;
+  successMessage: string;
   fields: FormField[];
   responseEmail: string;
   imageUrl?: string;
@@ -419,8 +410,8 @@ export interface ContactFormContent extends Content {
 export interface BannerSectionContent extends Content {
   type: 'banner-section';
   imageUrl: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string | false;
   url: string;
   email?: string;
@@ -450,8 +441,8 @@ export const MEDIA_TYPES = {
 export type MediaType = keyof typeof MEDIA_TYPES;
 
 export interface TextMediaItem extends ImageItem {
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   itemsId: number;
 
   buttonText?: string | false;
@@ -475,8 +466,8 @@ export interface TextShapeItem extends TextMediaItem {
 export interface ShapeItem extends ImageItem {
   colorReplacements: ColorReplacement[];
   mediaType: MediaType;
-  title?: RichTextValue;
-  paragraph?: RichTextValue;
+  title?: string;
+  paragraph?: string;
 
   // overrides for personalisation
   titleOverride?: string;
@@ -487,9 +478,9 @@ export interface TestimonialItems {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
   imageUrl: string;
-  name: RichTextValue;
-  position: RichTextValue;
-  testimonials: RichTextValue;
+  name: string;
+  position: string;
+  testimonials: string;
   colorReplacements: ColorReplacement[];
   mediaType: string;
   size?: string;
@@ -505,7 +496,7 @@ export interface TestimonialItems {
 export interface TextItem {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
-  text: RichTextValue;
+  text: string;
   textStyle: TextStyleDeclaration;
 
   // overrides for personalisation
@@ -527,8 +518,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
 }
 
 export interface MediaSection extends Content {
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   items: TextShapeItem[] | TextMediaItem[];
   titleStyle: TextStyleDeclaration;
@@ -547,7 +538,7 @@ export interface ColorReplacement {
 
 export interface TestimonialSectionContent extends Content {
   type: 'testimonial-section';
-  title: RichTextValue;
+  title: string;
   displayStyle: string;
   items: TestimonialItems[];
   titleStyle: TextStyleDeclaration;
@@ -562,8 +553,8 @@ export interface TestimonialSectionContent extends Content {
 export interface AboutSectionContent extends Content {
   type: 'about-section';
   imageUrl: string;
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   displayStyle: string;
   titleStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
@@ -592,7 +583,7 @@ export type SocialLinksIconDisplayStyle =
 
 export interface SocialLinksContent extends Content {
   type: 'social-links';
-  title: RichTextValue;
+  title: string;
   links: LinksItem[];
   iconDisplayStyle: SocialLinksIconDisplayStyle;
   iconFillStyles: BrandPageCssStyle;
@@ -619,8 +610,8 @@ export interface DividerSectionContent extends Content {
 
 export interface BookingSectionContent extends Content {
   type: 'booking-section';
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
   url: string;
   email?: string;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -462,7 +462,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -914,7 +914,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1373,7 +1373,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/migration.util.ts

@@ -22,7 +22,6 @@ import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
 import { migration19 } from './migration/migration-19';
-import { migration20 } from './migration/migration-20';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -180,17 +179,6 @@ const MIGRATION_TABLE = [
     description:
       'BP-5800: seed the button fill colour as each block’s own container colour so it is independent of the site button (existing sites render unchanged) — backgroundStyle for mailing-list, request-payment and support-me (all types); cardStyle for the BP/BC contact form (skipped on brand-site)',
   },
-  {
-    version: 20,
-    migrateFn: migration20,
-    // One-time versioned migration (NOT runAlways): legacy sites (v < 20)
-    // convert on their first load in any environment — the maker (browser DOM)
-    // and web-renderer SSR (migration-20 installs a jsdom window). It no longer
-    // needs to re-run every load because the AI section builders now emit Tiptap
-    // JSON directly, so there is no recurring post-load source of HTML to catch.
-    description:
-      'BP-5787: convert inline-HTML RTE content to Tiptap JSON on first load (client or server); AI builders emit JSON directly, so this runs once per site',
-  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/style.util.test.ts

@@ -87,57 +87,6 @@ describe('style.util', () => {
     );
   });
 
-  test('applyLogoThemeToBrandPageModel preserves var() token refs in JSON RTE content (BP-5787)', () => {
-    // Arrange — title stored as Tiptap JSON with a theme-token colour mark.
-    const logoTheme = logoWithFlatColorsTheme;
-    const titleDoc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'heading',
-          attrs: { level: 2, textAlign: 'center' },
-          content: [
-            {
-              type: 'text',
-              marks: [
-                {
-                  type: 'textStyle',
-                  attrs: { color: `var(--${STYLE_THEME_KEYS.LogoTextColor})` },
-                },
-              ],
-              text: 'Themed',
-            },
-          ],
-        },
-      ],
-    };
-    const brandPageModel = new BrandPageModel({
-      ...BRAND_SITE,
-      pages: [
-        {
-          title: '1',
-          slug: '1',
-          contents: [
-            {
-              ...createInitialBannerSectionContent(),
-              title: titleDoc,
-            } as any,
-          ],
-        },
-      ],
-    });
-
-    // Act
-    const { model } = applyLogoThemeToBrandPageModel(logoTheme, brandPageModel);
-
-    // Assert — JSON RTE content is an object, so the var() token is NOT
-    // flattened to rgb(); it survives so a new theme can still propagate.
-    const title = JSON.stringify((model.pages[0].contents[0] as any).title);
-
-    expect(title).toContain(`var(--${STYLE_THEME_KEYS.LogoTextColor})`);
-    expect(title).not.toContain(logoTheme.logoTextColor.rgb);
-  });
-
   test('applyLogoThemeToBrandPageModel should apply logo theme color to content color when content color has a color matched theme key', () => {
     // Arrange
     const logoTheme = logoWithFlatColorsTheme;

package/src/brand-page/utils/text.util.ts

@@ -1,56 +1,17 @@
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 
-/**
- * BP-5787 — a Tiptap JSON document is an object with `type: 'doc'`.
- * Inlined here (rather than importing from brand-page-maker) to avoid a
- * circular import: rich-text-editor.util imports getRenderText from this file.
- */
-const isTiptapDoc = (value: unknown): value is { type: 'doc' } =>
-  typeof value === 'object' &&
-  value !== null &&
-  (value as { type?: string }).type === 'doc';
-
-const jsonDocPlainText = (doc: unknown): string => {
-  const parts: string[] = [];
-
-  const walk = (node: any): void => {
-    if (typeof node?.text === 'string') parts.push(node.text);
-
-    node?.content?.forEach(walk);
-  };
-
-  walk(doc);
-
-  return parts.join(' ').replace(/\s+/g, ' ').trim();
-};
-
 export const getRenderText = (text: string): string => {
-  // BP-5787: RTE fields may now be Tiptap JSON objects. Non-strings pass
-  // through untouched so the renderer (TextWrapper) handles them via its
-  // JSON-aware path, instead of throwing on `.replace`.
-  if (typeof text !== 'string') {
-    return text as unknown as string;
-  }
-
   return text.replace(
     new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g'),
     '<br/>',
   );
 };
 
-// Accepts a legacy inline-HTML string or a Tiptap JSON document (BP-5787):
-// for JSON it returns the concatenated visible text; for HTML it strips tags.
-export const escapeContentText = (text: unknown): string | undefined => {
+export const escapeContentText = (
+  text: string | undefined,
+): string | undefined => {
   if (!text) {
-    return text as undefined;
-  }
-
-  if (isTiptapDoc(text)) {
-    return jsonDocPlainText(text);
-  }
-
-  if (typeof text !== 'string') {
-    return undefined;
+    return text;
   }
 
   return text

package/src/brand-page/utils/vcard.util.ts

@@ -235,11 +235,9 @@ const addProfileInfo = (
   profile: ProfileViewModel,
   vcardLines: string[],
 ): void => {
-  const name = sanitizeForVCard(getPlainTextFromRTE(profile.name) || '');
-  const title = sanitizeForVCard(getPlainTextFromRTE(profile.title) || '');
-  const description = sanitizeForVCard(
-    getPlainTextFromRTE(profile.description) || '',
-  );
+  const name = sanitizeForVCard(profile.name || '');
+  const title = sanitizeForVCard(profile.title || '');
+  const description = sanitizeForVCard(profile.description || '');
 
   if (name) {
     const nameParts = name.trim().split(/\s+/);
@@ -318,7 +316,7 @@ export const saveContact = (brandPageData: {
 }): void => {
   const vcard = generateVCard(brandPageData);
   const profile = findProfileContent(brandPageData);
-  const filename = generateVCardFilename(getPlainTextFromRTE(profile?.name));
+  const filename = generateVCardFilename(profile?.name);
 
   downloadVCard(vcard, filename);
 };