@designcrowd/library.brand-page 5.17.22 → 5.17.23-ast-bugs

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

@@ -3,14 +3,57 @@ import { ESCAPED_NEWLINE_CHARACTER } from '@src/constants/ui';
 import { getRenderText } from '@brand-page/utils';
 import createDomPurify, {} from 'dompurify';
 import { isHrefPageId } from '../composables/rich-text-editor/hyperlink';
+const RTE_SECTION_FIELD_PAIRS = {
+    'banner-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'booking-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'images-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'shapes-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'mailing-list': [{ textField: 'title', styleField: 'titleStyle' }],
+    profile: [
+        { textField: 'name', styleField: 'nameStyle' },
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'contact-form': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+        { textField: 'successMessage', styleField: 'successMessageStyle' },
+    ],
+    'about-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'paragraph', styleField: 'paragraphStyle' },
+    ],
+    'testimonial-section': [{ textField: 'title', styleField: 'titleStyle' }],
+    'social-links': [{ textField: 'title', styleField: 'titleStyle' }],
+    'request-payment': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'support-me': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+    'shop-section': [
+        { textField: 'title', styleField: 'titleStyle' },
+        { textField: 'description', styleField: 'descriptionStyle' },
+    ],
+};
+// 'text' has special textItems handling, so it's not in the map but is RTE-enabled
 export const RTE_ALLOWED_SECTION_TYPES = [
-    'banner-section',
+    ...Object.keys(RTE_SECTION_FIELD_PAIRS),
     'text',
-    'booking-section',
-    'images-section',
-    'shapes-section',
-    'mailing-list',
-    'profile',
 ];
 // Only allow tags used by the enabled Tiptap extensions
 const allowedTags = [
@@ -256,229 +299,110 @@ export const replaceTextInRTE = (existingHtml, newText) => {
     blockElement.appendChild(newSpan);
     return tempDiv.innerHTML;
 };
+const transformRTEField = (content, pair, externalEditor, uiStyleSettingsStore, newContent, type, newStyle) => {
+    const fields = content;
+    const style = fields[pair.styleField];
+    const textStyleType = style?.textStyleType;
+    if (textStyleType && (textStyleType === type || uiStyleSettingsStore)) {
+        let globalContentStyle = uiStyleSettingsStore
+            ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
+            : newStyle ?? {};
+        globalContentStyle = {
+            ...globalContentStyle,
+            textAlign: style?.textAlign,
+        };
+        fields[pair.textField] = getUpdatedHTMLFromEditor(externalEditor, fields[pair.textField], globalContentStyle);
+    }
+    else if (!textStyleType &&
+        newContent &&
+        newContent.id === content.id &&
+        !hasRTEContent(fields[pair.textField])) {
+        const newContentFields = newContent;
+        const newContentStyle = newContentFields[pair.styleField] ||
+            style;
+        if (newContentStyle) {
+            fields[pair.textField] = getUpdatedHTMLFromEditor(externalEditor, fields[pair.textField], newContentStyle);
+        }
+    }
+};
+const switchRTEField = (content, pair, externalEditor, uiStyleSettingsStore) => {
+    const fields = content;
+    const style = fields[pair.styleField];
+    const textStyleType = style?.textStyleType;
+    if (textStyleType && uiStyleSettingsStore) {
+        let globalContentStyle = uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style;
+        globalContentStyle = {
+            ...globalContentStyle,
+            textAlign: style?.textAlign,
+        };
+        if (!hasRTEContent(fields[pair.textField]))
+            fields[pair.textField] = getUpdatedHTMLFromEditor(externalEditor, fields[pair.textField], globalContentStyle);
+    }
+    else if (!textStyleType &&
+        style &&
+        !hasRTEContent(fields[pair.textField])) {
+        fields[pair.textField] = getUpdatedHTMLFromEditor(externalEditor, fields[pair.textField], style);
+    }
+};
 export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettingsStore, newContent, type, newStyle) => {
     for (const page of uiPageSettingStore.pages) {
         for (const contentItem of page.contents) {
-            switch (contentItem.type) {
-                case 'banner-section':
-                case 'booking-section':
-                    const sectionContent = contentItem.settings.content;
-                    const titleTextStyleType = sectionContent.titleStyle.textStyleType;
-                    const descriptionTextStyleType = sectionContent.descriptionStyle.textStyleType;
-                    if (titleTextStyleType &&
-                        (titleTextStyleType === type || uiStyleSettingsStore)) {
-                        let globalContentStyle = uiStyleSettingsStore
-                            ? uiStyleSettingsStore.textStyles.textStyleOptions[titleTextStyleType].style
-                            : newStyle ?? {};
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: sectionContent.titleStyle.textAlign,
-                        };
-                        sectionContent.title = getUpdatedHTMLFromEditor(externalEditor, sectionContent.title, globalContentStyle);
-                    }
-                    else if (!titleTextStyleType &&
-                        newContent &&
-                        newContent.id === sectionContent.id &&
-                        !hasRTEContent(sectionContent.title)) {
-                        const newContentStyle = newContent.titleStyle;
-                        sectionContent.title = getUpdatedHTMLFromEditor(externalEditor, sectionContent.title, newContentStyle);
-                    }
-                    if (descriptionTextStyleType &&
-                        (descriptionTextStyleType === type || uiStyleSettingsStore)) {
-                        let globalContentStyle = uiStyleSettingsStore
-                            ? uiStyleSettingsStore.textStyles.textStyleOptions[descriptionTextStyleType].style
-                            : newStyle ?? {};
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: sectionContent.descriptionStyle.textAlign,
-                        };
-                        sectionContent.description = getUpdatedHTMLFromEditor(externalEditor, sectionContent.description, globalContentStyle);
-                    }
-                    else if (!descriptionTextStyleType &&
-                        newContent &&
-                        newContent.id === sectionContent.id &&
-                        !hasRTEContent(sectionContent.description)) {
-                        const newContentStyle = newContent.descriptionStyle;
-                        sectionContent.description = getUpdatedHTMLFromEditor(externalEditor, sectionContent.description, newContentStyle);
-                    }
-                    break;
-                case 'images-section':
-                case 'shapes-section':
-                    const mediaSectionContent = contentItem.settings.content;
-                    const mediaTitleTextStyleType = mediaSectionContent.titleStyle.textStyleType;
-                    const mediaDescriptionTextStyleType = mediaSectionContent.descriptionStyle.textStyleType;
-                    if (mediaTitleTextStyleType &&
-                        (mediaTitleTextStyleType === type || uiStyleSettingsStore)) {
-                        let globalContentStyle = uiStyleSettingsStore
-                            ? uiStyleSettingsStore.textStyles.textStyleOptions[mediaTitleTextStyleType].style
-                            : newStyle ?? {};
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: mediaSectionContent.titleStyle.textAlign,
-                        };
-                        mediaSectionContent.title = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.title, globalContentStyle);
-                    }
-                    else if (!mediaTitleTextStyleType &&
-                        newContent &&
-                        newContent.id === mediaSectionContent.id &&
-                        !hasRTEContent(mediaSectionContent.title)) {
-                        const newContentStyle = newContent.titleStyle;
-                        mediaSectionContent.title = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.title, newContentStyle);
-                    }
-                    if (mediaDescriptionTextStyleType &&
-                        (mediaDescriptionTextStyleType === type || uiStyleSettingsStore)) {
-                        let globalContentStyle = uiStyleSettingsStore
-                            ? uiStyleSettingsStore.textStyles.textStyleOptions[mediaDescriptionTextStyleType].style
-                            : newStyle ?? {};
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: mediaSectionContent.descriptionStyle.textAlign,
-                        };
-                        mediaSectionContent.description = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.description, globalContentStyle);
-                    }
-                    else if (!mediaDescriptionTextStyleType &&
-                        newContent &&
-                        newContent.id === mediaSectionContent.id &&
-                        !hasRTEContent(mediaSectionContent.description)) {
-                        const newContentStyle = newContent.descriptionStyle;
-                        mediaSectionContent.description = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.description, newContentStyle);
-                    }
-                    break;
-                case 'text':
-                    const textContent = contentItem.settings.content;
-                    if (textContent.textItems && textContent.textItems.length > 0) {
-                        for (const [itemIndex, textItemContent,] of textContent.textItems.entries()) {
-                            const textItemStyleType = textItemContent.textStyle.textStyleType;
-                            if (textItemStyleType &&
-                                (textItemStyleType === type || uiStyleSettingsStore)) {
-                                let globalContentStyle = uiStyleSettingsStore
-                                    ? uiStyleSettingsStore.textStyles.textStyleOptions[textItemStyleType].style
-                                    : newStyle ?? {};
-                                globalContentStyle = {
-                                    ...globalContentStyle,
-                                    textAlign: textItemContent.textStyle.textAlign,
-                                };
-                                textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, globalContentStyle);
-                            }
-                            else if (!textItemStyleType &&
-                                newContent &&
-                                newContent.id === textContent.id &&
-                                !hasRTEContent(textItemContent.text)) {
-                                const newContentStyle = newContent?.textItems?.[itemIndex]
-                                    ?.textStyle ?? newContent.textStyle;
-                                textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, newContentStyle);
-                            }
-                        }
-                    }
-                    if ((!textContent.textItems || textContent.textItems.length === 0) &&
-                        textContent.textStyle) {
-                        const textStyleType = textContent.textStyle.textStyleType;
-                        if (textStyleType &&
-                            (textStyleType === type || uiStyleSettingsStore)) {
+            const fieldPairs = RTE_SECTION_FIELD_PAIRS[contentItem.type];
+            if (fieldPairs) {
+                const content = contentItem.settings.content;
+                for (const pair of fieldPairs) {
+                    transformRTEField(content, pair, externalEditor, uiStyleSettingsStore, newContent, type, newStyle);
+                }
+            }
+            if (contentItem.type === 'text') {
+                const textContent = contentItem.settings.content;
+                if (textContent.textItems && textContent.textItems.length > 0) {
+                    for (const [itemIndex, textItemContent,] of textContent.textItems.entries()) {
+                        const textItemStyleType = textItemContent.textStyle.textStyleType;
+                        if (textItemStyleType &&
+                            (textItemStyleType === type || uiStyleSettingsStore)) {
                             let globalContentStyle = uiStyleSettingsStore
-                                ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
+                                ? uiStyleSettingsStore.textStyles.textStyleOptions[textItemStyleType].style
                                 : newStyle ?? {};
                             globalContentStyle = {
                                 ...globalContentStyle,
-                                textAlign: textContent.textStyle.textAlign,
+                                textAlign: textItemContent.textStyle.textAlign,
                             };
-                            textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, globalContentStyle);
+                            textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, globalContentStyle);
                         }
-                        else if (!textStyleType &&
+                        else if (!textItemStyleType &&
                             newContent &&
                             newContent.id === textContent.id &&
-                            !hasRTEContent(textContent.text)) {
-                            const newContentStyle = newContent.textStyle;
-                            textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, newContentStyle);
+                            !hasRTEContent(textItemContent.text)) {
+                            const newContentStyle = newContent?.textItems?.[itemIndex]
+                                ?.textStyle ?? newContent.textStyle;
+                            textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, newContentStyle);
                         }
                     }
-                    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)) {
+                }
+                if ((!textContent.textItems || textContent.textItems.length === 0) &&
+                    textContent.textStyle) {
+                    const textStyleType = textContent.textStyle.textStyleType;
+                    if (textStyleType &&
+                        (textStyleType === type || uiStyleSettingsStore)) {
                         let globalContentStyle = uiStyleSettingsStore
-                            ? uiStyleSettingsStore.textStyles.textStyleOptions[nameStyleType]
+                            ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType]
                                 .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,
+                            textAlign: textContent.textStyle.textAlign,
                         };
-                        profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, globalContentStyle);
+                        textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, globalContentStyle);
                     }
-                    else if (!profileDescriptionTextStyleType &&
+                    else if (!textStyleType &&
                         newContent &&
-                        newContent.id === profileContent.id &&
-                        !hasRTEContent(profileContent.description)) {
-                        const newContentStyle = newContent
-                            .descriptionStyle;
-                        profileContent.description = getUpdatedHTMLFromEditor(externalEditor, profileContent.description, newContentStyle);
+                        newContent.id === textContent.id &&
+                        !hasRTEContent(textContent.text)) {
+                        const newContentStyle = newContent.textStyle;
+                        textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, 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;
+                }
             }
         }
     }
@@ -486,204 +410,62 @@ export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettin
 export const switchAllContentToRTE = (uiPageSettingStore, externalEditor, uiStyleSettingsStore) => {
     for (const page of uiPageSettingStore.pages) {
         for (const contentItem of page.contents) {
-            switch (contentItem.type) {
-                case 'banner-section':
-                case 'booking-section':
-                    const sectionContent = contentItem.settings.content;
-                    const titleTextStyleType = sectionContent.titleStyle.textStyleType;
-                    const descriptionTextStyleType = sectionContent.descriptionStyle.textStyleType;
-                    if (titleTextStyleType && uiStyleSettingsStore) {
-                        let globalContentStyle = uiStyleSettingsStore.textStyles
-                            .textStyleOptions[titleTextStyleType]
-                            .style;
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: sectionContent.titleStyle.textAlign,
-                        };
-                        if (!hasRTEContent(sectionContent.title))
-                            sectionContent.title = getUpdatedHTMLFromEditor(externalEditor, sectionContent.title, globalContentStyle);
-                    }
-                    else if (!titleTextStyleType &&
-                        !hasRTEContent(sectionContent.title)) {
-                        const newContentStyle = sectionContent.titleStyle;
-                        sectionContent.title = getUpdatedHTMLFromEditor(externalEditor, sectionContent.title, newContentStyle);
-                    }
-                    if (descriptionTextStyleType && uiStyleSettingsStore) {
-                        let globalContentStyle = uiStyleSettingsStore.textStyles
-                            .textStyleOptions[descriptionTextStyleType]
-                            .style;
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: sectionContent.descriptionStyle.textAlign,
-                        };
-                        if (!hasRTEContent(sectionContent.description))
-                            sectionContent.description = getUpdatedHTMLFromEditor(externalEditor, sectionContent.description, globalContentStyle);
-                    }
-                    else if (!descriptionTextStyleType &&
-                        !hasRTEContent(sectionContent.description)) {
-                        const newContentStyle = sectionContent.descriptionStyle;
-                        sectionContent.description = getUpdatedHTMLFromEditor(externalEditor, sectionContent.description, newContentStyle);
-                    }
-                    break;
-                case 'images-section':
-                case 'shapes-section':
-                    const mediaSectionContent = contentItem.settings.content;
-                    const mediaTitleTextStyleType = mediaSectionContent.titleStyle.textStyleType;
-                    const mediaDescriptionTextStyleType = mediaSectionContent.descriptionStyle.textStyleType;
-                    if (mediaTitleTextStyleType && uiStyleSettingsStore) {
-                        let globalContentStyle = uiStyleSettingsStore.textStyles
-                            .textStyleOptions[mediaTitleTextStyleType]
-                            .style;
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: mediaSectionContent.titleStyle.textAlign,
-                        };
-                        if (!hasRTEContent(mediaSectionContent.title))
-                            mediaSectionContent.title = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.title, globalContentStyle);
-                    }
-                    else if (!mediaTitleTextStyleType &&
-                        !hasRTEContent(mediaSectionContent.title)) {
-                        const newContentStyle = mediaSectionContent.titleStyle;
-                        mediaSectionContent.title = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.title, newContentStyle);
-                    }
-                    if (mediaDescriptionTextStyleType && uiStyleSettingsStore) {
-                        let globalContentStyle = uiStyleSettingsStore.textStyles
-                            .textStyleOptions[mediaDescriptionTextStyleType]
-                            .style;
-                        globalContentStyle = {
-                            ...globalContentStyle,
-                            textAlign: mediaSectionContent.descriptionStyle.textAlign,
-                        };
-                        if (!hasRTEContent(mediaSectionContent.description))
-                            mediaSectionContent.description = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.description, globalContentStyle);
-                    }
-                    else if (!mediaDescriptionTextStyleType &&
-                        !hasRTEContent(mediaSectionContent.description)) {
-                        const newContentStyle = mediaSectionContent.descriptionStyle;
-                        mediaSectionContent.description = getUpdatedHTMLFromEditor(externalEditor, mediaSectionContent.description, newContentStyle);
-                    }
-                    break;
-                case 'text':
-                    const textContent = contentItem.settings.content;
-                    if (textContent.textItems && textContent.textItems.length > 0) {
-                        for (const [itemIndex, textItemContent,] of textContent.textItems.entries()) {
-                            const textItemStyleType = textItemContent.textStyle.textStyleType;
-                            if (textItemStyleType && uiStyleSettingsStore) {
-                                let globalContentStyle = uiStyleSettingsStore.textStyles
-                                    .textStyleOptions[textItemStyleType]
-                                    .style;
-                                globalContentStyle = {
-                                    ...globalContentStyle,
-                                    textAlign: textItemContent.textStyle.textAlign,
-                                };
-                                if (!hasRTEContent(textItemContent.text))
-                                    textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, globalContentStyle);
-                            }
-                            else if (!textItemStyleType &&
-                                !hasRTEContent(textItemContent.text)) {
-                                const newContentStyle = textItemContent.textStyle;
-                                textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, newContentStyle);
-                            }
-                        }
-                    }
-                    if ((!textContent.textItems || textContent.textItems.length === 0) &&
-                        textContent.textStyle) {
-                        const textStyleType = textContent.textStyle.textStyleType;
-                        if (textStyleType && uiStyleSettingsStore) {
+            const fieldPairs = RTE_SECTION_FIELD_PAIRS[contentItem.type];
+            if (fieldPairs) {
+                const content = contentItem.settings.content;
+                for (const pair of fieldPairs) {
+                    switchRTEField(content, pair, externalEditor, uiStyleSettingsStore);
+                }
+            }
+            if (contentItem.type === 'text') {
+                const textContent = contentItem.settings.content;
+                if (textContent.textItems && textContent.textItems.length > 0) {
+                    for (const [itemIndex, textItemContent,] of textContent.textItems.entries()) {
+                        const textItemStyleType = textItemContent.textStyle.textStyleType;
+                        if (textItemStyleType && uiStyleSettingsStore) {
                             let globalContentStyle = uiStyleSettingsStore.textStyles
-                                .textStyleOptions[textStyleType].style;
+                                .textStyleOptions[textItemStyleType]
+                                .style;
                             globalContentStyle = {
                                 ...globalContentStyle,
-                                textAlign: textContent.textStyle.textAlign,
+                                textAlign: textItemContent.textStyle.textAlign,
                             };
-                            if (!hasRTEContent(textContent.text))
-                                textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, globalContentStyle);
+                            if (!hasRTEContent(textItemContent.text))
+                                textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, globalContentStyle);
                         }
-                        else if (!textStyleType && !hasRTEContent(textContent.text)) {
-                            const newContentStyle = textContent.textStyle;
-                            textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, newContentStyle);
+                        else if (!textItemStyleType &&
+                            !hasRTEContent(textItemContent.text)) {
+                            const newContentStyle = textItemContent.textStyle;
+                            textItemContent.text = getUpdatedHTMLFromEditor(externalEditor, textItemContent.text, newContentStyle);
                         }
                     }
-                    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) {
+                }
+                if ((!textContent.textItems || textContent.textItems.length === 0) &&
+                    textContent.textStyle) {
+                    const textStyleType = textContent.textStyle.textStyleType;
+                    if (textStyleType && uiStyleSettingsStore) {
                         let globalContentStyle = uiStyleSettingsStore.textStyles
-                            .textStyleOptions[titleStyleStyleType]
-                            .style;
+                            .textStyleOptions[textStyleType].style;
                         globalContentStyle = {
                             ...globalContentStyle,
-                            textAlign: mailingListContent.titleStyle.textAlign,
+                            textAlign: textContent.textStyle.textAlign,
                         };
-                        if (!hasRTEContent(mailingListContent.title))
-                            mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, globalContentStyle);
+                        if (!hasRTEContent(textContent.text))
+                            textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, globalContentStyle);
                     }
-                    else if (!titleStyleStyleType &&
-                        !hasRTEContent(mailingListContent.title)) {
-                        const newContentStyle = mailingListContent.titleStyle;
-                        mailingListContent.title = getUpdatedHTMLFromEditor(externalEditor, mailingListContent.title, newContentStyle);
+                    else if (!textStyleType && !hasRTEContent(textContent.text)) {
+                        const newContentStyle = textContent.textStyle;
+                        textContent.text = getUpdatedHTMLFromEditor(externalEditor, textContent.text, newContentStyle);
                     }
-                    break;
+                }
             }
         }
     }
 };
 export const getUpdatedHTMLFromEditor = (externalEditor, contentText, newContentStyle) => {
+    if (!contentText) {
+        return contentText;
+    }
     const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
         ? getRenderText(contentText)
         : contentText;
@@ -755,7 +537,7 @@ export const buildInitialMarks = (state, style) => {
         }));
     }
     // Bold and italic
-    if (fontWeight) {
+    if (fontWeight === 'bold') {
         marks.push(state.schema.marks.bold.create());
     }
     if (fontStyle) {