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

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

@@ -83,13 +83,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

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

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import debounce from 'lodash.debounce';
 import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
-import { encodeContentText, escapeContentText, unescapeContentText, } from '@brand-page/utils';
+import { encodeContentText, getContentTextLength, unescapeContentText, } from '@brand-page/utils';
 import { genericTextInputTr } from '@src/composables/useTranslate';
 const DEBOUNCE_WAIT_MS = 100;
 export default defineComponent({
@@ -98,7 +98,6 @@ export default defineComponent({
             _oldValue: '',
             isDirty: false,
             emitChangeDebounce: undefined,
-            lengthError: false,
             // Whether every write in the current debounce burst was an RTE
             // hydration write-back (see UpdateItemValuePayload.isHydrationWrite).
             // undefined = no burst pending; any user write downgrades it to false.
@@ -118,6 +117,26 @@ export default defineComponent({
         isValid() {
             return this.settings?.isValid;
         },
+        // Derived from the current value + maxLength (not hand-synced in a watcher):
+        // stays correct when maxLength or showRichTextEditor change and on first
+        // render, and flips the instant `_value` updates rather than after the emit
+        // round-trips back through the `value` prop. `>=` (not `>`) because the RTE
+        // MaxLength extension hard-gates the length, so "reached the cap" is the
+        // signal to surface. Length is measured with getContentTextLength so it
+        // matches the editor's own char count (ProseMirror textContent) — NOT
+        // escapeContentText, whose space-join over-counts by one per mark boundary
+        // (e.g. hyperlinking a word), reporting length+1 at the cap (BP-5787).
+        lengthError() {
+            const value = this._value;
+            const maxLength = this.maxLength;
+            if (maxLength == null || value === false || value == null) {
+                return false;
+            }
+            const length = this.showRichTextEditor
+                ? getContentTextLength(value)
+                : value.length;
+            return length >= maxLength;
+        },
         label() {
             return this.name.replace(/./, (c) => c.toUpperCase());
         },
@@ -173,13 +192,6 @@ export default defineComponent({
                 return;
             }
             this._value = newVal;
-            if (this.showRichTextEditor) {
-                const textValue = escapeContentText(this._value);
-                this.lengthError = textValue && textValue.length >= this.maxLength;
-            }
-            else {
-                this.lengthError = this._value.length >= this.maxLength;
-            }
         },
         isToggled(newVal) {
             if (newVal) {

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -94,13 +94,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -87,13 +87,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -83,13 +83,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
-    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
+    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/package.json

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

package/src/brand-page/utils/text.util.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { escapeContentText, getRenderText } from './text.util';
+import {
+  escapeContentText,
+  getContentTextLength,
+  getRenderText,
+} from './text.util';
 
 /**
  * BP-5787 — escapeContentText / getRenderText must accept either a legacy
@@ -45,3 +49,58 @@ describe('getRenderText (BP-5787 JSON-safe)', () => {
     expect(getRenderText('a\nb')).toBe('a<br/>b');
   });
 });
+
+/**
+ * BP-5787 — length limiting must count the editor's own char count (ProseMirror
+ * textContent), NOT escapeContentText's space-joined plain text. A mark boundary
+ * (e.g. hyperlinking a word) splits one text node into two; escapeContentText
+ * inserts a phantom space at the split and reports length+1, which tripped the
+ * "max reached" indicator at exactly-the-cap content. getContentTextLength
+ * concatenates node text with no separator, matching the MaxLength gate.
+ */
+describe('getContentTextLength (BP-5787 gate-matching length)', () => {
+  const linkedDoc = {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          { type: 'text', text: 'hello' },
+          {
+            type: 'text',
+            text: 'world',
+            marks: [{ type: 'link', attrs: { href: 'https://x.com' } }],
+          },
+        ],
+      },
+    ],
+  };
+
+  it('counts split (hyperlinked) nodes without a phantom space', () => {
+    // escapeContentText over-counts this as 11 ("hello world"); the editor's
+    // textContent is "helloworld" = 10.
+    expect(getContentTextLength(linkedDoc)).toBe(10);
+    expect(escapeContentText(linkedDoc)).toHaveLength(11);
+  });
+
+  it('matches plain single-node text', () => {
+    const plain = {
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'helloworld' }] },
+      ],
+    };
+
+    expect(getContentTextLength(plain)).toBe(10);
+  });
+
+  it('counts a legacy HTML string with tags stripped', () => {
+    expect(getContentTextLength('<p>hello<a href="#">world</a></p>')).toBe(10);
+  });
+
+  it('returns 0 for empty / non-content values', () => {
+    expect(getContentTextLength('')).toBe(0);
+    expect(getContentTextLength(undefined)).toBe(0);
+    expect(getContentTextLength(false)).toBe(0);
+  });
+});

package/src/brand-page/utils/text.util.ts

@@ -58,6 +58,46 @@ export const escapeContentText = (text: unknown): string | undefined => {
     .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };
 
+/**
+ * Character length of RTE content as the *editor* counts it — ProseMirror
+ * `doc.textContent`: text nodes concatenated with NO separator. This is the
+ * metric the MaxLength extension gates on, so length indicators must use it too.
+ *
+ * Do NOT use escapeContentText/jsonDocPlainText for length limiting: those
+ * join text nodes with a space for readable plain-text extraction, so they
+ * over-count by one character per inline mark boundary. Converting a word to a
+ * hyperlink (or bolding it, etc.) splits its text node, making the counter
+ * report length+1 for content the editor considers exactly at the cap (BP-5787).
+ */
+export const getContentTextLength = (value: unknown): number => {
+  if (!value) {
+    return 0;
+  }
+
+  if (isTiptapDoc(value)) {
+    let length = 0;
+
+    const walk = (node: any): void => {
+      if (typeof node?.text === 'string') {
+        length += node.text.length;
+      }
+
+      node?.content?.forEach(walk);
+    };
+
+    walk(value);
+
+    return length;
+  }
+
+  if (typeof value !== 'string') {
+    return 0;
+  }
+
+  // Legacy inline-HTML string: count visible text with tags stripped.
+  return value.replace(/(<([^>]+)>)/gi, '').length;
+};
+
 export const decodeHtmlEntities = (text: string): string => {
   return text
     .replace(/&lt;/g, '<')

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

@@ -389,7 +389,7 @@
         :options="bubbleMenuOptions"
         :update-delay="0"
         :should-show="shouldShow"
-        class="tw-w-fit"
+        class="tw-w-fit tw-max-w-[350px]"
       >
         <div class="bubble-menu">
           <div

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

@@ -6,7 +6,7 @@ import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
 import type { ContentItemFieldSettings } from '../models';
 import {
   encodeContentText,
-  escapeContentText,
+  getContentTextLength,
   unescapeContentText,
 } from '@brand-page/utils';
 import { genericTextInputTr } from '@src/composables/useTranslate';
@@ -107,7 +107,6 @@ export default defineComponent({
       _oldValue: '' as string,
       isDirty: false,
       emitChangeDebounce: undefined as DebounceHandle | undefined,
-      lengthError: false,
       // Whether every write in the current debounce burst was an RTE
       // hydration write-back (see UpdateItemValuePayload.isHydrationWrite).
       // undefined = no burst pending; any user write downgrades it to false.
@@ -130,6 +129,30 @@ export default defineComponent({
       return this.settings?.isValid;
     },
 
+    // Derived from the current value + maxLength (not hand-synced in a watcher):
+    // stays correct when maxLength or showRichTextEditor change and on first
+    // render, and flips the instant `_value` updates rather than after the emit
+    // round-trips back through the `value` prop. `>=` (not `>`) because the RTE
+    // MaxLength extension hard-gates the length, so "reached the cap" is the
+    // signal to surface. Length is measured with getContentTextLength so it
+    // matches the editor's own char count (ProseMirror textContent) — NOT
+    // escapeContentText, whose space-join over-counts by one per mark boundary
+    // (e.g. hyperlinking a word), reporting length+1 at the cap (BP-5787).
+    lengthError(): boolean {
+      const value = this._value;
+      const maxLength = this.maxLength;
+
+      if (maxLength == null || value === false || value == null) {
+        return false;
+      }
+
+      const length = this.showRichTextEditor
+        ? getContentTextLength(value)
+        : value.length;
+
+      return length >= maxLength;
+    },
+
     label(): string {
       return this.name.replace(/./, (c: string) => c.toUpperCase());
     },
@@ -193,14 +216,6 @@ export default defineComponent({
       }
 
       this._value = newVal;
-
-      if (this.showRichTextEditor) {
-        const textValue = escapeContentText(this._value);
-
-        this.lengthError = textValue && textValue.length >= this.maxLength;
-      } else {
-        this.lengthError = this._value.length >= this.maxLength;
-      }
     },
 
     isToggled(newVal: boolean) {