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

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

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

@@ -342,7 +342,15 @@
           <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
@@ -661,6 +669,14 @@ const urlValidationSettings = computed(() => {
   };
 });
 
+// BP-5859: the hyperlink display text is inserted into the RTE, so it shares
+// the RTE max-char limit. We don't block adding the link; instead we surface an
+// error below the display-text field (the over-limit text is still truncated to
+// the limit on insert, matching the RTE's own behaviour).
+const isDisplayTextTooLong = computed(
+  () => markedText.value.length > props.maxLength,
+);
+
 const isAddLinkButtonDisabled = computed(() => {
   if (selectedLinkType.value === HYPERLINK_TYPE.url) {
     const urlValue = hyperlinkUrlValue.value;

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,6 +1609,7 @@
     "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,6 +203,7 @@
     "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",