@designcrowd/library.brand-page 5.10.6-ml-3 → 5.10.6-sanitise-hyperlink-2

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -2,8 +2,9 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { isURL } from '../../../utils/validator.util';
 import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../../constants';
-import { getRenderText, escapeContentText } from '../../utils';
+import { getRenderText } from '../../utils';
 import { hasRTEContent } from '../../../brand-page-maker/utils';
+import { escapeContentText } from '../../../shared/content-settings/utils';
 export default defineComponent({
     mixins: [ComponentCommonMixin],
     props: {

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/personalisation.util.js

@@ -1,4 +1,4 @@
-import { escapeContentText } from '../../brand-page/utils';
+import { escapeContentText } from '../../shared/content-settings/utils';
 import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import { getColorReplacementsFromSvgString, getColorReplacementsFromSvgStringServer, } from './svg-color.util';

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

@@ -1,3 +1 @@
 export declare const getRenderText: (text: string) => string;
-export declare const escapeContentText: (text: string | undefined) => string | undefined;
-export declare const unescapeContentText: (text: string) => string;

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

@@ -2,14 +2,3 @@ import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 export const getRenderText = (text) => {
     return text.replace(new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g'), '<br/>');
 };
-export const escapeContentText = (text) => {
-    if (!text) {
-        return text;
-    }
-    return text
-        .replace(/(<([^>]+)>)/gi, '')
-        .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
-};
-export const unescapeContentText = (text) => {
-    return text.replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n');
-};

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/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>;
@@ -82,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;
@@ -131,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;
@@ -180,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;
@@ -229,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;
@@ -278,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;
@@ -327,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;
@@ -357,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;
@@ -432,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;
@@ -890,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;
@@ -963,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;
     }, {
@@ -987,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;
@@ -1013,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>;
     }>;

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

@@ -0,0 +1,18 @@
+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";
+    };
+};

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

@@ -0,0 +1,30 @@
+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',
+    };
+    return {
+        shouldShow,
+        tippyOptions,
+    };
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+import { ref, computed } from 'vue';
+export const useHyperlink = (editor) => {
+    const hyperlinkUrl = ref('');
+    const setHyperlinkUrl = (url) => {
+        const safeUrl = typeof url === 'string' ? url : '';
+        hyperlinkUrl.value = safeUrl;
+        editor
+            .chain()
+            .focus()
+            .setLink({ href: safeUrl })
+            .setUnderline()
+            .setColor('#0097d7')
+            .run();
+    };
+    const setHyperlinkUrlValue = (url) => {
+        const href = typeof url === 'string' ? url : '';
+        hyperlinkUrl.value = href;
+    };
+    const hyperlinkValue = computed({
+        get: () => ({
+            id: 'id',
+            name: 'url',
+            value: hyperlinkUrl.value,
+        }),
+        set: (v) => {
+            setHyperlinkUrl(v?.value || '');
+        },
+    });
+    const applyHyperlinkToEditor = (url, text, selection) => {
+        const selectedText = editor.chain().focus();
+        // If text is provided, replace the content
+        if (text && text.trim()) {
+            selectedText.deleteSelection().insertContent(text);
+            const currentPos = selection?.from || editor.state.selection.from;
+            selectedText.setTextSelection({
+                from: currentPos,
+                to: currentPos + text.length,
+            });
+        }
+        selectedText
+            .setLink({ href: url })
+            .setUnderline()
+            .setColor('#0097d7')
+            .run();
+    };
+    const removeHyperlink = (clearUrlValue = false) => {
+        editor.chain().focus().unsetLink().unsetUnderline().unsetColor().run();
+        // Clear the hyperlink URL value if requested
+        if (clearUrlValue) {
+            setHyperlinkUrlValue('');
+        }
+    };
+    return {
+        hyperlinkValue,
+        setHyperlinkUrl,
+        setHyperlinkUrlValue,
+        removeHyperlink,
+        applyHyperlinkToEditor,
+    };
+};

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

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

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

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

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

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

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

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

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

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