@designcrowd/library.brand-page 6.0.19 → 6.0.20

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) {
@@ -154,11 +239,7 @@ 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) {
+        if (isExternalMutation && editor.getHTML() !== newValue) {
             editor.commands.setContent(newValue, false);
             updateRichTextEditor.value = false;
             //text style type is not switching when reordering
@@ -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,
         });
     });

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,22 +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;
+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 | JSONContent;
+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 {
@@ -32,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 '';
     }
@@ -501,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);
@@ -548,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) => {
@@ -628,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`),

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -5697,7 +5697,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.empty-para[data-v-4418a9fe] p:empty::after {
+.empty-para[data-v-2520851c] p:empty::after {
   content: '\00A0';
 }
 

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -6308,7 +6308,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.empty-para[data-v-4418a9fe] p:empty::after {
+.empty-para[data-v-2520851c] p:empty::after {
   content: '\00A0';
 }
 

package/lib/src/css/library.brand-page-designCom.min.css

@@ -5727,7 +5727,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.empty-para[data-v-4418a9fe] p:empty::after {
+.empty-para[data-v-2520851c] p:empty::after {
   content: '\00A0';
 }
 

package/lib/src/css/library.brand-page-preview.min.css

@@ -5697,7 +5697,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.bp .empty-para[data-v-4418a9fe] p:empty::after {
+.bp .empty-para[data-v-2520851c] p:empty::after {
   content: '\00A0';
 }
 

package/lib/src/index.d.ts

@@ -28,7 +28,6 @@ export * as brandPageUtils from './brand-page/utils';
 export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
 export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, recalculateLogoContentDimensions, recalculateHeaderLogoSizes, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
-export { renderRteToHtml, toRteJson, isTiptapDocument, sanitizeRteJson, getRteJsonPlainText, type RichTextValue, } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 export { executeToolCallsAsync } from './metadata-builder/ai-metadata-executor';
 export type { ParsedToolCall } from './metadata-builder/parsers/ai-toolcall-parser';