@designcrowd/library.brand-page 5.10.20 → 5.10.31

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -872,10 +872,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     isRenderedInStorybook(): boolean;
     isWidthToggled(): boolean;
     brandName(): "Design.com" | "BrandCrowd";
-    hideText(): string;
+    hideText(): any;
 }, {
     onColorPickerSelected(value: boolean): void;
-    getButtonStyleConfigOptionTitle(option: ButtonStyleConfigOption): string;
+    getButtonStyleConfigOptionTitle(option: ButtonStyleConfigOption): any;
     getButtonStylesForUi(buttonStyles: BrandPageCssStyle): BrandPageCssStyle;
     onColorMatchToggled(option: ButtonStyleConfigOption | OtherStyleConfigOption, value: boolean): void;
     onColorPickerInput(option: ButtonStyleConfigOption, payload: UpdateItemValuePayload<string | Event | undefined>): void;

package/lib/src/shared/template-settings/models.d.ts

@@ -13,9 +13,9 @@ export declare const TEMPLATE_TABS: {
 };
 export type TemplateTab = keyof typeof TEMPLATE_TABS;
 export declare const TEMPLATE_TAB_DISPLAY_NAMES: () => {
-    all: string;
-    categories: string;
-    AI: string;
+    all: any;
+    categories: any;
+    AI: any;
 };
 export interface OnTemplateSelectedPayload {
     templateId: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.10.20",
+  "version": "5.10.31",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,9 +55,10 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.2.7",
+    "@designcrowd/fe-shared-lib": "1.2.11",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
+    "@tiptap/extension-bubble-menu": "^2.14.0",
     "@tiptap/extension-character-count": "2.11.7",
     "@tiptap/extension-color": "2.11.5",
     "@tiptap/extension-font-family": "2.11.5",
@@ -79,6 +80,7 @@
     "css-color-names": "1.0.1",
     "date-utils": "1.2.21",
     "deepmerge": "4.3.1",
+    "dompurify": "3.2.6",
     "dropzone-vue3": "1.0.2",
     "express": "4.18.2",
     "fs-extra": "11.2.0",
@@ -102,11 +104,11 @@
     "validator": "13.11.0",
     "vue": "3.5.15",
     "vue-cropperjs": "5.0.0",
-    "vuedraggable": "4.1.0",
     "vue-router": "4.5.0",
     "vue-select": "4.0.0-beta.6",
     "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
+    "vuedraggable": "4.1.0",
     "vuex": "4.1.0"
   },
   "peerDependencies": {
@@ -134,6 +136,7 @@
     "@stylistic/eslint-plugin": "1.5.4",
     "@types/axios-mock-adapter": "1.10.0",
     "@types/braces": "3.0.4",
+    "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
     "@types/google.maps": "3.55.1",

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -81,12 +81,14 @@
             v-if="viewModel.title"
             :text-style="viewModel.titleStyle"
             :text="viewModel.title"
+            :slug="context.brandPageSlug"
             element="h1"
           />
           <TextWrapper
             v-if="hasDescriptionText"
             :text-style="viewModel.descriptionStyle"
             :text="renderText"
+            :slug="context.brandPageSlug"
             element="div"
           />
           <div class="tw-w-full tw-flex" :class="displayButtonClass">
@@ -120,12 +122,14 @@
                 v-if="viewModel.title"
                 :text-style="viewModel.titleStyle"
                 :text="viewModel.title"
+                :slug="context.brandPageSlug"
                 element="h1"
               />
               <TextWrapper
                 v-if="hasDescriptionText"
                 :text-style="viewModel.descriptionStyle"
                 :text="renderText"
+                :slug="context.brandPageSlug"
                 element="div"
               />
               <div class="tw-w-full tw-flex" :class="displayButtonClass">
@@ -201,12 +205,14 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
+              :slug="context.brandPageSlug"
               element="h1"
             />
             <TextWrapper
               v-if="hasDescriptionText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
+              :slug="context.brandPageSlug"
               element="div"
             />
             <div class="tw-w-full tw-flex" :class="displayButtonClass">

package/src/brand-page/components/sensitive-content/SensitiveContentModal.vue

@@ -13,6 +13,7 @@
     <template #default>
       <div class="modal-content-container">
         <div
+          v-if="modalConfig.title"
           class="tw-flex tw-flex-col tw-items-center tw-py-2 tw-px-4 tw-text-white tw-bg-black"
         >
           <Icon name="eye-crossed" size="md" />
@@ -22,16 +23,16 @@
           </p>
           <div v-if="type === 'age'" class="button-container">
             <button class="primary-button" @click="onConfirmClicked">
-              I'm over {{ ageRequirement }}
+              {{ imOver }}
             </button>
             <button class="secondary-button" @click="rejectAge">
-              I'm under {{ ageRequirement }}
+              {{ imUnder }}
             </button>
           </div>
 
           <div v-if="type === 'sensitive'" class="button-container">
             <button class="primary-button" @click="onConfirmClicked">
-              I Confirm
+              {{ iConfirm }}
             </button>
           </div>
         </div>
@@ -41,9 +42,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { Modal, Icon } from '@designcrowd/fe-shared-lib';
 import { SENSITIVE_CONTENT_TYPES } from '../../';
+import { sensitiveContentModalTr } from '../../../../src/composables/useTranslate';
 
 const props = defineProps({
   sensitiveContentState: {
@@ -75,20 +77,35 @@ const ageRequirement = computed(() => {
 
 const type = ref(verificationType.value);
 
+const imOver = computed(() =>
+  sensitiveContentModalTr('iAcceptAgeButtonLabel', {
+    REQUIRED_MINIMUM_AGE: ageRequirement.value,
+  }),
+);
+
+const imUnder = computed(() =>
+  sensitiveContentModalTr('iDenyAgeButtonLabel', {
+    REQUIRED_MINIMUM_AGE: ageRequirement.value,
+  }),
+);
+
+const iConfirm = computed(() => sensitiveContentModalTr('iConfirmButtonLabel'));
+
 const modalConfig = computed(() => {
   const configs = {
     age: {
-      title: 'Sensitive Content',
-      message: `Confirm that you are of legal age to view this content`,
+      title: sensitiveContentModalTr('ageRestrictionDisplayTitle'),
+      message: sensitiveContentModalTr('ageRestrictionMessage'),
     },
     sensitive: {
-      title: 'Sensitive Content',
-      message:
-        'Confirm that you are willing to see potentially sensitive content',
+      title: sensitiveContentModalTr('sensitiveContentDisplayTitle'),
+      message: sensitiveContentModalTr('sensitiveContentmessage'),
     },
     rejected: {
-      title: 'You cannot visit this site',
-      message: `Access is restricted to users ${ageRequirement.value} and older`,
+      title: sensitiveContentModalTr('rejectedDisplayTitle'),
+      message: sensitiveContentModalTr('rejectedDisplayTMessage', {
+        REQUIRED_MINIMUM_AGE: ageRequirement.value,
+      }),
     },
   };
   return configs[type.value] || configs.sensitive;

package/src/brand-page/components/sensitive-content/i18n/sensitive-content-modal.de-DE.json

@@ -0,0 +1,13 @@
+{
+  "sensitiveContentModal" : {
+    "sensitiveContentDisplayTitle" : "Sensible Inhalte",
+    "sensitiveContentmessage" : "Bestätigen Sie, dass Sie bereit sind, potenziell sensible Inhalte zu sehen",
+    "ageRestrictionDisplayTitle" : "Sensible Inhalte",
+    "ageRestrictionMessage" : "Bestätigen Sie, dass Sie volljährig sind, um diesen Inhalt anzusehen",
+    "rejectedDisplayTitle" : "Sie können diese Seite nicht besuchen",
+    "rejectedDisplayTMessage" : "Der Zugang ist auf Benutzer ab {{REQUIRED_MINIMUM_AGE}} Jahren beschränkt.",
+    "iAcceptAgeButtonLabel" : "Ich bin älter als {{REQUIRED_MINIMUM_AGE}}.",
+    "iDenyAgeButtonLabel" : "Ich bin jünger als {{REQUIRED_MINIMUM_AGE}}.",
+    "iConfirmButtonLabel" : "Ich bestätige"
+  }
+}

package/src/brand-page/components/sensitive-content/i18n/sensitive-content-modal.es-ES.json

@@ -0,0 +1,13 @@
+{
+  "sensitiveContentModal" : {
+    "sensitiveContentDisplayTitle" : "Contenido sensible",
+    "sensitiveContentmessage" : "Confirma que estás dispuesto a ver contenido potencialmente sensible",
+    "ageRestrictionDisplayTitle" : "Contenido sensible",
+    "ageRestrictionMessage" : "Confirma que tienes la edad legal para ver este contenido",
+    "rejectedDisplayTitle" : "No puedes visitar este sitio",
+    "rejectedDisplayTMessage" : "El acceso está restringido a usuarios de {{REQUIRED_MINIMUM_AGE}} años o más",
+    "iAcceptAgeButtonLabel" : "Estoy harto de {{REQUIRED_MINIMUM_AGE}}",
+    "iDenyAgeButtonLabel" : "Tengo menos de {{REQUIRED_MINIMUM_AGE}} años",
+    "iConfirmButtonLabel" : "Confirmo"
+  }
+}

package/src/brand-page/components/sensitive-content/i18n/sensitive-content-modal.fr-FR.json

@@ -0,0 +1,13 @@
+{
+  "sensitiveContentModal" : {
+    "sensitiveContentDisplayTitle" : "Contenu sensible",
+    "sensitiveContentmessage" : "Confirmez que vous êtes prêt à voir du contenu potentiellement sensible",
+    "ageRestrictionDisplayTitle" : "Contenu sensible",
+    "ageRestrictionMessage" : "Confirmez que vous avez l'âge légal pour voir ce contenu",
+    "rejectedDisplayTitle" : "Vous ne pouvez pas visiter ce site",
+    "rejectedDisplayTMessage" : "L'accès est restreint aux utilisateurs de {{REQUIRED_MINIMUM_AGE}} ans et plus",
+    "iAcceptAgeButtonLabel" : "J'ai plus de {{REQUIRED_MINIMUM_AGE}} ans",
+    "iDenyAgeButtonLabel" : "J'ai moins de {{REQUIRED_MINIMUM_AGE}} ans",
+    "iConfirmButtonLabel" : "Je confirme"
+  }
+}

package/src/brand-page/components/sensitive-content/i18n/sensitive-content-modal.json

@@ -0,0 +1,13 @@
+{
+    "sensitiveContentModal": {
+        "sensitiveContentDisplayTitle": "Sensitive Content",
+        "sensitiveContentmessage": "Confirm that you are willing to see potentially sensitive content",
+        "ageRestrictionDisplayTitle": "Sensitive Content",
+        "ageRestrictionMessage": "Confirm that you are of legal age to view this content",
+        "rejectedDisplayTitle": "You cannot visit this site",
+        "rejectedDisplayTMessage": "Access is restricted to users {{REQUIRED_MINIMUM_AGE}} and older",
+        "iAcceptAgeButtonLabel": "I'm over {{REQUIRED_MINIMUM_AGE}}",
+        "iDenyAgeButtonLabel": "I'm under {{REQUIRED_MINIMUM_AGE}}",
+        "iConfirmButtonLabel": "I Confirm"
+    }
+}

package/src/brand-page/components/sensitive-content/i18n/sensitive-content-modal.pt-PT.json

@@ -0,0 +1,13 @@
+{
+  "sensitiveContentModal" : {
+    "sensitiveContentDisplayTitle" : "Conteúdo sensível",
+    "sensitiveContentmessage" : "Confirme que está disposto a ver conteúdo potencialmente sensível",
+    "ageRestrictionDisplayTitle" : "Conteúdo sensível",
+    "ageRestrictionMessage" : "Confirme que tem idade legal para visualizar este conteúdo",
+    "rejectedDisplayTitle" : "Não pode visitar este site",
+    "rejectedDisplayTMessage" : "O acesso é restrito a utilizadores com {{REQUIRED_MINIMUM_AGE}} anos ou mais",
+    "iAcceptAgeButtonLabel" : "Estou farto de {{REQUIRED_MINIMUM_AGE}}",
+    "iDenyAgeButtonLabel" : "Tenho menos de {{REQUIRED_MINIMUM_AGE}}",
+    "iConfirmButtonLabel" : "Confirmo"
+  }
+}

package/src/brand-page/components/text/Text.vue

@@ -10,6 +10,7 @@
       <TextWrapper
         :text-style="viewModel.textStyle"
         :text="renderText"
+        :slug="context.brandPageSlug"
         element="div"
         data-test-tag="text-content-text"
       />
@@ -27,6 +28,7 @@
           :key="index"
           :text-style="item.textStyle"
           :text="renderTextItem(item.text)"
+          :slug="context.brandPageSlug"
           element="div"
           class="tw-overflow-hidden"
           data-test-tag="text-content-text-item"

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="text" class="tw-w-full" :style="data.wrapperStyle">
+  <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
       class="tw-w-full empty-para"
       :style="isRTEContent ? textStyleRTE : style"
     >
       <component
         :is="element"
-        :class="padding"
-        class="tw-box-decoration-clone tw-inline"
+        :class="[padding, { 'tw-inline': !isRTEContent }]"
+        class="tw-box-decoration-clone"
         :style="isRTEContent ? {} : textStyles"
-        v-html="text"
+        v-html="sanitizeText"
       />
     </div>
   </div>
@@ -30,6 +30,7 @@ interface Props {
   textStyle: TextStyleDeclaration | undefined;
   text: string;
   element?: string;
+  slug?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -72,23 +73,42 @@ const isRTEContent = computed(() => {
   return hasRTEContent(props.text);
 });
 
+const sanitizeText = computed(() => {
+  const brandPageSlug = props.slug;
+
+  if (!brandPageSlug || !props.text.includes('<a ')) {
+    return props.text;
+  }
+
+  // Transform internal page links by adding brandPageSlug
+  return props.text.replace(
+    /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
+    (match, existingAttrsStart, href, existingAttrsEnd) => {
+      // Only process internal links (no protocol, doesn't start with /)
+      if (href && !href.match(/^(https?:\/\/|\/)/)) {
+        return `<a ${existingAttrsStart}href="/${brandPageSlug}/${href}"${existingAttrsEnd}>`;
+      }
+      return match;
+    },
+  );
+});
+
 const fontSize = computed<any>(() => props.textStyle.fontSize);
 
 watch(fontSize, () => {
   applyScale();
 });
 
-watch(
-  () => props.text,
-  () => {
-    applyScale();
-  },
-);
+watch(sanitizeText, () => {
+  applyScale();
+});
 
 const currentInstance = getCurrentInstance();
 
 const padding = computed(() =>
-  props.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '',
+  props.textStyle.backgroundColor && !isRTEContent.value
+    ? 'tw-py-2 tw-px-4'
+    : '',
 );
 
 onMounted(() => {

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

@@ -344,6 +344,12 @@ export const BUTTON_LINK_TYPE = {
 } as const;
 export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
 
+export const HYPERLINK_TYPE = {
+  url: 'url',
+  page: 'page',
+} as const;
+export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
+
 export const URL_TYPE = {
   url: 'url',
   email: 'email',

package/src/brand-page/utils/style.util.ts

@@ -27,6 +27,7 @@ import {
   getNewColorBasedOnTargetColorTheme,
 } from './color.util';
 import chroma from 'chroma-js';
+import { hasRTEContent } from '../../brand-page-maker/utils';
 
 const MIN_LUM_RATIO = 0.3;
 
@@ -56,7 +57,7 @@ const parseFabricColorToCssStyle = (fabricColor: any): ThemeColor => {
  * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
  * @returns string - rgb() or linear-gradient()
  */
-const getColorValueForCorrectCssProperty = (
+export const getColorValueForCorrectCssProperty = (
   k: string,
   colorData: ThemeColor,
 ): string => {
@@ -100,8 +101,9 @@ export const colorMatchCssKeyValue = (
   }
 
   if (
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))
+    (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
+      cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) &&
+    !hasRTEContent(cssValue)
   ) {
     cssValue = getColorValueForCorrectCssProperty(
       cssKey,
@@ -110,8 +112,11 @@ export const colorMatchCssKeyValue = (
 
     return { cssValue, isModified: true };
   } else if (
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
-    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))
+    (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
+      cssValue.match(
+        new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'),
+      )) &&
+    !hasRTEContent(cssValue)
   ) {
     cssValue = getColorValueForCorrectCssProperty(
       cssKey,
@@ -367,6 +372,9 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   'Replacements',
 ];
 
+const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
+const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
+
 export const applyLogoThemeToContents = (
   logoTheme: LogoTheme,
   pages: PageModel[],
@@ -397,6 +405,22 @@ export const applyLogoThemeToContents = (
         isModified = isModified || isApplied;
       }
 
+      const rteContentKeys = RTE_ALLOWED_SECTION_TYPES.includes(content.type)
+        ? Object.keys(content).filter((k) => RTE_ALLOWED_FIELDS.includes(k))
+        : [];
+
+      for (const key of rteContentKeys) {
+        const { newRTEContent, isApplied } =
+          applyLogoThemeToBrandPageRTEContentColorsRecursive(
+            newContent[key],
+            logoTheme,
+            isModified,
+          );
+
+        newContent[key] = newRTEContent;
+        isModified = isModified || isApplied;
+      }
+
       return newContent;
     });
 
@@ -406,6 +430,82 @@ export const applyLogoThemeToContents = (
   return { pages: newPages, isModified };
 };
 
+type RteContent = Record<string, string | any>;
+
+const applyLogoThemeToBrandPageRTEContentColorsRecursive = (
+  content: string | RteContent | RteContent[],
+  logoTheme: LogoTheme,
+  isModified: boolean,
+): {
+  isApplied: boolean;
+  newRTEContent: RteContent | RteContent[] | string;
+} => {
+  let isApplied = false;
+  let newRTEContent: RteContent | RteContent[] | string = {};
+
+  if (typeof content === 'string' && hasRTEContent(content)) {
+    newRTEContent = replaceRTEContentColors(content, logoTheme);
+    isApplied = true;
+  } else if (Array.isArray(content)) {
+    newRTEContent = content.map((item) => {
+      const { newRTEContent: recursiveContent, isApplied: recursiveIsApplied } =
+        applyLogoThemeToBrandPageRTEContentColorsRecursive(
+          item,
+          logoTheme,
+          isModified,
+        );
+
+      isApplied = recursiveIsApplied;
+
+      return recursiveContent;
+    });
+  } else if (typeof content === 'object') {
+    for (const [key, value] of Object.entries(content)) {
+      if (
+        RTE_ALLOWED_FIELDS.includes(key) &&
+        typeof value === 'string' &&
+        hasRTEContent(value)
+      ) {
+        newRTEContent[key] = replaceRTEContentColors(value, logoTheme);
+        isApplied = true;
+      } else {
+        newRTEContent[key] = value;
+      }
+    }
+  } else {
+    newRTEContent = content;
+    isApplied = false;
+  }
+
+  return { isApplied, newRTEContent };
+};
+
+const replaceRTEContentColors = (
+  content: string,
+  logoTheme: LogoTheme,
+): string => {
+  return content
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextColor}\\)`, 'g'),
+      logoTheme.logoTextColor.rgb,
+    )
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundColor}\\)`, 'g'),
+      logoTheme.logoBackgroundColor.rgb,
+    )
+    .replace(
+      new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextMultiColor}\\)`, 'g'),
+      logoTheme.logoTextColor.rgb,
+    )
+    .replace(
+      new RegExp(
+        `var\\(--${STYLE_THEME_KEYS.LogoBackgroundMultiColor}\\)`,
+        'g',
+      ),
+      logoTheme.logoBackgroundColor.rgb,
+    );
+};
+
 export const applyLogoThemeToBrandPageStyles = (
   logoTheme: LogoTheme,
   pageStyles: PageStyles,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -291,7 +291,7 @@ export const Sample = (args, { globals }): any => {
   InitialiseMakerStores({});
 
   watchEffect(async () => {
-    await setLocaleAsync(globals.locale || 'en-US');
+    await setLocaleAsync(globals.locale);
     renderKeyForForcedRerender.value++;
   });
 
@@ -324,7 +324,7 @@ export const Sample = (args, { globals }): any => {
     `,
     pinia: setupStoryPinia(),
     async beforeMount() {
-      await setLocaleAsync(globals.locale || 'en-US');
+      await setLocaleAsync(globals.locale);
       this.show = true;
     },
   };

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

@@ -210,7 +210,7 @@ export const BRAND_SITE: BrandPageData = {
             color: 'logo-text-color',
             fontSize: '1.5rem',
             textAlign: 'center',
-            fontFamily: 'Nunito',
+            fontFamily: 'Exo 2',
             lineHeight: '2rem',
           },
           colorReplacements: [

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

@@ -64,6 +64,7 @@ export const textContent: TextContent = {
   textSize: {},
   textStyle: {
     textAlign: DEFAULT_TEXT_ALIGN,
+    fontSize: '2em',
   },
   textAlignment: {},
   textColor: {},

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.ts

@@ -13,11 +13,13 @@ import {
   pinterestLink,
   twitchLink,
   tiktokLink,
+  textContent,
 } from './content-settings-items.fixture';
 
 export const brandPageContentsSampleData = [
   logoContent,
   profileContent,
+  textContent,
   generalLink,
   websiteLink,
   emailLink,

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

@@ -32,6 +32,7 @@ import type { DebounceHandle } from 'lodash.debounce';
 import { transformToRTE } from '../../../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 
 export default defineComponent({
   mixins: [PageMixin],
@@ -70,6 +71,7 @@ export default defineComponent({
         () => brandPageMakerUserStore.features.canUseRichTextEditor,
       ),
       isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
+      logoTheme: computed(() => uiStore.logoTheme),
       contentSettingsStore,
       brandPageMakerStore,
       brandPageContainerStore,
@@ -141,6 +143,35 @@ export default defineComponent({
         return this.isContentSelected ? item.id === this.selectedItemId : false;
       };
     },
+    styleHtml(): string {
+      if (!this.logoTheme) {
+        return '';
+      }
+
+      // Generate CSS variables for logo theme colors
+      const cssVariables = Object.entries(STYLE_THEME_KEYS)
+        .map(([key, value]) => {
+          const themeColor = key.includes('Background')
+            ? this.logoTheme.logoBackgroundColor
+            : this.logoTheme.logoTextColor;
+
+          if (themeColor?.rgb) {
+            return `--${value}: ${themeColor.rgb};`;
+          }
+
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n    ');
+
+      return cssVariables
+        ? `<style>
+  :root {
+    ${cssVariables}
+  }
+</style>`
+        : '';
+    },
   },
   mounted() {
     this.dispatchViewPortChangeEvent();
@@ -255,11 +286,23 @@ export default defineComponent({
         (item.type === 'banner-section' || item.type === 'text') &&
         this.canUseRichTextEditor
       ) {
+        let selectedItem = item;
+
+        if (this.isAdmin) {
+          const currentItem = this.items.find(
+            (i: { id: string }) => i.id === item.id,
+          );
+
+          if (currentItem) {
+            selectedItem = currentItem.settings.content;
+          }
+        }
+
         transformToRTE(
           this.pageSettingsStore,
           this.externalEditor,
           this.styleSettingsStore,
-          item as Content,
+          selectedItem as Content,
         );
       }