@designcrowd/library.brand-page 6.0.25 → 6.0.26-json-prereq-2

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

@@ -1,6 +1,6 @@
-import type { ChainedCommands, Editor } from '@tiptap/vue-3';
+import type { ChainedCommands, Editor, JSONContent } from '@tiptap/vue-3';
 import type { EditorState, Transaction, Selection } from 'prosemirror-state';
-import { type Content, type TextStyleDeclaration, type TextStyleType } from '@brand-page';
+import { type Content, type TextStyleDeclaration, type TextStyleType, type RichTextValue } from '@brand-page';
 import type { PageSettingsState } from '@shared/page-settings/store';
 import type { StyleSettingsState } from '@shared/style-settings/store';
 import type { Mark } from 'prosemirror-model';
@@ -9,12 +9,31 @@ export declare const RTE_ALLOWED_SECTION_TYPES: string[];
 export declare const isRTEManagedStyleField: (sectionType: string, fieldName: string) => boolean;
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
-export declare const hasRTEContent: (content: string) => boolean;
-export declare const getPlainTextFromRTE: (content: string) => string;
+/**
+ * BP-5787 — canonical discriminator for the JSON RTE model: a ProseMirror
+ * document is an object with `type: 'doc'`.
+ */
+export declare const isTiptapDocument: (value: unknown) => value is JSONContent;
+/**
+ * Extract visible plain text from a Tiptap JSON document (concatenated text
+ * nodes). Dependency-free — no editor instantiation.
+ */
+export declare const getRteJsonPlainText: (doc: JSONContent) => string;
+export declare const hasRTEContent: (content: unknown) => boolean;
+export declare const getPlainTextFromRTE: (content: unknown) => string;
+/**
+ * BP-5787 — visible-text length of an RTE value, for the maker item-field
+ * max-length / emptiness checks. A plain string keeps its raw `.length`, so the
+ * pre-JSON behaviour is byte-for-byte identical; a Tiptap JSON doc measures its
+ * concatenated visible text. Without this, `doc.length` is `undefined` (silently
+ * disabling the check) and `doc.trim()` throws — the class of bug that survived
+ * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
+ */
+export declare const getRteTextLength: (value: RichTextValue | null | undefined) => number;
 export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;
 export declare const transformToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState, newContent?: Content, type?: TextStyleType, newStyle?: TextStyleDeclaration) => void;
 export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
-export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;
+export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: RichTextValue, newContentStyle: TextStyleDeclaration) => string | import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;
 export declare const buildInitialMarks: (state: EditorState, style: TextStyleDeclaration) => any[];
 export declare const retainStyleOnEmptyLine: (editor: Editor, selection: Selection) => void;
 export interface SanitizationResult {
@@ -22,6 +41,10 @@ export interface SanitizationResult {
     removedElements: string[];
 }
 export declare const sanitiseClientSideRTE: (html: string) => SanitizationResult;
+/**
+ * Validates if an href value is safe and returns a sanitized version
+ */
+export declare const validateAndSanitizeHref: (href: string) => string | null;
 /**
  * Sanitize HTML string using DOMPurify.
  * Only allow tags and attributes that correspond to the enabled Tiptap extensions.

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

@@ -175,14 +175,41 @@ export const skipStyleDetection = (chain, marks) => chain.command(({ tr }) => {
     }
     return true;
 });
+/**
+ * BP-5787 — canonical discriminator for the JSON RTE model: a ProseMirror
+ * document is an object with `type: 'doc'`.
+ */
+export const isTiptapDocument = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 'doc';
+/**
+ * Extract visible plain text from a Tiptap JSON document (concatenated text
+ * nodes). Dependency-free — no editor instantiation.
+ */
+export const getRteJsonPlainText = (doc) => {
+    const parts = [];
+    const walk = (node) => {
+        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) => {
-    if (!content || content.length === 0)
+    if (isTiptapDocument(content))
+        return true;
+    if (typeof content !== 'string' || content.length === 0)
         return false;
     const trimmed = content.trim();
     const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
     return tagWrapRegex.test(trimmed);
 };
 export const getPlainTextFromRTE = (content) => {
+    if (isTiptapDocument(content)) {
+        return getRteJsonPlainText(content);
+    }
     if (typeof content !== 'string') {
         return '';
     }
@@ -200,6 +227,19 @@ export const getPlainTextFromRTE = (content) => {
     }
     return plainText.trim();
 };
+/**
+ * BP-5787 — visible-text length of an RTE value, for the maker item-field
+ * max-length / emptiness checks. A plain string keeps its raw `.length`, so the
+ * pre-JSON behaviour is byte-for-byte identical; a Tiptap JSON doc measures its
+ * concatenated visible text. Without this, `doc.length` is `undefined` (silently
+ * disabling the check) and `doc.trim()` throws — the class of bug that survived
+ * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
+ */
+export const getRteTextLength = (value) => {
+    if (typeof value === 'string')
+        return value.length;
+    return value ? getRteJsonPlainText(value).length : 0;
+};
 export const replaceTextInRTE = (existingHtml, newText) => {
     if (!hasRTEContent(existingHtml)) {
         return `<p>${newText}</p>`;
@@ -474,7 +514,10 @@ export const getUpdatedHTMLFromEditor = (externalEditor, contentText, newContent
     if (!contentText) {
         return contentText;
     }
-    const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+    // 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;
     externalEditor.commands.setContent(content);
@@ -518,8 +561,8 @@ export const getUpdatedHTMLFromEditor = (externalEditor, contentText, newContent
             : chain.unsetBold();
     chain = newContentStyle?.fontStyle ? chain.setItalic() : chain.unsetItalic();
     chain.run();
-    const html = externalEditor.getHTML();
-    return html;
+    // BP-5787: return the JSON form, consistent with how RTE is now stored.
+    return externalEditor.getJSON();
 };
 // Helper to build stored marks from a style declaration
 export const buildInitialMarks = (state, style) => {
@@ -598,7 +641,7 @@ export const sanitiseClientSideRTE = (html) => {
 /**
  * Validates if an href value is safe and returns a sanitized version
  */
-const validateAndSanitizeHref = (href) => {
+export const validateAndSanitizeHref = (href) => {
     if (!href || typeof href !== 'string')
         return null;
     // Trim whitespace and decode entities

package/lib/src/brand-page-maker/utils/rte-render.util.d.ts

@@ -0,0 +1,63 @@
+import type { JSONContent } from '@tiptap/vue-3';
+import { isTiptapDocument, getRteJsonPlainText } from './rich-text-editor.util';
+export { isTiptapDocument, getRteJsonPlainText };
+/**
+ * BP-5787 — the boundary plumbing for storing RTE as Tiptap JSON.
+ *
+ * An RTE field is either a legacy inline-HTML string (pre-migration, or a
+ * not-yet-migrated published site) or a Tiptap JSON document (post-migration).
+ * These helpers let every consumer treat the two uniformly:
+ *
+ *   - isTiptapDocument — the canonical discriminator (object with type 'doc').
+ *   - renderRteToHtml  — render either form to final HTML for display.
+ *   - toRteJson        — normalise either form to JSON for storage.
+ *
+ * The schema-driven core of both directions is Tiptap/ProseMirror, fed by the
+ * single-source-of-truth extension set (getRteExtensions) — so the mapping lives
+ * in the extensions' schema, not a hand-maintained copy that drifts:
+ *
+ *   - renderRteToHtml uses @tiptap/static-renderer (renderToHTMLString). It is
+ *     DOM-less, so it runs on the server (SSR/publish/preview), not just the
+ *     browser, and needs no Editor instance.
+ *   - toRteJson turns an HTML string into a DOM node with an INJECTED parser and
+ *     feeds it to ProseMirror's schema-driven DOMParser. The HTML→DOM step needs
+ *     a DOM parser; rather than read the global `window.DOMParser` (as Tiptap's
+ *     `generateJSON` does — unusable on a pure-node server and fragile across SSR
+ *     execution contexts), the parser is supplied by the caller: the native
+ *     `DOMParser` in the browser, a jsdom `DOMParser` *instance* on the server
+ *     (see resolveHtmlParser). No global is ever mutated, so the conversion is
+ *     fully isomorphic regardless of how the SSR host bundles/executes this code.
+ */
+export type RichTextValue = string | JSONContent;
+/**
+ * A `DOMParser`-compatible object: turns an HTML string into a Document whose
+ * `body` is a DOM node ProseMirror can parse. The browser's native `DOMParser`
+ * and jsdom's `DOMParser` both satisfy this, so the DOM dependency is injected
+ * rather than read from a global.
+ */
+export interface HtmlParser {
+    parseFromString(html: string, type: 'text/html'): Document;
+}
+/**
+ * Render an RTE value to final HTML. Legacy HTML strings pass through untouched
+ * (they are already HTML); Tiptap JSON is serialised by @tiptap/static-renderer
+ * from the extension schema — no editor, no DOM — so it works on the server
+ * (SSR/publish), not just the browser.
+ */
+export declare const renderRteToHtml: (value: RichTextValue | null | undefined) => string;
+/**
+ * Resolve an HtmlParser for the current runtime: the native `DOMParser` in the
+ * browser (and jsdom-based test envs), or a jsdom `DOMParser` INSTANCE on a
+ * pure-node server — created and returned directly, never assigned to a global,
+ * so it is immune to SSR execution-context differences. The jsdom specifier is
+ * assembled at runtime so no bundler follows it into a browser build. Memoised
+ * on the server (JSDOM construction is relatively expensive).
+ */
+export declare const resolveHtmlParser: () => Promise<HtmlParser>;
+/**
+ * Normalise an RTE value to a Tiptap JSON document. HTML strings are parsed with
+ * `parser` (defaults to the browser's native DOMParser); JSON documents pass
+ * through unchanged. Returns undefined for empty/blank input so callers can omit
+ * empty fields.
+ */
+export declare const toRteJson: (value: RichTextValue | null | undefined, parser?: HtmlParser) => JSONContent | undefined;

package/lib/src/brand-page-maker/utils/rte-render.util.js

@@ -0,0 +1,95 @@
+import { getSchema } from '@tiptap/core';
+import { DOMParser as ProseMirrorDOMParser } from '@tiptap/pm/model';
+import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string';
+import { getRteExtensions } from '../composables/rich-text-editor/getRteExtensions';
+import { isTiptapDocument, getRteJsonPlainText } from './rich-text-editor.util';
+export { isTiptapDocument, getRteJsonPlainText };
+// One extension set shared by both directions (render + parse). Schema knowledge
+// lives here, once — Tiptap/extension upgrades propagate to both automatically.
+const RTE_EXTENSIONS = getRteExtensions({ includeLinkRel: true });
+// ProseMirror schema derived once from the shared extension set. This is the
+// schema-driven heart of HTML→JSON (no drift); only the HTML→DOM step is injected.
+const RTE_SCHEMA = getSchema(RTE_EXTENSIONS);
+/**
+ * Render an RTE value to final HTML. Legacy HTML strings pass through untouched
+ * (they are already HTML); Tiptap JSON is serialised by @tiptap/static-renderer
+ * from the extension schema — no editor, no DOM — so it works on the server
+ * (SSR/publish), not just the browser.
+ */
+export const renderRteToHtml = (value) => {
+    if (value == null || value === '')
+        return '';
+    if (typeof value === 'string')
+        return value;
+    return renderToHTMLString({ content: value, extensions: RTE_EXTENSIONS });
+};
+// Tiptap's elementFromString strips whitespace-only text nodes (pretty-print
+// indentation between tags) before parsing; replicate it so injected-parser
+// output stays identical to the previous generateJSON-based conversion.
+const stripIndentationTextNodes = (node) => {
+    const children = node.childNodes;
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+        const child = children[i];
+        if (child.nodeType === 3 &&
+            child.nodeValue &&
+            /^(\n\s\s|\n)$/.test(child.nodeValue)) {
+            node.removeChild(child);
+        }
+        else if (child.nodeType === 1) {
+            stripIndentationTextNodes(child);
+        }
+    }
+    return node;
+};
+const htmlToRteJson = (html, parser) => {
+    const body = parser.parseFromString(`<body>${html}</body>`, 'text/html').body;
+    const dom = stripIndentationTextNodes(body);
+    return ProseMirrorDOMParser.fromSchema(RTE_SCHEMA).parse(dom).toJSON();
+};
+let serverParserPromise = null;
+/**
+ * Resolve an HtmlParser for the current runtime: the native `DOMParser` in the
+ * browser (and jsdom-based test envs), or a jsdom `DOMParser` INSTANCE on a
+ * pure-node server — created and returned directly, never assigned to a global,
+ * so it is immune to SSR execution-context differences. The jsdom specifier is
+ * assembled at runtime so no bundler follows it into a browser build. Memoised
+ * on the server (JSDOM construction is relatively expensive).
+ */
+export const resolveHtmlParser = async () => {
+    if (typeof DOMParser !== 'undefined')
+        return new DOMParser();
+    if (!serverParserPromise) {
+        const jsdomModuleId = ['js', 'dom'].join('');
+        serverParserPromise = import(/* @vite-ignore */ jsdomModuleId)
+            .then((mod) => {
+            const { JSDOM } = mod;
+            const { DOMParser: JsdomDOMParser } = new JSDOM('').window;
+            return new JsdomDOMParser();
+        })
+            .catch((error) => {
+            // Don't cache the failure — let a later call retry the import.
+            serverParserPromise = null;
+            throw error;
+        });
+    }
+    return serverParserPromise;
+};
+const getDefaultParser = () => {
+    if (typeof DOMParser !== 'undefined')
+        return new DOMParser();
+    throw new Error('toRteJson: no global DOMParser in this environment. On the server, pass an ' +
+        'explicit parser as the second argument (see resolveHtmlParser).');
+};
+/**
+ * Normalise an RTE value to a Tiptap JSON document. HTML strings are parsed with
+ * `parser` (defaults to the browser's native DOMParser); JSON documents pass
+ * through unchanged. Returns undefined for empty/blank input so callers can omit
+ * empty fields.
+ */
+export const toRteJson = (value, parser) => {
+    if (value == null || value === '')
+        return undefined;
+    if (isTiptapDocument(value))
+        return value;
+    return htmlToRteJson(value, parser ?? getDefaultParser());
+};

package/lib/src/brand-page-maker/utils/rte-sanitize.util.d.ts

@@ -0,0 +1,6 @@
+import type { JSONContent } from '@tiptap/vue-3';
+/**
+ * Sanitise a Tiptap JSON document (returns a new clean doc). Returns a minimal
+ * empty doc if the input isn't a usable document.
+ */
+export declare const sanitizeRteJson: (doc: unknown) => JSONContent;

package/lib/src/brand-page-maker/utils/rte-sanitize.util.js

@@ -0,0 +1,158 @@
+import { validateAndSanitizeHref } from './rich-text-editor.util';
+/**
+ * BP-5787 — native JSON sanitiser for RTE content.
+ *
+ * Operates directly on the Tiptap document tree: no editor instantiation, no
+ * HTML round-trip, no DOMPurify. This is the hot path (runs on every editor
+ * update and on the server sanitise gate), so it is a single, allocation-light
+ * recursive walk.
+ *
+ * Security model (mirrors the HTML allowlist it replaces):
+ *  - only allow-listed node and mark types survive; everything else is dropped;
+ *  - textStyle / highlight attrs are restricted to known keys whose values must
+ *    be "safe CSS values" (no quotes/angle-brackets/extra declarations/url()/
+ *    expression()), preventing CSS-injection when the value is later rendered
+ *    into a `style="…"` attribute;
+ *  - link hrefs go through the same validateAndSanitizeHref used by the HTML
+ *    sanitiser; unsafe links lose their href (and the mark);
+ *  - heading levels are clamped to 1–6.
+ */
+// ProseMirror node types the editor schema can legitimately produce.
+const ALLOWED_NODE_TYPES = new Set([
+    'doc',
+    'paragraph',
+    'heading',
+    'text',
+    'hardBreak',
+    'bulletList',
+    'orderedList',
+    'listItem',
+    'blockquote',
+    'codeBlock',
+    'horizontalRule',
+]);
+// Inline mark types the editor produces (strong/em/u/s/code/span/mark/a).
+const ALLOWED_MARK_TYPES = new Set([
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'code',
+    'textStyle',
+    'highlight',
+    'link',
+]);
+// textStyle attrs map to the allow-listed CSS properties (font-weight →
+// bold mark, text-decoration → underline/strike, text-align → node attr,
+// background-color → highlight, so they are intentionally not here).
+const ALLOWED_TEXT_STYLE_ATTRS = new Set([
+    'color',
+    'fontFamily',
+    'fontSize',
+    'letterSpacing',
+    'lineHeight',
+]);
+/**
+ * A safe CSS value is a short string free of characters that could inject an
+ * extra declaration or escape the attribute, and free of the url()/expression()
+ * vectors. Legitimate values — `rgb(255, 0, 0)`, `#FF0000`,
+ * `var(--logo-text-color)`, `Open Sans`, `1.5em` — all pass.
+ */
+const isSafeCssValue = (value) => typeof value === 'string' &&
+    value.length > 0 &&
+    value.length <= 200 &&
+    !/[<>"';]/.test(value) &&
+    !/url\s*\(/i.test(value) &&
+    !/expression\s*\(/i.test(value);
+const sanitizeTextStyleAttrs = (attrs) => {
+    const clean = {};
+    for (const key of Object.keys(attrs)) {
+        if (!ALLOWED_TEXT_STYLE_ATTRS.has(key))
+            continue;
+        const value = attrs[key];
+        // Tiptap emits '' for unset textStyle slots — preserve them.
+        if (value === '' || value == null) {
+            clean[key] = '';
+        }
+        else if (isSafeCssValue(value)) {
+            clean[key] = value;
+        }
+        // else: drop the unsafe value
+    }
+    return Object.keys(clean).length ? clean : null;
+};
+const sanitizeMark = (mark) => {
+    const type = mark?.type;
+    if (!type || !ALLOWED_MARK_TYPES.has(type))
+        return null;
+    const attrs = mark.attrs;
+    if (type === 'link') {
+        const href = typeof attrs?.href === 'string'
+            ? validateAndSanitizeHref(attrs.href)
+            : null;
+        if (!href)
+            return null; // drop links with unsafe/empty href
+        const cleanAttrs = { href };
+        if (attrs?.target != null)
+            cleanAttrs.target = attrs.target;
+        if (attrs?.rel != null)
+            cleanAttrs.rel = attrs.rel;
+        return { type, attrs: cleanAttrs };
+    }
+    if (type === 'textStyle') {
+        const clean = attrs ? sanitizeTextStyleAttrs(attrs) : null;
+        return clean ? { type, attrs: clean } : null;
+    }
+    if (type === 'highlight') {
+        return isSafeCssValue(attrs?.color)
+            ? { type, attrs: { color: attrs.color } }
+            : { type };
+    }
+    // Plain marks (bold/italic/underline/strike/code) carry no attrs.
+    return { type };
+};
+const ALIGN_VALUES = new Set(['left', 'center', 'right', 'justify']);
+const sanitizeNode = (node) => {
+    const type = node?.type;
+    if (!type || !ALLOWED_NODE_TYPES.has(type))
+        return null;
+    const clean = { type };
+    const attrs = {};
+    if (type === 'heading') {
+        const level = Number(node.attrs?.level);
+        attrs.level = level >= 1 && level <= 6 ? level : 1;
+    }
+    if (type === 'heading' || type === 'paragraph') {
+        const align = node.attrs?.textAlign;
+        if (typeof align === 'string' && ALIGN_VALUES.has(align)) {
+            attrs.textAlign = align;
+        }
+    }
+    if (Object.keys(attrs).length)
+        clean.attrs = attrs;
+    if (typeof node.text === 'string')
+        clean.text = node.text;
+    if (Array.isArray(node.marks)) {
+        const marks = node.marks
+            .map((m) => sanitizeMark(m))
+            .filter(Boolean);
+        if (marks && marks.length)
+            clean.marks = marks;
+    }
+    if (Array.isArray(node.content)) {
+        const content = node.content
+            .map(sanitizeNode)
+            .filter(Boolean);
+        if (content.length)
+            clean.content = content;
+    }
+    return clean;
+};
+/**
+ * Sanitise a Tiptap JSON document (returns a new clean doc). Returns a minimal
+ * empty doc if the input isn't a usable document.
+ */
+export const sanitizeRteJson = (doc) => {
+    const clean = doc && typeof doc === 'object' ? sanitizeNode(doc) : null;
+    return clean && clean.type === 'doc' ? clean : { type: 'doc', content: [] };
+};

package/lib/src/brand-page-maker/validators/field.validator.js

@@ -1,5 +1,5 @@
 import { isURL, isEmail, isTel } from '@utils/validator.util';
-import { YOUTUBE_URL_RE } from '@brand-page-maker/utils';
+import { YOUTUBE_URL_RE, isTiptapDocument } from '@brand-page-maker/utils';
 import { validatorTr } from '@src/composables/useTranslate';
 const addressValueValidator = {
     validate: (name, value) => {
@@ -62,7 +62,15 @@ export const dummyValidator = {
 };
 const nonEmptyStringValidator = {
     validate: (name, value) => {
-        const isValid = typeof value === 'string' && value.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,
             message: isValid ? '' : validatorTr(`emptyStringMessage`),