@designcrowd/library.brand-page 6.0.6-undo-2 → 6.0.6-undo-3

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.d.ts

@@ -84,6 +84,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDirty: boolean;
     emitChangeDebounce: DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -96,6 +98,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js

@@ -99,6 +99,13 @@ export default defineComponent({
             isDirty: false,
             emitChangeDebounce: undefined,
             lengthError: false,
+            // Whether every write in the current debounce burst was an RTE
+            // hydration write-back (see UpdateItemValuePayload.isHydrationWrite).
+            // undefined = no burst pending; any user write downgrades it to false.
+            burstIsHydration: undefined,
+            // One-shot channel from onRteModelValue into the `text` setter for
+            // the write currently being applied.
+            pendingWriteIsHydration: false,
         };
     },
     computed: {
@@ -128,6 +135,13 @@ export default defineComponent({
                 return unescapeContentText(this.value);
             },
             set(newVal) {
+                // A burst is hydration only if EVERY write in it is hydration —
+                // one real keystroke downgrades the whole burst to a user edit
+                // (the canonicalisation then rides inside that legitimate entry).
+                const writeIsHydration = this.pendingWriteIsHydration;
+                this.pendingWriteIsHydration = false;
+                this.burstIsHydration =
+                    this.burstIsHydration !== false && writeIsHydration;
                 if (newVal === false) {
                     this._value = false;
                 }
@@ -162,11 +176,15 @@ export default defineComponent({
                 this._oldValue = this._value || '';
                 this._value = false;
             }
+            // Toggling is a user action — downgrade any pending hydration burst
+            // so this emit commits as a normal entry.
+            this.burstIsHydration = false;
             this.emitChange();
         },
         showRichTextEditor(newVal) {
             if (!newVal && this._value && typeof this._value === 'string') {
                 this._value = encodeContentText(this._value);
+                this.burstIsHydration = false;
                 this.emitChange();
             }
         },
@@ -186,11 +204,22 @@ export default defineComponent({
         onBlur() {
             this.isDirty = false;
         },
+        // RTE branch handler: receives the hydration meta the RichTextEditor
+        // attaches to its update:modelValue emits (a plain v-model binding
+        // would drop the second argument), records it for the `text` setter,
+        // then applies the write.
+        onRteModelValue(newVal, meta) {
+            this.pendingWriteIsHydration = meta?.isHydration === true;
+            this.text = newVal;
+        },
         emitChange() {
+            const isHydrationWrite = this.burstIsHydration === true;
+            this.burstIsHydration = undefined;
             this.$emit('update:modelValue', {
                 id: this.id,
                 name: this.name,
                 value: this._value,
+                ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
             });
         },
     },

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

@@ -549,7 +549,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
@@ -924,7 +924,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         reset: () => void;
         getCurrentSizeBytes: () => number;
         getCurrentEntryCount: () => number;
-    }, "reset" | "undo" | "redo" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "mergeNextMutation" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;
+    }, "reset" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "mergeNextMutation" | "undo" | "redo" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;
     externalEditor: import("@tiptap/vue-3").Editor;
 }, {
     categoryTabs: CategoryTab[];

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -399,7 +399,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

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

@@ -385,7 +385,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

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

@@ -427,7 +427,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -81,6 +81,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -93,6 +95,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

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

@@ -378,7 +378,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -483,73 +483,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
     }>;
-    historyStore: import("pinia").Store<"history", Pick<{
-        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
-        currentIndex: import("vue").Ref<number, number>;
-        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-        snapshotAppliedToken: import("vue").Ref<number, number>;
-        baselineCaptured: import("vue").Ref<boolean, boolean>;
-        canUndo: import("vue").ComputedRef<boolean>;
-        canRedo: import("vue").ComputedRef<boolean>;
-        captureBaseline: () => void;
-        capture: (args: {
-            source: import("@brand-page-maker/stores/history/history-store").HistoryEntry["source"];
-            actor: import("@brand-page-maker/stores/history/history-store").HistoryEntry["actor"];
-            label?: string;
-        }) => "committed" | "oversized" | "noop" | "skipped";
-        captureTemplateSwitch: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        captureAiChangeset: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        mergeNextMutation: () => void;
-        undo: () => Promise<void>;
-        redo: () => Promise<void>;
-        reset: () => void;
-        getCurrentSizeBytes: () => number;
-        getCurrentEntryCount: () => number;
-    }, "entries" | "currentIndex" | "isApplyingSnapshot" | "snapshotAppliedToken" | "baselineCaptured">, Pick<{
-        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
-        currentIndex: import("vue").Ref<number, number>;
-        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-        snapshotAppliedToken: import("vue").Ref<number, number>;
-        baselineCaptured: import("vue").Ref<boolean, boolean>;
-        canUndo: import("vue").ComputedRef<boolean>;
-        canRedo: import("vue").ComputedRef<boolean>;
-        captureBaseline: () => void;
-        capture: (args: {
-            source: import("@brand-page-maker/stores/history/history-store").HistoryEntry["source"];
-            actor: import("@brand-page-maker/stores/history/history-store").HistoryEntry["actor"];
-            label?: string;
-        }) => "committed" | "oversized" | "noop" | "skipped";
-        captureTemplateSwitch: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        captureAiChangeset: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        mergeNextMutation: () => void;
-        undo: () => Promise<void>;
-        redo: () => Promise<void>;
-        reset: () => void;
-        getCurrentSizeBytes: () => number;
-        getCurrentEntryCount: () => number;
-    }, "canUndo" | "canRedo">, Pick<{
-        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
-        currentIndex: import("vue").Ref<number, number>;
-        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-        snapshotAppliedToken: import("vue").Ref<number, number>;
-        baselineCaptured: import("vue").Ref<boolean, boolean>;
-        canUndo: import("vue").ComputedRef<boolean>;
-        canRedo: import("vue").ComputedRef<boolean>;
-        captureBaseline: () => void;
-        capture: (args: {
-            source: import("@brand-page-maker/stores/history/history-store").HistoryEntry["source"];
-            actor: import("@brand-page-maker/stores/history/history-store").HistoryEntry["actor"];
-            label?: string;
-        }) => "committed" | "oversized" | "noop" | "skipped";
-        captureTemplateSwitch: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        captureAiChangeset: (label?: string) => "committed" | "oversized" | "noop" | "skipped";
-        mergeNextMutation: () => void;
-        undo: () => Promise<void>;
-        redo: () => Promise<void>;
-        reset: () => void;
-        getCurrentSizeBytes: () => number;
-        getCurrentEntryCount: () => number;
-    }, "reset" | "undo" | "redo" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "mergeNextMutation" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;
 }, {
     selectedPaymentConfig: BrandPagePaymentConfig | undefined;
     isCurrencyUpdating: boolean;

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.js

@@ -4,7 +4,6 @@ import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settin
 import { paymentConfigTr } from '@src/composables/useTranslate';
 import brandPageClient from '../../../../clients/brand-page-client';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 export default defineComponent({
     props: {
         id: {
@@ -30,7 +29,6 @@ export default defineComponent({
         const uiPageSettingsStore = useUiPageSettingsStore();
         const eventManagerStore = useEventManagerStore();
         const shopConfigStore = useShopConfigStore();
-        const historyStore = useHistoryStore();
         return {
             brandPageToken: computed(() => brandPageContainerStore.brandPageToken),
             isPaymentConfigSetupVisible: computed(() => !brandPageContainerStore.isPrePurchase),
@@ -38,7 +36,6 @@ export default defineComponent({
             eventManagerStore,
             shopConfigStore,
             uiPageSettingsStore,
-            historyStore,
         };
     },
     emits: ['update:modelValue'],
@@ -97,14 +94,15 @@ export default defineComponent({
                 ...this.value,
                 paymentConfig: this.shopConfigStore.paymentConfig,
             };
+            // Lazy paymentConfig hydration — a hydration write, not a user edit.
+            // The flag makes the content-settings store fold it into the current
+            // undo head at write time (see UpdateItemValuePayload.isHydrationWrite).
             const payload = {
                 id: this.id,
                 name: this.name,
                 value,
+                isHydrationWrite: true,
             };
-            // Lazy paymentConfig hydration — fold into current head instead
-            // of pushing a phantom entry.
-            this.historyStore.mergeNextMutation();
             this.$emit('update:modelValue', payload);
         }
     },

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -81,6 +81,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -93,6 +95,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -81,6 +81,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -93,6 +95,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.d.ts

@@ -53,6 +53,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     textEmptyErrorMessage: any;
     textMaxLengthErrorMessage: any;
     isInternalWatchEnabled: boolean;
+    burstIsHydration: boolean | undefined;
 }, {}, {
     onDelete(index: number): void;
     onAddNewItem(): void;
@@ -64,6 +65,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         id: string;
         name: string;
         value: string;
+        isHydrationWrite?: boolean;
     }, index: number): void;
     setTextStyleOption(payload: {
         id: string;

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.js

@@ -66,6 +66,11 @@ export default defineComponent({
         textEmptyErrorMessage: TEXT_EMPTY(),
         textMaxLengthErrorMessage: MAX_LENGTH_ERROR_MESSAGE(),
         isInternalWatchEnabled: true,
+        // Second burst layer on top of GenericTextInput's (this field re-wraps
+        // per-item TextareaField payloads into one textItems array payload
+        // behind its own debounce). Hydration only if EVERY write in the burst
+        // was hydration; any user action downgrades it. undefined = no burst.
+        burstIsHydration: undefined,
     }),
     async created() {
         this.options = cloneDeep(this.value);
@@ -77,6 +82,8 @@ export default defineComponent({
     methods: {
         onDelete(index) {
             this.options = this.options.filter((_o, i) => i !== index);
+            // Deleting is a user action — downgrade any pending hydration burst.
+            this.burstIsHydration = false;
             if (this.changeDebounce) {
                 this.changeDebounce();
             }
@@ -86,6 +93,7 @@ export default defineComponent({
             this.addOption();
         },
         addOption() {
+            this.burstIsHydration = false;
             this.options.push({
                 text: '',
                 textStyle: {
@@ -107,14 +115,19 @@ export default defineComponent({
             return decodeHtmlEntities(text);
         },
         emitChange() {
+            const isHydrationWrite = this.burstIsHydration === true;
+            this.burstIsHydration = undefined;
             const payload = {
                 id: this.id,
                 name: this.name,
                 value: this.options,
+                ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
             };
             this.$emit('update:model-value', payload);
         },
         onItemsChange(items) {
+            // Reordering is a user action — downgrade any pending hydration burst.
+            this.burstIsHydration = false;
             const payload = {
                 id: this.id,
                 name: this.name,
@@ -128,11 +141,17 @@ export default defineComponent({
             this.$emit('update:model-value', payload);
         },
         onTextAreaTextChange(payload, index) {
+            // Carry the hydration flag from the per-item TextareaField burst into
+            // this field's own burst (AND rule — one user write downgrades it).
+            this.burstIsHydration =
+                this.burstIsHydration !== false && payload.isHydrationWrite === true;
             this.options[index].text = payload.value;
             this.isModified[index] = true;
         },
         setTextStyleOption(payload, index) {
             this.options[index].textStyle = payload.value;
+            // Style edits are user actions — downgrade any pending hydration burst.
+            this.burstIsHydration = false;
             this.emitChange();
         },
         onBlurOverride(value, index) {

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -95,6 +95,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -107,6 +109,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -88,6 +88,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -100,6 +102,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -84,6 +84,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
     lengthError: boolean;
+    burstIsHydration: boolean | undefined;
+    pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
@@ -96,6 +98,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }, {
     onFocus(): void;
     onBlur(): void;
+    onRteModelValue(newVal: string, meta?: {
+        isHydration?: boolean;
+    }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attrs: {

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

@@ -88,12 +88,23 @@ export interface UpdateItemValuePayload<T> {
     name: string;
     value: T;
     multipleValues?: boolean;
+    /**
+     * Marks this write as a hydration write-back (e.g. the RTE rewriting the
+     * model into canonical HTML on mount) rather than a user edit. The
+     * content-settings store arms the undo history's merge flag synchronously
+     * before applying a flagged write, so it folds into the current history
+     * head instead of pushing a phantom entry (BP-5810). The flag travels
+     * with the value so it survives the debounced field → store hops.
+     */
+    isHydrationWrite?: boolean;
 }
 export interface UpdateMultipleItemValuesPayload<T extends object> {
     id: string;
     name: string;
     value: T;
     index?: number;
+    /** See UpdateItemValuePayload.isHydrationWrite. */
+    isHydrationWrite?: boolean;
 }
 export interface ValidateItemPayload {
     id: string;

package/lib/src/shared/content-settings/store/content-settings-store.d.ts

@@ -393,7 +393,7 @@ export declare const useUiContentSettingsStore: import("pinia").StoreDefinition<
     pushMode(item: ContentSettingsModeStackItem): void;
     resetMode(): void;
     updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-    updateMultipleItemValues({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateMultipleItemValues({ id, name, value, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
     updateTextStyleType({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
     updateTextStyles({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
     getTextStyles({ id, name }: {

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -4,6 +4,7 @@ import { RESERVED_FIELD_NAMES } from '../constants';
 import { UI_EVENT_SOURCES } from '../../models';
 import { CONTENT_SETTINGS_DISPLAY_MODES, ITEM_CATEGORIES, ITEM_CATEGORY_NAMES, } from '@brand-page-maker/models';
 import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, useVideoStore, } from '@brand-page-maker/stores';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { createDefaultContentItemGroupState, createDefaultContentItemState, } from '../../navigation-style-settings/store';
 import { adminValidatorsDict, dummyValidator, validatorDict, } from '@brand-page-maker/validators';
@@ -210,6 +211,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
+            // Hydration write-backs (RTE canonical HTML on mount, lazy config
+            // hydration, stale-id clears) fold into the current undo head instead
+            // of pushing an entry. Arming here — same tick as the write — is what
+            // makes the merge reliable: the flag travelled with the payload
+            // through the debounced field chain, so emit-time arming would lapse
+            // before the write lands (BP-5810).
+            if (payload.isHydrationWrite) {
+                useHistoryStore().mergeNextMutation();
+            }
             item.settings.content[payload.name] = payload.value;
             this.validateItem({
                 id: payload.id,
@@ -217,11 +227,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             });
             this.onContentChanged();
         },
-        updateMultipleItemValues({ id, name, value, }) {
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }) {
             const item = this.items.find((i) => i.id === id);
             if (!item) {
                 return;
             }
+            // Same hydration-write contract as updateItemValue.
+            if (isHydrationWrite) {
+                useHistoryStore().mergeNextMutation();
+            }
             item.settings.content = vueDeepMerge(item.settings.content, value);
             this.validateItem({ id, name });
             this.onContentChanged();

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -4411,7 +4411,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         pushMode(item: import("../../../content-settings/store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: import("../../../content-settings/models").UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3787,7 +3787,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushMode(item: import("../../../content-settings/store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-undo-2",
+  "version": "6.0.6-undo-3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -211,10 +211,6 @@ export const useRichTextEditor = (
 ): UseRichTextEditorReturn => {
   const historyStore = useHistoryStore();
 
-  // TipTap rehydrates and writes back canonical HTML on mount — fold
-  // that into the current head instead of pushing a phantom entry.
-  historyStore.mergeNextMutation();
-
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
@@ -492,6 +488,14 @@ export const useRichTextEditor = (
   );
 
   editor.on('transaction', ({ transaction }) => {
+    // Style detection only makes sense for user styling — an unfocused
+    // editor's transactions are mount rehydration / programmatic setContent
+    // churn, and clearing textStyleType from those would push a phantom
+    // style write into the model (BP-5810 family).
+    if (!editor.isFocused) {
+      return;
+    }
+
     if (isStyleChanged(transaction) && props.styles.textStyleType) {
       onSelectTextStyleType({
         label: 'None',
@@ -505,22 +509,22 @@ export const useRichTextEditor = (
 
     // An update fired while the editor is unfocused is TipTap rewriting the
     // model back into its canonical HTML during mount rehydration or a
-    // programmatic setContent — not a user edit. Fold it into the current
-    // head so merely selecting a section doesn't push a phantom undo entry
-    // (BP-5810). The construction-time arm above lapses before this async
-    // write-back fires, so re-arm here. Genuine edits happen while focused and
-    // still push a new entry.
+    // programmatic setContent — not a user edit. Tag the emit so the write
+    // folds into the current undo head instead of pushing a phantom entry
+    // (BP-5810). The flag travels WITH the value through the debounced
+    // field → store chain and arms the history merge at the moment of the
+    // store write — arming here at emit time would lapse before the
+    // debounce fires. Genuine edits happen while focused and commit
+    // normally.
     //
     // Known limitation: a programmatic toolbar command run on an editor the
     // user hasn't focused yet would also merge (losing that undo step). Today
     // the RTE only mounts inside an already-open settings drawer and the user
     // focuses it before formatting, so this doesn't occur — revisit if a
     // consumer ever drives toolbar actions on an unfocused editor.
-    if (!editor.isFocused && !historyStore.isApplyingSnapshot) {
-      historyStore.mergeNextMutation();
-    }
-
-    emit('update:modelValue', sanitizedData.sanitizedHtml);
+    emit('update:modelValue', sanitizedData.sanitizedHtml, {
+      isHydration: !editor.isFocused,
+    });
   });
 
   editor.on('selectionUpdate', () => {