@designcrowd/library.brand-page 5.19.1-error-html2canvas-1 → 5.19.1-error-html2canvas-3

package/src/metadata-builder/builders/footer-builder.ts

@@ -13,9 +13,19 @@ import type {
   FooterSocialLinkItem,
 } from '../parsers/ai-toolcall-parser';
 import type { Logger } from '../logger';
-import type { TextStyleOptions } from '../../brand-page/models/styles.model';
+import type {
+  TextStyleDeclaration,
+  TextStyleOptions,
+} from '../../brand-page/models/styles.model';
 import { FOOTER_CHECKS } from './section-rules/footer.rules';
-import { applyDetachedStyleOverride } from './section-field-utils';
+import {
+  applyDetachedStyleOverride,
+  normalizeStyleValue,
+} from './section-field-utils';
+
+type FooterSocialLink = NonNullable<
+  AbstractPageFooterStyles['socialLinks']
+>[number];
 
 const normaliseSocialUrl = (url: string): string => {
   for (const prefix of ['mailto:', 'tel:']) {
@@ -25,107 +35,142 @@ const normaliseSocialUrl = (url: string): string => {
   return url;
 };
 
-const applyGlobalFooterChanges = (
-  footer: AbstractPageFooterStyles,
+const makeSocialLink = (
+  icon: string | undefined,
+  url: string | undefined,
+): FooterSocialLink =>
+  ({
+    imageUrl: icon || '',
+    url: normaliseSocialUrl(url || ''),
+    imageTitle: '',
+    width: 0,
+    height: 0,
+    imageLink: '',
+  }) as FooterSocialLink;
+
+const hasSocialLinkMutation = (args: UpdateFooterArguments): boolean =>
+  args._replace_social_links === true ||
+  (args._remove_social_link_indices?.length ?? 0) > 0 ||
+  (args._reorder_social_links?.length ?? 0) > 0 ||
+  (args.social_links?.length ?? 0) > 0;
+
+/**
+ * Social links are a GLOBAL footer concern — one logical list that both
+ * viewports render identically. Derive the new list ONCE from the current one
+ * WITHOUT mutating the input, so the caller can assign an independent copy to
+ * each viewport.
+ *
+ * Why this can't mutate per-viewport in place: footers migrated from the legacy
+ * single `footerStyles` model (migration-01) share ONE `socialLinks` array
+ * reference across pageFooterDesktop and pageFooterMobile, and `cloneDeep`
+ * preserves that shared reference. Running an in-place `splice` once per
+ * viewport therefore applies it TWICE to the same array — e.g. one requested
+ * removal index drops two links. Compute-once + assign-fresh is correct for
+ * both shared (legacy) and independent (new-model) footers.
+ */
+const computeSocialLinks = (
+  current: FooterSocialLink[] | undefined,
   args: UpdateFooterArguments,
-  textStyleOptions: TextStyleOptions | undefined,
-): void => {
-  if (args.copyright_text !== undefined)
-    footer.copyrightText = args.copyright_text;
-
-  if (args.copyright_text_font_family !== undefined)
-    footer.copyrightStyle = applyDetachedStyleOverride(
-      footer.copyrightStyle,
-      { fontFamily: args.copyright_text_font_family },
-      textStyleOptions,
+): FooterSocialLink[] => {
+  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
+  // A replacement supersedes every other social link mutation.
+  if (args._replace_social_links) {
+    return (args.social_links ?? []).map((l) =>
+      makeSocialLink(l.social_link_icon, l.url),
     );
+  }
 
-  const links = args.social_links;
+  const links: FooterSocialLink[] = [...(current ?? [])];
 
-  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
-  // When replacing, all other social link mutations (remove, insert, reorder) are skipped —
-  // they are superseded by the replacement and running them would cause duplicates.
-  if (args._replace_social_links) {
-    footer.socialLinks = (links ?? []).map((l) => ({
-      imageUrl: l.social_link_icon || '',
-      url: normaliseSocialUrl(l.url || ''),
-      imageTitle: '',
-      width: 0,
-      height: 0,
-      imageLink: '',
-    }));
-  } else {
-    // Targeted mutations — only run when NOT replacing the entire list.
-
-    // item_index-based updates for existing links
-    if (links?.length) {
-      for (const link of links) {
-        if (link.item_index === undefined) continue;
-
-        const existing = footer.socialLinks?.[link.item_index];
-
-        if (!existing) continue;
-
-        if (link.social_link_icon !== undefined)
-          existing.imageUrl = link.social_link_icon;
-
-        if (link.url !== undefined) existing.url = normaliseSocialUrl(link.url);
-      }
-    }
+  // item_index-based updates for existing links — replace the item reference
+  // (never mutate the original object, which may be shared across viewports).
+  for (const link of args.social_links ?? []) {
+    if (link.item_index === undefined) continue;
 
-    // Remove by index (descending order to preserve indices during splice)
-    if (args._remove_social_link_indices?.length && footer.socialLinks) {
-      const sorted = [...args._remove_social_link_indices].sort(
-        (a, b) => b - a,
-      );
+    const existing = links[link.item_index];
+
+    if (!existing) continue;
+
+    links[link.item_index] = {
+      ...existing,
+      ...(link.social_link_icon !== undefined
+        ? { imageUrl: link.social_link_icon }
+        : {}),
+      ...(link.url !== undefined ? { url: normaliseSocialUrl(link.url) } : {}),
+    };
+  }
+
+  // Remove by index (descending order to preserve indices during splice).
+  if (args._remove_social_link_indices?.length) {
+    const sorted = [...args._remove_social_link_indices].sort((a, b) => b - a);
 
-      for (const idx of sorted) {
-        if (idx >= 0 && idx < footer.socialLinks.length)
-          footer.socialLinks.splice(idx, 1);
-      }
+    for (const idx of sorted) {
+      if (idx >= 0 && idx < links.length) links.splice(idx, 1);
     }
+  }
 
-    // Insert new links (descending insert_at order to preserve positions during splice)
-    const insertLinks = (links ?? []).filter(
-      (l): l is FooterSocialLinkItem & { insert_at: number } =>
-        l.insert_at !== undefined && l.item_index === undefined,
-    );
-    const sortedInserts = [...insertLinks].sort(
-      (a, b) => b.insert_at - a.insert_at,
-    );
+  // Insert new links (descending insert_at order to preserve positions).
+  const insertLinks = (args.social_links ?? []).filter(
+    (l): l is FooterSocialLinkItem & { insert_at: number } =>
+      l.insert_at !== undefined && l.item_index === undefined,
+  );
+  const sortedInserts = [...insertLinks].sort(
+    (a, b) => b.insert_at - a.insert_at,
+  );
 
-    for (const link of sortedInserts) {
-      const pos = Math.max(
-        0,
-        Math.min(link.insert_at, footer.socialLinks?.length ?? 0),
-      );
+  for (const link of sortedInserts) {
+    const pos = Math.max(0, Math.min(link.insert_at, links.length));
 
-      footer.socialLinks = footer.socialLinks ?? [];
-      footer.socialLinks.splice(pos, 0, {
-        imageUrl: link.social_link_icon || '',
-        url: normaliseSocialUrl(link.url || ''),
-        imageTitle: '',
-        width: 0,
-        height: 0,
-        imageLink: '',
-      });
+    links.splice(pos, 0, makeSocialLink(link.social_link_icon, link.url));
+  }
+
+  // Reorder (requires ALL indices — partial reorder is not supported).
+  if (args._reorder_social_links?.length) {
+    const newOrder = args._reorder_social_links;
+    const unique = new Set(newOrder);
+
+    if (
+      unique.size === newOrder.length &&
+      newOrder.every((idx) => idx >= 0 && idx < links.length)
+    ) {
+      const reordered = newOrder.map((idx) => links[idx]);
+
+      if (reordered.length === links.length) return reordered;
     }
+  }
 
-    // Reorder (requires ALL indices — partial reorder is not supported)
-    if (args._reorder_social_links?.length && footer.socialLinks) {
-      const newOrder = args._reorder_social_links;
-      const unique = new Set(newOrder);
+  return links;
+};
 
-      if (
-        unique.size === newOrder.length &&
-        newOrder.every((idx) => idx >= 0 && idx < footer.socialLinks!.length)
-      ) {
-        const reordered = newOrder.map((idx) => footer.socialLinks![idx]);
+const applyGlobalFooterChanges = (
+  footer: AbstractPageFooterStyles,
+  args: UpdateFooterArguments,
+  textStyleOptions: TextStyleOptions | undefined,
+): void => {
+  if (args.copyright_text !== undefined)
+    footer.copyrightText = args.copyright_text;
+
+  // copyright_text_style is the same text-style object sections use (typography
+  // + colour). Normalise each value the way section styles are normalised
+  // (letterSpacing int→em, lineHeight snap, null→''), then detach from the
+  // global preset via the override helper so a single call resolves the preset
+  // and clears textStyleType once — see resolveGlobalPresetIntoStyle (BP-5420).
+  if (args.copyright_text_style) {
+    const updates: Partial<TextStyleDeclaration> = {};
 
-        if (reordered.length === footer.socialLinks.length)
-          footer.socialLinks = reordered;
-      }
+    for (const [key, value] of Object.entries(args.copyright_text_style)) {
+      const normalized = normalizeStyleValue(key, value);
+
+      if (normalized !== undefined)
+        (updates as Record<string, unknown>)[key] = normalized;
     }
+
+    if (Object.keys(updates).length > 0)
+      footer.copyrightStyle = applyDetachedStyleOverride(
+        footer.copyrightStyle,
+        updates,
+        textStyleOptions,
+      );
   }
 };
 
@@ -150,12 +195,6 @@ const applyViewportFooterChanges = (
       fill: overrides.icon_color,
     };
 
-  if (overrides.copyright_text_color !== undefined)
-    footer.copyrightStyle = {
-      ...footer.copyrightStyle,
-      color: overrides.copyright_text_color,
-    };
-
   if (overrides.is_logo_visible !== undefined)
     footer.isLogoVisible = overrides.is_logo_visible;
 
@@ -207,13 +246,30 @@ export class FooterBuilder extends BaseMetadataBuilder<UpdateFooterArguments> {
     const args = this.request.payload ?? {};
     const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
 
-    // Global fields (copyright_text, social links) always apply to both viewports.
+    // Global scalar/style fields (copyright text + font) apply to both
+    // viewports. These are idempotent assignments, safe to run per-viewport.
     if (model.pageFooterDesktop)
       applyGlobalFooterChanges(model.pageFooterDesktop, args, textStyleOptions);
 
     if (model.pageFooterMobile)
       applyGlobalFooterChanges(model.pageFooterMobile, args, textStyleOptions);
 
+    // Social links are a single global list. Derive the new list ONCE, then
+    // assign an INDEPENDENT copy to each viewport — never mutate a (possibly
+    // shared) viewport array in place. See computeSocialLinks.
+    if (hasSocialLinkMutation(args)) {
+      const current =
+        model.pageFooterDesktop?.socialLinks ??
+        model.pageFooterMobile?.socialLinks;
+      const updated = computeSocialLinks(current, args);
+
+      if (model.pageFooterDesktop)
+        model.pageFooterDesktop.socialLinks = updated.map((l) => ({ ...l }));
+
+      if (model.pageFooterMobile)
+        model.pageFooterMobile.socialLinks = updated.map((l) => ({ ...l }));
+    }
+
     // Viewport-specific styling via explicit sub-objects.
     if (args.desktop && model.pageFooterDesktop)
       applyViewportFooterChanges(model.pageFooterDesktop, args.desktop);

package/src/metadata-builder/builders/section-builders/image-gallery-builder.ts

@@ -46,7 +46,7 @@ const mergeGalleryImages = (
     const existing = content.images?.[index];
     const imageUrl = isValidUrl(img.image_url)
       ? img.image_url!
-      : existing?.imageUrl ?? '';
+      : (existing?.imageUrl ?? '');
 
     return {
       ...(existing || {}),

package/src/metadata-builder/builders/section-builders/images-section-builder.ts

@@ -80,7 +80,7 @@ const mergeImageItems = (
       ...(existing || {}),
       imageUrl: isValidUrl(item.image_url)
         ? item.image_url!
-        : existing?.imageUrl ?? '',
+        : (existing?.imageUrl ?? ''),
       imageTitle: existing?.imageTitle ?? '',
       width: existing?.width ?? 0,
       height: existing?.height ?? 0,

package/src/metadata-builder/builders/section-builders/testimonial-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTestimonialItemsAsync = async (
         ? 'shape'
         : item.avatar_image_url
           ? 'image'
-          : existing?.mediaType ?? 'image';
+          : (existing?.mediaType ?? 'image');
 
       return {
         ...(existing || {}),

package/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTextItems = (
     ) as TextStyleDeclaration;
 
     const resolved = item.text !== undefined ? resolveText(item.text) : null;
-    const text = resolved ? resolved.html : existing?.text ?? '';
+    const text = resolved ? resolved.html : (existing?.text ?? '');
 
     return {
       text,

package/src/metadata-builder/builders/section-field-utils.ts

@@ -109,7 +109,7 @@ export const applyScalarFields = (
  * - null → '' (explicitly clear/reset the property)
  * - everything else passes through as-is
  */
-const normalizeStyleValue = (key: string, value: unknown): unknown => {
+export const normalizeStyleValue = (key: string, value: unknown): unknown => {
   if (value === null) return '';
 
   if (value === undefined) return undefined;

package/src/metadata-builder/builders/shape-color-utils.ts

@@ -68,8 +68,8 @@ export const applyColorThemeToReplacements = (
     replacementColor:
       replacements.length === 1
         ? colorTheme
-        : getNewColorBasedOnTargetColorTheme(
+        : (getNewColorBasedOnTargetColorTheme(
             r.originalColor,
             colorTheme,
-          )?.toString() ?? colorTheme,
+          )?.toString() ?? colorTheme),
   }));

package/src/metadata-builder/parsers/ai-toolcall-parser.ts

@@ -4,7 +4,7 @@ import type {
   HeaderDisplayStyle,
   NavigationDisplayType,
 } from '../../brand-page/constants';
-import type { SectionType } from './section-tool-arguments';
+import type { SectionType, TextStyleArguments } from './section-tool-arguments';
 
 // Tool names — must match the function names generated by the AI pipeline.
 // Text element tools use camelCase names.
@@ -215,7 +215,6 @@ export interface FooterSocialLinkItem {
 export interface ViewportFooterOverrides {
   display_style?: FooterDisplayStyle;
   background_color?: string | null;
-  copyright_text_color?: string;
   icon_color?: string;
   is_logo_visible?: boolean;
   logo_image_height?: string;
@@ -224,7 +223,8 @@ export interface ViewportFooterOverrides {
 
 export interface UpdateFooterArguments {
   copyright_text?: string;
-  copyright_text_font_family?: string;
+  /** Copyright line text-style object (typography + colour) — same shape as a section's *_style. Global: applies to both viewports. */
+  copyright_text_style?: TextStyleArguments;
   social_links?: FooterSocialLinkItem[];
   _replace_social_links?: boolean;
   _remove_social_link_indices?: number[];

package/src/plugins/google-maps-plugin/google-maps-plugin.ts

@@ -31,10 +31,10 @@ export interface AddressDetails {
 export class GoogleMapsPlugin {
   private initialised = false;
   private initialising = false;
-  private readonly _options: GoogleMapsPluginOptions;
+  private readonly options: GoogleMapsPluginOptions;
 
   constructor(options: GoogleMapsPluginOptions) {
-    this._options = options;
+    this.options = options;
   }
 
   private async initialise(): Promise<void> {
@@ -111,7 +111,7 @@ export class GoogleMapsPlugin {
     const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
 
     return new PlaceAutocompleteElement({
-      requestedLanguage: this._options.locale,
+      requestedLanguage: this.options.locale,
       ...options,
     });
   }
@@ -149,17 +149,17 @@ export class GoogleMapsPlugin {
   }
 
   private getGoogleScriptUrl(): string {
-    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
+    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this.options.apiKey}&libraries=places&loading=async`;
 
-    return this._options.locale
-      ? `${baseUrl}&language=${this._options.locale}`
+    return this.options.locale
+      ? `${baseUrl}&language=${this.options.locale}`
       : baseUrl;
   }
 
   getEmbedGoogleMapsSrc(options: GetEmbedGoogleMapsOptions): string {
     const mapMode = options.mapMode || MAP_MODE_PLACE;
-    const locale = options.locale || this._options.locale;
-    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this._options.apiKey}&q=${options.query}`;
+    const locale = options.locale || this.options.locale;
+    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this.options.apiKey}&q=${options.query}`;
 
     return locale ? `${baseUrl}&language=${locale}` : baseUrl;
   }

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -174,7 +174,7 @@ const isPersonalisationEnabled = computed(
 );
 const isDesignCom = computed(() => containerStore.isDesignCom);
 
-const emit = defineEmits(['on-intent-image-replace']);
+defineEmits(['on-intent-image-replace']);
 
 const shapeTabs = [
   backgroundSettingsTr(`background`),

package/src/shared/background-settings/components/background-color/BackgroundColorSettings.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, type PropType } from 'vue';
+import { computed } from 'vue';
 import { HelloBar } from '@designcrowd/fe-shared-lib';
 import { useUiBackgroundSettingsStore } from '../../store';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';

package/src/shared/color-picker/components/ColorPicker.mixin.ts

@@ -3,15 +3,9 @@ import { Icon } from '@designcrowd/fe-shared-lib';
 import ColorPickerSwatch from './ColorPickerSwatch.vue';
 import type { ColorValue, ColorGroupItem, ColorGroup } from '../models';
 import { DEFAULT_COLORS, DEFAULT_GRADIENT_COLORS } from '../constants';
-import {
-  RGBAtoHex,
-  hexToRGB,
-  arrayToLinearGradient,
-  isRgbColor,
-} from '@utils/helpers';
+import { RGBAtoHex, arrayToLinearGradient, isRgbColor } from '@utils/helpers';
 import { normalizeColorToHex, colorsMatch } from '@brand-page/utils/style.util';
 import { colorPickerTr } from '@src/composables/useTranslate';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
 
 // Simple session storage for newColors (persists during browser session, clears on refresh)
 let sessionNewColors: ColorGroupItem[] = [];
@@ -53,6 +47,7 @@ export default defineComponent({
       default: () => false,
     },
   },
+  emits: ['on-color-select'],
   data() {
     const groups: ColorGroup[] = [];
     const newColors: ColorGroupItem[] = [];

package/src/shared/color-picker/components/ColorPickerSwatch.mixin.ts

@@ -7,6 +7,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['click'],
   data() {
     const styles: BrandPageCssStyle = this.color.styles;
 

package/src/shared/common/NumberInput.vue

@@ -53,6 +53,7 @@ export default {
       default: 1,
     },
   },
+  emits: ['update:model-value'],
   data() {
     return {
       priceValue: this.modelValue,

package/src/shared/common/SideBarSettingsHeader.vue

@@ -33,9 +33,9 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
-const props = defineProps({
+defineProps({
   showBackButton: {
     type: Boolean,
     required: false,

package/src/shared/confirm-modal/ConfirmModal.mixin.ts

@@ -14,6 +14,7 @@ export default defineComponent({
       required: false,
     },
   },
+  emits: ['confirm', 'cancel'],
   setup() {
     const containerStore = useBrandPageContainerStore();
 

package/src/shared/content-settings/components/booking-url-field/BookingUrlField.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div data-component="booking-url-field">
     <div

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -137,6 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
   titleLength: MAX_TITLE_LENGTH,
   descriptionLength: MAX_DESCRIPTION_LENGTH,
   isAdmin: false,
+  pages: undefined,
 });
 
 const pageSettingsStore = useUiPageSettingsStore();

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -70,14 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onBeforeMount,
-  type PropType,
-} from 'vue';
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import {
   addTransparentAlphaChannelToHex,
@@ -320,8 +313,8 @@ onBeforeMount(() => {
 onMounted(() => {
   const toggleState = Boolean(
     color.value &&
-      typeof color.value === 'string' &&
-      !isHexTransparent(color.value),
+    typeof color.value === 'string' &&
+    !isHexTransparent(color.value),
   );
 
   emit('on-toggle-state-change', toggleState);

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -17,7 +17,6 @@ import {
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
-  EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
 } from '@brand-page-maker/composables/useEventTracker';
@@ -37,6 +36,7 @@ interface CategoryTab {
 }
 
 export default defineComponent({
+  emits: ['capture-preview-snapshot'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const contentSettingsStore = useUiContentSettingsStore();

package/src/shared/content-settings/components/content-settings/ContentSettingsLockedButton.vue

@@ -41,6 +41,7 @@ export default {
       required: true,
     },
   },
+  emits: ['on-click'],
   methods: {
     onClick(ev) {
       this.$emit('on-click', ev);

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.ts

@@ -49,6 +49,11 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: [
+    'on-delete',
+    'capture-snapshot-before-modal',
+    'capture-preview-snapshot',
+  ],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const sideBarStore = useUiSideBarStore();

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -16,7 +16,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { ITEM_FIELD_TYPES, type ItemFieldType } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { commonTr } from '@src/composables/useTranslate';
 import {
   getPlainTextFromRTE,
   replaceTextInRTE,
@@ -26,19 +25,6 @@ import {
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 
-const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
-  'descriptionStyle',
-  'titleStyle',
-  'textStyle',
-  'paragraphStyle',
-];
-const AI_ALLOWED_SECTION_TYPES = [
-  'banner-section',
-  'text',
-  'about-section',
-  'testimonials-section',
-];
-const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
 
 export default defineComponent({
@@ -62,6 +48,7 @@ export default defineComponent({
       default: undefined,
     },
   },
+  emits: ['capture-preview-snapshot'],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const brandPageMakerStore = useBrandPageMakerStore();

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.ts

@@ -25,20 +25,18 @@ import {
   type PersonalisationRole,
 } from '@brand-page';
 import { buildRelativePathFromParams } from '@brand-page/utils/route.util';
-import {
-  switchAllContentToRTE,
-  isRTEManagedStyleField,
-} from '@brand-page-maker/utils';
+import { isRTEManagedStyleField } from '@brand-page-maker/utils';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 
 export default defineComponent({
+  emits: ['capture-preview-snapshot'],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const brandPageMakerStore = useBrandPageMakerStore();
-    const pageSettingsStore = useUiPageSettingsStore();
-    const styleSettingsStore = useUiStyleSettingsStore();
+    const _pageSettingsStore = useUiPageSettingsStore();
+    const _styleSettingsStore = useUiStyleSettingsStore();
 
     const userStore = useBrandPageMakerUserStore();
     const uiStore = useUiStore();