@designcrowd/library.brand-page 5.10.20-kp-1 → 5.10.30

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/BrandPageMaker.mixin.d.ts

@@ -248,7 +248,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -309,7 +308,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;
@@ -998,9 +996,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         selectInitialTemplateCategory(payload: {
             selectedCategory: string;
         }): void;
-        setInitialSearchTerm(payload: {
-            initialSearchTerm: string;
-        }): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("../../../shared/template-settings/models").TemplateSettingsTemplate | undefined;
     }>;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -176,7 +176,6 @@ const InitialiseMakerStores = (options) => {
         triggerSaveSuccessMessage: false,
         triggerSaveEventApiOnPublishModalClose: false,
         abTests: {},
-        logoBrandIndustry: 'Fashion',
     });
     userStore.setIsAdmin({ isAdmin: options.isAdmin || false });
     userStore.setHasBrandPagePremiumSubscription(false);

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: {
@@ -655,7 +687,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -716,7 +747,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;
@@ -1032,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/quick-link-bar/QuickLinkBar.mixin.d.ts

@@ -70,7 +70,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -131,7 +130,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -86,7 +86,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -147,7 +146,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -88,7 +88,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -149,7 +148,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;

package/lib/src/brand-page-maker/components/seo-settings/UseExistingDomainModal.mixin.d.ts

@@ -67,7 +67,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -128,7 +127,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;

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/components/upgrade-to-premium-button/UpgradeToPremiumButton.mixin.d.ts

@@ -67,7 +67,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -128,7 +127,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             eventButtonLocation?: string | undefined;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
-            logoBrandIndustry: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;

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