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

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js

@@ -144,7 +144,20 @@ export default defineComponent({
         },
     },
     watch: {
-        value(newVal) {
+        value(newVal, oldVal) {
+            // BP-5787: RTE values are Tiptap JSON objects. The parent (TextItemsField)
+            // re-clones its items array (cloneDeep) on ANY change — including a sibling
+            // field's style sync — yielding a NEW object reference with identical text
+            // content. For objects Vue fires this watcher on reference change, so that
+            // spurious re-clone would overwrite `_value` and clobber an in-flight edit
+            // (a mark applied but not yet debounced to the store), silently dropping
+            // the user's formatting. Strings never hit this (same content = same
+            // reference = no fire), so mirror that: ignore re-clones whose content is
+            // unchanged from the previous prop value.
+            if (this.showRichTextEditor &&
+                JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+                return;
+            }
             this._value = newVal;
             if (this.showRichTextEditor) {
                 const textValue = escapeContentText(this._value);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-json-prereq-2",
+  "version": "6.0.6-json-prereq-4",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/utils/view-model.pageid-rte.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { resolvePageIdsInRteJson } from './view-model.util';
+import type { NavViewModel } from '../view-models';
+
+/**
+ * BP-5847 — internal RTE hyperlinks are stored as `href="pageid:<id>"`. On the
+ * published site these must resolve to the page's relative path. The string
+ * (legacy HTML) path already did this; once RTE moved to Tiptap JSON the link
+ * marks were skipped, so links rendered as raw `pageid:` and didn't navigate.
+ */
+describe('resolvePageIdsInRteJson (BP-5847)', () => {
+  const nav: NavViewModel = {
+    navItems: [
+      {
+        pageId: 'home-id',
+        slug: 'home',
+        displayName: 'Home',
+        routeName: 'home',
+        routeParams: { slug: 'mysite' },
+        isRoot: true,
+        isHidden: false,
+        relativePath: '',
+        nestedNavItems: [],
+      },
+      {
+        pageId: 'about-id',
+        slug: 'about',
+        displayName: 'About',
+        routeName: 'about',
+        routeParams: { slug: 'mysite' },
+        isRoot: false,
+        isHidden: false,
+        relativePath: 'about',
+        nestedNavItems: [],
+      },
+    ],
+  };
+
+  const options = { brandPageSlug: 'mysite' } as any;
+
+  const docWithLink = (href: string) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'link',
+            marks: [{ type: 'link', attrs: { href, target: '_blank' } }],
+          },
+        ],
+      },
+    ],
+  });
+
+  const linkHref = (doc: any) => doc.content[0].content[0].marks[0].attrs.href;
+
+  it('resolves a pageid link to a sub-page relative path', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:about-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite/about');
+  });
+
+  it('resolves a root pageid link to the site root', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:home-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite');
+  });
+
+  it('falls back to root when the pageid cannot be matched', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:missing-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite');
+  });
+
+  it('leaves external links untouched and returns the same reference', () => {
+    const doc = docWithLink('https://example.com');
+    const out = resolvePageIdsInRteJson(doc, nav, options);
+
+    expect(linkHref(out)).toBe('https://example.com');
+    expect(out).toBe(doc);
+  });
+
+  it('does not mutate the source doc (returns a new object) when resolving', () => {
+    const doc = docWithLink('pageid:about-id');
+    const out = resolvePageIdsInRteJson(doc, nav, options);
+
+    expect(out).not.toBe(doc);
+    expect(linkHref(doc)).toBe('pageid:about-id');
+  });
+});

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

@@ -119,7 +119,7 @@ import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from './route.util';
-import { hasRTEContent } from '../../brand-page-maker/utils';
+import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
 import {
   getPageIdFromHref,
   isHrefPageId,
@@ -1518,6 +1518,86 @@ 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,
@@ -1530,7 +1610,15 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       return;
     }
 
-    if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
+    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 (Array.isArray(value)) {
         value.forEach((item) => {
           dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
@@ -1542,31 +1630,11 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       (content as unknown as Record<string, unknown>)[key] = value.replace(
         /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
         (match, existingAttrsStart, href, existingAttrsEnd) => {
-          // 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}>`;
-          }
+          const resolved = resolvePageIdHref(href, nav, options);
 
-          return match;
+          return resolved === null
+            ? match
+            : `<a ${existingAttrsStart}href="${resolved}"${existingAttrsEnd}>`;
         },
       );
     }

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { validatorDict } from './field.validator';
+
+/**
+ * BP-5857 — the `title` field validator must accept RTE content in both forms.
+ * After BP-5787, switchAllContentToRTE converts section titles (Payments, Store,
+ * Tipping, Social Links) from a plain string to a Tiptap JSON doc. The old
+ * `typeof value === 'string'` check then flagged a title that clearly HAS text
+ * as empty ("Please enter a value"). The validator now dual-reads the value.
+ */
+describe('field.validator — title (nonEmptyString)', () => {
+  const titleValidator = validatorDict.title;
+
+  const jsonDoc = (text: string) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: text
+          ? [{ type: 'text', text, marks: [{ type: 'bold' }] }]
+          : [],
+      },
+    ],
+  });
+
+  it('accepts a non-empty legacy string', () => {
+    expect(titleValidator.validate('title', 'Payments').isValid).toBe(true);
+  });
+
+  it('rejects an empty string', () => {
+    expect(titleValidator.validate('title', '').isValid).toBe(false);
+  });
+
+  it('accepts a Tiptap JSON doc that has visible text (BP-5857)', () => {
+    expect(titleValidator.validate('title', jsonDoc('Payments')).isValid).toBe(
+      true,
+    );
+  });
+
+  it('rejects an empty Tiptap JSON doc', () => {
+    expect(titleValidator.validate('title', jsonDoc('')).isValid).toBe(false);
+  });
+
+  it('rejects null/undefined without throwing', () => {
+    expect(titleValidator.validate('title', null as any).isValid).toBe(false);
+    expect(titleValidator.validate('title', undefined as any).isValid).toBe(
+      false,
+    );
+  });
+});

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 } from '@brand-page-maker/utils';
+import { YOUTUBE_URL_RE, getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { validatorTr } from '@src/composables/useTranslate';
 
 const addressValueValidator: Validator = {
@@ -76,7 +76,12 @@ export const dummyValidator: Validator = {
 
 const nonEmptyStringValidator: Validator = {
   validate: (name, value: any) => {
-    const isValid = typeof value === 'string' && value.length > 0;
+    // BP-5787/BP-5857: `title` fields may now hold Tiptap JSON (an RTE doc)
+    // rather than a plain string once switchAllContentToRTE converts them.
+    // Validate the visible text either way — a doc with text is "entered",
+    // even though `typeof value` is 'object'. getPlainTextFromRTE dual-reads
+    // both forms (string → stripped text, JSON → concatenated text).
+    const isValid = getPlainTextFromRTE(value).trim().length > 0;
 
     return {
       isValid,

package/src/shared/content-settings/components/GenericTextInput.mixin.ts

@@ -159,7 +159,23 @@ export default defineComponent({
     },
   },
   watch: {
-    value(newVal: string | undefined) {
+    value(newVal: string | undefined, oldVal: string | undefined) {
+      // BP-5787: RTE values are Tiptap JSON objects. The parent (TextItemsField)
+      // re-clones its items array (cloneDeep) on ANY change — including a sibling
+      // field's style sync — yielding a NEW object reference with identical text
+      // content. For objects Vue fires this watcher on reference change, so that
+      // spurious re-clone would overwrite `_value` and clobber an in-flight edit
+      // (a mark applied but not yet debounced to the store), silently dropping
+      // the user's formatting. Strings never hit this (same content = same
+      // reference = no fire), so mirror that: ignore re-clones whose content is
+      // unchanged from the previous prop value.
+      if (
+        this.showRichTextEditor &&
+        JSON.stringify(newVal) === JSON.stringify(oldVal)
+      ) {
+        return;
+      }
+
       this._value = newVal;
 
       if (this.showRichTextEditor) {