@designcrowd/library.brand-page 6.0.19 → 6.0.20

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,
@@ -1518,86 +1518,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,
@@ -1610,15 +1530,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);
@@ -1630,11 +1542,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/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,
@@ -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) {
@@ -381,13 +472,7 @@ 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) {
+      if (isExternalMutation && editor.getHTML() !== newValue) {
         editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
@@ -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,
     });
   });

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

@@ -76,7 +76,7 @@ describe('hasHTML', () => {
 });
 
 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 = {
@@ -119,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 = {
@@ -137,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>');
   });
 });
 

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

@@ -1,4 +1,4 @@
-import type { ChainedCommands, Editor, JSONContent } from '@tiptap/vue-3';
+import type { ChainedCommands, Editor } from '@tiptap/vue-3';
 import type { EditorState, Transaction, Selection } from 'prosemirror-state';
 import {
   STYLE_THEME_KEYS,
@@ -19,7 +19,6 @@ 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';
@@ -244,38 +243,8 @@ export const skipStyleDetection = (chain: ChainedCommands, marks?: Mark[]) =>
     return true;
   });
 
-/**
- * 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;
+export const hasRTEContent = (content: string): boolean => {
+  if (!content || content.length === 0) return false;
 
   const trimmed = content.trim();
   const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
@@ -283,11 +252,7 @@ export const hasRTEContent = (content: unknown): boolean => {
   return tagWrapRegex.test(trimmed);
 };
 
-export const getPlainTextFromRTE = (content: unknown): string => {
-  if (isTiptapDocument(content)) {
-    return getRteJsonPlainText(content);
-  }
-
+export const getPlainTextFromRTE = (content: string): string => {
   if (typeof content !== 'string') {
     return '';
   }
@@ -756,20 +721,16 @@ export const switchAllContentToRTE = (
 
 export const getUpdatedHTMLFromEditor = (
   externalEditor: Editor,
-  contentText: RichTextValue,
+  contentText: string,
   newContentStyle: TextStyleDeclaration,
 ) => {
   if (!contentText) {
     return 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;
+  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+    ? getRenderText(contentText)
+    : contentText;
 
   externalEditor.commands.setContent(content);
 
@@ -827,9 +788,9 @@ export const getUpdatedHTMLFromEditor = (
   chain = newContentStyle?.fontStyle ? chain.setItalic() : chain.unsetItalic();
 
   chain.run();
+  const html = externalEditor.getHTML();
 
-  // BP-5787: return the JSON form, consistent with how RTE is now stored.
-  return externalEditor.getJSON();
+  return html;
 };
 
 // Helper to build stored marks from a style declaration
@@ -953,7 +914,7 @@ export const sanitiseClientSideRTE = (html: string): SanitizationResult => {
 /**
  * Validates if an href value is safe and returns a sanitized version
  */
-export const validateAndSanitizeHref = (href: string): string | null => {
+const validateAndSanitizeHref = (href: string): string | null => {
   if (!href || typeof href !== 'string') return null;
 
   // Trim whitespace and decode entities

package/src/brand-page-maker/validators/field.validator.ts

@@ -1,6 +1,6 @@
 import { isURL, isEmail, isTel } from '@utils/validator.util';
 import type { ItemFieldType, Validator } from '@brand-page-maker/models';
-import { YOUTUBE_URL_RE, isTiptapDocument } from '@brand-page-maker/utils';
+import { YOUTUBE_URL_RE } from '@brand-page-maker/utils';
 import { validatorTr } from '@src/composables/useTranslate';
 
 const addressValueValidator: Validator = {
@@ -76,15 +76,7 @@ export const dummyValidator: Validator = {
 
 const nonEmptyStringValidator: Validator = {
   validate: (name, value: any) => {
-    // BP-5787/BP-5857: match legacy (pre-JSON) validation semantics.
-    // An RTE field's stored value used to be inline HTML — an empty editor was
-    // "<p></p>", a NON-empty string, so the required check always passed for RTE
-    // fields (it only ever failed for genuinely empty PLAIN inputs). Now RTE
-    // fields are Tiptap JSON docs; treat any doc as "present" so behaviour
-    // stays identical. A plain string is still required to be non-empty.
-    const isValid = isTiptapDocument(value)
-      ? true
-      : typeof value === 'string' && value.length > 0;
+    const isValid = typeof value === 'string' && value.length > 0;
 
     return {
       isValid,

package/src/lib.ts

@@ -85,15 +85,6 @@ export {
   recalculateHeaderLogoSizes,
 } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
-// BP-5787: RTE JSON storage boundary helpers (render/normalise/sanitise/extract).
-export {
-  renderRteToHtml,
-  toRteJson,
-  isTiptapDocument,
-  sanitizeRteJson,
-  getRteJsonPlainText,
-  type RichTextValue,
-} from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 
 // AI-pipeline preview (longclaw per-turn snapshots): web-renderer's

package/src/metadata-builder/builders/update-content-text-builder.ts

@@ -6,36 +6,7 @@ import {
   type BuilderResult,
   type MetadataBuilderRequest,
 } from '../models';
-import {
-  hasRTEContent,
-  replaceTextInRTE,
-  isTiptapDocument,
-  renderRteToHtml,
-  toRteJson,
-} from '../../brand-page-maker/utils';
-
-/**
- * BP-5787 — replace the text of an RTE field while preserving formatting, for
- * either storage form. JSON is rendered to HTML, edited via the existing
- * HTML-preserving replace, then converted back to JSON; plain/legacy strings
- * keep the original behaviour.
- */
-const updateRteFieldValue = (existing: unknown, newText: string): unknown => {
-  const wasJson = isTiptapDocument(existing);
-  const existingHtml = wasJson ? renderRteToHtml(existing) : existing;
-
-  if (
-    existingHtml &&
-    typeof existingHtml === 'string' &&
-    hasRTEContent(existingHtml)
-  ) {
-    const updatedHtml = replaceTextInRTE(existingHtml, newText);
-
-    return wasJson ? toRteJson(updatedHtml) : updatedHtml;
-  }
-
-  return newText;
-};
+import { hasRTEContent, replaceTextInRTE } from '../../brand-page-maker/utils';
 
 export interface UpdateTextPayload {
   contentId: string;
@@ -65,7 +36,12 @@ const updateTextField = (target: any, fieldName: string, newText: string) => {
 
     if (Array.isArray(array) && array[+index]) {
       const existingText = array[+index][property];
-      const updatedValue = updateRteFieldValue(existingText, newText);
+      const updatedValue =
+        existingText &&
+        typeof existingText === 'string' &&
+        hasRTEContent(existingText)
+          ? replaceTextInRTE(existingText, newText)
+          : newText;
 
       // Create a new array with the updated item to trigger reactivity
       const newArray = [...array];
@@ -78,7 +54,17 @@ const updateTextField = (target: any, fieldName: string, newText: string) => {
     }
   } else {
     // Simple field
-    target[fieldName] = updateRteFieldValue(target[fieldName], newText);
+    const existingText = target[fieldName];
+
+    if (
+      existingText &&
+      typeof existingText === 'string' &&
+      hasRTEContent(existingText)
+    ) {
+      target[fieldName] = replaceTextInRTE(existingText, newText);
+    } else {
+      target[fieldName] = newText;
+    }
   }
 };
 

package/src/metadata-builder/builders/update-content-text-style-builder.ts

@@ -1,7 +1,6 @@
 import {
   type BrandPageModel,
   type Content,
-  type RichTextValue,
   type TextStyleDeclaration,
   type TextStyleOptions,
 } from '../../brand-page/models';
@@ -69,26 +68,17 @@ const mergeStyles = (
   return merged;
 };
 
-// BP-5787 — apply a style to RTE text natively. applyStyleToRTEText runs Tiptap
-// commands on the doc (string or JSON in) and returns JSON — no HTML round-trip.
-const updateRTEText = (text: unknown, style: TextStyleDeclaration): unknown => {
-  // `text` arrives via dynamic content[field] access, so it's untyped here.
-  // hasRTEContent runtime-narrows it to an actual RTE value (HTML string or
-  // Tiptap JSON doc) — i.e. a RichTextValue — before we hand it to the editor.
-  if (!hasRTEContent(text)) {
+const updateRTEText = (text: string, style: TextStyleDeclaration): string => {
+  if (!text || typeof text !== 'string' || !hasRTEContent(text)) {
     return text;
   }
 
   const { externalEditor } = useExternalRichTextEditor();
-  const updated = applyStyleToRTEText(
-    externalEditor,
-    text as RichTextValue,
-    style,
-  );
+  const updatedText = applyStyleToRTEText(externalEditor, text, style);
 
   externalEditor.destroy();
 
-  return updated;
+  return updatedText;
 };
 
 const findStyleKey = (target: Content, property: string): string | null => {