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

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.js

@@ -0,0 +1,44 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export const FontSize = Extension.create({
+    name: 'fontSize',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ''),
+                        renderHTML: (attributes) => {
+                            if (!attributes.fontSize) {
+                                return {};
+                            }
+                            return {
+                                style: `font-size: ${attributes.fontSize}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: (fontSize) => ({ chain }) => {
+                return chain().setMark('textStyle', { fontSize }).run();
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize: null })
+                    .removeEmptyTextStyle()
+                    .run();
+            },
+        };
+    },
+});

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.d.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core';
+export type LineHeightOptions = {
+    /**
+     * Node / mark types that should carry the `lineHeight` attribute.
+     * Defaults to `['textStyle']` to piggy‑back on TipTap’s built‑in mark.
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            /**
+             * Apply a line‑height to the current selection (or stored marks).
+             */
+            setLineHeight: (heightValue: string) => ReturnType;
+            /**
+             * Remove any line‑height attribute.
+             */
+            unsetLineHeight: () => ReturnType;
+            /**
+             * Read the current line‑height from the selection / stored marks.
+             */
+            getLineHeight: () => ReturnType;
+        };
+    }
+}
+export declare const LineHeight: Extension<LineHeightOptions, any>;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.js

@@ -0,0 +1,44 @@
+import { Extension } from '@tiptap/core';
+export const LineHeight = Extension.create({
+    name: 'lineHeight',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    lineHeight: {
+                        default: null,
+                        parseHTML: (element) => (element.style.lineHeight || '').replace(/['"]+/g, ''),
+                        renderHTML: (attributes) => {
+                            if (!attributes.lineHeight) {
+                                return {};
+                            }
+                            return { style: `line-height: ${attributes.lineHeight}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLineHeight: (lineHeight) => ({ chain }) => {
+                return chain().setMark('textStyle', { lineHeight }).run();
+            },
+            unsetLineHeight: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { lineHeight: null })
+                    .removeEmptyTextStyle()
+                    .run();
+            },
+            getLineHeight: () => ({ editor }) => {
+                return editor.getAttributes('textStyle').lineHeight;
+            },
+        };
+    },
+});

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -43,7 +43,7 @@ interface UseRichTextEditorReturn {
         editor: any;
         state: any;
     }) => boolean;
-    bubbleMenuOptions: Record<string, any>;
+    tippyOptions: Record<string, any>;
     handleAdminColorChange: (color: {
         id: string;
         name: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -1,25 +1,72 @@
 import { onBeforeUnmount, computed, watch, } from 'vue';
 import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from './getRteExtensions';
+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 { FontSize } from './extensions/FontSize';
+import { LetterSpacing } from './extensions/LetterSpacing';
+import { LineHeight } from './extensions/LineHeight';
+import Highlight from '@tiptap/extension-highlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
 import { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
 import { useFont } from './font';
 import { useSpacing } from './spacing';
 import Color from 'color';
-import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitizeRteJson, skipStyleDetection, } from '@brand-page-maker/utils';
+import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRTE, skipStyleDetection, } from '@brand-page-maker/utils';
 import { HYPERLINK_TYPE, } from '@brand-page';
 import { letterSpacingValueConvertor, colorConvertor, backgroundColorConvertor, } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
-import { useHyperlink } from './hyperlink';
+import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { isHrefPageId, useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import { hasLogoColorVar, isLogoColor, getRTEColor, } from '@brand-page-maker/utils/rich-text-editor.util';
 import { useEventTracker, EVENTS } from '../useEventTracker';
 export const useExternalRichTextEditor = () => {
     const externalEditor = new Editor({
         editable: false,
-        extensions: getRteExtensions({ includeLinkRel: true }),
+        extensions: [
+            StarterKit,
+            Underline,
+            TextStyle.configure({ mergeNestedSpanStyles: true }),
+            TextAlign.configure({
+                types: ['heading', 'paragraph'],
+            }),
+            FontFamily.configure({
+                types: ['textStyle'],
+            }),
+            FontSize,
+            LetterSpacing,
+            LineHeight,
+            ColorExtension.configure({
+                types: ['textStyle'],
+            }),
+            Highlight.configure({
+                multicolor: true,
+            }),
+            Link.configure({
+                openOnClick: false,
+                defaultProtocol: 'https',
+                autolink: true,
+                HTMLAttributes: (attrs) => {
+                    const href = attrs.href;
+                    const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
+                    return {
+                        rel: 'noopener noreferrer',
+                        target: isExternal ? '_blank' : null,
+                    };
+                },
+                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
+            }),
+            AutoLink,
+        ],
     });
     return {
         externalEditor,
@@ -30,13 +77,51 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const editor = new Editor({
         content: model.value ?? '',
         editable: !props.readOnly,
-        extensions: getRteExtensions({
-            restrictStarterKit: true,
-            editing: {
+        extensions: [
+            StarterKit.configure({
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+                horizontalRule: false,
+                codeBlock: false,
+                code: false,
+            }),
+            Underline,
+            TextStyle.configure({ mergeNestedSpanStyles: true }),
+            TextAlign.configure({
+                types: ['heading', 'paragraph'],
+            }),
+            FontFamily.configure({
+                types: ['textStyle'],
+            }),
+            FontSize,
+            LetterSpacing,
+            LineHeight,
+            ColorExtension.configure({
+                types: ['textStyle'],
+            }),
+            Highlight.configure({
+                multicolor: true,
+            }),
+            Placeholder.configure({
                 placeholder: props.placeholder,
-                maxLength: props.maxLength,
-            },
-        }),
+            }),
+            MaxLength.configure({ maxLength: props.maxLength }),
+            Link.configure({
+                openOnClick: false,
+                defaultProtocol: 'https',
+                autolink: true,
+                HTMLAttributes: (attrs) => {
+                    const href = attrs.href;
+                    const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
+                    return {
+                        target: isExternal ? '_blank' : null,
+                    };
+                },
+                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
+            }),
+            AutoLink,
+        ],
         editorProps: {
             handleDOMEvents: {
                 drop(view, event) {
@@ -139,7 +224,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const { selectedFont, toggleFont, toggleFontSize, toggleFontAll, toggleFontSizeAll, } = useFont(editor, fontSettings, fontStyleDropdownRef);
     const { letterSpacingValue, lineHeightValue, letterSpacing, lineHeight, setLetterSpaceAll, setLineHeightAll, } = useSpacing(editor);
     const { hyperlinkValue, setHyperlinkUrl, setHyperlinkUrlValue, removeHyperlink: removeHyperlinkFromComposable, applyHyperlinkToEditor, } = useHyperlink(editor);
-    const { shouldShow, bubbleMenuOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
+    const { shouldShow, tippyOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
     watch(() => props.styles.textAlign, (newAlignment) => {
         if (newAlignment && newAlignment !== currentAlignment.value.alignment) {
             skipStyleDetection(editor.chain().selectAll().setTextAlign(newAlignment)).run();
@@ -154,12 +239,8 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         const appliedSinceLast = historyStore.snapshotAppliedToken !== lastAppliedToken;
         lastAppliedToken = historyStore.snapshotAppliedToken;
         const isExternalMutation = updateRichTextEditor.value || appliedSinceLast;
-        // Compare in the stored (JSON) format so a JSON model value isn't always
-        // seen as "changed" against the editor's HTML (which would re-run
-        // setContent and reset the user's just-applied styles).
-        const hasChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(newValue);
-        if (isExternalMutation && hasChanged) {
-            editor.commands.setContent(newValue, { emitUpdate: false });
+        if (isExternalMutation && editor.getHTML() !== newValue) {
+            editor.commands.setContent(newValue, false);
             updateRichTextEditor.value = false;
             //text style type is not switching when reordering
             textStyleTypeOptions.forEach((item) => {
@@ -186,13 +267,11 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             });
         }
     });
-    // Update model when editor content changes. RTE content is stored as Tiptap
-    // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
-    // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
-    // the per-keystroke path allocates nothing heavy.
+    // Update model when editor content changes
     editor.on('update', () => {
+        const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
         // An update fired while the editor is unfocused is TipTap rewriting the
-        // model back into its canonical form during mount rehydration or a
+        // model back into its canonical HTML during mount rehydration or a
         // programmatic setContent — not a user edit. Tag the emit so the write
         // folds into the current undo head instead of pushing a phantom entry
         // (BP-5810). The flag travels WITH the value through the debounced
@@ -206,7 +285,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         // the RTE only mounts inside an already-open settings drawer and the user
         // focuses it before formatting, so this doesn't occur — revisit if a
         // consumer ever drives toolbar actions on an unfocused editor.
-        emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
+        emit('update:modelValue', sanitizedData.sanitizedHtml, {
             isHydrationWrite: !editor.isFocused,
         });
     });
@@ -646,7 +725,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         hyperlinkValue,
         setHyperlinkUrlValue,
         shouldShow,
-        bubbleMenuOptions,
+        tippyOptions,
         handleAdminColorChange,
     };
 };

package/lib/src/brand-page-maker/utils/index.d.ts

@@ -5,6 +5,4 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
-export * from './rte-render.util';
-export * from './rte-sanitize.util';
 export declare const isColorMatched: (color: string | null | undefined) => boolean;

package/lib/src/brand-page-maker/utils/index.js

@@ -6,8 +6,6 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
-export * from './rte-render.util';
-export * from './rte-sanitize.util';
 export const isColorMatched = (color) => {
     if (!color)
         return false;

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

@@ -1,6 +1,6 @@
-import type { ChainedCommands, Editor, JSONContent } from '@tiptap/vue-3';
+import type { ChainedCommands, Editor } from '@tiptap/vue-3';
 import type { EditorState, Transaction, Selection } from 'prosemirror-state';
-import { type Content, type TextStyleDeclaration, type TextStyleType, type RichTextValue } from '@brand-page';
+import { type Content, type TextStyleDeclaration, type TextStyleType } 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,31 +9,12 @@ 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;
-/**
- * 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 hasRTEContent: (content: string) => boolean;
+export declare const getPlainTextFromRTE: (content: string) => string;
 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: 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 getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;
 export declare const buildInitialMarks: (state: EditorState, style: TextStyleDeclaration) => any[];
 export declare const retainStyleOnEmptyLine: (editor: Editor, selection: Selection) => void;
 export interface SanitizationResult {
@@ -41,10 +22,6 @@ 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,41 +175,14 @@ 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 (isTiptapDocument(content))
-        return true;
-    if (typeof content !== 'string' || content.length === 0)
+    if (!content || 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 '';
     }
@@ -227,19 +200,6 @@ 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>`;
@@ -514,10 +474,7 @@ export const getUpdatedHTMLFromEditor = (externalEditor, contentText, newContent
     if (!contentText) {
         return contentText;
     }
-    // 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)
+    const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
         ? getRenderText(contentText)
         : contentText;
     externalEditor.commands.setContent(content);
@@ -561,8 +518,8 @@ export const getUpdatedHTMLFromEditor = (externalEditor, contentText, newContent
             : chain.unsetBold();
     chain = newContentStyle?.fontStyle ? chain.setItalic() : chain.unsetItalic();
     chain.run();
-    // BP-5787: return the JSON form, consistent with how RTE is now stored.
-    return externalEditor.getJSON();
+    const html = externalEditor.getHTML();
+    return html;
 };
 // Helper to build stored marks from a style declaration
 export const buildInitialMarks = (state, style) => {
@@ -641,7 +598,7 @@ export const sanitiseClientSideRTE = (html) => {
 /**
  * Validates if an href value is safe and returns a sanitized version
  */
-export const validateAndSanitizeHref = (href) => {
+const validateAndSanitizeHref = (href) => {
     if (!href || typeof href !== 'string')
         return null;
     // Trim whitespace and decode entities

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