@designcrowd/library.brand-page 5.16.16 → 5.16.17-pre-temp-2

package/lib/src/{CreatedOnBrandCrowd-de-de-9qd7Ywtz.js → CreatedOnBrandCrowd-de-de-CFZJ9B0_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-DdyGV-qI.js → CreatedOnBrandCrowd-en-us-Co2tanrg.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-CUHwMcca.js → CreatedOnBrandCrowd-es-es-DWcr6V-z.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C8QyqKxX.js → CreatedOnBrandCrowd-fr-ca-De72i4oQ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C8QyqKxX.js → CreatedOnBrandCrowd-fr-fr-De72i4oQ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-nlLHZ08I.js → CreatedOnBrandCrowd-pt-br-CcznKAcC.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-nlLHZ08I.js → CreatedOnBrandCrowd-pt-pt-CcznKAcC.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-F2oLNzFB.js";
+import { _ as t } from "./lib-DTMYf8OY.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-DUJu6NBT.js → CreatedOnDcom-de-de-xh1FG9UT.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-F2oLNzFB.js";
+import { _ as e } from "./lib-DTMYf8OY.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-L_qTlE9o.js → CreatedOnDcom-en-us-DwRJ-NGl.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-F2oLNzFB.js";
+import { _ as e } from "./lib-DTMYf8OY.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DZmpnYln.js → CreatedOnDcom-es-es-qa4GXYmC.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-F2oLNzFB.js";
+import { _ as e } from "./lib-DTMYf8OY.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-RVccl2_y.js → CreatedOnDcom-fr-ca-Ck443ItA.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-F2oLNzFB.js";
+import { _ as e } from "./lib-DTMYf8OY.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DyQaxN0C.js → CreatedOnDcom-fr-fr-DysZVU4Z.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-F2oLNzFB.js";
+import { _ as e } from "./lib-DTMYf8OY.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-6yVtu8gd.js → CreatedOnDcom-pt-br-6zBZ72NO.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-F2oLNzFB.js";
+import { _ as M } from "./lib-DTMYf8OY.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-ZmDkC8e2.js → CreatedOnDcom-pt-pt-Dtvbafy6.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-F2oLNzFB.js";
+import { _ as M } from "./lib-DTMYf8OY.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/__fixtures__/brand-page-sample-data.d.ts

@@ -252,10 +252,9 @@ export declare const brandsiteMigrationBrandPageData: {
             id: string;
             type: string;
             buttonText: string;
-            promptText: string;
+            title: string;
             acceptedFields: string;
             links?: undefined;
-            title?: undefined;
             titleStyle?: undefined;
             iconFillStyles?: undefined;
             backgroundStyles?: undefined;
@@ -282,7 +281,6 @@ export declare const brandsiteMigrationBrandPageData: {
             iconDisplayStyle: string;
             iconBackgroundStyles: {};
             buttonText?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         })[];
     })[];

package/lib/src/brand-page/__fixtures__/brand-page-sample-data.js

@@ -395,7 +395,7 @@ export const brandsiteMigrationBrandPageData = {
                     id: '43406faf-f4f9-4071-a39d-b3e42e719b7d',
                     type: 'mailing-list',
                     buttonText: 'Send',
-                    promptText: 'Contact Us',
+                    title: 'Contact Us',
                     acceptedFields: 'nameAndEmail',
                 },
                 {

package/lib/src/brand-page/components/mailing-list/MailingList.stories.js

@@ -12,7 +12,7 @@ const bpData = {
     id: faker.datatype.uuid(),
     type: 'mailing-list',
     acceptedFields: undefined,
-    promptText: 'You want some mails?',
+    title: 'You want some mails?',
     buttonText: 'Subscribe',
     titleStyle: {
         textAlign: DEFAULT_TEXT_ALIGN,

package/lib/src/brand-page/components/profile/Profile.mixin.d.ts

@@ -17,7 +17,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {}, {
     containerStyle(): BrandPageCssStyle;
-    renderDescriptionText(): string | undefined;
+    renderDescriptionText(): string;
+    hasDescriptionText(): boolean;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     viewModel: {
         type: PropType<ProfileViewModel>;

package/lib/src/brand-page/components/profile/Profile.mixin.js

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
-import { getRenderText } from '../../utils';
+import { getRenderText, escapeContentText } from '../../utils';
+import { hasRTEContent } from '../../../brand-page-maker/utils/rich-text-editor.util';
 export default defineComponent({
     props: {
         viewModel: {
@@ -21,10 +22,23 @@ export default defineComponent({
             return this.viewModel.containerStyle || {};
         },
         renderDescriptionText() {
-            if (!this.viewModel?.description) {
-                return undefined;
+            if (!this.viewModel.description) {
+                return '';
+            }
+            if (hasRTEContent(this.viewModel.description)) {
+                return this.viewModel.description;
+            }
+            else {
+                return getRenderText(this.viewModel.description);
+            }
+        },
+        hasDescriptionText() {
+            if (hasRTEContent(this.viewModel.description)) {
+                return escapeContentText(this.viewModel.description) !== '';
+            }
+            else {
+                return this.viewModel?.description?.length > 0;
             }
-            return getRenderText(this.viewModel.description);
         },
     },
 });

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

@@ -182,7 +182,7 @@ export interface MapContent extends Content {
 }
 export interface MailingListContent extends Content {
     acceptedFields?: 'emailOnly' | 'nameAndEmail';
-    promptText: string;
+    title: string;
     buttonText: string;
     titleStyle: TextStyleDeclaration;
     buttonTextStyle: TextStyleDeclaration;

package/lib/src/brand-page/utils/migration/migration-10.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration10: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-10.js

@@ -0,0 +1,16 @@
+import { isMailingListContent } from '../model.util';
+export const migration10 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (isMailingListContent(content)) {
+                const mailingList = content;
+                if (mailingList.promptText && !mailingList.title) {
+                    mailingList.title = mailingList.promptText;
+                    delete mailingList.promptText;
+                }
+            }
+        });
+    });
+    return migrationResult;
+};

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

@@ -12,6 +12,7 @@ import { migration05_2 } from './migration/migration-05_2';
 import { migration07 } from './migration/migration-07';
 import { migration08 } from './migration/migration-08';
 import { migration09 } from './migration/migration-09';
+import { migration10 } from './migration/migration-10';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -74,6 +75,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration09,
         description: 'Migrating contact form with additional 3 custom fields',
     },
+    {
+        version: 10,
+        migrateFn: migration10,
+        description: 'Migrating promptText to title for mailing list content',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -5,7 +5,7 @@ import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RG
 import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
 import { isRgbColor } from '../../utils/helpers';
 import chroma from 'chroma-js';
-import { hasRTEContent } from '../../brand-page-maker/utils';
+import { hasRTEContent, RTE_ALLOWED_SECTION_TYPES, } from '../../brand-page-maker/utils';
 /**
  * Simple utility to convert any color format to hex for consistent comparison
  */
@@ -225,13 +225,6 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
-const RTE_ALLOWED_SECTION_TYPES = [
-    'text',
-    'banner-section',
-    'booking-section',
-    'images-section',
-    'shapes-section',
-];
 const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;

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

@@ -85,7 +85,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -124,7 +123,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -229,7 +227,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -268,7 +265,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -361,7 +357,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -464,7 +459,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -567,7 +561,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -606,7 +599,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             backgroundStyles?: undefined;
             iconDisplayStyle?: undefined;
             iconBackgroundStyles?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
@@ -665,13 +657,12 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
             headingStyle?: undefined;
             paragraphStyle?: undefined;
             areImagesFullWidth?: undefined;
-            promptText?: undefined;
             acceptedFields?: undefined;
         } | {
             id: string;
             type: string;
             buttonText: string;
-            promptText: string;
+            title: string;
             titleStyle: {
                 textAlign: string;
                 fontFamily: string;
@@ -699,7 +690,6 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
                 textDecoration?: undefined;
             };
             url?: undefined;
-            title?: undefined;
             imageUrl?: undefined;
             pageSlug?: undefined;
             cardStyle?: undefined;

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

@@ -1363,7 +1363,7 @@ export const BRAND_SITE_SAMPLE_WITH_LOGO = {
                     id: 'fcf96448-a88c-4923-894a-762ab21a4a24',
                     type: 'mailing-list',
                     buttonText: 'Demander',
-                    promptText: '',
+                    title: '',
                     titleStyle: {
                         textAlign: 'center',
                         fontFamily: 'Lato',

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

@@ -11,7 +11,7 @@ import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
 import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
 import { EVENTS, SELECT_LOCATIONS, useEventTracker, } from '../../../brand-page-maker/composables/useEventTracker';
 import debounce from 'lodash.debounce';
-import { transformToRTE } from '../../../brand-page-maker/utils';
+import { transformToRTE, RTE_ALLOWED_SECTION_TYPES, } 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';
@@ -205,11 +205,7 @@ export default defineComponent({
             this.isHeaderSelected = false;
             this.isFooterSelected = false;
             this.isContentSelected = true;
-            if ((item.type === 'banner-section' ||
-                item.type === 'booking-section' ||
-                item.type === 'images-section' ||
-                item.type === 'shapes-section' ||
-                item.type === 'text') &&
+            if (RTE_ALLOWED_SECTION_TYPES.includes(item.type) &&
                 this.canUseRichTextEditor) {
                 let selectedItem = item;
                 if (this.isAdmin) {

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -575,8 +575,10 @@ export const PROFILE_CONTENT_SETTINGS_CONFIG = () => ({
         },
         name: {
             type: 'text',
+            title: contentSettingsTr(`nameTitle`),
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
             placeholder: contentSettingsTr(`yourNamePlaceholder`),
+            maxLength: 200,
         },
         nameOverride: {
             type: 'personalisation-override',
@@ -586,7 +588,9 @@ export const PROFILE_CONTENT_SETTINGS_CONFIG = () => ({
         title: {
             type: 'text',
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            title: contentSettingsTr(`titleTitle`),
             placeholder: contentSettingsTr(`titlePlaceholder`),
+            maxLength: 200,
         },
         titleOverride: {
             type: 'personalisation-override',
@@ -596,8 +600,10 @@ export const PROFILE_CONTENT_SETTINGS_CONFIG = () => ({
         description: {
             type: 'textarea',
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            title: contentSettingsTr(`defaultDescription`),
             placeholder: contentSettingsTr(`textAreaDescriptionPlaceholder`),
             defaultValue: '',
+            maxLength: 2000,
         },
         descriptionOverride: {
             type: 'personalisation-override',
@@ -1405,7 +1411,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
             },
             title: contentSettingsTr(`displayStyleTitle`),
         },
-        promptText: {
+        title: {
             type: 'text',
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
             title: contentSettingsTr(`titleTitle`),

package/lib/src/brand-page-maker/models/content-settings.js

@@ -207,7 +207,7 @@ export const createInitialMailingListContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'mailing-list',
-        promptText: contentSettingsTr(`mailingListPromptText`),
+        title: contentSettingsTr(`mailingListTitle`),
         buttonText: contentSettingsTr(`subscribePlaceholder`),
         acceptedFields: 'emailOnly',
         titleStyle: {

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

@@ -5,6 +5,7 @@ import type { PageSettingsState } from '../../shared/page-settings/store';
 import type { StyleSettingsState } from '../../shared/style-settings/store';
 import type { Mark } from 'prosemirror-model';
 import { type DOMPurify } from 'dompurify';
+export declare const RTE_ALLOWED_SECTION_TYPES: string[];
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
 export declare const hasRTEContent: (content: string) => boolean;

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

@@ -2,6 +2,15 @@ import { STYLE_THEME_KEYS, } from '../../brand-page';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import { getRenderText } from '../../brand-page/utils';
 import createDomPurify, {} from 'dompurify';
+export const RTE_ALLOWED_SECTION_TYPES = [
+    'banner-section',
+    'text',
+    'booking-section',
+    'images-section',
+    'shapes-section',
+    'mailing-list',
+    'profile',
+];
 // Only allow tags used by the enabled Tiptap extensions
 const allowedTags = [
     'p',
@@ -375,6 +384,92 @@ export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettin
                         }
                     }
                     break;
+                case 'profile':
+                    const profileContent = contentItem.settings.content;
+                    const nameStyleType = profileContent.nameStyle.textStyleType;
+                    const profileTitleStyleType = profileContent.titleStyle.textStyleType;
+                    const profileDescriptionTextStyleType = profileContent.descriptionStyle.textStyleType;
+                    if (nameStyleType &&
+                        (nameStyleType === type || uiStyleSettingsStore)) {
+                        let globalContentStyle = uiStyleSettingsStore
+                            ? uiStyleSettingsStore.textStyles.textStyleOptions[nameStyleType]
+                                .style
+                            : newStyle ?? {};
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.nameStyle.textAlign,
+                        };
+                        profileContent.name = getUpdatedHTMLFromEditor(externalEditor, profileContent.name, globalContentStyle);
+                    }
+                    else if (!nameStyleType &&
+                        newContent &&
+                        newContent.id === profileContent.id &&
+                        !hasRTEContent(profileContent.name)) {
+                        const newContentStyle = newContent.nameStyle;
+                        profileContent.name = getUpdatedHTMLFromEditor(externalEditor, profileContent.name, newContentStyle);
+                    }
+                    if (profileTitleStyleType &&
+                        (profileTitleStyleType === type || uiStyleSettingsStore)) {
+                        let globalContentStyle = uiStyleSettingsStore
+                            ? uiStyleSettingsStore.textStyles.textStyleOptions[profileTitleStyleType].style
+                            : newStyle ?? {};
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.titleStyle.textAlign,
+                        };
+                        profileContent.title = getUpdatedHTMLFromEditor(externalEditor, profileContent.title, globalContentStyle);
+                    }
+                    else if (!profileTitleStyleType &&
+                        newContent &&
+                        newContent.id === profileContent.id &&
+                        !hasRTEContent(profileContent.title)) {
+                        const newContentStyle = newContent.titleStyle;
+                        profileContent.title = getUpdatedHTMLFromEditor(externalEditor, profileContent.title, newContentStyle);
+                    }
+                    if (profileDescriptionTextStyleType &&
+                        (profileDescriptionTextStyleType === type || uiStyleSettingsStore)) {
+                        let globalContentStyle = uiStyleSettingsStore
+                            ? uiStyleSettingsStore.textStyles.textStyleOptions[profileDescriptionTextStyleType].style
+                            : newStyle ?? {};
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.descriptionStyle.textAlign,
+                        };
+                        profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, globalContentStyle);
+                    }
+                    else if (!profileDescriptionTextStyleType &&
+                        newContent &&
+                        newContent.id === profileContent.id &&
+                        !hasRTEContent(profileContent.description)) {
+                        const newContentStyle = newContent
+                            .descriptionStyle;
+                        profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, newContentStyle);
+                    }
+                    break;
+                case 'mailing-list':
+                    const mailingListContent = contentItem.settings
+                        .content;
+                    const titleStyle = mailingListContent.titleStyle;
+                    const mailingTitleStyleType = titleStyle?.textStyleType;
+                    if (mailingTitleStyleType &&
+                        (mailingTitleStyleType === type || uiStyleSettingsStore)) {
+                        let globalContentStyle = uiStyleSettingsStore
+                            ? uiStyleSettingsStore.textStyles.textStyleOptions[mailingTitleStyleType].style
+                            : newStyle ?? {};
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: titleStyle.textAlign,
+                        };
+                        mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, globalContentStyle);
+                    }
+                    else if (!mailingTitleStyleType &&
+                        newContent &&
+                        newContent.id === mailingListContent.id &&
+                        !hasRTEContent(mailingListContent.title)) {
+                        const newContentStyle = newContent.titleStyle || titleStyle;
+                        mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, newContentStyle);
+                    }
+                    break;
             }
         }
     }
@@ -501,6 +596,80 @@ export const switchAllContentToRTE = (uiPageSettingStore, externalEditor, uiStyl
                         }
                     }
                     break;
+                case 'profile':
+                    const profileContent = contentItem.settings.content;
+                    const nameStyleType = profileContent.nameStyle.textStyleType;
+                    const profileTitleStyleType = profileContent.titleStyle.textStyleType;
+                    const profileDescriptionTextStyleType = profileContent.descriptionStyle.textStyleType;
+                    if (nameStyleType && uiStyleSettingsStore) {
+                        let globalContentStyle = uiStyleSettingsStore.textStyles
+                            .textStyleOptions[nameStyleType].style;
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.nameStyle.textAlign,
+                        };
+                        if (!hasRTEContent(profileContent.name))
+                            profileContent.name = getUpdatedHTMLFromEditor(externalEditor, profileContent.name, globalContentStyle);
+                    }
+                    else if (!nameStyleType && !hasRTEContent(profileContent.name)) {
+                        const newContentStyle = profileContent.nameStyle;
+                        profileContent.name = getUpdatedHTMLFromEditor(externalEditor, profileContent.name, newContentStyle);
+                    }
+                    if (profileTitleStyleType && uiStyleSettingsStore) {
+                        let globalContentStyle = uiStyleSettingsStore.textStyles
+                            .textStyleOptions[profileTitleStyleType]
+                            .style;
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.titleStyle.textAlign,
+                        };
+                        if (!hasRTEContent(profileContent.title))
+                            profileContent.title = getUpdatedHTMLFromEditor(externalEditor, profileContent.title, globalContentStyle);
+                    }
+                    else if (!profileTitleStyleType &&
+                        !hasRTEContent(profileContent.title)) {
+                        const newContentStyle = profileContent.titleStyle;
+                        profileContent.title = getUpdatedHTMLFromEditor(externalEditor, profileContent.title, newContentStyle);
+                    }
+                    if (profileDescriptionTextStyleType && uiStyleSettingsStore) {
+                        let globalContentStyle = uiStyleSettingsStore.textStyles
+                            .textStyleOptions[profileDescriptionTextStyleType]
+                            .style;
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: profileContent.descriptionStyle.textAlign,
+                        };
+                        if (!hasRTEContent(profileContent.description))
+                            profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, globalContentStyle);
+                    }
+                    else if (!profileDescriptionTextStyleType &&
+                        !hasRTEContent(profileContent.description)) {
+                        const newContentStyle = profileContent.descriptionStyle;
+                        profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, newContentStyle);
+                    }
+                    break;
+                case 'mailing-list':
+                    const mailingListContent = contentItem.settings
+                        .content;
+                    const titleStyle = mailingListContent.titleStyle;
+                    const titleStyleStyleType = titleStyle?.textStyleType;
+                    if (titleStyleStyleType && uiStyleSettingsStore) {
+                        let globalContentStyle = uiStyleSettingsStore.textStyles
+                            .textStyleOptions[titleStyleStyleType]
+                            .style;
+                        globalContentStyle = {
+                            ...globalContentStyle,
+                            textAlign: mailingListContent.titleStyle.textAlign,
+                        };
+                        if (!hasRTEContent(mailingListContent.title))
+                            mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, globalContentStyle);
+                    }
+                    else if (!titleStyleStyleType &&
+                        !hasRTEContent(mailingListContent.title)) {
+                        const newContentStyle = mailingListContent.titleStyle;
+                        mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, newContentStyle);
+                    }
+                    break;
             }
         }
     }