@designcrowd/library.brand-page 5.10.19 → 5.10.20-ast-link-1

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -25,5 +25,6 @@ export declare const context: {
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;
+    disableLogoRenderOnServerside?: boolean | undefined;
 };
 export declare const viewModel: RequestPaymentViewModel;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -25,5 +25,6 @@ export declare const context: {
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;
+    disableLogoRenderOnServerside?: boolean | undefined;
 };
 export declare const viewModel: SupportMeViewModel;

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -72,5 +72,6 @@ export interface BrandPageContext {
     abTests?: AbTest;
     /** Is brand page rendered for preview */
     isCapturingPreview: boolean;
+    disableLogoRenderOnServerside?: boolean;
 }
 export declare const getAbTestResults: (abtestKeyValues: Record<string, string>) => AbTest;

package/lib/src/brand-page/models/index.d.ts

@@ -207,6 +207,11 @@ export declare const BUTTON_LINK_TYPE: {
     readonly tel: "tel";
 };
 export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
+export declare const HYPERLINK_TYPE: {
+    readonly url: "url";
+    readonly page: "page";
+};
+export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
 export declare const URL_TYPE: {
     readonly url: "url";
     readonly email: "email";

package/lib/src/brand-page/models/index.js

@@ -136,6 +136,10 @@ export const BUTTON_LINK_TYPE = {
     mailTo: 'mailTo',
     tel: 'tel',
 };
+export const HYPERLINK_TYPE = {
+    url: 'url',
+    page: 'page',
+};
 export const URL_TYPE = {
     url: 'url',
     email: 'email',

package/lib/src/brand-page/utils/style.util.d.ts

@@ -1,6 +1,13 @@
-import type { BrandPageModel, LogoTheme, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
+import type { BrandPageModel, LogoTheme, ThemeColor, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
 import { NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
+/**
+ * @function getColorValueForCorrectCssProperty
+ * @param k: string
+ * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
+ * @returns string - rgb() or linear-gradient()
+ */
+export declare const getColorValueForCorrectCssProperty: (k: string, colorData: ThemeColor) => string;
 export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme, applyColorWithMatchingLuminance?: {
     originalColor: string;
 }) => {

package/lib/src/brand-page/utils/style.util.js

@@ -4,6 +4,7 @@ import { STYLE_THEME_KEYS } from '../constants';
 import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
 import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
 import chroma from 'chroma-js';
+import { hasRTEContent } from '../../brand-page-maker/utils';
 const MIN_LUM_RATIO = 0.3;
 const parseFabricColorToCssStyle = (fabricColor) => {
     if (fabricColor && typeof fabricColor === 'object') {
@@ -25,7 +26,7 @@ const parseFabricColorToCssStyle = (fabricColor) => {
  * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
  * @returns string - rgb() or linear-gradient()
  */
-const getColorValueForCorrectCssProperty = (k, colorData) => {
+export const getColorValueForCorrectCssProperty = (k, colorData) => {
     const gradientSupportedCssProperties = ['background', 'backgroundImage'];
     return colorData.gradient && gradientSupportedCssProperties.indexOf(k) > -1
         ? colorData.gradient
@@ -49,13 +50,15 @@ export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWit
             return { cssValue: newColor, isModified: true };
         }
     }
-    if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
-        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) {
+    if ((cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) &&
+        !hasRTEContent(cssValue)) {
         cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
         return { cssValue, isModified: true };
     }
-    else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
-        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) {
+    else if ((cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) &&
+        !hasRTEContent(cssValue)) {
         cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
         return { cssValue, isModified: true };
     }
@@ -196,6 +199,8 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
+const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
+const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;
     const newPages = pages.map((page) => {
@@ -211,12 +216,60 @@ export const applyLogoThemeToContents = (logoTheme, pages) => {
                 newContent[styleKey] = newStyle;
                 isModified = isModified || isApplied;
             }
+            const rteContentKeys = RTE_ALLOWED_SECTION_TYPES.includes(content.type)
+                ? Object.keys(content).filter((k) => RTE_ALLOWED_FIELDS.includes(k))
+                : [];
+            for (const key of rteContentKeys) {
+                const { newRTEContent, isApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(newContent[key], logoTheme, isModified);
+                newContent[key] = newRTEContent;
+                isModified = isModified || isApplied;
+            }
             return newContent;
         });
         return { ...page, contents: newContents };
     });
     return { pages: newPages, isModified };
 };
+const applyLogoThemeToBrandPageRTEContentColorsRecursive = (content, logoTheme, isModified) => {
+    let isApplied = false;
+    let newRTEContent = {};
+    if (typeof content === 'string' && hasRTEContent(content)) {
+        newRTEContent = replaceRTEContentColors(content, logoTheme);
+        isApplied = true;
+    }
+    else if (Array.isArray(content)) {
+        newRTEContent = content.map((item) => {
+            const { newRTEContent: recursiveContent, isApplied: recursiveIsApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(item, logoTheme, isModified);
+            isApplied = recursiveIsApplied;
+            return recursiveContent;
+        });
+    }
+    else if (typeof content === 'object') {
+        for (const [key, value] of Object.entries(content)) {
+            if (RTE_ALLOWED_FIELDS.includes(key) &&
+                typeof value === 'string' &&
+                hasRTEContent(value)) {
+                newRTEContent[key] = replaceRTEContentColors(value, logoTheme);
+                isApplied = true;
+            }
+            else {
+                newRTEContent[key] = value;
+            }
+        }
+    }
+    else {
+        newRTEContent = content;
+        isApplied = false;
+    }
+    return { isApplied, newRTEContent };
+};
+const replaceRTEContentColors = (content, logoTheme) => {
+    return content
+        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
+        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb)
+        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextMultiColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
+        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundMultiColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb);
+};
 export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
     let isModified = false;
     const newStyle = new PageStyles();

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -171,7 +171,7 @@ export const BRAND_SITE = {
                         color: 'logo-text-color',
                         fontSize: '1.5rem',
                         textAlign: 'center',
-                        fontFamily: 'Nunito',
+                        fontFamily: 'Exo 2',
                         lineHeight: '2rem',
                     },
                     colorReplacements: [

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.js

@@ -43,6 +43,7 @@ export const textContent = {
     textSize: {},
     textStyle: {
         textAlign: DEFAULT_TEXT_ALIGN,
+        fontSize: '2em',
     },
     textAlignment: {},
     textColor: {},

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.d.ts

@@ -1,2 +1,2 @@
-export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];
+export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").TextContent | import("../../../../brand-page").LogoContent)[];
 export declare const brandPageContentsSampleDataStarterKit: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.js

@@ -1,7 +1,8 @@
-import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } from './content-settings-items.fixture';
+import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, textContent, } from './content-settings-items.fixture';
 export const brandPageContentsSampleData = [
     logoContent,
     profileContent,
+    textContent,
     generalLink,
     websiteLink,
     emailLink,

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -37,6 +37,38 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedTemplateId: import("vue").ComputedRef<string | false>;
     canUseRichTextEditor: import("vue").ComputedRef<boolean>;
     isAdmin: import("vue").ComputedRef<boolean>;
+    logoTheme: import("vue").ComputedRef<{
+        logoTextColor: {
+            rgb: string;
+            gradient?: string | undefined;
+            50?: string | undefined;
+            100?: string | undefined;
+            200?: string | undefined;
+            300?: string | undefined;
+            400?: string | undefined;
+            500?: string | undefined;
+            600?: string | undefined;
+            700?: string | undefined;
+            800?: string | undefined;
+            900?: string | undefined;
+            950?: string | undefined;
+        };
+        logoBackgroundColor: {
+            rgb: string;
+            gradient?: string | undefined;
+            50?: string | undefined;
+            100?: string | undefined;
+            200?: string | undefined;
+            300?: string | undefined;
+            400?: string | undefined;
+            500?: string | undefined;
+            600?: string | undefined;
+            700?: string | undefined;
+            800?: string | undefined;
+            900?: string | undefined;
+            950?: string | undefined;
+        };
+    }>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../../shared/content-settings/store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -1030,6 +1062,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     };
     isDraggableEnabled(): boolean;
     isItemSelected(): (itemIdx: any) => boolean;
+    styleHtml(): string;
 }, {
     dispatchViewPortChangeEvent(): void;
     onDraggingStart(): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -14,6 +14,7 @@ import debounce from 'lodash.debounce';
 import { transformToRTE } from '../../../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 export default defineComponent({
     mixins: [PageMixin],
     setup() {
@@ -40,6 +41,7 @@ export default defineComponent({
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
             canUseRichTextEditor: computed(() => brandPageMakerUserStore.features.canUseRichTextEditor),
             isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
+            logoTheme: computed(() => uiStore.logoTheme),
             contentSettingsStore,
             brandPageMakerStore,
             brandPageContainerStore,
@@ -97,6 +99,31 @@ export default defineComponent({
                 return this.isContentSelected ? item.id === this.selectedItemId : false;
             };
         },
+        styleHtml() {
+            if (!this.logoTheme) {
+                return '';
+            }
+            // Generate CSS variables for logo theme colors
+            const cssVariables = Object.entries(STYLE_THEME_KEYS)
+                .map(([key, value]) => {
+                const themeColor = key.includes('Background')
+                    ? this.logoTheme.logoBackgroundColor
+                    : this.logoTheme.logoTextColor;
+                if (themeColor?.rgb) {
+                    return `--${value}: ${themeColor.rgb};`;
+                }
+                return '';
+            })
+                .filter(Boolean)
+                .join('\n    ');
+            return cssVariables
+                ? `<style>
+  :root {
+    ${cssVariables}
+  }
+</style>`
+                : '';
+        },
     },
     mounted() {
         this.dispatchViewPortChangeEvent();
@@ -180,7 +207,14 @@ export default defineComponent({
             this.isContentSelected = true;
             if ((item.type === 'banner-section' || item.type === 'text') &&
                 this.canUseRichTextEditor) {
-                transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, item);
+                let selectedItem = item;
+                if (this.isAdmin) {
+                    const currentItem = this.items.find((i) => i.id === item.id);
+                    if (currentItem) {
+                        selectedItem = currentItem.settings.content;
+                    }
+                }
+                transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, selectedItem);
             }
             if (this.selectEventDebounceHandler) {
                 this.selectEventDebounceHandler();

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -185,6 +185,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     scaledContainerStyle(): BrandPageCssStyle;
     innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
+    cssVariablesStyle(): Record<string, string>;
 }, {
     onOverlayClicked(): void;
     onResize(): void;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -1,6 +1,7 @@
 import { computed, defineComponent } from 'vue';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '../../../brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '../../../brand-page/utils';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
 import { useBrandPageMakerStore } from '../../stores';
@@ -128,6 +129,22 @@ export default defineComponent({
         isPersonalisable() {
             return this.template.isPersonalisable || false;
         },
+        cssVariablesStyle() {
+            if (!this.logoTheme) {
+                return {};
+            }
+            const cssVariables = {};
+            // Generate CSS variables for logo theme colors
+            Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
+                const themeColor = key.includes('Background')
+                    ? this.logoTheme.logoBackgroundColor
+                    : this.logoTheme.logoTextColor;
+                if (themeColor?.rgb) {
+                    cssVariables[`--${value}`] = themeColor.rgb;
+                }
+            });
+            return cssVariables;
+        },
     },
     watch: {
         logoTheme: {

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

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { Ref } from 'vue';
+export declare const useBubbleMenu: (editor: Editor, isHyperlinkPopupOpen?: Ref<boolean>) => {
+    shouldShow: ({ editor, state }: {
+        editor: any;
+        state: any;
+    }) => any;
+    tippyOptions: {
+        duration: number;
+        placement: "bottom";
+        interactive: boolean;
+        appendTo: "parent";
+        hideOnClick: boolean;
+        arrow: boolean;
+        offset: [number, number];
+        trigger: "manual";
+        zIndex: number;
+    };
+};

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

@@ -0,0 +1,31 @@
+export const useBubbleMenu = (editor, isHyperlinkPopupOpen) => {
+    const shouldShow = ({ editor, state }) => {
+        if (!editor || !state)
+            return false;
+        // Hide preview popup if the hyperlink popup is open
+        if (isHyperlinkPopupOpen?.value)
+            return false;
+        const { selection } = state;
+        // Only show bubble menu if there's a selection and it contains a link
+        if (!selection.empty) {
+            const linkAttrs = editor.getAttributes('link');
+            return linkAttrs.href && linkAttrs.href.trim() !== '';
+        }
+        return false;
+    };
+    const tippyOptions = {
+        duration: 100,
+        placement: 'bottom',
+        interactive: true,
+        appendTo: 'parent',
+        hideOnClick: false,
+        arrow: false,
+        offset: [0, 10],
+        trigger: 'manual',
+        zIndex: 10,
+    };
+    return {
+        shouldShow,
+        tippyOptions,
+    };
+};

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

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const AutoLink: Extension<any, any>;

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

@@ -0,0 +1,161 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+const LINK_COLOR = '#0097d7';
+const isLinkMark = (mark) => mark.type.name === 'link';
+const isUnderlineMark = (mark) => mark.type.name === 'underline';
+const isTextStyleMark = (mark) => mark.type.name === 'textStyle';
+const isBlueColorMark = (mark) => isTextStyleMark(mark) && mark.attrs.color === LINK_COLOR;
+const hasLinkMark = (marks) => marks.some(isLinkMark);
+const hasUnderlineMark = (marks) => marks.some(isUnderlineMark);
+const createStylesWithoutColor = (schema, textStyleMark) => {
+    const { color: _color, ...otherAttrs } = textStyleMark.attrs;
+    return Object.keys(otherAttrs).length > 0
+        ? schema.marks.textStyle?.create(otherAttrs)
+        : null;
+};
+const applyDefaultLinkStyling = (tr, schema, node, pos) => {
+    const range = { from: pos, to: pos + node.nodeSize };
+    let modified = false;
+    const textStyleMark = node.marks.find(isTextStyleMark);
+    // Always apply blue color to newly created links, regardless of existing colors
+    const attrs = { ...textStyleMark?.attrs, color: LINK_COLOR };
+    const colorMark = schema.marks.textStyle?.create(attrs);
+    if (colorMark) {
+        if (textStyleMark) {
+            tr.removeMark(range.from, range.to, textStyleMark);
+        }
+        tr.addMark(range.from, range.to, colorMark);
+        modified = true;
+    }
+    // Add underline to newly detected URLs (auto-links)
+    // This ensures typed URLs get the same styling as manually created links
+    if (!hasUnderlineMark(node.marks)) {
+        const underlineMark = schema.marks.underline?.create();
+        if (underlineMark) {
+            tr.addMark(range.from, range.to, underlineMark);
+            modified = true;
+        }
+    }
+    return modified;
+};
+const removeHyperlinkStyles = (tr, schema, node, pos) => {
+    const range = { from: pos, to: pos + node.nodeSize };
+    let modified = false;
+    // Only remove blue color that was added for link styling
+    const textStyleMark = node.marks.find(isBlueColorMark);
+    if (textStyleMark) {
+        tr.removeMark(range.from, range.to, textStyleMark);
+        const newTextStyleMark = createStylesWithoutColor(schema, textStyleMark);
+        if (newTextStyleMark) {
+            tr.addMark(range.from, range.to, newTextStyleMark);
+        }
+        modified = true;
+    }
+    // Don't automatically remove underlines from non-link text
+    // Users should be able to have underlined text that's not a link
+    return modified;
+};
+export const AutoLink = Extension.create({
+    name: 'autoLink',
+    addKeyboardShortcuts() {
+        return {
+            // Handle any character input at the end of links
+            Backspace: () => false, // Let default behavior handle backspace
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('autoLinkStyling'),
+                props: {
+                    handleTextInput(view, from, to, text) {
+                        const { state } = view;
+                        const { selection } = state;
+                        const { $anchor } = selection;
+                        // Only handle when typing at a cursor position (from === to)
+                        if (from !== to) {
+                            return false;
+                        }
+                        // Check if we have link marks at cursor position
+                        const currentMarks = $anchor.marks();
+                        const linkMark = currentMarks.find(isLinkMark);
+                        if (linkMark) {
+                            // Check if we're at the end of the link
+                            const currentPos = $anchor.pos;
+                            const nextPos = currentPos + 1;
+                            const hasLinkAfter = nextPos <= state.doc.content.size &&
+                                state.doc
+                                    .resolve(Math.min(nextPos, state.doc.content.size))
+                                    .marks()
+                                    .some((mark) => isLinkMark(mark) && mark.eq(linkMark));
+                            if (!hasLinkAfter) {
+                                // detach the link after the attached link mark
+                                const preservedMarks = currentMarks
+                                    .filter((mark) => {
+                                    if (isLinkMark(mark))
+                                        return false;
+                                    // Only preserve underlines if there's no blue color (manually added underlines)
+                                    // Remove underlines that were part of link styling (with blue color)
+                                    if (isUnderlineMark(mark)) {
+                                        const hasBlueColor = currentMarks.some(isBlueColorMark);
+                                        return !hasBlueColor; // Keep underline only if no blue color
+                                    }
+                                    // Remove blue color styling but preserve other text styles
+                                    if (isBlueColorMark(mark)) {
+                                        return createStylesWithoutColor(state.schema, mark);
+                                    }
+                                    return true;
+                                })
+                                    .filter(Boolean); // Insert text with only preserved marks
+                                let tr = state.tr;
+                                tr = tr.setStoredMarks(preservedMarks);
+                                tr = tr.insertText(text, from, to);
+                                tr = tr.setMeta('autoLinkDetached', true);
+                                view.dispatch(tr);
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                },
+                appendTransaction(transactions, oldState, newState) {
+                    const tr = newState.tr;
+                    let modified = false;
+                    const hasDocChanges = transactions.some((transaction) => transaction.docChanged);
+                    if (!hasDocChanges)
+                        return null;
+                    const wasDetached = transactions.some((transaction) => transaction.getMeta('autoLinkDetached'));
+                    // Apply default styling to links (unless just detached)
+                    if (!wasDetached) {
+                        newState.doc.descendants((node, pos) => {
+                            if (!node.isText || !node.text || !hasLinkMark(node.marks))
+                                return;
+                            // Check if this is a newly created link by comparing with old state
+                            const oldNode = pos < oldState.doc.nodeSize ? oldState.doc.nodeAt(pos) : null;
+                            const wasAlreadyLink = oldNode && hasLinkMark(oldNode.marks);
+                            // Only apply full styling (including underline) to newly created links
+                            if (wasAlreadyLink === false) {
+                                if (applyDefaultLinkStyling(tr, newState.schema, node, pos)) {
+                                    modified = true;
+                                }
+                            }
+                            else {
+                                // For existing links, preserve their current color and underline choices
+                                // Don't override user customizations on existing links
+                            }
+                        });
+                    }
+                    // Clean up hyperlink styling from text without link marks
+                    newState.doc.descendants((node, pos) => {
+                        if (!node.isText || !node.text || hasLinkMark(node.marks))
+                            return;
+                        if (removeHyperlinkStyles(tr, newState.schema, node, pos)) {
+                            modified = true;
+                        }
+                    });
+                    return modified ? tr : null;
+                },
+            }),
+        ];
+    },
+});

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;
+};