@designcrowd/library.brand-page 6.1.1-json-prereq-3 → 6.1.1

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
@@ -58,46 +19,6 @@ export const escapeContentText = (text: unknown): string | undefined => {
     .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };
 
-/**
- * Character length of RTE content as the *editor* counts it — ProseMirror
- * `doc.textContent`: text nodes concatenated with NO separator. This is the
- * metric the MaxLength extension gates on, so length indicators must use it too.
- *
- * Do NOT use escapeContentText/jsonDocPlainText for length limiting: those
- * join text nodes with a space for readable plain-text extraction, so they
- * over-count by one character per inline mark boundary. Converting a word to a
- * hyperlink (or bolding it, etc.) splits its text node, making the counter
- * report length+1 for content the editor considers exactly at the cap (BP-5787).
- */
-export const getContentTextLength = (value: unknown): number => {
-  if (!value) {
-    return 0;
-  }
-
-  if (isTiptapDoc(value)) {
-    let length = 0;
-
-    const walk = (node: any): void => {
-      if (typeof node?.text === 'string') {
-        length += node.text.length;
-      }
-
-      node?.content?.forEach(walk);
-    };
-
-    walk(value);
-
-    return length;
-  }
-
-  if (typeof value !== 'string') {
-    return 0;
-  }
-
-  // Legacy inline-HTML string: count visible text with tags stripped.
-  return value.replace(/(<([^>]+)>)/gi, '').length;
-};
-
 export const decodeHtmlEntities = (text: string): string => {
   return text
     .replace(/&lt;/g, '<')

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);
 };

package/src/brand-page/utils/view-model.util.ts

@@ -119,7 +119,7 @@ import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from './route.util';
-import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
+import { hasRTEContent } from '../../brand-page-maker/utils';
 import {
   getPageIdFromHref,
   isHrefPageId,
@@ -1519,86 +1519,6 @@ const mapPageIdReferencesToRelativePaths = (
   });
 };
 
-// Resolve a `pageid:<id>` internal-link href to the published relative path.
-// Returns the resolved href, or null when `href` is not an internal pageid link
-// (external/absolute links are left untouched). Falls back to the site root when
-// the pageid can't be matched to a nav route.
-const resolvePageIdHref = (
-  href: string,
-  nav: NavViewModel,
-  options: ViewModelMappingOptions,
-): string | null => {
-  // Only process internal links (no protocol, doesn't start with /)
-  if (!href || href.match(/^(https?:\/\/|\/)/) || !isHrefPageId(href)) {
-    return null;
-  }
-
-  const pageId = getPageIdFromHref(href);
-  const route = findNavItemByPageId(nav.navItems, pageId);
-  const brandPageSlugRoute = options.brandPageSlug
-    ? `/${options.brandPageSlug}`
-    : '/';
-
-  if (route) {
-    if (route.isRoot) {
-      return brandPageSlugRoute;
-    }
-
-    return `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
-  }
-
-  // fallback to root if pageid cannot be resolved.
-  return brandPageSlugRoute;
-};
-
-// BP-5847: walk a Tiptap JSON doc and rewrite every link mark whose href is a
-// `pageid:` reference into its published relative path. Returns a NEW doc when
-// something changed (so the shared model doc is never mutated), else the same
-// reference.
-export const resolvePageIdsInRteJson = (
-  doc: unknown,
-  nav: NavViewModel,
-  options: ViewModelMappingOptions,
-): unknown => {
-  let changed = false;
-
-  const walk = (node: any): any => {
-    if (!node || typeof node !== 'object') {
-      return node;
-    }
-
-    let next = node;
-
-    if (Array.isArray(node.marks)) {
-      const marks = node.marks.map((mark: any) => {
-        if (mark?.type === 'link' && typeof mark.attrs?.href === 'string') {
-          const resolved = resolvePageIdHref(mark.attrs.href, nav, options);
-
-          if (resolved !== null) {
-            changed = true;
-
-            return { ...mark, attrs: { ...mark.attrs, href: resolved } };
-          }
-        }
-
-        return mark;
-      });
-
-      next = { ...next, marks };
-    }
-
-    if (Array.isArray(node.content)) {
-      next = { ...next, content: node.content.map(walk) };
-    }
-
-    return next;
-  };
-
-  const result = walk(doc);
-
-  return changed ? result : doc;
-};
-
 const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
   content: any,
   nav: NavViewModel,
@@ -1611,15 +1531,7 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       return;
     }
 
-    if (isTiptapDocument(value)) {
-      // BP-5847: RTE fields may now be Tiptap JSON. Resolve pageid link marks
-      // here too, or internal links render as raw `pageid:` and don't navigate.
-      (content as unknown as Record<string, unknown>)[key] =
-        resolvePageIdsInRteJson(value, nav, options);
-    } else if (
-      typeof value === 'object' &&
-      (key === 'items' || key === 'textItems')
-    ) {
+    if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
       if (Array.isArray(value)) {
         value.forEach((item) => {
           dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
@@ -1631,11 +1543,31 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       (content as unknown as Record<string, unknown>)[key] = value.replace(
         /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
         (match, existingAttrsStart, href, existingAttrsEnd) => {
-          const resolved = resolvePageIdHref(href, nav, options);
+          // Only process internal links (no protocol, doesn't start with /)
+          if (href && !href.match(/^(https?:\/\/|\/)/) && isHrefPageId(href)) {
+            const pageId = getPageIdFromHref(href);
+
+            const route = findNavItemByPageId(nav.navItems, pageId);
+
+            const brandPageSlugRoute = options.brandPageSlug
+              ? `/${options.brandPageSlug}`
+              : '/';
+
+            if (route) {
+              let href = `${brandPageSlugRoute}`;
+
+              if (!route.isRoot) {
+                href = `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
+              }
+
+              return `<a ${existingAttrsStart}href="${href}"${existingAttrsEnd}>`;
+            }
+
+            // fallback to root if pageid cannot be resolved.
+            return `<a ${existingAttrsStart}href="${brandPageSlugRoute}"${existingAttrsEnd}>`;
+          }
 
-          return resolved === null
-            ? match
-            : `<a ${existingAttrsStart}href="${resolved}"${existingAttrsEnd}>`;
+          return match;
         },
       );
     }

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

@@ -41,7 +41,6 @@ import type {
   BackgroundShape,
   PersonalisationRole,
   SaveContactOptions,
-  RichTextValue,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -197,8 +196,8 @@ export interface TextImageSectionViewModel {
   id: string;
   type: 'images-section';
   role: ContentType;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   aspectRatio: AspectRatio;
   areImagesFullWidth: boolean;

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -386,10 +386,10 @@
     <div class="tw-relative" :class="{ 'editor-compact': isCompact }">
       <BubbleMenu
         :editor="editor"
-        :options="bubbleMenuOptions"
+        :tippy-options="tippyOptions"
         :update-delay="0"
         :should-show="shouldShow"
-        class="tw-w-fit tw-max-w-[350px]"
+        class="tw-w-fit"
       >
         <div class="bubble-menu">
           <div
@@ -455,8 +455,7 @@ import {
   ButtonGroup,
   TextInput,
 } from '@designcrowd/fe-shared-lib';
-import { EditorContent } from '@tiptap/vue-3';
-import { BubbleMenu } from '@tiptap/vue-3/menus';
+import { EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
@@ -954,7 +953,7 @@ const {
   hyperlinkValue,
   setHyperlinkUrlValue,
   shouldShow,
-  bubbleMenuOptions,
+  tippyOptions,
   handleAdminColorChange,
 } = useRichTextEditor(
   model,

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest';
+import mixin from './TemplatePreview.mixin';
+
+// Covers the `previewImageUrl` computed's content-key precedence. The getter is pure over
+// `this` (template/isPersonalisable/userToken/logoImage), so it's invoked directly with a
+// mocked `this` rather than mounting the component.
+const previewImageUrl = (mixin as any).computed.previewImageUrl as (
+  this: unknown,
+) => string;
+
+const BASE =
+  'https://cdn/preview?templateToken=t&logoDraftToken=l&deviceType=Desktop';
+
+function run(context: {
+  template: {
+    previewImageUrl?: string;
+    contentKey?: string;
+    usesUserPromptContentKey?: boolean;
+  };
+  isPersonalisable?: boolean;
+  userToken?: string | null;
+  logoImage?: { logoVariation?: number };
+}): string {
+  return previewImageUrl.call({
+    isPersonalisable: true,
+    userToken: null,
+    logoImage: undefined,
+    ...context,
+  });
+}
+
+describe('TemplatePreview.mixin previewImageUrl', () => {
+  it('overrides a backend-baked logo-draft contentKey with the editor userPrompt key (bp-5941)', () => {
+    // Empty-search post-purchase: backend baked the per-template logo-draft contentKey.
+    const result = run({
+      template: {
+        previewImageUrl: `${BASE}&contentKey=5267ff6d&userToken=abc`,
+        contentKey: '2c077d2f',
+        usesUserPromptContentKey: true,
+      },
+    });
+
+    expect(result).toContain('userPromptContentKey=2c077d2f');
+    expect(result).not.toContain('contentKey=5267ff6d');
+    // Left in place — the renderer ignores it once userPromptContentKey is set.
+    expect(result).toContain('userToken=abc');
+  });
+
+  it('does not duplicate the userPrompt key when the backend already baked it', () => {
+    const result = run({
+      template: {
+        previewImageUrl: `${BASE}&userPromptContentKey=2c077d2f`,
+        contentKey: '2c077d2f',
+        usesUserPromptContentKey: true,
+      },
+    });
+
+    expect(result.match(/userPromptContentKey=2c077d2f/g)).toHaveLength(1);
+  });
+
+  it('uses the regular bucket (contentKey + userToken) when there is no userPrompt key', () => {
+    const result = run({
+      template: {
+        previewImageUrl: BASE,
+        contentKey: 'abc123',
+        usesUserPromptContentKey: false,
+      },
+      userToken: 'user-1',
+    });
+
+    expect(result).toContain('contentKey=abc123');
+    expect(result).toContain('userToken=user-1');
+    expect(result).not.toContain('userPromptContentKey=');
+  });
+
+  it('leaves an already-personalised regular-bucket url untouched', () => {
+    const result = run({
+      template: {
+        previewImageUrl: `${BASE}&contentKey=already&userToken=abc`,
+        contentKey: 'ignored',
+        usesUserPromptContentKey: false,
+      },
+      userToken: 'user-1',
+    });
+
+    expect(result).toContain('contentKey=already');
+    expect(result).not.toContain('contentKey=ignored');
+  });
+
+  it('appends the logo variation regardless of the content-key branch', () => {
+    const result = run({
+      template: {
+        previewImageUrl: `${BASE}&contentKey=5267ff6d`,
+        contentKey: '2c077d2f',
+        usesUserPromptContentKey: true,
+      },
+      logoImage: { logoVariation: 3 },
+    });
+
+    expect(result).toContain('userPromptContentKey=2c077d2f');
+    expect(result).toContain('logoVariation=3');
+  });
+
+  // The old regex only matched params preceded by `&`, so a leading `?contentKey=`
+  // survived and the URL carried BOTH keys — the exact divergence this override exists
+  // to prevent. Param order must not matter.
+  it('strips a baked contentKey even when it is the first query param', () => {
+    const result = run({
+      template: {
+        previewImageUrl:
+          'https://cdn/preview?contentKey=5267ff6d&templateToken=t&userToken=abc',
+        contentKey: '2c077d2f',
+        usesUserPromptContentKey: true,
+      },
+    });
+
+    expect(result).not.toContain('contentKey=5267ff6d');
+    expect(result).toContain('userToken=abc');
+    expect(result).toContain('userPromptContentKey=2c077d2f');
+    expect(result).toContain('templateToken=t');
+  });
+
+  it('leaves a single userPromptContentKey when one was already baked', () => {
+    const result = run({
+      template: {
+        previewImageUrl: 'https://cdn/preview?userPromptContentKey=STALE&x=1',
+        contentKey: 'EDITOR',
+        usesUserPromptContentKey: true,
+      },
+    });
+
+    expect(result.match(/userPromptContentKey=/g)).toHaveLength(1);
+    expect(result).toContain('userPromptContentKey=EDITOR');
+  });
+});

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -32,6 +32,21 @@ import {
 } from '@brand-page/utils/logo.util';
 import { useVideoStore } from '@src/lib';
 
+// Content params the backend may bake into a preview URL. When the editor's key wins,
+// none of these may survive — a stale one alongside the new key is the bp-5941 mismatch.
+// contentKey MUST stay listed: preview-renderer prefers contentKey+userToken over
+// userPromptContentKey, so a surviving contentKey would silently win. userToken alone
+// can't trigger that branch, so it's left as the backend sent it.
+const BAKED_CONTENT_PARAMS = ['contentKey', 'userPromptContentKey'];
+
+const toUrl = (value: string): URL | null => {
+  try {
+    return new URL(value);
+  } catch {
+    return null;
+  }
+};
+
 const DEBOUNCE_IN_MS = 250;
 
 interface TemplatePreviewData {
@@ -237,29 +252,55 @@ export default defineComponent({
         return '';
       }
 
-      const isAlreadyPersonalised =
-        previewImageUrl.includes('contentKey=') ||
-        previewImageUrl.includes('userPromptContentKey=');
-
-      if (
+      const hasAuthoritativeUserPromptKey =
         this.isPersonalisable &&
-        this.template.contentKey &&
-        !isAlreadyPersonalised
-      ) {
-        if (this.userToken && !this.template.usesUserPromptContentKey) {
-          previewImageUrl += `&contentKey=${this.template.contentKey}`;
-
-          // The backend already bakes userToken into brand-site preview URLs. Only add
-          // it when missing - two userToken params parse as an array and the preview
-          // renderer rejects it ("userToken must be a string type") (bp-5765).
-          if (!previewImageUrl.includes('userToken=')) {
-            previewImageUrl += `&userToken=${this.userToken}`;
+        this.template.usesUserPromptContentKey &&
+        !!this.template.contentKey;
+
+      if (hasAuthoritativeUserPromptKey) {
+        // The editor resolves post-purchase content from the current industry, so its
+        // userPrompt key is authoritative. On empty search the backend bakes a per-template
+        // logo-draft contentKey (DY-1305) that diverges from the editor (bp-5941); strip any
+        // baked content params and resolve from the userPrompt S3 bucket via the editor's key.
+        const url = toUrl(previewImageUrl);
+
+        // Not a parseable absolute URL — nothing to personalise, leave it alone.
+        if (!url) {
+          return previewImageUrl;
+        }
+
+        BAKED_CONTENT_PARAMS.forEach((param) => url.searchParams.delete(param));
+        url.searchParams.set(
+          'userPromptContentKey',
+          this.template.contentKey as string,
+        );
+
+        previewImageUrl = url.toString();
+      } else {
+        const isAlreadyPersonalised =
+          previewImageUrl.includes('contentKey=') ||
+          previewImageUrl.includes('userPromptContentKey=');
+
+        if (
+          this.isPersonalisable &&
+          this.template.contentKey &&
+          !isAlreadyPersonalised
+        ) {
+          if (this.userToken) {
+            previewImageUrl += `&contentKey=${this.template.contentKey}`;
+
+            // The backend already bakes userToken into brand-site preview URLs. Only add
+            // it when missing - two userToken params parse as an array and the preview
+            // renderer rejects it ("userToken must be a string type") (bp-5765).
+            if (!previewImageUrl.includes('userToken=')) {
+              previewImageUrl += `&userToken=${this.userToken}`;
+            }
+          } else {
+            // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
+            // Post-purchase designs with a userPrompt key route here too, NOT through the
+            // userToken/regular-bucket branch above which holds placeholders (bp-5454).
+            previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
           }
-        } else {
-          // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
-          // Post-purchase designs with a userPrompt key route here too, NOT through the
-          // userToken/regular-bucket branch above which holds placeholders (bp-5454).
-          previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
         }
       }
 

package/src/brand-page-maker/composables/ai-chat/useAiMetadataBuilder.ts

@@ -33,6 +33,7 @@ export function useAiMetadataBuilder(logger: Logger) {
     model: BrandPageModel,
     aiAssistantToolCall: AiAssistantToolCall[],
     options: {
+      maxCharacters?: number;
       /**
        * Invoked by the UndoBuilder to resolve the pre-prompt snapshot.
        * Required when the response includes an `undo` tool call.