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

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

@@ -23,16 +23,20 @@ export const useBubbleMenu = (
     return false;
   };
 
-  // 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 = {
+  const tippyOptions = {
+    duration: 100,
     placement: 'bottom' as const,
-    offset: 10,
+    interactive: true,
+    appendTo: 'parent' as const,
+    hideOnClick: false,
+    arrow: false,
+    offset: [0, 10] as [number, number],
+    trigger: 'manual' as const,
+    zIndex: 10,
   };
 
   return {
     shouldShow,
-    bubbleMenuOptions,
+    tippyOptions,
   };
 };

package/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.ts

@@ -0,0 +1,73 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+export type FontSizeOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      /**
+       * Set the font size
+       */
+      setFontSize: (fontSize: string) => ReturnType;
+      /**
+       * Unset the font size
+       */
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Extension.create<FontSizeOptions>({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.fontSize.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (fontSize) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontSize }).run();
+        },
+      unsetFontSize:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { fontSize: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+    };
+  },
+});

package/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.ts

@@ -0,0 +1,85 @@
+import { Extension } from '@tiptap/core';
+
+export type LineHeightOptions = {
+  /**
+   * Node / mark types that should carry the `lineHeight` attribute.
+   * Defaults to `['textStyle']` to piggy‑back on TipTap’s built‑in mark.
+   */
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    lineHeight: {
+      /**
+       * Apply a line‑height to the current selection (or stored marks).
+       */
+      setLineHeight: (heightValue: string) => ReturnType;
+      /**
+       * Remove any line‑height attribute.
+       */
+      unsetLineHeight: () => ReturnType;
+      /**
+       * Read the current line‑height from the selection / stored marks.
+       */
+      getLineHeight: () => ReturnType;
+    };
+  }
+}
+
+export const LineHeight = Extension.create<LineHeightOptions>({
+  name: 'lineHeight',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) =>
+              (element.style.lineHeight || '').replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.lineHeight) {
+                return {};
+              }
+
+              return { style: `line-height: ${attributes.lineHeight}` };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setLineHeight:
+        (lineHeight) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { lineHeight }).run();
+        },
+
+      unsetLineHeight:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { lineHeight: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+
+      getLineHeight:
+        () =>
+        ({ editor }) => {
+          return editor.getAttributes('textStyle').lineHeight;
+        },
+    };
+  },
+});

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

@@ -8,7 +8,18 @@ import {
   watch,
 } from 'vue';
 import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from './getRteExtensions';
+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 type { StyleTextFontFamilyOption } from '@shared/style-settings/models';
 import { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
@@ -20,7 +31,7 @@ import {
   emToPx,
   isStyleChanged,
   pxToEm,
-  sanitizeRteJson,
+  sanitiseClientSideRTE,
   skipStyleDetection,
 } from '@brand-page-maker/utils';
 import type { HyperlinkType, TextStyles } from '@brand-page';
@@ -38,7 +49,9 @@ import {
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
-import { useHyperlink } from './hyperlink';
+import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { isHrefPageId, useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import {
   hasLogoColorVar,
@@ -79,7 +92,7 @@ interface UseRichTextEditorReturn {
   hyperlinkValue: ComputedRef<{ id: string; name: string; value: string }>;
   setHyperlinkUrlValue: (url: string) => void;
   shouldShow: ({ editor, state }: { editor: any; state: any }) => boolean;
-  bubbleMenuOptions: Record<string, any>;
+  tippyOptions: Record<string, any>;
   handleAdminColorChange: (
     color: {
       id: string;
@@ -116,7 +129,44 @@ export const useExternalRichTextEditor = (): {
 } => {
   const externalEditor = new Editor({
     editable: false,
-    extensions: getRteExtensions(),
+    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,
+    ],
   });
 
   return {
@@ -164,13 +214,54 @@ export const useRichTextEditor = (
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
-    extensions: getRteExtensions({
-      restrictStarterKit: true,
-      editing: {
+    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({
         placeholder: props.placeholder,
-        maxLength: props.maxLength,
-      },
-    }),
+      }),
+      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,
+    ],
     editorProps: {
       handleDOMEvents: {
         drop(view, event: DragEvent) {
@@ -349,7 +440,7 @@ export const useRichTextEditor = (
     applyHyperlinkToEditor,
   } = useHyperlink(editor);
 
-  const { shouldShow, bubbleMenuOptions } = useBubbleMenu(
+  const { shouldShow, tippyOptions } = useBubbleMenu(
     editor,
     isHyperlinkPopupOpen,
   );
@@ -381,14 +472,8 @@ export const useRichTextEditor = (
 
       const isExternalMutation = updateRichTextEditor.value || appliedSinceLast;
 
-      // 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 });
+      if (isExternalMutation && editor.getHTML() !== newValue) {
+        editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
         textStyleTypeOptions.forEach((item) => {
@@ -418,13 +503,12 @@ export const useRichTextEditor = (
     }
   });
 
-  // 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.
+  // Update model when editor content changes
   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 form during mount rehydration or a
+    // model back into its canonical HTML 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
@@ -438,7 +522,7 @@ export const useRichTextEditor = (
     // 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', sanitizeRteJson(editor.getJSON()), {
+    emit('update:modelValue', sanitizedData.sanitizedHtml, {
       isHydrationWrite: !editor.isFocused,
     });
   });
@@ -965,7 +1049,7 @@ export const useRichTextEditor = (
     hyperlinkValue,
     setHyperlinkUrlValue,
     shouldShow,
-    bubbleMenuOptions,
+    tippyOptions,
     handleAdminColorChange,
   };
 };

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -840,6 +840,15 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         prepurchaseExportData.shopConfigData = shopConfigData
           ? JSON.stringify(shopConfigData)
           : undefined;
+
+        // Carry the AI content key through the save→sign-in→reload cycle. The key lives in the
+        // store, not the URL, so appendPreservedQueryParams (URL-only) can't carry it — the save
+        // must send it explicitly, or logging in inside the editor drops the key and the AI
+        // templates/content disappear on reload. The upsert appends these to the post-login returnUrl.
+        prepurchaseExportData.contentKey = uiStore.userPromptContentKey;
+        prepurchaseExportData.contentKeyType = uiStore.userPromptContentKey
+          ? 'UserPrompt'
+          : undefined;
       }
 
       let uniqueLogoDraftTokens = [];

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -515,14 +515,22 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         }));
       }
 
-      if (uiStore.personalisationData) {
+      // Search content when searching, else the page-load personalisation. Must resolve to the
+      // same content the tile previews used (template-settings-store resolves the equivalent from
+      // the fresh response). Guard on length: an empty [] is truthy but would make the content
+      // index NaN and crash the apply below (matches the sibling guard in template-settings-store).
+      const activePersonalisation =
+        templateSettingsStore.searchPersonalisationData ??
+        uiStore.personalisationData;
+
+      if (activePersonalisation?.length) {
         const personalisationIndex =
           await getAiContentIndexByTemplateTokenAndNumberOfVariations(
             this.selectedTemplateId,
-            uiStore.personalisationData.length,
+            activePersonalisation.length,
           );
         const { model } = await applyUserPersonalisationToBrandPageModelAsync(
-          uiStore.personalisationData[personalisationIndex].userPersonalisation,
+          activePersonalisation[personalisationIndex].userPersonalisation,
           new BrandPageModel(brandPageModel),
         );
 

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -76,7 +76,7 @@ export const useUiStore = defineStore('ui', {
     setUserPersonalisationData({
       personalisationData,
     }: {
-      personalisationData: UserPersonalisationContent[];
+      personalisationData: UserPersonalisationContent[] | undefined;
     }) {
       this.personalisationData = personalisationData;
     },

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

@@ -7,8 +7,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 const isColorMatched = (color: string | null | undefined): boolean => {
   if (!color) return false;

package/src/brand-page-maker/utils/rich-text-editor.util.test.ts

@@ -8,7 +8,6 @@ import {
   getUpdatedHTMLFromEditor,
   sanitiseClientSideRTE,
   getRTEColor,
-  getRteTextLength,
 } from './rich-text-editor.util';
 import type { TextStyleDeclaration } from '@brand-page';
 
@@ -76,65 +75,8 @@ describe('hasHTML', () => {
   });
 });
 
-describe('getRteTextLength', () => {
-  it('returns the raw length for a plain string (unchanged legacy behaviour)', () => {
-    expect(getRteTextLength('hello')).toBe(5);
-    expect(getRteTextLength('<p>hello</p>')).toBe('<p>hello</p>'.length);
-    expect(getRteTextLength('')).toBe(0);
-  });
-
-  it('returns visible-text length for a Tiptap JSON doc (not undefined/throw)', () => {
-    const doc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'paragraph',
-          content: [
-            { type: 'text', text: 'hello ' },
-            { type: 'text', marks: [{ type: 'bold' }], text: 'world' },
-          ],
-        },
-      ],
-    };
-
-    // "hello world" — measured from the text nodes, not the JSON wrapper.
-    expect(getRteTextLength(doc)).toBe(11);
-  });
-
-  it('counts adjacent split nodes with no phantom separator (BP-5787)', () => {
-    // Hyperlinking (or bolding) a word splits its text node. Length must match
-    // the editor's textContent — "clickhere" = 9 — NOT a space-joined
-    // "click here" = 10, which would fire the max-length indicator one char
-    // early and flicker as content settles.
-    const doc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'paragraph',
-          content: [
-            { type: 'text', text: 'click' },
-            {
-              type: 'text',
-              text: 'here',
-              marks: [{ type: 'link', attrs: { href: 'https://x.com' } }],
-            },
-          ],
-        },
-      ],
-    };
-
-    expect(getRteTextLength(doc)).toBe(9);
-  });
-
-  it('returns 0 for null/undefined and an empty doc', () => {
-    expect(getRteTextLength(null)).toBe(0);
-    expect(getRteTextLength(undefined)).toBe(0);
-    expect(getRteTextLength({ type: 'doc', content: [] })).toBe(0);
-  });
-});
-
 describe('getUpdatedHTMLFromEditor', () => {
-  it('applies style commands and returns updated JSON', () => {
+  it('applies style commands and returns updated HTML', () => {
     // Mock editor
     const runMock = vi.fn();
     const chain = {
@@ -177,7 +119,7 @@ describe('getUpdatedHTMLFromEditor', () => {
         },
       },
       chain: () => chain as any,
-      getJSON: () => ({ type: 'doc', content: [{ type: 'paragraph' }] }),
+      getHTML: () => '<div>styled</div>',
     } as unknown as Editor;
 
     const newStyle = {
@@ -195,8 +137,7 @@ describe('getUpdatedHTMLFromEditor', () => {
 
     expect(externalEditor.commands.setContent).toHaveBeenCalledWith('foo');
     expect(runMock).toHaveBeenCalled();
-    // BP-5787: returns the JSON form (consistent with JSON storage).
-    expect(result).toEqual({ type: 'doc', content: [{ type: 'paragraph' }] });
+    expect(result).toBe('<div>styled</div>');
   });
 });