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

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

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

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

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

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

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

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

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

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({ includeLinkRel: true }),
+    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/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,40 +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('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 = {
@@ -152,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 = {
@@ -170,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>');
   });
 });