@designcrowd/library.brand-page 6.0.19-ast-btns-5 → 6.0.19

package/lib/src/brand-page/utils/migration/migration-19.js

@@ -1,40 +1,71 @@
+import { hasRTEContent } from '../../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 /**
- * BP-5800 — decouple the section container background from the global button fill.
+ * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
  *
- * These blocks' outer container historically took its background from the button
- * fill colour (`containerStyle = { ...buttonStyles }`). They now own a
- * `backgroundStyle`; seed its `backgroundColor` from the current button fill so
- * existing sites render identically while the colour becomes independently editable.
+ * The editor now emits, and the renderer now reads, Tiptap JSON. Existing
+ * published/saved sites still hold RTE fields as HTML strings. This converts
+ * them on load:
+ *   - maker: the loaded model is JSON, so the next save persists JSON.
+ *   - web-renderer: lazy migrate-on-read — old sites render from JSON without
+ *     needing a re-save.
  *
- * runAlways + idempotent: only seeds when the colour is unset, so it never overrides
- * a colour the user has set. (contact-form is handled by migration-20 — its BP/BC
- * container colour moved to `cardStyle`.)
+ * Runs on EVERY load (runAlways) so it also normalises content the AI section
+ * builders still emit as HTML — there is no need to change those builders or
+ * widen the content model types.
+ *
+ * Scope: only HTML-RTE strings (hasRTEContent) are converted. Plain strings,
+ * numbers, and already-JSON docs are left untouched, so the migration is
+ * idempotent (re-running on JSON content is a no-op — non-string values are
+ * skipped). Nested RTE inside item arrays (textItems, testimonials, images…)
+ * is handled by recursing into arrays; style objects are intentionally not
+ * descended into (they never hold RTE content).
  */
-const CONTAINER_BACKGROUND_TYPES = new Set([
-    'mailing-list',
-    'request-payment',
-    'support-me',
-]);
+const convertRteStringsToJson = (value, editor) => {
+    if (Array.isArray(value)) {
+        value.forEach((item) => convertRteStringsToJson(item, editor));
+        return;
+    }
+    if (!value || typeof value !== 'object')
+        return;
+    const record = value;
+    Object.keys(record).forEach((key) => {
+        const field = record[key];
+        if (typeof field === 'string' && hasRTEContent(field)) {
+            editor.commands.setContent(field);
+            record[key] = editor.getJSON();
+        }
+        else if (Array.isArray(field)) {
+            convertRteStringsToJson(field, editor);
+        }
+    });
+};
 export const migration19 = async (migrationResult) => {
     const { brandPageModel } = migrationResult;
-    const buttonFill = brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
-    if (buttonFill === undefined) {
+    // HTML→JSON parsing needs a DOM (Tiptap's editor). In a DOM-less context
+    // (pure-node SSR or unit tests) we can't parse HTML, so we leave the RTE
+    // fields as HTML strings — the renderer and the fraud/translation extractors
+    // all dual-read HTML, so this is safe. Conversion happens wherever a DOM is
+    // available (the browser editor, jsdom).
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
         return migrationResult;
     }
-    brandPageModel.pages.forEach((page) => {
-        page.contents.forEach((content) => {
-            if (!CONTAINER_BACKGROUND_TYPES.has(content.type)) {
-                return;
-            }
-            const block = content;
-            if (block.backgroundStyle?.backgroundColor !== undefined) {
-                return;
+    let externalEditor;
+    try {
+        externalEditor = useExternalRichTextEditor().externalEditor;
+    }
+    catch {
+        return migrationResult;
+    }
+    try {
+        for (const page of brandPageModel.pages) {
+            for (const content of page.contents) {
+                convertRteStringsToJson(content, externalEditor);
             }
-            block.backgroundStyle = {
-                ...block.backgroundStyle,
-                backgroundColor: buttonFill,
-            };
-        });
-    });
+        }
+    }
+    finally {
+        externalEditor.destroy();
+    }
     return migrationResult;
 };

package/lib/src/brand-page/utils/migration.util.js

@@ -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';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -143,15 +142,12 @@ const MIGRATION_TABLE = [
     {
         version: 19,
         migrateFn: migration19,
-        // runAlways: re-apply on every load so already-published sites pick up the seed
-        // without a version bump. Idempotent — only seeds backgroundColor when unset.
+        // runAlways: normalise RTE to JSON on every load. Idempotent (only HTML
+        // strings are converted; JSON is skipped), so it also catches content the
+        // AI section builders still emit as HTML — converting it on the next read
+        // without a new migration or changes to those builders.
         runAlways: true,
-        description: 'BP-5800: seed own container backgroundStyle from the button fill colour for mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
-    },
-    {
-        version: 20,
-        migrateFn: migration20,
-        description: 'BP-5800: contact-form BP/BC container colour moves to cardStyle — seed cardStyle from the button fill (its long-standing rendered colour) so existing sites render unchanged',
+        description: 'BP-5787: convert inline-HTML RTE content to Tiptap JSON on load (lazy migrate-on-read for web-renderer; persisted on next maker save; also normalises AI-built HTML)',
     },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));

package/lib/src/brand-page/utils/page-heading.util.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageContext } from '../models';
+/**
+ * Resolves the text for the single page-level `<h1>` a published site renders
+ * (BP-5866 — Bing rejected indexing because every section emitted its own
+ * `<h1>`; the page now owns exactly one).
+ *
+ * Mirrors the SSR `<title>` rule so the crawlable heading matches the document
+ * title: a sub-page reads `"{business} - {page}"`, while the home/root page
+ * reads just the business/site name — never the weak, non-descriptive literal
+ * "Home". Falls back to the page name, then the slug, when the business name
+ * is unset.
+ */
+export declare const getPageHeadingText: (context: BrandPageContext) => string;

package/lib/src/brand-page/utils/page-heading.util.js

@@ -0,0 +1,24 @@
+import { findNavItemByRelativePath } from './route.util';
+/**
+ * Resolves the text for the single page-level `<h1>` a published site renders
+ * (BP-5866 — Bing rejected indexing because every section emitted its own
+ * `<h1>`; the page now owns exactly one).
+ *
+ * Mirrors the SSR `<title>` rule so the crawlable heading matches the document
+ * title: a sub-page reads `"{business} - {page}"`, while the home/root page
+ * reads just the business/site name — never the weak, non-descriptive literal
+ * "Home". Falls back to the page name, then the slug, when the business name
+ * is unset.
+ */
+export const getPageHeadingText = (context) => {
+    const businessName = (context.pageTitle || '').trim();
+    const navItem = findNavItemByRelativePath(context.nav?.navItems || [], context.currentPageRelativePath || '');
+    const pageName = (navItem?.displayName || '').trim();
+    const isSubPage = Boolean(navItem && !navItem.isRoot && pageName);
+    if (businessName) {
+        return isSubPage ? `${businessName} - ${pageName}` : businessName;
+    }
+    // No business name: use the sub-page's name, else the slug — never the
+    // root page's own display name (usually the literal "Home").
+    return (isSubPage ? pageName : '') || context.brandPageSlug || '';
+};

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

@@ -1,5 +1,5 @@
 export declare const getRenderText: (text: string) => string;
-export declare const escapeContentText: (text: string | undefined) => string | undefined;
+export declare const escapeContentText: (text: unknown) => string | undefined;
 export declare const decodeHtmlEntities: (text: string) => string;
 export declare const unescapeContentText: (text: string) => string;
 export declare const encodeContentText: (text: string | undefined) => string | undefined;

package/lib/src/brand-page/utils/text.util.js

@@ -1,11 +1,43 @@
 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) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 'doc';
+const jsonDocPlainText = (doc) => {
+    const parts = [];
+    const walk = (node) => {
+        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) => {
+    // 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;
+    }
     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) => {
     if (!text) {
         return text;
     }
+    if (isTiptapDoc(text)) {
+        return jsonDocPlainText(text);
+    }
+    if (typeof text !== 'string') {
+        return undefined;
+    }
     return text
         .replace(/(<([^>]+)>)/gi, '')
         .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);

package/lib/src/brand-page/utils/vcard.util.js

@@ -150,9 +150,9 @@ const processSocialLinks = (socialLinksContent, vcardLines, addedEntries) => {
     });
 };
 const addProfileInfo = (profile, vcardLines) => {
-    const name = sanitizeForVCard(profile.name || '');
-    const title = sanitizeForVCard(profile.title || '');
-    const description = sanitizeForVCard(profile.description || '');
+    const name = sanitizeForVCard(getPlainTextFromRTE(profile.name) || '');
+    const title = sanitizeForVCard(getPlainTextFromRTE(profile.title) || '');
+    const description = sanitizeForVCard(getPlainTextFromRTE(profile.description) || '');
     if (name) {
         const nameParts = name.trim().split(/\s+/);
         const lastName = nameParts.length > 1 ? nameParts.pop() || '' : '';
@@ -205,6 +205,6 @@ const downloadVCard = (vcard, filename) => {
 export const saveContact = (brandPageData) => {
     const vcard = generateVCard(brandPageData);
     const profile = findProfileContent(brandPageData);
-    const filename = generateVCardFilename(profile?.name);
+    const filename = generateVCardFilename(getPlainTextFromRTE(profile?.name));
     downloadVCard(vcard, filename);
 };

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

@@ -28,6 +28,7 @@ interface ViewModelMappingOptions {
     setVideoUrlsWithToken?: (token: string, videoUrl: string, previewImageUrl: string, assetId: string) => void;
 }
 export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo: boolean | undefined, options: ViewModelMappingOptions) => BrandPageViewModel;
+export declare const resolvePageIdsInRteJson: (doc: unknown, nav: NavViewModel, options: ViewModelMappingOptions) => unknown;
 export declare const isLogoViewModel: (viewModel: ContentViewModel) => viewModel is LogoViewModel;
 /** for service.brand-page website preview by logo draft token */
 export declare const applyLogoImageToBrandPageViewModel: (viewModel: BrandPageViewModel, logoImage: LogoImageModel) => BrandPageViewModel;

package/lib/src/brand-page/utils/view-model.util.js

@@ -10,7 +10,7 @@ import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
 import { getBoxShadowValue } from './button.util';
 import { findNavItemByPageId, getRouteNameByPageIndex, getRouteParamsByPage, } from './route.util';
-import { hasRTEContent } from '../../brand-page-maker/utils';
+import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
 import { getPageIdFromHref, isHrefPageId, } from '../../brand-page-maker/composables/rich-text-editor/hyperlink';
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
@@ -526,7 +526,6 @@ const mapToShapesSectionViewModel = (content, styles, brandPageType) => {
 };
 const mapToShopViewModel = (content, styles) => {
     const buttonStyles = new ButtonStyles({
-        selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
         style: {
             ...styles.buttonStyles.style,
         },
@@ -864,13 +863,75 @@ const mapPageIdReferencesToRelativePaths = (pages, nav, options) => {
         });
     });
 };
+// 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, nav, options) => {
+    // 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, nav, options) => {
+    let changed = false;
+    const walk = (node) => {
+        if (!node || typeof node !== 'object') {
+            return node;
+        }
+        let next = node;
+        if (Array.isArray(node.marks)) {
+            const marks = node.marks.map((mark) => {
+                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, nav, options) => {
     Object.keys(content).forEach((key) => {
         const value = content[key];
         if (value === undefined || value === null) {
             return;
         }
-        if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
+        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[key] =
+                resolvePageIdsInRteJson(value, nav, options);
+        }
+        else if (typeof value === 'object' &&
+            (key === 'items' || key === 'textItems')) {
             if (Array.isArray(value)) {
                 value.forEach((item) => {
                     dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
@@ -882,24 +943,10 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (content, nav, options)
         }
         else if (typeof value === 'string' && hasRTEContent(value)) {
             content[key] = value.replace(/<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi, (match, existingAttrsStart, href, existingAttrsEnd) => {
-                // 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 match;
+                const resolved = resolvePageIdHref(href, nav, options);
+                return resolved === null
+                    ? match
+                    : `<a ${existingAttrsStart}href="${resolved}"${existingAttrsEnd}>`;
             });
         }
     });

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

@@ -1,4 +1,4 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, RichTextValue } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -94,8 +94,8 @@ export interface TextImageSectionViewModel {
     id: string;
     type: 'images-section';
     role: ContentType;
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     displayStyle: ImagesSectionContentDisplayStyle;
     aspectRatio: AspectRatio;
     areImagesFullWidth: boolean;

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts

@@ -0,0 +1,22 @@
+/**
+ * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
+ *
+ * A single rich-text value that exercises every mark/node the editor can emit,
+ * so one snapshot guards the whole serialisation surface. Captured as a baseline
+ * on the current HTML pipeline; after the migration the JSON pipeline must
+ * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
+ *
+ * Coverage:
+ *  - block nodes: heading (h2), paragraph, text-align (center / right)
+ *  - inline marks: bold, italic, underline, strike
+ *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
+ *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
+ *  - highlight (background colour via <mark>)
+ *  - links: internal (target=_self) and external (target=_blank rel=noopener)
+ */
+export declare const COMPLEX_RTE_HTML = "<h2 style=\"text-align: center\"><span style=\"color: var(--logo-text-color)\">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style=\"font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4\">styled span</span> <mark data-color=\"#ffe08a\" style=\"background-color: #ffe08a\">highlight</mark> <span style=\"color: #FF0000\">literal hex</span> <a target=\"_self\" href=\"/about\">internal link</a> <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://example.com\">external link</a></p><p style=\"text-align: right\">second paragraph, right-aligned</p>";
+/**
+ * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
+ * (BP-5787 stores token refs instead of flattening them to rgb()).
+ */
+export declare const THEME_TOKEN_REF = "var(--logo-text-color)";

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js

@@ -0,0 +1,22 @@
+/**
+ * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
+ *
+ * A single rich-text value that exercises every mark/node the editor can emit,
+ * so one snapshot guards the whole serialisation surface. Captured as a baseline
+ * on the current HTML pipeline; after the migration the JSON pipeline must
+ * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
+ *
+ * Coverage:
+ *  - block nodes: heading (h2), paragraph, text-align (center / right)
+ *  - inline marks: bold, italic, underline, strike
+ *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
+ *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
+ *  - highlight (background colour via <mark>)
+ *  - links: internal (target=_self) and external (target=_blank rel=noopener)
+ */
+export const COMPLEX_RTE_HTML = `<h2 style="text-align: center"><span style="color: var(--logo-text-color)">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style="font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4">styled span</span> <mark data-color="#ffe08a" style="background-color: #ffe08a">highlight</mark> <span style="color: #FF0000">literal hex</span> <a target="_self" href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>`;
+/**
+ * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
+ * (BP-5787 stores token refs instead of flattening them to rgb()).
+ */
+export const THEME_TOKEN_REF = 'var(--logo-text-color)';

package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.d.ts

@@ -1,7 +1,6 @@
 import { type ContactFormContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 export declare const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
-export declare const contactCardColorVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const displayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const imageUrlVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;

package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.js

@@ -9,12 +9,6 @@ export const contactCardDisplayTypeVisibilityAssessor = (content, context) => {
             ALIGN_RIGHT_FULL_IMAGE,
         ].includes(content?.layoutStyle)) && context.isBrandSite);
 };
-// Card colour picker: on brand-page/brand-contact it's the collapsible container
-// colour (shown for every layout); on brand-site it's the card in card layouts.
-export const contactCardColorVisibilityAssessor = (content, context) => {
-    return (!context.isBrandSite ||
-        contactCardDisplayTypeVisibilityAssessor(content, context));
-};
 export const displayTypeVisibilityAssessor = (content, context) => {
     return Boolean(content?.layoutStyle === '' || context.isBrandPage);
 };

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -1347,6 +1347,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     bpShowTopNavigationMobile(): boolean;
     bpShowTopNavigationDesktop(): boolean;
     slug(): string;
+    pageHeadingText(): string;
     shouldShowSaveContactWidget(): boolean;
     isPremiumSubscription(): boolean;
     shouldShowPopupBranding(): boolean;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.d.ts

@@ -0,0 +1,14 @@
+/**
+ * BP-5787 — font-family with quote-stripping parse.
+ *
+ * The stock extension stores whatever `element.style.fontFamily` returns. For
+ * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
+ * value, so parsing HTML — pasting RTE-styled text between editors, or the
+ * HTML→JSON migration — yields a value that still contains the quote chars
+ * (`"Open Sans"`). That value then (a) no longer matches the font list and,
+ * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
+ * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
+ * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
+ * quotes on parse so the stored value is always the bare family name.
+ */
+export declare const FontFamily: import("@tiptap/core").Extension<import("@tiptap/extension-font-family").FontFamilyOptions, any>;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.js

@@ -0,0 +1,39 @@
+import TiptapFontFamily from '@tiptap/extension-font-family';
+/**
+ * BP-5787 — font-family with quote-stripping parse.
+ *
+ * The stock extension stores whatever `element.style.fontFamily` returns. For
+ * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
+ * value, so parsing HTML — pasting RTE-styled text between editors, or the
+ * HTML→JSON migration — yields a value that still contains the quote chars
+ * (`"Open Sans"`). That value then (a) no longer matches the font list and,
+ * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
+ * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
+ * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
+ * quotes on parse so the stored value is always the bare family name.
+ */
+export const FontFamily = TiptapFontFamily.extend({
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontFamily: {
+                        default: null,
+                        // Strip quotes only — keep '' for an absent value so the stored
+                        // JSON shape matches the other textStyle attrs (FontSize etc.).
+                        parseHTML: (element) => element.style.fontFamily?.replace(/['"]+/g, ''),
+                        renderHTML: (attributes) => {
+                            if (!attributes.fontFamily) {
+                                return {};
+                            }
+                            return {
+                                style: `font-family: ${attributes.fontFamily}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+});

package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.d.ts

@@ -0,0 +1,28 @@
+import type { Extensions } from '@tiptap/vue-3';
+/**
+ * Single source of truth for the Tiptap extension set (BP-5787).
+ *
+ * The live editor, the headless serialiser (useExternalRichTextEditor), and
+ * the upcoming render-from-JSON path must all use the SAME extensions, or
+ * rendered output drifts from what the user authored. This factory removes the
+ * previous duplication while preserving each consumer's exact configuration.
+ *
+ * Known, intentional differences are parameterised:
+ *  - `restrictStarterKit` — the live editor disables list/hr/code nodes.
+ *  - `includeLinkRel` — the headless/render path emits rel="noopener noreferrer";
+ *    the live editing surface does not.
+ *  - `editing` — only the live editor carries the Placeholder + MaxLength plugins
+ *    (neither affects serialised output; they are editing-time only).
+ */
+export interface RteExtensionOptions {
+    /** Disable StarterKit nodes the editor doesn't use (lists, hr, code). */
+    restrictStarterKit?: boolean;
+    /** Emit rel="noopener noreferrer" on link HTMLAttributes (render path). */
+    includeLinkRel?: boolean;
+    /** When present, add the live-editing-only plugins (Placeholder, MaxLength). */
+    editing?: {
+        placeholder?: string;
+        maxLength?: number;
+    };
+}
+export declare const getRteExtensions: (options?: RteExtensionOptions) => Extensions;

package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.js

@@ -0,0 +1,66 @@
+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 ColorExtension from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import { FontFamily } from './extensions/FontFamily';
+import { FontSize } from './extensions/FontSize';
+import { LetterSpacing } from './extensions/LetterSpacing';
+import { LineHeight } from './extensions/LineHeight';
+import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { isHrefPageId } from './hyperlink';
+export const getRteExtensions = (options = {}) => {
+    const { restrictStarterKit = false, includeLinkRel = false, editing, } = options;
+    const extensions = [
+        restrictStarterKit
+            ? StarterKit.configure({
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+                horizontalRule: false,
+                codeBlock: false,
+                code: false,
+            })
+            : 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,
+        }),
+    ];
+    // Live-editing-only plugins sit between Highlight and Link (original order).
+    if (editing) {
+        extensions.push(Placeholder.configure({ placeholder: editing.placeholder }), MaxLength.configure({ maxLength: editing.maxLength }));
+    }
+    extensions.push(Link.configure({
+        openOnClick: false,
+        defaultProtocol: 'https',
+        autolink: true,
+        HTMLAttributes: (attrs) => {
+            const href = attrs.href;
+            const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
+            return {
+                ...(includeLinkRel && { rel: 'noopener noreferrer' }),
+                target: isExternal ? '_blank' : null,
+            };
+        },
+        isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
+    }), AutoLink);
+    return extensions;
+};