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

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

@@ -8,18 +8,7 @@ import {
   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 type { StyleTextFontFamilyOption } from '@shared/style-settings/models';
 import { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
@@ -31,7 +20,7 @@ import {
   emToPx,
   isStyleChanged,
   pxToEm,
-  sanitiseClientSideRTE,
+  sanitizeRteJson,
   skipStyleDetection,
 } from '@brand-page-maker/utils';
 import type { HyperlinkType, TextStyles } from '@brand-page';
@@ -49,9 +38,7 @@ import {
 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,
@@ -92,7 +79,7 @@ interface UseRichTextEditorReturn {
   hyperlinkValue: ComputedRef<{ id: string; name: string; value: string }>;
   setHyperlinkUrlValue: (url: string) => void;
   shouldShow: ({ editor, state }: { editor: any; state: any }) => boolean;
-  tippyOptions: Record<string, any>;
+  bubbleMenuOptions: Record<string, any>;
   handleAdminColorChange: (
     color: {
       id: string;
@@ -129,44 +116,7 @@ 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 {
@@ -214,54 +164,13 @@ export const useRichTextEditor = (
   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: DragEvent) {
@@ -440,7 +349,7 @@ export const useRichTextEditor = (
     applyHyperlinkToEditor,
   } = useHyperlink(editor);
 
-  const { shouldShow, tippyOptions } = useBubbleMenu(
+  const { shouldShow, bubbleMenuOptions } = useBubbleMenu(
     editor,
     isHyperlinkPopupOpen,
   );
@@ -472,8 +381,14 @@ export const useRichTextEditor = (
 
       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) => {
@@ -503,12 +418,13 @@ export const useRichTextEditor = (
     }
   });
 
-  // 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
@@ -522,7 +438,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', sanitizedData.sanitizedHtml, {
+    emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
       isHydrationWrite: !editor.isFocused,
     });
   });
@@ -1049,7 +965,7 @@ export const useRichTextEditor = (
     hyperlinkValue,
     setHyperlinkUrlValue,
     shouldShow,
-    tippyOptions,
+    bubbleMenuOptions,
     handleAdminColorChange,
   };
 };

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

@@ -14,6 +14,27 @@ export const useAiWebsiteBuilderThreadStore = defineStore(
     const promptText = ref<string>('');
     const stopGeneration = ref<(() => void) | null>(null);
 
+    // Bumped on every reset so consumers (useAiWebsiteBuilderChat) can react
+    // without watching `messages`, which would loop with its own deep watch.
+    const resetToken = ref<number>(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,
@@ -24,6 +45,8 @@ export const useAiWebsiteBuilderThreadStore = defineStore(
       buildSectionsCompleted,
       promptText,
       stopGeneration,
+      resetToken,
+      reset,
     };
   },
 );

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

@@ -30,6 +30,8 @@ import type {
   TemplateCategory,
 } from '@shared/template-settings/models';
 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';
@@ -620,6 +622,12 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       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/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap

@@ -0,0 +1,202 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BP-5787 RTE render parity (golden master) > T1 — editor renders the complex fixture to the frozen HTML baseline > editor-normalized-html 1`] = `"<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: rgb(255, 224, 138); color: inherit;">highlight</mark> <span style="color: rgb(255, 0, 0);">literal hex</span> <a href="/about" target="_self">internal link</a> <a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">external link</a></p><p style="text-align: right;">second paragraph, right-aligned</p>"`;
+
+exports[`BP-5787 RTE render parity (golden master) > T1 — render-from-JSON (DOM-less renderer) produces equivalent HTML > serializer-html 1`] = `"<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; color: inherit">highlight</mark> <span style="color: #FF0000">literal hex</span> <a href="/about" target="_self">internal link</a> <a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>"`;
+
+exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the JSON shape that becomes the stored form > editor-json 1`] = `
+{
+  "content": [
+    {
+      "attrs": {
+        "level": 2,
+        "textAlign": "center",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "attrs": {
+                "color": "var(--logo-text-color)",
+                "fontFamily": "",
+                "fontSize": "",
+                "letterSpacing": "",
+                "lineHeight": "",
+              },
+              "type": "textStyle",
+            },
+          ],
+          "text": "Themed heading",
+          "type": "text",
+        },
+      ],
+      "type": "heading",
+    },
+    {
+      "attrs": {
+        "textAlign": null,
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "type": "bold",
+            },
+          ],
+          "text": "bold",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "type": "italic",
+            },
+          ],
+          "text": "italic",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "type": "underline",
+            },
+          ],
+          "text": "underline",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "type": "strike",
+            },
+          ],
+          "text": "strike",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "color": "",
+                "fontFamily": "Montserrat",
+                "fontSize": "1.5em",
+                "letterSpacing": "0.05em",
+                "lineHeight": "1.4",
+              },
+              "type": "textStyle",
+            },
+          ],
+          "text": "styled span",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "color": "#ffe08a",
+              },
+              "type": "highlight",
+            },
+          ],
+          "text": "highlight",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "color": "#FF0000",
+                "fontFamily": "",
+                "fontSize": "",
+                "letterSpacing": "",
+                "lineHeight": "",
+              },
+              "type": "textStyle",
+            },
+          ],
+          "text": "literal hex",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "/about",
+                "rel": null,
+                "target": "_self",
+                "title": null,
+              },
+              "type": "link",
+            },
+          ],
+          "text": "internal link",
+          "type": "text",
+        },
+        {
+          "text": " ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://example.com",
+                "rel": "noopener noreferrer nofollow",
+                "target": "_blank",
+                "title": null,
+              },
+              "type": "link",
+            },
+          ],
+          "text": "external link",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+    {
+      "attrs": {
+        "textAlign": "right",
+      },
+      "content": [
+        {
+          "text": "second paragraph, right-aligned",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

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

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

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

@@ -8,6 +8,7 @@ import {
   getUpdatedHTMLFromEditor,
   sanitiseClientSideRTE,
   getRTEColor,
+  getRteTextLength,
 } from './rich-text-editor.util';
 import type { TextStyleDeclaration } from '@brand-page';
 
@@ -75,8 +76,40 @@ 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('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 HTML', () => {
+  it('applies style commands and returns updated JSON', () => {
     // Mock editor
     const runMock = vi.fn();
     const chain = {
@@ -119,7 +152,7 @@ describe('getUpdatedHTMLFromEditor', () => {
         },
       },
       chain: () => chain as any,
-      getHTML: () => '<div>styled</div>',
+      getJSON: () => ({ type: 'doc', content: [{ type: 'paragraph' }] }),
     } as unknown as Editor;
 
     const newStyle = {
@@ -137,7 +170,8 @@ describe('getUpdatedHTMLFromEditor', () => {
 
     expect(externalEditor.commands.setContent).toHaveBeenCalledWith('foo');
     expect(runMock).toHaveBeenCalled();
-    expect(result).toBe('<div>styled</div>');
+    // BP-5787: returns the JSON form (consistent with JSON storage).
+    expect(result).toEqual({ type: 'doc', content: [{ type: 'paragraph' }] });
   });
 });
 

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

@@ -1,4 +1,4 @@
-import type { ChainedCommands, Editor } from '@tiptap/vue-3';
+import type { ChainedCommands, Editor, JSONContent } from '@tiptap/vue-3';
 import type { EditorState, Transaction, Selection } from 'prosemirror-state';
 import {
   STYLE_THEME_KEYS,
@@ -19,6 +19,7 @@ import {
   type RequestPaymentContent,
   type SupportMeContent,
   type ShopContent,
+  type RichTextValue,
 } from '@brand-page';
 import type { PageSettingsState } from '@shared/page-settings/store';
 import type { StyleSettingsState } from '@shared/style-settings/store';
@@ -243,8 +244,38 @@ export const skipStyleDetection = (chain: ChainedCommands, marks?: Mark[]) =>
     return true;
   });
 
-export const hasRTEContent = (content: string): boolean => {
-  if (!content || content.length === 0) return false;
+/**
+ * BP-5787 — canonical discriminator for the JSON RTE model: a ProseMirror
+ * document is an object with `type: 'doc'`.
+ */
+export const isTiptapDocument = (value: unknown): value is JSONContent =>
+  typeof value === 'object' &&
+  value !== null &&
+  (value as JSONContent).type === 'doc';
+
+/**
+ * Extract visible plain text from a Tiptap JSON document (concatenated text
+ * nodes). Dependency-free — no editor instantiation.
+ */
+export const getRteJsonPlainText = (doc: JSONContent): string => {
+  const parts: string[] = [];
+
+  const walk = (node: JSONContent): void => {
+    if (typeof node.text === 'string') parts.push(node.text);
+
+    node.content?.forEach(walk);
+  };
+
+  walk(doc);
+
+  return parts.join(' ').replace(/\s+/g, ' ').trim();
+};
+
+// Accepts a legacy inline-HTML string or a Tiptap JSON document (BP-5787).
+export const hasRTEContent = (content: unknown): boolean => {
+  if (isTiptapDocument(content)) return true;
+
+  if (typeof content !== 'string' || content.length === 0) return false;
 
   const trimmed = content.trim();
   const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
@@ -252,7 +283,11 @@ export const hasRTEContent = (content: string): boolean => {
   return tagWrapRegex.test(trimmed);
 };
 
-export const getPlainTextFromRTE = (content: string): string => {
+export const getPlainTextFromRTE = (content: unknown): string => {
+  if (isTiptapDocument(content)) {
+    return getRteJsonPlainText(content);
+  }
+
   if (typeof content !== 'string') {
     return '';
   }
@@ -274,6 +309,22 @@ export const getPlainTextFromRTE = (content: string): string => {
   return plainText.trim();
 };
 
+/**
+ * BP-5787 — visible-text length of an RTE value, for the maker item-field
+ * max-length / emptiness checks. A plain string keeps its raw `.length`, so the
+ * pre-JSON behaviour is byte-for-byte identical; a Tiptap JSON doc measures its
+ * concatenated visible text. Without this, `doc.length` is `undefined` (silently
+ * disabling the check) and `doc.trim()` throws — the class of bug that survived
+ * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
+ */
+export const getRteTextLength = (
+  value: RichTextValue | null | undefined,
+): number => {
+  if (typeof value === 'string') return value.length;
+
+  return value ? getRteJsonPlainText(value).length : 0;
+};
+
 export const replaceTextInRTE = (
   existingHtml: string,
   newText: string,
@@ -721,16 +772,20 @@ export const switchAllContentToRTE = (
 
 export const getUpdatedHTMLFromEditor = (
   externalEditor: Editor,
-  contentText: string,
+  contentText: RichTextValue,
   newContentStyle: TextStyleDeclaration,
 ) => {
   if (!contentText) {
     return contentText;
   }
 
-  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
-    ? getRenderText(contentText)
-    : contentText;
+  // BP-5787: accept a string (legacy HTML) or a Tiptap JSON doc. setContent
+  // handles both; only the newline-escaping shim applies to strings.
+  const content =
+    typeof contentText === 'string' &&
+    contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+      ? getRenderText(contentText)
+      : contentText;
 
   externalEditor.commands.setContent(content);
 
@@ -788,9 +843,9 @@ export const getUpdatedHTMLFromEditor = (
   chain = newContentStyle?.fontStyle ? chain.setItalic() : chain.unsetItalic();
 
   chain.run();
-  const html = externalEditor.getHTML();
 
-  return html;
+  // BP-5787: return the JSON form, consistent with how RTE is now stored.
+  return externalEditor.getJSON();
 };
 
 // Helper to build stored marks from a style declaration
@@ -914,7 +969,7 @@ export const sanitiseClientSideRTE = (html: string): SanitizationResult => {
 /**
  * Validates if an href value is safe and returns a sanitized version
  */
-const validateAndSanitizeHref = (href: string): string | null => {
+export const validateAndSanitizeHref = (href: string): string | null => {
   if (!href || typeof href !== 'string') return null;
 
   // Trim whitespace and decode entities