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

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/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedTabName: import("vue").ComputedRef<string>;
     isAdmin: import("vue").ComputedRef<boolean>;
     contentErrorCount: import("vue").ComputedRef<number>;
-    mode: import("vue").ComputedRef<"images" | "pages" | "add" | "edit" | "focusedContentItem">;
+    mode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -480,9 +480,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     "onUpdate-settings"?: ((...args: any[]) => any) | undefined;
 }>, {
+    brandPageType: string;
     pageTitle: string;
     designDraftToken: string;
-    brandPageType: string;
     pageDescription: string;
     isMaker: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -21,7 +21,6 @@ export interface AiMetadataBuilderResult {
 }
 export declare function useAiMetadataBuilder(logger: Logger): {
     applyAiToolCallsAsync: (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.

package/lib/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.js

@@ -36,18 +36,17 @@ export function useAiWebsiteBuilderChat() {
     const aiMetadataBuilder = useAiMetadataBuilder(aiLogger);
     const checkpointStore = useAiCheckpointStore();
     const eventTracker = useEventTracker();
+    const createWelcomeMessage = () => ({
+        id: '1',
+        type: 'text',
+        role: 'agent',
+        text: 'What changes would you like to make to your website?',
+        timestamp: new Date(),
+    });
     const hasStoredMessages = aiThreadStore.messages.length > 0;
     const threadItems = ref(aiThreadStore.messages.length > 0
         ? aiThreadStore.messages
-        : [
-            {
-                id: '1',
-                type: 'text',
-                role: 'agent',
-                text: 'What changes would you like to make to your website?',
-                timestamp: new Date(),
-            },
-        ]);
+        : [createWelcomeMessage()]);
     // ---------------------------------------------------------------------------
     // Undo snapshot lifecycle (WL9) — reuses the existing `checkpointStore`,
     // which stores pre-prompt BrandPageModel snapshots keyed by user message id.
@@ -100,6 +99,19 @@ export function useAiWebsiteBuilderChat() {
     const isStopped = ref(false);
     const generatedText = ref(null);
     const generatedStyle = ref(null);
+    // External reset (e.g. template switch, BP-5896): tear down the build WS
+    // client so a late push can't repopulate the fresh thread, then re-seed
+    // the welcome bubble. Keyed off `resetToken` — NOT `messages` — to avoid
+    // looping with the deep `threadItems` → `messages` watch above.
+    watch(() => aiThreadStore.resetToken, () => {
+        if (activeBuildWsClient) {
+            activeBuildWsClient.disconnect();
+            activeBuildWsClient = null;
+        }
+        currentTypingMessageId.value = null;
+        isStopped.value = false;
+        threadItems.value = [createWelcomeMessage()];
+    });
     const SERVICE_UNAVAILABLE_MESSAGE = 'This service is not available right now. Please try again later.';
     const addServiceUnavailableBubble = () => {
         threadItems.value.push({

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

@@ -5,15 +5,8 @@ export declare const useBubbleMenu: (editor: Editor, isHyperlinkPopupOpen?: Ref<
         editor: any;
         state: any;
     }) => any;
-    tippyOptions: {
-        duration: number;
+    bubbleMenuOptions: {
         placement: "bottom";
-        interactive: boolean;
-        appendTo: "parent";
-        hideOnClick: boolean;
-        arrow: boolean;
-        offset: [number, number];
-        trigger: "manual";
-        zIndex: number;
+        offset: number;
     };
 };

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

@@ -13,19 +13,15 @@ export const useBubbleMenu = (editor, isHyperlinkPopupOpen) => {
         }
         return false;
     };
-    const tippyOptions = {
-        duration: 100,
+    // v3 BubbleMenu uses Floating UI (was tippy.js in v2). Only placement + offset
+    // carry over; the rest of the old tippy config (trigger/interactive/hideOnClick/
+    // zIndex) is either the v3 default or handled in CSS.
+    const bubbleMenuOptions = {
         placement: 'bottom',
-        interactive: true,
-        appendTo: 'parent',
-        hideOnClick: false,
-        arrow: false,
-        offset: [0, 10],
-        trigger: 'manual',
-        zIndex: 10,
+        offset: 10,
     };
     return {
         shouldShow,
-        tippyOptions,
+        bubbleMenuOptions,
     };
 };

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-text-style").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,90 @@
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import { TextStyle, FontSize, LineHeight } 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 { LetterSpacing } from './extensions/LetterSpacing';
+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 = [
+        // v3 StarterKit bundles Link + Underline; we register both separately (with
+        // custom Link config), so disable the bundled copies to avoid duplicate
+        // extension errors.
+        // trailingNode: false — v3 StarterKit adds a TrailingNode plugin (not in v2)
+        // that appends an empty paragraph after any non-paragraph trailing block.
+        // Disabled to keep editor/stored-content behaviour identical to v2 (BP-5787
+        // is backward-compat-first); revisit as a standalone UX change if wanted.
+        restrictStarterKit
+            ? StarterKit.configure({
+                link: false,
+                underline: false,
+                trailingNode: false,
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+                horizontalRule: false,
+                codeBlock: false,
+                code: false,
+            })
+            : StarterKit.configure({
+                link: false,
+                underline: false,
+                trailingNode: false,
+            }),
+        Underline,
+        // priority: 99 — render the textStyle <span> (which carries font-size) as the
+        // OUTERMOST inline mark, so decoration marks (<u>/<s>) nest INSIDE it and
+        // inherit the applied font-size. v3's extension-text-style defaults to
+        // priority 101, which flips this: <u>/<s> end up outside the font-size span
+        // and inherit only the base paragraph size. Since text-decoration thickness
+        // AND vertical position are computed from the decorating element's own font,
+        // that produced thin, mis-centred underline/strike on large text — a
+        // regression vs v2's serializer, which emitted the font-size span outermost
+        // (BP-5787, backward-compat-first).
+        TextStyle.extend({ priority: 99 }).configure({
+            mergeNestedSpanStyles: true,
+        }),
+        TextAlign.configure({
+            types: ['heading', 'paragraph'],
+        }),
+        FontFamily.configure({
+            types: ['textStyle'],
+        }),
+        // FontSize + LineHeight are now shipped natively by @tiptap/extension-text-style.
+        FontSize.configure({ types: ['textStyle'] }),
+        LetterSpacing,
+        LineHeight.configure({ types: ['textStyle'] }),
+        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;
+};

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

@@ -43,7 +43,7 @@ interface UseRichTextEditorReturn {
         editor: any;
         state: any;
     }) => boolean;
-    tippyOptions: Record<string, any>;
+    bubbleMenuOptions: Record<string, any>;
     handleAdminColorChange: (color: {
         id: string;
         name: string;

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

@@ -1,72 +1,25 @@
 import { onBeforeUnmount, computed, watch, } from 'vue';
 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 { FontSize } from './extensions/FontSize';
-import { LetterSpacing } from './extensions/LetterSpacing';
-import { LineHeight } from './extensions/LineHeight';
-import Highlight from '@tiptap/extension-highlight';
-import Placeholder from '@tiptap/extension-placeholder';
-import Link from '@tiptap/extension-link';
+import { getRteExtensions } from './getRteExtensions';
 import { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
 import { useFont } from './font';
 import { useSpacing } from './spacing';
 import Color from 'color';
-import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRTE, skipStyleDetection, } from '@brand-page-maker/utils';
+import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitizeRteJson, skipStyleDetection, } from '@brand-page-maker/utils';
 import { HYPERLINK_TYPE, } from '@brand-page';
 import { letterSpacingValueConvertor, colorConvertor, backgroundColorConvertor, } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
-import { MaxLength } from './extensions/MaxLength';
-import { AutoLink } from './extensions/AutoLink';
-import { isHrefPageId, useHyperlink } from './hyperlink';
+import { useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import { hasLogoColorVar, isLogoColor, getRTEColor, } from '@brand-page-maker/utils/rich-text-editor.util';
 import { useEventTracker, EVENTS } from '../useEventTracker';
 export const useExternalRichTextEditor = () => {
     const externalEditor = 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,
-                HTMLAttributes: (attrs) => {
-                    const href = attrs.href;
-                    const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
-                    return {
-                        rel: 'noopener noreferrer',
-                        target: isExternal ? '_blank' : null,
-                    };
-                },
-                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
-            }),
-            AutoLink,
-        ],
+        extensions: getRteExtensions({ includeLinkRel: true }),
     });
     return {
         externalEditor,
@@ -77,51 +30,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const editor = new Editor({
         content: model.value ?? '',
         editable: !props.readOnly,
-        extensions: [
-            StarterKit.configure({
-                bulletList: false,
-                orderedList: false,
-                listItem: false,
-                horizontalRule: false,
-                codeBlock: false,
-                code: false,
-            }),
-            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,
-            }),
-            Placeholder.configure({
+        extensions: getRteExtensions({
+            restrictStarterKit: true,
+            editing: {
                 placeholder: props.placeholder,
-            }),
-            MaxLength.configure({ maxLength: props.maxLength }),
-            Link.configure({
-                openOnClick: false,
-                defaultProtocol: 'https',
-                autolink: true,
-                HTMLAttributes: (attrs) => {
-                    const href = attrs.href;
-                    const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
-                    return {
-                        target: isExternal ? '_blank' : null,
-                    };
-                },
-                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
-            }),
-            AutoLink,
-        ],
+                maxLength: props.maxLength,
+            },
+        }),
         editorProps: {
             handleDOMEvents: {
                 drop(view, event) {
@@ -224,7 +139,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const { selectedFont, toggleFont, toggleFontSize, toggleFontAll, toggleFontSizeAll, } = useFont(editor, fontSettings, fontStyleDropdownRef);
     const { letterSpacingValue, lineHeightValue, letterSpacing, lineHeight, setLetterSpaceAll, setLineHeightAll, } = useSpacing(editor);
     const { hyperlinkValue, setHyperlinkUrl, setHyperlinkUrlValue, removeHyperlink: removeHyperlinkFromComposable, applyHyperlinkToEditor, } = useHyperlink(editor);
-    const { shouldShow, tippyOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
+    const { shouldShow, bubbleMenuOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
     watch(() => props.styles.textAlign, (newAlignment) => {
         if (newAlignment && newAlignment !== currentAlignment.value.alignment) {
             skipStyleDetection(editor.chain().selectAll().setTextAlign(newAlignment)).run();
@@ -239,8 +154,12 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         const appliedSinceLast = historyStore.snapshotAppliedToken !== lastAppliedToken;
         lastAppliedToken = historyStore.snapshotAppliedToken;
         const isExternalMutation = updateRichTextEditor.value || appliedSinceLast;
-        if (isExternalMutation && editor.getHTML() !== newValue) {
-            editor.commands.setContent(newValue, false);
+        // Compare in the stored (JSON) format so a JSON model value isn't always
+        // seen as "changed" against the editor's HTML (which would re-run
+        // setContent and reset the user's just-applied styles).
+        const hasChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(newValue);
+        if (isExternalMutation && hasChanged) {
+            editor.commands.setContent(newValue, { emitUpdate: false });
             updateRichTextEditor.value = false;
             //text style type is not switching when reordering
             textStyleTypeOptions.forEach((item) => {
@@ -267,11 +186,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             });
         }
     });
-    // Update model when editor content changes
+    // Update model when editor content changes. RTE content is stored as Tiptap
+    // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
+    // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
+    // the per-keystroke path allocates nothing heavy.
     editor.on('update', () => {
-        const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
         // An update fired while the editor is unfocused is TipTap rewriting the
-        // model back into its canonical HTML during mount rehydration or a
+        // model back into its canonical form during mount rehydration or a
         // programmatic setContent — not a user edit. Tag the emit so the write
         // folds into the current undo head instead of pushing a phantom entry
         // (BP-5810). The flag travels WITH the value through the debounced
@@ -285,7 +206,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         // the RTE only mounts inside an already-open settings drawer and the user
         // focuses it before formatting, so this doesn't occur — revisit if a
         // consumer ever drives toolbar actions on an unfocused editor.
-        emit('update:modelValue', sanitizedData.sanitizedHtml, {
+        emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
             isHydrationWrite: !editor.isFocused,
         });
     });
@@ -725,7 +646,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         hyperlinkValue,
         setHyperlinkUrlValue,
         shouldShow,
-        tippyOptions,
+        bubbleMenuOptions,
         handleAdminColorChange,
     };
 };

package/lib/src/brand-page-maker/stores/ai-thread/ai-website-builder-thread-store.d.ts

@@ -8,7 +8,9 @@ export declare const useAiWebsiteBuilderThreadStore: import("pinia").StoreDefini
     buildSectionsCompleted: import("vue").Ref<number, number>;
     promptText: import("vue").Ref<string, string>;
     stopGeneration: import("vue").Ref<(() => void) | null, (() => void) | null>;
-}, "threadId" | "runId" | "messages" | "isProcessing" | "buildId" | "isBuildInProgress" | "buildSectionsCompleted" | "promptText" | "stopGeneration">, Pick<{
+    resetToken: import("vue").Ref<number, number>;
+    reset: () => void;
+}, "threadId" | "runId" | "messages" | "isProcessing" | "buildId" | "isBuildInProgress" | "buildSectionsCompleted" | "promptText" | "stopGeneration" | "resetToken">, Pick<{
     threadId: import("vue").Ref<string | null, string | null>;
     runId: import("vue").Ref<string | null, string | null>;
     messages: import("vue").Ref<any[], any[]>;
@@ -18,6 +20,8 @@ export declare const useAiWebsiteBuilderThreadStore: import("pinia").StoreDefini
     buildSectionsCompleted: import("vue").Ref<number, number>;
     promptText: import("vue").Ref<string, string>;
     stopGeneration: import("vue").Ref<(() => void) | null, (() => void) | null>;
+    resetToken: import("vue").Ref<number, number>;
+    reset: () => void;
 }, never>, Pick<{
     threadId: import("vue").Ref<string | null, string | null>;
     runId: import("vue").Ref<string | null, string | null>;
@@ -28,4 +32,6 @@ export declare const useAiWebsiteBuilderThreadStore: import("pinia").StoreDefini
     buildSectionsCompleted: import("vue").Ref<number, number>;
     promptText: import("vue").Ref<string, string>;
     stopGeneration: import("vue").Ref<(() => void) | null, (() => void) | null>;
-}, never>>;
+    resetToken: import("vue").Ref<number, number>;
+    reset: () => void;
+}, "reset">>;

package/lib/src/brand-page-maker/stores/ai-thread/ai-website-builder-thread-store.js

@@ -10,6 +10,24 @@ export const useAiWebsiteBuilderThreadStore = defineStore('aiWebsiteBuilderThrea
     const buildSectionsCompleted = ref(0);
     const promptText = ref('');
     const stopGeneration = ref(null);
+    // Bumped on every reset so consumers (useAiWebsiteBuilderChat) can react
+    // without watching `messages`, which would loop with its own deep watch.
+    const resetToken = ref(0);
+    const reset = () => {
+        if (isProcessing.value || isBuildInProgress.value) {
+            stopGeneration.value?.();
+        }
+        threadId.value = null;
+        runId.value = null;
+        messages.value = [];
+        isProcessing.value = false;
+        buildId.value = null;
+        isBuildInProgress.value = false;
+        buildSectionsCompleted.value = 0;
+        promptText.value = '';
+        stopGeneration.value = null;
+        resetToken.value += 1;
+    };
     return {
         threadId,
         runId,
@@ -20,5 +38,7 @@ export const useAiWebsiteBuilderThreadStore = defineStore('aiWebsiteBuilderThrea
         buildSectionsCompleted,
         promptText,
         stopGeneration,
+        resetToken,
+        reset,
     };
 });

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -1,6 +1,8 @@
 import { EMPTY_LOGO_IMAGE_MODEL, SENSITIVE_CONTENT_TYPES, TEXT_STYLE_TYPES, VIEWPORTS, } from '@brand-page';
 import { BackgroundStyles, BRAND_PAGE_TYPES, BrandPageModel, CONTENT_TYPES, NavigationDesktop, NavigationMobile, } from '@brand-page';
 import { useBrandPageMakerUserStore } from '../user';
+import { useAiWebsiteBuilderThreadStore } from '../ai-thread/ai-website-builder-thread-store';
+import { useAiCheckpointStore } from '../ai-checkpoint/ai-checkpoint-store';
 import { defineStore } from 'pinia';
 import { toRaw } from 'vue';
 import { useUiStore } from '../ui';
@@ -353,6 +355,11 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 backgroundStyles: brandPageModel.styles.backgroundStyles,
             });
             await this.recalculateLogoSizes(true);
+            // A template switch invalidates the AI conversation — the server-side
+            // thread's history still describes the previous template (BP-5896).
+            // reset() also stops any in-flight generation before clearing.
+            useAiWebsiteBuilderThreadStore().reset();
+            useAiCheckpointStore().clearAll();
             this.setIsModifiedAfterTemplateApplied({
                 isModified: false,
             });

package/lib/src/brand-page-maker/utils/index.d.ts

@@ -5,4 +5,6 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
+export * from './rte-render.util';
+export * from './rte-sanitize.util';
 export declare const isColorMatched: (color: string | null | undefined) => boolean;

package/lib/src/brand-page-maker/utils/index.js

@@ -6,6 +6,8 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
+export * from './rte-render.util';
+export * from './rte-sanitize.util';
 export const isColorMatched = (color) => {
     if (!color)
         return false;