@designcrowd/library.brand-page 5.10.20 → 5.10.31

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

@@ -42,7 +42,7 @@ export const MaxLength = Extension.create({
                                 const text = node.text ?? '';
                                 const piece = text.slice(0, remaining);
                                 if (piece.length > 0) {
-                                    nodes.push(node.type.create(node.attrs, node.type.schema.text(piece), node.marks));
+                                    nodes.push(node.type.schema.text(piece, node.marks));
                                     remaining -= piece.length;
                                 }
                             }
@@ -64,7 +64,7 @@ export const MaxLength = Extension.create({
                                             const piece = (subNode.text ?? '').slice(0, remaining);
                                             if (piece.length === 0)
                                                 return null;
-                                            const newText = subNode.type.create(subNode.attrs, subNode.type.schema.text(piece), subNode.marks);
+                                            const newText = subNode.type.schema.text(piece, subNode.marks);
                                             remaining -= piece.length;
                                             return newText;
                                         }
@@ -77,7 +77,7 @@ export const MaxLength = Extension.create({
                                             });
                                             if (children.length === 0)
                                                 return null;
-                                            return subNode.type.create(subNode.attrs, Fragment.fromArray(children), subNode.marks);
+                                            return subNode.copy(Fragment.fromArray(children));
                                         }
                                         return null;
                                     };

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

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 interface DropdownRef {
     hideMenu: () => void;
 }

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

@@ -1,5 +1,4 @@
 import { ref } from 'vue';
-import { Editor } from '@tiptap/vue-3';
 import { emToPx, pxToEm, skipStyleDetection, } from '../../../brand-page-maker/utils';
 import debounce from 'lodash/debounce';
 export const useFont = (editor, fontSettings, dropdownRef) => {

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

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 export declare const createFormattingActions: (editor: Editor) => {
     toggleBold: () => boolean;
     toggleItalic: () => boolean;

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

@@ -1,4 +1,3 @@
-import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const createFormattingActions = (editor) => {
     return {

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

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const useHyperlink: (editor: Editor) => {
+    hyperlinkValue: import("vue").WritableComputedRef<{
+        id: string;
+        name: string;
+        value: string;
+    }, {
+        id: string;
+        name: string;
+        value: string;
+    }>;
+    setHyperlinkUrl: (url: string) => void;
+    setHyperlinkUrlValue: (url: string) => void;
+    removeHyperlink: (clearUrlValue?: boolean) => void;
+    applyHyperlinkToEditor: (url: string, text?: string, selection?: {
+        from: number;
+        to: number;
+    }) => void;
+};

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

@@ -0,0 +1,87 @@
+import { ref, computed } from 'vue';
+// Store original colors before applying hyperlinks
+const originalColors = new WeakMap();
+export const useHyperlink = (editor) => {
+    const hyperlinkUrl = ref('');
+    const storeOriginalColor = () => {
+        const currentTextStyle = editor.getAttributes('textStyle');
+        const originalColor = currentTextStyle.color || null;
+        // Store the original color using the editor instance as key
+        originalColors.set(editor, originalColor);
+        return originalColor;
+    };
+    const restoreOriginalColor = () => {
+        const originalColor = originalColors.get(editor);
+        if (originalColor) {
+            // Restore the original color
+            editor.chain().focus().setColor(originalColor).run();
+        }
+        else {
+            // No original color, remove color completely
+            editor.chain().focus().unsetColor().run();
+        }
+        // Clean up stored color
+        originalColors.delete(editor);
+    };
+    const setHyperlinkUrl = (url) => {
+        const safeUrl = typeof url === 'string' ? url : '';
+        hyperlinkUrl.value = safeUrl;
+        storeOriginalColor();
+        // Set the link, apply blue color, and add underline by default
+        editor
+            .chain()
+            .focus()
+            .setLink({ href: safeUrl })
+            .setColor('#0097d7')
+            .setUnderline()
+            .run();
+    };
+    const setHyperlinkUrlValue = (url) => {
+        hyperlinkUrl.value = typeof url === 'string' ? url : '';
+    };
+    const hyperlinkValue = computed({
+        get: () => ({
+            id: 'id',
+            name: 'url',
+            value: hyperlinkUrl.value,
+        }),
+        set: (v) => {
+            setHyperlinkUrl(v?.value || '');
+        },
+    });
+    const applyHyperlinkToEditor = (url, text, selection) => {
+        storeOriginalColor();
+        const selectedText = editor.chain().focus();
+        // Replace content with text if provided
+        if (text && text.trim()) {
+            const currentPos = selection?.from || editor.state.selection.from;
+            selectedText
+                .deleteSelection()
+                .insertContent(text)
+                .setTextSelection({
+                from: currentPos,
+                to: currentPos + text.length,
+            });
+        }
+        selectedText
+            .setLink({ href: url })
+            .setColor('#0097d7')
+            .setUnderline()
+            .run();
+    };
+    const removeHyperlink = (clearUrlValue = false) => {
+        editor.chain().focus().unsetLink().unsetUnderline().run();
+        // Restore original color (or remove color if there was none)
+        restoreOriginalColor();
+        if (clearUrlValue) {
+            setHyperlinkUrlValue('');
+        }
+    };
+    return {
+        hyperlinkValue,
+        setHyperlinkUrl,
+        setHyperlinkUrlValue,
+        removeHyperlink,
+        applyHyperlinkToEditor,
+    };
+};

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

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 export declare const useSpacing: (editor: Editor) => {
     letterSpacingValue: import("vue").WritableComputedRef<string, string>;
     lineHeightValue: import("vue").WritableComputedRef<string, string>;

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

@@ -1,5 +1,4 @@
 import { ref, computed } from 'vue';
-import { Editor } from '@tiptap/vue-3';
 import debounce from 'lodash/debounce';
 import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';

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

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 export declare const useTextAlign: (editor: Editor) => {
     currentAlignment: import("vue").ComputedRef<{
         icon: string;

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

@@ -1,5 +1,4 @@
 import { ref, computed } from 'vue';
-import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const useTextAlign = (editor) => {
     const alignmentSettings = {

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

@@ -1,7 +1,8 @@
 import { type ModelRef, type ComputedRef, type Ref, type WritableComputedRef } from 'vue';
 import { Editor } from '@tiptap/vue-3';
 import type { StyleTextFontFamilyOption } from '../../../shared/style-settings/models';
-import { TextStyles, type TextItem, type TextStyleDeclaration } from '../../../brand-page';
+import type { TextStyles } from '../../../brand-page';
+import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
 import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
 interface UseRichTextEditorReturn {
     editor: Editor;
@@ -28,12 +29,32 @@ interface UseRichTextEditorReturn {
     setInitialStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
     copyGlobalStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
     unsetAllMarks: () => void;
+    handleHyperlink: (action: 'toggle' | 'apply' | 'remove', data?: {
+        href?: string;
+        text?: string;
+    }) => void;
+    hyperlinkValue: ComputedRef<{
+        id: string;
+        name: string;
+        value: string;
+    }>;
+    setHyperlinkUrlValue: (url: string) => void;
+    shouldShow: ({ editor, state }: {
+        editor: any;
+        state: any;
+    }) => boolean;
+    tippyOptions: Record<string, any>;
+    handleAdminColorChange: (color: {
+        id: string;
+        name: string;
+        value: string;
+    }, type: 'textColor' | 'backgroundColor') => void;
 }
 interface DropdownInstance {
     hideMenu: () => void;
 }
 interface EditorOptionType {
-    type: 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
+    type: 'hyperlink' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
     value: string | StyleTextFontFamilyOption;
 }
 export declare const useExternalRichTextEditor: () => {
@@ -56,5 +77,5 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     selectedFontSizePx: number;
     selectedTextColor: string;
     selectedBackgroundColor: string;
-}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[]) => UseRichTextEditorReturn;
+}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>) => UseRichTextEditorReturn;
 export {};

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

@@ -11,18 +11,22 @@ 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, skipStyleDetection, } from '../../../brand-page-maker/utils';
-import { TextStyles, } from '../../../brand-page';
-import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
+import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRTE, skipStyleDetection, } from '../../../brand-page-maker/utils';
+import {} from '../../../brand-page';
+import { letterSpacingValueConvertor, colorConvertor, backgroundColorConvertor, } from '../../../brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-import { DOMSerializer } from 'prosemirror-model';
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { useHyperlink } from './hyperlink';
+import { useBubbleMenu } from './bubbleMenu';
+import { hasLogoColorVar, isLogoColor, getRTEColor, } from '../../utils/rich-text-editor.util';
 export const useExternalRichTextEditor = () => {
     const externalEditor = new Editor({
         editable: false,
@@ -45,13 +49,27 @@ export const useExternalRichTextEditor = () => {
             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,
+                    };
+                },
+            }),
+            AutoLink,
         ],
     });
     return {
         externalEditor,
     };
 };
-export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions) => {
+export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen) => {
     const editor = new Editor({
         content: model.value ?? '',
         editable: !props.readOnly,
@@ -78,6 +96,19 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 placeholder: props.placeholder,
             }),
             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,
+                    };
+                },
+            }),
+            AutoLink,
         ],
         editorProps: {
             handleDOMEvents: {
@@ -100,23 +131,20 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                     return false;
                 },
                 copy(view, event) {
-                    // Prevent the browser’s default so we can inject our own blobs
-                    event.preventDefault();
-                    // 1) Plain text (already have this)
-                    const selectedText = view.state.doc.textBetween(view.state.selection.from, view.state.selection.to, '\n');
-                    event.clipboardData?.setData('text/plain', selectedText);
-                    // 2) custom style blob to add
+                    const selection = view.state.selection;
+                    if (selection.empty)
+                        return;
+                    const data = event.clipboardData;
                     const styleData = JSON.stringify(props.styles);
-                    event.clipboardData?.setData('application/x-rte-styles', styleData);
-                    // 3) HTML serialization via ProseMirror’s DOMSerializer
-                    const { from, to } = view.state.selection;
-                    const slice = view.state.doc.slice(from, to);
-                    const serializer = DOMSerializer.fromSchema(view.state.schema);
-                    const fragment = serializer.serializeFragment(slice.content);
-                    // Wrap in a container DIV so we can grab `innerHTML`
-                    const wrapper = document.createElement('div');
-                    wrapper.appendChild(fragment);
-                    event.clipboardData?.setData('text/html', wrapper.innerHTML);
+                    const slice = selection.content(), { dom, text } = view.serializeForClipboard(slice);
+                    if (data) {
+                        event.preventDefault();
+                        data.clearData();
+                        data.setData('text/html', dom.innerHTML);
+                        data.setData('text/plain', text);
+                        if (styleData)
+                            data.setData('application/x-rte-styles', styleData);
+                    }
                     return true;
                 },
                 paste(view, event) {
@@ -159,6 +187,21 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                     dispatch(tr);
                     return true;
                 },
+                click(view, event) {
+                    if (isHyperlinkPopupOpen?.value)
+                        return false;
+                    const target = event.target;
+                    const linkElement = target.closest('a');
+                    if (linkElement) {
+                        const pos = view.posAtDOM(linkElement, 0);
+                        if (pos !== null) {
+                            editor.commands.setTextSelection(pos);
+                            editor.commands.extendMarkRange('link');
+                            return true; // Prevent default
+                        }
+                    }
+                    return false;
+                },
             },
         },
     });
@@ -167,6 +210,8 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const { currentAlignment, toggleTextAlign, idx: currentAlignmentIndex, keys: alignmentKeys, } = useTextAlign(editor);
     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, tippyOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
     watch(() => props.styles.textAlign, (newAlignment) => {
         if (newAlignment && newAlignment !== currentAlignment.value.alignment) {
             skipStyleDetection(editor.chain().selectAll().setTextAlign(newAlignment)).run();
@@ -196,8 +241,8 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     });
     // Update model when editor content changes
     editor.on('update', () => {
-        const html = editor.getHTML();
-        emit('update:modelValue', html);
+        const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
+        emit('update:modelValue', sanitizedData.sanitizedHtml);
     });
     editor.on('selectionUpdate', () => {
         const textStyleAttributes = editor.getAttributes('textStyle');
@@ -229,13 +274,15 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFontSizePx = parseInt(emToPx(fontSettings.selectedFontSize));
         }
         if (textStyleAttributes && textStyleAttributes.color) {
-            fontSettings.selectedTextColor = Color(textStyleAttributes.color).hex();
+            if (!hasLogoColorVar(textStyleAttributes.color))
+                fontSettings.selectedTextColor = Color(textStyleAttributes.color).hex();
         }
         else {
             fontSettings.selectedTextColor = '#000000';
         }
         if (highlightAttributes && highlightAttributes.color) {
-            fontSettings.selectedBackgroundColor = Color(highlightAttributes.color).hex();
+            if (!hasLogoColorVar(highlightAttributes.color))
+                fontSettings.selectedBackgroundColor = Color(highlightAttributes.color).hex();
         }
         else {
             fontSettings.selectedBackgroundColor = 'transparent';
@@ -287,9 +334,12 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFont = globalStyles?.fontFamily ?? 'Lato';
             fontSettings.selectedFontSize = globalStyles?.fontSize ?? '2.25em';
             fontSettings.selectedFontSizePx = parseInt(emToPx(globalStyles?.fontSize ?? '2.25em'));
-            fontSettings.selectedTextColor = globalStyles?.color ?? '#000000';
-            fontSettings.selectedBackgroundColor =
-                globalStyles?.backgroundColor ?? 'transparent';
+            fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
+                ? '#000000'
+                : globalStyles?.color ?? '#000000';
+            fontSettings.selectedBackgroundColor = hasLogoColorVar(globalStyles?.backgroundColor ?? '')
+                ? 'transparent'
+                : globalStyles?.backgroundColor ?? 'transparent';
             lineHeight.value = globalStyles?.lineHeight?.includes('em')
                 ? emToPx(globalStyles?.lineHeight ?? '1em')
                 : globalStyles?.lineHeight ?? '1';
@@ -305,9 +355,12 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFont = props.styles?.fontFamily ?? 'Lato';
             fontSettings.selectedFontSize = props.styles?.fontSize ?? '2.25em';
             fontSettings.selectedFontSizePx = parseInt(emToPx(props.styles?.fontSize ?? '2.25em'));
-            fontSettings.selectedTextColor = props.styles?.color ?? '#000000';
-            fontSettings.selectedBackgroundColor =
-                props.styles?.backgroundColor ?? 'transparent';
+            fontSettings.selectedTextColor = hasLogoColorVar(props.styles?.color ?? '#000000')
+                ? '#000000'
+                : props.styles?.color ?? '#000000';
+            fontSettings.selectedBackgroundColor = hasLogoColorVar(props.styles?.backgroundColor ?? '')
+                ? 'transparent'
+                : props.styles?.backgroundColor ?? 'transparent';
             lineHeight.value = props.styles?.lineHeight?.includes('em')
                 ? emToPx(props.styles?.lineHeight ?? '1em')
                 : props.styles?.lineHeight ?? '1';
@@ -329,8 +382,15 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             globalStyles.textDecoration?.includes('line-through') &&
                 toggleStrikeAll();
             if (globalStyles.color) {
-                toggleTextColorAll(globalStyles.color);
-                fontSettings.selectedTextColor = globalStyles.color;
+                if (!hasLogoColorVar(globalStyles.color)) {
+                    toggleTextColorAll(globalStyles.color);
+                    fontSettings.selectedTextColor = globalStyles.color;
+                }
+                else {
+                    // Apply logo color using CSS variable
+                    toggleTextColorAll(getRTEColor(globalStyles.color, 'text'));
+                    fontSettings.selectedTextColor = '#000000';
+                }
             }
             globalStyles.fontFamily && toggleFontAll(globalStyles.fontFamily);
             globalStyles.fontSize && toggleFontSizeAll(globalStyles.fontSize);
@@ -410,6 +470,9 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 toggleTextAlign();
                 fontStyleChanges.textAlign = currentAlignment.value.alignment;
                 break;
+            case 'hyperlink':
+                setHyperlinkUrl(editorOption.value);
+                break;
         }
         syncContentSettings(fontStyleChanges);
     };
@@ -441,6 +504,118 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const onBlur = () => {
         emit('blur');
     };
+    const handleHyperlink = (action, data) => {
+        switch (action) {
+            case 'toggle':
+                isHyperlinkPopupOpen.value = !isHyperlinkPopupOpen.value;
+                if (isHyperlinkPopupOpen.value) {
+                    if (data?.href && data?.text) {
+                        setHyperlinkUrlValue(data.href);
+                        markedText.value = data.text;
+                    }
+                    else {
+                        const linkAttrs = editor.getAttributes('link');
+                        const selection = editor.state.selection;
+                        if (linkAttrs.href) {
+                            editor.commands.extendMarkRange('link');
+                            const linkText = editor.state.doc.textBetween(selection.from, selection.to);
+                            setHyperlinkUrlValue(linkAttrs.href);
+                            markedText.value = linkText;
+                        }
+                        else {
+                            const selectedText = selection.empty
+                                ? ''
+                                : editor.state.doc.textBetween(selection.from, selection.to);
+                            setHyperlinkUrlValue('');
+                            markedText.value = selectedText;
+                        }
+                    }
+                    editor.commands.focus(); // Hide bubble menu
+                }
+                break;
+            case 'apply':
+                const url = hyperlinkValue.value.value;
+                const text = markedText.value;
+                if (!url.trim()) {
+                    isHyperlinkPopupOpen.value = false;
+                    return;
+                }
+                const selection = editor.state?.selection;
+                const selectionRange = selection
+                    ? { from: selection.from, to: selection.to }
+                    : undefined;
+                applyHyperlinkToEditor(url, text, selectionRange);
+                isHyperlinkPopupOpen.value = false;
+                break;
+            case 'remove':
+                removeHyperlinkFromComposable();
+                isHyperlinkPopupOpen.value = false;
+                break;
+        }
+    };
+    const handleAdminColorChange = (color, colorType) => {
+        const convertor = colorType === 'textColor' ? colorConvertor : backgroundColorConvertor;
+        const convertedColor = convertor.convertBack(color.value);
+        const colorValue = colorType === 'textColor'
+            ? convertedColor.color
+            : convertedColor.backgroundColor;
+        editor.commands.selectAll();
+        if (colorValue?.startsWith('#')) {
+            if (colorType === 'textColor') {
+                fontSettings.selectedTextColor = colorValue;
+            }
+            else {
+                fontSettings.selectedBackgroundColor = colorValue;
+            }
+            triggerEditorStyleChange({
+                type: colorType,
+                value: colorValue,
+            });
+        }
+        else {
+            // Handle logo theme colors using getRTEColor
+            if (isLogoColor(colorValue || '')) {
+                const processedColor = getRTEColor(colorValue, colorType === 'textColor' ? 'text' : 'background');
+                if (colorType === 'textColor') {
+                    editor.commands.setColor(processedColor);
+                }
+                else {
+                    editor.commands.setHighlight({
+                        color: processedColor,
+                    });
+                }
+            }
+            else {
+                if (colorType === 'textColor') {
+                    editor.commands.unsetColor();
+                }
+                else {
+                    editor.commands.unsetHighlight();
+                }
+            }
+        }
+        const updateValue = {
+            textStyleType: undefined,
+            ...(colorType === 'textColor'
+                ? { color: colorValue }
+                : { backgroundColor: colorValue }),
+        };
+        if (props.name === 'textItems') {
+            contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+                id: props.rawId,
+                name: props.name,
+                value: updateValue,
+                index: props.textItemIndex,
+            });
+        }
+        else {
+            contentSettingStore.updateTextStyles({
+                id: props.rawId,
+                name: props.name,
+                value: updateValue,
+            });
+        }
+    };
     onBeforeUnmount(() => {
         editor.destroy();
     });
@@ -465,5 +640,11 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         setInitialStyleSettings,
         copyGlobalStyleSettings,
         unsetAllMarks,
+        handleHyperlink,
+        hyperlinkValue,
+        setHyperlinkUrlValue,
+        shouldShow,
+        tippyOptions,
+        handleAdminColorChange,
     };
 };

package/lib/src/brand-page-maker/constants/brandpage-meta-constant.d.ts

@@ -1,9 +1,9 @@
-export declare const BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION: () => string;
+export declare const BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION: () => any;
 export declare const BRANDPAGE_SLUG_CHARACTER_LIMIT = 100;
-export declare const BRANDPAGE_SLUG_INVALID_ERROR_MESSAGE: () => string;
-export declare const BRANDPAGE_SLUG_CHARACTER_LIMIT_ERROR_MESSAGE: () => string;
+export declare const BRANDPAGE_SLUG_INVALID_ERROR_MESSAGE: () => any;
+export declare const BRANDPAGE_SLUG_CHARACTER_LIMIT_ERROR_MESSAGE: () => any;
 export declare const BRANDPAGE_DESCRIPTION_CHARACTER_LIMIT = 158;
-export declare const BRANDPAGE_DESCRIPTION_CHARACTER_LIMIT_ERROR_MESSAGE: () => string;
+export declare const BRANDPAGE_DESCRIPTION_CHARACTER_LIMIT_ERROR_MESSAGE: () => any;
 export declare const BRANDPAGE_TITLE_CHARACTER_LIMIT = 60;
-export declare const BRANDPAGE_TITLE_CHARACTER_LIMIT_ERROR_MESSAGE: () => string;
+export declare const BRANDPAGE_TITLE_CHARACTER_LIMIT_ERROR_MESSAGE: () => any;
 export declare const brandPageSlugRe: RegExp;

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

@@ -21,8 +21,8 @@ export declare const BYO_LINK_ENDPOINT = "/maker/api/user-logos/link-user-logo-t
 export declare const UI_EVENTS: {
     refreshUserMediaEvent: string;
 };
-export declare const BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION: () => string;
-export declare const BRANDPAGE_DEFAULT_ERROR_MESSAGE_DESCRIPTION: () => string;
+export declare const BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION: () => any;
+export declare const BRANDPAGE_DEFAULT_ERROR_MESSAGE_DESCRIPTION: () => any;
 export declare const YOUTUBE_EMBED_URL_PREFIX = "https://www.youtube.com/embed";
 export declare const DEFAULT_USER_ENDPOINTS: Readonly<Endpoints>;
 export declare const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints>;

package/lib/src/brand-page-maker/models/button-group.model.d.ts

@@ -3,6 +3,7 @@ export interface ButtonGroupBasicOption {
     label: string;
     isSelected: boolean;
     dataAttribute?: string;
+    disabled?: boolean;
 }
 export type ButtonGroupOption = ButtonGroupBasicOption | {
     label?: string;
@@ -13,4 +14,5 @@ export type ButtonGroupOption = ButtonGroupBasicOption | {
     iconViewBox?: string;
     iconSize?: string;
     dataAttribute?: string;
+    disabled?: boolean;
 };