@designcrowd/library.brand-page 6.0.6-json-prereq-5 → 6.0.6-json-prereq-7

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-5",
+  "version": "6.0.6-json-prereq-7",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -342,15 +342,7 @@
           <TextInput
             v-model="markedText"
             :placeholder="contentSettingsTr('displayTextPlaceholder')"
-            :error="isDisplayTextTooLong"
           />
-          <p
-            v-if="isDisplayTextTooLong"
-            class="tw-text-error-500 tw-text-sm"
-            data-test-tag="hyperlink-display-text-error"
-          >
-            {{ contentSettingsTr('displayTextMaxLimitError') }}
-          </p>
 
           <FieldSubHeader :title="contentSettingsTr('linkToLabel')" />
           <ButtonGroup
@@ -669,18 +661,7 @@ const urlValidationSettings = computed(() => {
   };
 });
 
-// BP-5859: the hyperlink display text is inserted into the RTE, so it must
-// respect the same max-char limit. Without this the over-limit text was
-// silently truncated on insert with no feedback.
-const isDisplayTextTooLong = computed(
-  () => markedText.value.length > props.maxLength,
-);
-
 const isAddLinkButtonDisabled = computed(() => {
-  if (isDisplayTextTooLong.value) {
-    return true;
-  }
-
   if (selectedLinkType.value === HYPERLINK_TYPE.url) {
     const urlValue = hyperlinkUrlValue.value;
     // Check if URL is invalid OR doesn't have https protocol

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

@@ -0,0 +1,52 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '../getRteExtensions';
+import { sanitizeRteJson } from '@brand-page-maker/utils/rte-sanitize.util';
+
+/**
+ * BP-5787 — multi-word font families ("Open Sans") are quoted in CSS, so
+ * re-parsing HTML (pasting RTE-styled text between editors) previously yielded
+ * a value WITH quote chars, which the native sanitiser then dropped — losing
+ * the font. The custom FontFamily extension strips the quotes on parse.
+ */
+describe('FontFamily — quote-stripping parse (BP-5787)', () => {
+  let editors: Editor[] = [];
+  const mk = () => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const fontFamilyOf = (json: any) =>
+    json.content?.[0]?.content?.[0]?.marks?.find(
+      (m: any) => m.type === 'textStyle',
+    )?.attrs?.fontFamily;
+
+  for (const font of ['Montserrat', 'Open Sans', 'Playwrite AU']) {
+    it(`"${font}" survives an HTML re-parse + sanitise unquoted`, () => {
+      const src = mk();
+
+      src.commands.setContent('<p>Hello world</p>');
+      src.commands.selectAll();
+      src.commands.setFontFamily(font);
+
+      // Re-parse the serialised HTML — mirrors an RTE→RTE paste.
+      const tgt = mk();
+
+      tgt.commands.setContent(src.getHTML());
+
+      expect(fontFamilyOf(tgt.getJSON())).toBe(font);
+      // and the sanitiser must keep it (isSafeCssValue rejects quote chars).
+      expect(fontFamilyOf(sanitizeRteJson(tgt.getJSON()))).toBe(font);
+    });
+  }
+});

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

@@ -0,0 +1,42 @@
+import TiptapFontFamily from '@tiptap/extension-font-family';
+
+/**
+ * BP-5787 — font-family with quote-stripping parse.
+ *
+ * The stock extension stores whatever `element.style.fontFamily` returns. For
+ * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
+ * value, so parsing HTML — pasting RTE-styled text between editors, or the
+ * HTML→JSON migration — yields a value that still contains the quote chars
+ * (`"Open Sans"`). That value then (a) no longer matches the font list and,
+ * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
+ * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
+ * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
+ * quotes on parse so the stored value is always the bare family name.
+ */
+export const FontFamily = TiptapFontFamily.extend({
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            // Strip quotes only — keep '' for an absent value so the stored
+            // JSON shape matches the other textStyle attrs (FontSize etc.).
+            parseHTML: (element) =>
+              element.style.fontFamily?.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.fontFamily) {
+                return {};
+              }
+
+              return {
+                style: `font-family: ${attributes.fontFamily}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+});

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

@@ -3,11 +3,11 @@ 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 Highlight from '@tiptap/extension-highlight';
 import Placeholder from '@tiptap/extension-placeholder';
 import Link from '@tiptap/extension-link';
+import { FontFamily } from './extensions/FontFamily';
 import { FontSize } from './extensions/FontSize';
 import { LetterSpacing } from './extensions/LetterSpacing';
 import { LineHeight } from './extensions/LineHeight';

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

@@ -2,11 +2,12 @@ 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.
+ * BP-5857 — the `title` validator must preserve pre-JSON (staging) semantics.
+ * An RTE field's 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 failed for genuinely empty PLAIN inputs. RTE fields are now Tiptap JSON
+ * docs, so any doc must likewise count as "present" (valid); a plain string is
+ * still required to be non-empty.
  */
 describe('field.validator — title (nonEmptyString)', () => {
   const titleValidator = validatorDict.title;
@@ -23,22 +24,26 @@ describe('field.validator — title (nonEmptyString)', () => {
     ],
   });
 
-  it('accepts a non-empty legacy string', () => {
+  it('accepts a non-empty plain string', () => {
     expect(titleValidator.validate('title', 'Payments').isValid).toBe(true);
   });
 
-  it('rejects an empty string', () => {
+  it('rejects an empty plain string (required still enforced for plain inputs)', () => {
     expect(titleValidator.validate('title', '').isValid).toBe(false);
   });
 
-  it('accepts a Tiptap JSON doc that has visible text (BP-5857)', () => {
+  it('accepts legacy empty RTE HTML "<p></p>" (non-empty string — staging parity)', () => {
+    expect(titleValidator.validate('title', '<p></p>').isValid).toBe(true);
+  });
+
+  it('accepts a Tiptap JSON doc with visible text', () => {
     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('accepts an empty Tiptap JSON doc (RTE parity — empty editor is "present")', () => {
+    expect(titleValidator.validate('title', jsonDoc('')).isValid).toBe(true);
   });
 
   it('rejects null/undefined without throwing', () => {

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, getPlainTextFromRTE } from '@brand-page-maker/utils';
+import { YOUTUBE_URL_RE, isTiptapDocument } from '@brand-page-maker/utils';
 import { validatorTr } from '@src/composables/useTranslate';
 
 const addressValueValidator: Validator = {
@@ -76,12 +76,15 @@ export const dummyValidator: Validator = {
 
 const nonEmptyStringValidator: Validator = {
   validate: (name, value: any) => {
-    // 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;
+    // 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;
 
     return {
       isValid,

package/src/bundles/bundled-translations.json

@@ -1609,7 +1609,6 @@
     "linkToLabel": "Link to",
     "addLinkButtonText": "Add Link",
     "enterValidUrlError": "Please enter a valid URL",
-    "displayTextMaxLimitError": "Display text exceeds the maximum character limit",
     "enterTextHerePlaceholder": "Enter text here...",
     "bookNowLabel": "Book Now",
     "shippingLabel": "Enable Shipping Address",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -203,7 +203,6 @@
     "linkToLabel": "Link to",
     "addLinkButtonText": "Add Link",
     "enterValidUrlError": "Please enter a valid URL",
-    "displayTextMaxLimitError": "Display text exceeds the maximum character limit",
     "enterTextHerePlaceholder": "Enter text here...",
     "bookNowLabel": "Book Now",
     "shippingLabel": "Enable Shipping Address",