@designcrowd/library.brand-page 5.10.11-sanitise-hyperlink-14 → 5.10.11

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

@@ -207,11 +207,6 @@ 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,10 +136,6 @@ 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,13 +1,6 @@
-import type { BrandPageModel, LogoTheme, ThemeColor, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
+import type { BrandPageModel, LogoTheme, 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,7 +4,6 @@ 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') {
@@ -26,7 +25,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()
  */
-export const getColorValueForCorrectCssProperty = (k, colorData) => {
+const getColorValueForCorrectCssProperty = (k, colorData) => {
     const gradientSupportedCssProperties = ['background', 'backgroundImage'];
     return colorData.gradient && gradientSupportedCssProperties.indexOf(k) > -1
         ? colorData.gradient
@@ -50,15 +49,13 @@ 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'))) &&
-        !hasRTEContent(cssValue)) {
+    if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) {
         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'))) &&
-        !hasRTEContent(cssValue)) {
+    else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) {
         cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
         return { cssValue, isModified: true };
     }
@@ -199,8 +196,6 @@ 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) => {
@@ -216,60 +211,12 @@ 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

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     currentNotificationMessage: import("vue").ComputedRef<false | {
-        type: "success" | "warning" | "error";
+        type: "error" | "success" | "warning";
         label: string;
         description: string | false;
     }>;
@@ -444,7 +444,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -493,7 +493,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -542,7 +542,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -591,7 +591,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -640,7 +640,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -689,7 +689,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -719,7 +719,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setItemSettingsFieldErrorState(payload: import("../../../shared/content-settings/models").SetItemSettingsFieldErrorMessagePayload): void;
         _setSelectedItemId({ id, eventSource, }: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: "contentSettings" | "pageSettings" | "preview" | null;
         }): void;
         _setSelectedItemFieldName({ name: name }: {
             name: string | null;
@@ -794,13 +794,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         updateIsDefaultTextColorRequired(): void;
         setSelectedItemId(payload: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings";
+            eventSource: "contentSettings" | "pageSettings" | "preview";
         }): void;
         setSelectedItemAndFieldName(payload: {
             id: string | null;
             name: string | null;
             index: number | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: "contentSettings" | "pageSettings" | "preview" | null;
         }): void;
         setSelectedItemValue(payload: {
             value: string | null;
@@ -906,7 +906,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "navigation" | "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../brand-page").LinksItem[] | Partial<import("../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

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

@@ -130,12 +130,15 @@ export const BRAND_SITE = {
             title: 'Home',
             slug: 'home',
             contents: [
+                ...Object.values(CONTENT_SETTINGS_CONFIGS())
+                    .filter((x) => x.brandPageType === BRAND_PAGE_TYPES.brandSite)
+                    .map((x) => x.createInitialContent()),
                 {
                     id: '837a501d-a6b7-4803-9859-d264a6d3b82css',
                     url: '',
                     size: '100%',
                     type: 'banner-section',
-                    title: 'Good Spot for Camping',
+                    title: 'not RTE content',
                     imageUrl: '',
                     pageSlug: '',
                     cardStyle: {
@@ -144,16 +147,15 @@ export const BRAND_SITE = {
                     mediaType: 'image',
                     buttonText: 'Explore Portfolio',
                     titleStyle: {
-                        color: 'logo-background-color',
-                        backgroundColor: 'logo-text-color',
+                        color: 'logo-text-color',
                         fontSize: '4.375rem',
                         textAlign: 'center',
                         fontFamily: 'Oswald',
                         fontWeight: 'bold',
-                        lineHeight: '8.5625rem',
+                        lineHeight: '6.5625rem',
                         textDecoration: '',
                     },
-                    description: 'rte content sdsa',
+                    description: 'rte content <br> <br> sdsa <br><br><br>',
                     displayStyle: 'centered',
                     buttonLinkType: 'page',
                     backgroundStyle: {
@@ -166,12 +168,11 @@ export const BRAND_SITE = {
                         lineHeight: '1.875rem',
                     },
                     descriptionStyle: {
-                        color: 'logo-background-color',
-                        backgroundColor: 'logo-text-color',
+                        color: 'logo-text-color',
                         fontSize: '1.5rem',
                         textAlign: 'center',
-                        fontFamily: 'Exo 2',
-                        lineHeight: '2.5em',
+                        fontFamily: 'Nunito',
+                        lineHeight: '2rem',
                     },
                     colorReplacements: [
                         {

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

@@ -43,7 +43,6 @@ 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").TextContent | import("../../../../brand-page").LogoContent)[];
+export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | 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,8 +1,7 @@
-import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, textContent, } from './content-settings-items.fixture';
+import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } 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

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         };
     }[]>;
     selectedItemId: import("vue").ComputedRef<string | null>;
-    selectedItemEventSource: import("vue").ComputedRef<"preview" | "contentSettings" | "pageSettings" | null>;
+    selectedItemEventSource: import("vue").ComputedRef<"contentSettings" | "pageSettings" | "preview" | null>;
     viewport: import("vue").ComputedRef<import("../../../brand-page").ViewportsType>;
     isMobileDevice: import("vue").ComputedRef<boolean>;
     brandPageToken: import("vue").ComputedRef<string | undefined>;
@@ -37,38 +37,6 @@ 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: {
@@ -114,7 +82,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -163,7 +131,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -212,7 +180,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -261,7 +229,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -310,7 +278,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -359,7 +327,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: "contentSettings" | "pageSettings" | "preview" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
@@ -389,7 +357,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setItemSettingsFieldErrorState(payload: import("../../../shared/content-settings/models").SetItemSettingsFieldErrorMessagePayload): void;
         _setSelectedItemId({ id, eventSource, }: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: "contentSettings" | "pageSettings" | "preview" | null;
         }): void;
         _setSelectedItemFieldName({ name: name }: {
             name: string | null;
@@ -464,13 +432,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateIsDefaultTextColorRequired(): void;
         setSelectedItemId(payload: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings";
+            eventSource: "contentSettings" | "pageSettings" | "preview";
         }): void;
         setSelectedItemAndFieldName(payload: {
             id: string | null;
             name: string | null;
             index: number | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: "contentSettings" | "pageSettings" | "preview" | null;
         }): void;
         setSelectedItemValue(payload: {
             value: string | null;
@@ -922,7 +890,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "navigation" | "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../brand-page").LinksItem[] | Partial<import("../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;
@@ -995,7 +963,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         defaultTextColor(): string | undefined;
         logoBackgroundColor(): string | undefined;
         selectedButtonStyleConfig(): import("../../models").ButtonStyleConfig | undefined;
-        selectedTextFontFamily(): "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
+        selectedTextFontFamily(): "cookie" | "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
         doesLogoHaveBackground(): boolean;
         activeLogoStyles(): import("../../../brand-page").LogoStyles;
     }, {
@@ -1019,7 +987,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             id: string;
         }): void;
         _setTextFontFamily(payload: {
-            fontFamily: "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
+            fontFamily: "cookie" | "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
         }): void;
         _setTextStyles(payload: Partial<import("../../../brand-page").TextStyles>): void;
         setAdminStyleOptionDefaultValues(): void;
@@ -1045,7 +1013,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             id: string;
         }): void;
         setTextFontFamily(payload: {
-            fontFamily: "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
+            fontFamily: "cookie" | "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
         }): Promise<void>;
         toggleLogoBackground(): Promise<any>;
     }>;
@@ -1062,7 +1030,6 @@ 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,7 +14,6 @@ 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() {
@@ -41,7 +40,6 @@ export default defineComponent({
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
             canUseRichTextEditor: computed(() => brandPageMakerUserStore.features.canUseRichTextEditor),
             isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
-            logoTheme: computed(() => uiStore.logoTheme),
             contentSettingsStore,
             brandPageMakerStore,
             brandPageContainerStore,
@@ -99,31 +97,6 @@ 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();
@@ -207,14 +180,7 @@ export default defineComponent({
             this.isContentSelected = true;
             if ((item.type === 'banner-section' || item.type === 'text') &&
                 this.canUseRichTextEditor) {
-                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);
+                transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, item);
             }
             if (this.selectEventDebounceHandler) {
                 this.selectEventDebounceHandler();

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

@@ -185,7 +185,6 @@ 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,7 +1,6 @@
 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';
@@ -129,22 +128,6 @@ 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: {