@designcrowd/library.brand-page 5.16.3 → 5.16.4-ast-mp

package/lib/src/{CreatedOnBrandCrowd-de-de-BVouwZJN.js → CreatedOnBrandCrowd-de-de-Cjd2U2Uw.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Dtx-1uWO.js → CreatedOnBrandCrowd-en-us-DSf7zRvI.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CmlnW8oC.js → CreatedOnBrandCrowd-es-es-tVy-tprQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C95ioWzr.js → CreatedOnBrandCrowd-fr-ca-CTMLZtq_.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C95ioWzr.js → CreatedOnBrandCrowd-fr-fr-CTMLZtq_.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-C_5SiaiE.js → CreatedOnBrandCrowd-pt-br-hEZJYcL5.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-C_5SiaiE.js → CreatedOnBrandCrowd-pt-pt-hEZJYcL5.js}

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

package/lib/src/{CreatedOnDcom-de-de-BP4saQXn.js → CreatedOnDcom-de-de-C3hEpKmL.js}

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

package/lib/src/{CreatedOnDcom-en-us-B8Taru6f.js → CreatedOnDcom-en-us-DHVV4p1R.js}

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

package/lib/src/{CreatedOnDcom-es-es-Bo3JhWwd.js → CreatedOnDcom-es-es-BRKaAPji.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CDk3ZAHU.js → CreatedOnDcom-fr-ca-CvgGaH2s.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CD04W_hw.js → CreatedOnDcom-fr-fr-Bw0zC8_o.js}

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

package/lib/src/{CreatedOnDcom-pt-br-B2DGv1qj.js → CreatedOnDcom-pt-br-BrCIqA45.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-TYqvgQ08.js → CreatedOnDcom-pt-pt-CV3hPJxr.js}

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

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -37,6 +37,7 @@ export interface AbTestResult {
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
     bp_4092_rotating_upsells_at_publish?: AbTestResult;
+    bp_4572_ai_text_generation_post_purchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -25,6 +25,7 @@ export const AB_TEST_FLAG = {
 const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
     BP_4092_ROTATING_UPSELLS_AT_PUBLISH: 'bc-bp-4092-rotating-upsells-at-website-publish',
+    BP_4572_AI_TEXT_GENERATION_POST_PURCHASE: 'bc-bp-4572-ai-text-generation-post-purchase',
 };
 export const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -46,5 +47,9 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]) {
         abTests.bp_3926_freemium_watermark = getValueType(AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK, abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]);
     }
+    // AB Test for BP-4572 - AI Text Generation Post Purchase
+    if (abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE]) {
+        abTests.bp_4572_ai_text_generation_post_purchase = getValueType(AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE]);
+    }
     return abTests;
 };

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -1146,6 +1146,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getProductModel(): import("../../../brand-page/models/shop.model").ProductModel;
     }>;
     router: import("vue-router").Router;
+    snapshotStore: import("pinia").Store<"snapshot", import("../../stores").SnapshotState, {
+        hasSnapshot: (state: {
+            snapshotBase64: string | null;
+            isCapturing: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").SnapshotState>) => boolean;
+    }, {
+        setBase64Snapshot(base64: string | null): void;
+        setIsCapturing(isCapturing: boolean): void;
+        clearSnapshot(): void;
+    }>;
+    captureSnapshot: (element: HTMLElement | null) => Promise<string | null>;
     videoStore: import("pinia").Store<"video", import("../../stores").videoStoreState, {
         getVideoUrlsForToken: (state: {
             videoUrls: {
@@ -1186,8 +1197,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showSaveSuccessMessage: boolean;
 }, {
     previewContainer(): any;
+    previewContent(): any;
 }, {
     getBrandPageFromFallback(viewModel: any): BrandPageData;
+    handleCaptureSnapshot(): Promise<void>;
     onResizeWithDebounce(): void;
     onResize(): void;
     setUiScreenSizeModeBasedOnDeviceWidth(): void;

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

@@ -10,7 +10,7 @@ import { createInitialBrandPage } from '../../models';
 import { navigateToPageBySlug } from '../../routing';
 import { useBrandPageContainerStore } from '../../stores';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '../../../shared/models';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useVideoStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '../../stores';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
@@ -21,6 +21,7 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '../../../composables/useTranslate';
+import { useSnapshot } from '../../../composables/useSnapshot';
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
 export default defineComponent({
     props: {
@@ -42,6 +43,8 @@ export default defineComponent({
         const productSettingStore = useProductConfigStore();
         const router = useRouter();
         const localisedRouteStore = useLocalisedRouteStore();
+        const snapshotStore = useSnapshotStore();
+        const { captureSnapshot } = useSnapshot();
         const videoStore = useVideoStore();
         return {
             commonTr,
@@ -84,6 +87,8 @@ export default defineComponent({
             shopSettingStore,
             productSettingStore,
             router,
+            snapshotStore,
+            captureSnapshot,
             videoStore,
         };
     },
@@ -99,6 +104,9 @@ export default defineComponent({
         previewContainer() {
             return this.$refs.previewContainer;
         },
+        previewContent() {
+            return this.$refs.previewContent;
+        },
     },
     async created() {
         if (!this.viewModel?.logoDraftDesignAttributes?.logoTheme ||
@@ -213,6 +221,27 @@ export default defineComponent({
                 return createInitialBrandPage(viewModel.brandPageType);
             }
         },
+        async handleCaptureSnapshot() {
+            if (!this.previewContent) {
+                return;
+            }
+            this.snapshotStore.setIsCapturing(true);
+            try {
+                const snapshot = await this.captureSnapshot(this.previewContent);
+                if (snapshot) {
+                    this.snapshotStore.setBase64Snapshot(snapshot);
+                }
+                else {
+                    console.warn('⚠️ Snapshot capture returned null');
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to capture snapshot:', error);
+            }
+            finally {
+                this.snapshotStore.setIsCapturing(false);
+            }
+        },
         onResizeWithDebounce() {
             if (this.debounceOnResize) {
                 this.debounceOnResize();

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

@@ -1009,6 +1009,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (continuation: string) => void;
     };
     externalEditor: import("@tiptap/vue-3").Editor;
     styleSettingsStore: import("pinia").Store<"uiStyleSettings", import("../../../shared/style-settings/store").StyleSettingsState, {

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -42,6 +42,10 @@ export declare const EVENTS: {
     WEBSITE_MAKER_UPSELL_ACTION: string;
     WEBSITE_MAKER_SWITCH_LOGO: string;
     WEBSITE_MAKER_SWITCH_LOGO_MODAL: string;
+    WEBSITE_MAKER_AI_GENERATE_TEXT: string;
+    WEBSITE_MAKER_AI_REGENERATE_TEXT: string;
+    WEBSITE_MAKER_AI_SEND_PROMPT: string;
+    WEBSITE_MAKER_AI_COPY_RESPONSE: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;
@@ -62,6 +66,14 @@ export declare const UPGRADE_CTA_LOCATIONS: {
     SLUG_CHANGE_MANAGE_PAGE: string;
     GOOGLE_ADSENSE: string;
 };
+export declare const GENERATE_AI_TEXT_CTA_LOCATIONS: {
+    BANNER_DESCRIPTION: string;
+    BANNER_TITLE: string;
+    ABOUT_TITLE: string;
+    ABOUT_PARAGRAPH: string;
+    TEXT_ITEM: string;
+    TESTIMONIAL_ITEM: string;
+};
 export declare const TRIGGER_TYPE: {
     AUTOMATIC: string;
     USER_TRIGGERED: string;
@@ -74,6 +86,10 @@ export declare const PUBLISH_MODAL_CONTINUATION_EVENTS: {
     COPY_LINK: string;
     VIEW_WEBSITE: string;
 };
+export declare const GENERATE_TEXT_CONTINUATION_EVENTS: {
+    USE_TEXT: string;
+    EXIT: string;
+};
 export declare const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS: {
     PREMIUM: string;
     EXIT: string;
@@ -104,5 +120,6 @@ declare const useEventTracker: () => {
     sendAddContentContinuationEvent: (continuation: string) => void;
     sendUpsellOfferEvent: (upsellType: string) => void;
     sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+    sendGenerateTextContinuationEvent: (continuation: string) => void;
 };
 export { useEventTracker };

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -25,6 +25,10 @@ export const EVENTS = {
     WEBSITE_MAKER_UPSELL_ACTION: 'website_maker_upsell_action',
     WEBSITE_MAKER_SWITCH_LOGO: 'website_maker_switch_logo',
     WEBSITE_MAKER_SWITCH_LOGO_MODAL: 'website_maker_switch_logo_modal',
+    WEBSITE_MAKER_AI_GENERATE_TEXT: 'website_maker_ai_generate_text',
+    WEBSITE_MAKER_AI_REGENERATE_TEXT: 'website_maker_ai_regenerate_text',
+    WEBSITE_MAKER_AI_SEND_PROMPT: 'website_maker_send_prompt',
+    WEBSITE_MAKER_AI_COPY_RESPONSE: 'website_maker_copy_response',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',
@@ -45,6 +49,14 @@ export const UPGRADE_CTA_LOCATIONS = {
     SLUG_CHANGE_MANAGE_PAGE: 'slug_change_manage_page',
     GOOGLE_ADSENSE: 'google_adsense',
 };
+export const GENERATE_AI_TEXT_CTA_LOCATIONS = {
+    BANNER_DESCRIPTION: 'banner_description',
+    BANNER_TITLE: 'banner_title',
+    ABOUT_TITLE: 'about_title',
+    ABOUT_PARAGRAPH: 'about_paragraph',
+    TEXT_ITEM: 'text_item',
+    TESTIMONIAL_ITEM: 'testimonial_item',
+};
 export const TRIGGER_TYPE = {
     AUTOMATIC: 'automatic',
     USER_TRIGGERED: 'user_triggered',
@@ -57,6 +69,10 @@ export const PUBLISH_MODAL_CONTINUATION_EVENTS = {
     COPY_LINK: 'copy_link',
     VIEW_WEBSITE: 'view_website',
 };
+export const GENERATE_TEXT_CONTINUATION_EVENTS = {
+    USE_TEXT: 'use_text',
+    EXIT: 'exit',
+};
 export const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS = {
     PREMIUM: 'premium',
     EXIT: 'exit',
@@ -212,6 +228,11 @@ const useEventTracker = () => {
                 action,
             });
         },
+        sendGenerateTextContinuationEvent: (continuation) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT, {
+                continuation,
+            });
+        },
     };
 };
 export { useEventTracker };

package/lib/src/brand-page-maker/stores/index.d.ts

@@ -7,3 +7,4 @@ export * from './event-manager';
 export * from './route';
 export * from './logo-store';
 export * from './video';
+export * from './snapshot/snapshot-store';

package/lib/src/brand-page-maker/stores/index.js

@@ -6,3 +6,4 @@ export * from './event-manager';
 export * from './route';
 export * from './logo-store';
 export * from './video';
+export * from './snapshot/snapshot-store';

package/lib/src/brand-page-maker/stores/snapshot/snapshot-store.d.ts

@@ -0,0 +1,14 @@
+export interface SnapshotState {
+    snapshotBase64: string | null;
+    isCapturing: boolean;
+}
+export declare const useSnapshotStore: import("pinia").StoreDefinition<"snapshot", SnapshotState, {
+    hasSnapshot: (state: {
+        snapshotBase64: string | null;
+        isCapturing: boolean;
+    } & import("pinia").PiniaCustomStateProperties<SnapshotState>) => boolean;
+}, {
+    setBase64Snapshot(base64: string | null): void;
+    setIsCapturing(isCapturing: boolean): void;
+    clearSnapshot(): void;
+}>;

package/lib/src/brand-page-maker/stores/snapshot/snapshot-store.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+export const useSnapshotStore = defineStore('snapshot', {
+    state: () => ({
+        snapshotBase64: null,
+        isCapturing: false,
+    }),
+    actions: {
+        setBase64Snapshot(base64) {
+            this.snapshotBase64 = base64;
+        },
+        setIsCapturing(isCapturing) {
+            this.isCapturing = isCapturing;
+        },
+        clearSnapshot() {
+            this.snapshotBase64 = null;
+        },
+    },
+    getters: {
+        hasSnapshot: (state) => !!state.snapshotBase64,
+    },
+});

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

@@ -0,0 +1 @@
+export declare const getCtaLocationFromFieldType: (fieldType: string, sectionType?: string) => string;

package/lib/src/brand-page-maker/utils/mixpanel.util.js

@@ -0,0 +1,29 @@
+import { GENERATE_AI_TEXT_CTA_LOCATIONS } from '../composables/useEventTracker';
+export const getCtaLocationFromFieldType = (fieldType, sectionType) => {
+    if (fieldType === 'text') {
+        return GENERATE_AI_TEXT_CTA_LOCATIONS.TEXT_ITEM;
+    }
+    if (fieldType === 'testimonials') {
+        return GENERATE_AI_TEXT_CTA_LOCATIONS.TESTIMONIAL_ITEM;
+    }
+    if (sectionType === 'banner-section') {
+        if (fieldType === 'description') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_DESCRIPTION;
+        }
+        if (fieldType === 'title') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_TITLE;
+        }
+    }
+    if (sectionType === 'about-section') {
+        if (fieldType === 'title') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_TITLE;
+        }
+        if (fieldType === 'paragraph') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_PARAGRAPH;
+        }
+    }
+    // Fallback: try to match directly with field type
+    // This handles cases where fieldType might already be in the correct format
+    const matchingLocation = Object.values(GENERATE_AI_TEXT_CTA_LOCATIONS).find((location) => location === fieldType);
+    return matchingLocation || fieldType;
+};

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

@@ -8,6 +8,8 @@ import { type DOMPurify } from 'dompurify';
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
 export declare const hasRTEContent: (content: string) => boolean;
+export declare const getPlainTextFromRTE: (content: string) => string;
+export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;
 export declare const transformToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState, newContent?: Content, type?: TextStyleType, newStyle?: TextStyleDeclaration) => void;
 export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;

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

@@ -121,6 +121,123 @@ export const hasRTEContent = (content) => {
     const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
     return tagWrapRegex.test(trimmed);
 };
+export const getPlainTextFromRTE = (content) => {
+    if (typeof content !== 'string') {
+        return '';
+    }
+    // Only strip HTML tags if the value contains HTML
+    if (hasRTEContent(content)) {
+        return content.replace(/<[^>]*>/g, '').trim();
+    }
+    return content.trim();
+};
+export const replaceTextInRTE = (existingHtml, newText) => {
+    if (!hasRTEContent(existingHtml)) {
+        return `<p>${newText}</p>`;
+    }
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = existingHtml;
+    const blockElement = tempDiv.querySelector('p, div, h1, h2, h3, h4, h5, h6, blockquote');
+    if (!blockElement) {
+        return `<p>${newText}</p>`;
+    }
+    // Collect all spans and their styles
+    const spans = blockElement.querySelectorAll('span');
+    const mergedStyles = {};
+    const hasFormatting = {
+        bold: false,
+        italic: false,
+        underline: false,
+        strikethrough: false,
+        mark: false,
+        markColor: '',
+        markStyle: '',
+    };
+    // Iterate through all spans to collect and merge styles
+    spans.forEach((span) => {
+        // Collect inline styles
+        if (span.style.cssText) {
+            const styleDeclarations = span.style.cssText.split(';');
+            styleDeclarations.forEach((declaration) => {
+                const [property, value] = declaration.split(':').map((s) => s.trim());
+                if (property && value) {
+                    mergedStyles[property] = value; // Latest value overwrites previous
+                }
+            });
+        }
+        // Collect data attributes (like data-color for marks)
+        if (span.hasAttribute('data-color')) {
+            mergedStyles['data-color'] = span.getAttribute('data-color') || '';
+        }
+        // Check for formatting tags within this span
+        if (span.querySelector('strong, b'))
+            hasFormatting.bold = true;
+        if (span.querySelector('em, i'))
+            hasFormatting.italic = true;
+        if (span.querySelector('u'))
+            hasFormatting.underline = true;
+        if (span.querySelector('s, strike, del'))
+            hasFormatting.strikethrough = true;
+        // Check for mark/highlight tags
+        const markElement = span.querySelector('mark');
+        if (markElement) {
+            hasFormatting.mark = true;
+            if (markElement.hasAttribute('data-color')) {
+                hasFormatting.markColor = markElement.getAttribute('data-color') || '';
+            }
+            if (markElement.style.cssText) {
+                hasFormatting.markStyle = markElement.style.cssText;
+            }
+        }
+    });
+    // Create the new span with merged styles
+    const newSpan = document.createElement('span');
+    // Apply collected inline styles
+    Object.entries(mergedStyles).forEach(([property, value]) => {
+        if (property === 'data-color') {
+            newSpan.setAttribute('data-color', value);
+        }
+        else {
+            newSpan.style.setProperty(property, value);
+        }
+    });
+    // Build the formatted text with nested tags
+    let formattedText = newText;
+    // Apply mark/highlight if present
+    if (hasFormatting.mark) {
+        const markElement = document.createElement('mark');
+        if (hasFormatting.markColor) {
+            markElement.setAttribute('data-color', hasFormatting.markColor);
+        }
+        if (hasFormatting.markStyle) {
+            markElement.style.cssText = hasFormatting.markStyle;
+        }
+        markElement.textContent = formattedText;
+        formattedText = markElement.outerHTML;
+    }
+    // Apply underline
+    if (hasFormatting.underline) {
+        formattedText = `<u>${formattedText}</u>`;
+    }
+    // Apply strikethrough
+    if (hasFormatting.strikethrough) {
+        formattedText = `<s>${formattedText}</s>`;
+    }
+    // Apply italic
+    if (hasFormatting.italic) {
+        formattedText = `<em>${formattedText}</em>`;
+    }
+    // Apply bold
+    if (hasFormatting.bold) {
+        formattedText = `<strong>${formattedText}</strong>`;
+    }
+    // Set the formatted content to the span
+    newSpan.innerHTML = formattedText;
+    // Clear the block element and add the new span
+    blockElement.innerHTML = '';
+    blockElement.appendChild(newSpan);
+    return tempDiv.innerHTML;
+};
 export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettingsStore, newContent, type, newStyle) => {
     for (const page of uiPageSettingStore.pages) {
         for (const contentItem of page.contents) {