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

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,29 +227,45 @@ 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();
         },
-        updateTextStyleType({ id, name, value, }) {
+        updateTextStyleType({ 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[`${name}Style`].textStyleType = vueDeepMerge(item.settings.content, value);
             this.validateItem({ id, name });
             this.onContentChanged();
         },
-        updateTextStyles({ id, name, value, }) {
+        updateTextStyles({ id, name, value, isHydrationWrite, }) {
             const item = this.items.find((i) => i.id === id);
             if (!item) {
                 return;
             }
+            // Same hydration-write contract as updateItemValue. The RTE's
+            // mount-time style sync (setInitialStyleSettings) lands here ~100ms
+            // BEFORE its canonical text write-back — if this write opens a plain
+            // capture burst, the flagged text write joins it and both commit as a
+            // phantom entry (BP-5810's second act).
+            if (isHydrationWrite) {
+                useHistoryStore().mergeNextMutation();
+            }
             item.settings.content[`${name}Style`] = vueDeepMerge(item.settings.content[`${name}Style`], value);
             this.validateItem({ id, name });
             this.onContentChanged();
@@ -251,21 +277,29 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             }
             return item.settings.content[`${name}Style`];
         },
-        updateTextItemTextStyleType({ id, name, value, index, }) {
+        updateTextItemTextStyleType({ id, name, value, index, 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.textItems[index].textStyle.textStyleType =
                 vueDeepMerge(item.settings.content.textItems[index].textStyle.textStyleType, value);
             this.validateItem({ id, name });
             this.onContentChanged();
         },
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }) {
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, 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.textItems[index].textStyle = vueDeepMerge(item.settings.content.textItems[index].textStyle, value);
             this.validateItem({ id, name });
             this.onContentChanged();

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

@@ -4411,15 +4411,15 @@ 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;
-        updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextStyles({ 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, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
         }): void;

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

@@ -3787,15 +3787,15 @@ 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;
-        updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextStyles({ 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, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
         }): void;

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-4",
   "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', () => {
@@ -621,7 +625,11 @@ export const useRichTextEditor = (
     );
 
     if (globalStyles) {
-      // sync content settings style
+      // sync content settings style — a mount-time re-derivation, not a user
+      // edit. Flag it so the store folds it into the current undo head: this
+      // write lands ~100ms BEFORE the editor's canonical text write-back, and
+      // an unflagged write here would open a plain capture burst that
+      // swallows the flagged text write into a phantom entry (BP-5810).
       contentSettingStore.updateTextStyles({
         id: props.rawId,
         name: props.name,
@@ -635,6 +643,7 @@ export const useRichTextEditor = (
           lineHeight: globalStyles.lineHeight,
           letterSpacing: globalStyles.letterSpacing,
         },
+        isHydrationWrite: !editor.isFocused,
       });
 
       // sync toolbar editor styles

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

@@ -0,0 +1,119 @@
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import GenericTextInputMixin from './GenericTextInput.mixin';
+
+// BP-5810: the RTE attaches `{ isHydration: true }` meta to its canonical
+// write-back emits. GenericTextInput must carry that through its 100ms
+// debounce onto the outgoing payload as `isHydrationWrite` — and downgrade
+// the burst as soon as a single non-hydration write lands in it.
+
+const DEBOUNCE_WAIT_MS = 100;
+
+interface EmittedPayload {
+  id: string;
+  name: string;
+  value: string | false;
+  isHydrationWrite?: boolean;
+}
+
+const TestHost = defineComponent({
+  mixins: [GenericTextInputMixin],
+  template: '<div />',
+});
+
+const mountHost = () =>
+  mount(TestHost, {
+    props: {
+      id: 'item-1',
+      name: 'title',
+      value: '<p>seed</p>',
+      showRichTextEditor: true,
+    },
+  });
+
+const emittedPayload = (
+  wrapper: ReturnType<typeof mountHost>,
+  call: number,
+): EmittedPayload =>
+  wrapper.emitted('update:modelValue')![call][0] as EmittedPayload;
+
+describe('GenericTextInput hydration burst flag', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('a hydration-only burst emits a payload flagged isHydrationWrite', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p style="text-align: center;"></p>', {
+      isHydration: true,
+    });
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    const emitted = wrapper.emitted('update:modelValue');
+
+    expect(emitted).toHaveLength(1);
+    expect(emitted![0][0]).toEqual({
+      id: 'item-1',
+      name: 'title',
+      value: '<p style="text-align: center;"></p>',
+      isHydrationWrite: true,
+    });
+  });
+
+  test('coalesced hydration writes in one burst stay flagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>a</p>', { isHydration: true });
+    wrapper.vm.onRteModelValue('<p>b</p>', { isHydration: true });
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 0).value).toBe('<p>b</p>');
+  });
+
+  test('a user write in the same burst downgrades it to a normal edit', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    // Focused typing emits without meta.
+    wrapper.vm.onRteModelValue('<p>typed</p>');
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('a plain write (no meta) is never flagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.text = '<p>typed</p>';
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('the flag resets between bursts', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    wrapper.vm.text = '<p>typed later</p>';
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(2);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 1).isHydrationWrite).toBeUndefined();
+  });
+});

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

@@ -108,6 +108,13 @@ export default defineComponent({
       isDirty: false,
       emitChangeDebounce: undefined as DebounceHandle | 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 as boolean | undefined,
+      // One-shot channel from onRteModelValue into the `text` setter for
+      // the write currently being applied.
+      pendingWriteIsHydration: false,
     };
   },
   computed: {
@@ -144,6 +151,15 @@ export default defineComponent({
         return unescapeContentText(this.value);
       },
       set(newVal: string | false): void {
+        // 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;
         } else {
@@ -179,12 +195,16 @@ export default defineComponent({
         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: boolean) {
       if (!newVal && this._value && typeof this._value === 'string') {
         this._value = encodeContentText(this._value);
+        this.burstIsHydration = false;
         this.emitChange();
       }
     },
@@ -208,11 +228,25 @@ export default defineComponent({
       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: string, meta?: { isHydration?: boolean }): void {
+      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/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue

@@ -24,7 +24,6 @@ import { Button } from '@designcrowd/fe-shared-lib';
 import { ref, computed, onMounted } from 'vue';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { useBrandPageMakerUserStore } from '../../../../brand-page-maker/stores';
-import { useHistoryStore } from '../../../../brand-page-maker/stores/history/history-store';
 import { pageSettingTr } from '../../../../composables/useTranslate';
 import PageSelectorDropdown from '../../../page-navigation/PageSelectorDropdown.vue';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
@@ -44,14 +43,18 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (
     e: 'update:modelValue',
-    payload: { id: string; name: string; value: string },
+    payload: {
+      id: string;
+      name: string;
+      value: string;
+      isHydrationWrite?: boolean;
+    },
   ): void;
 }>();
 
 const pageNavigationStore = usePageNavigationStore();
 const pageSettingsStore = useUiPageSettingsStore();
 const userStore = useBrandPageMakerUserStore();
-const historyStore = useHistoryStore();
 
 const selectedPage = ref('');
 
@@ -111,12 +114,14 @@ onMounted(() => {
     if (routeByPageId) {
       selectedPage.value = routeByPageId.displayName;
     } else {
-      // Stale page-id clear at mount — fold into current head.
-      historyStore.mergeNextMutation();
+      // Stale page-id clear at mount — 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).
       emit('update:modelValue', {
         id: props.id,
         name: props.name,
         value: '',
+        isHydrationWrite: true,
       });
     }
   }

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

@@ -15,7 +15,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: {
@@ -42,7 +41,6 @@ export default defineComponent({
     const uiPageSettingsStore = useUiPageSettingsStore();
     const eventManagerStore = useEventManagerStore();
     const shopConfigStore = useShopConfigStore();
-    const historyStore = useHistoryStore();
 
     return {
       brandPageToken: computed(() => brandPageContainerStore.brandPageToken),
@@ -53,7 +51,6 @@ export default defineComponent({
       eventManagerStore,
       shopConfigStore,
       uiPageSettingsStore,
-      historyStore,
     };
   },
   emits: ['update:modelValue'],
@@ -113,16 +110,16 @@ export default defineComponent({
         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: UpdateItemValuePayload<PaymentConfig> = {
         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/src/shared/content-settings/components/text-field/TextField.vue

@@ -4,7 +4,7 @@
       v-if="showRichTextEditor"
       :id="`${id}-${name}`"
       ref="richTextEditorRef"
-      v-model="text"
+      :model-value="text"
       :attrs="attrs"
       :label="label"
       :placeholder="placeholder"
@@ -17,6 +17,7 @@
       :content-type="contentType"
       @focus="onFocus"
       @blur="onBlur"
+      @update:model-value="onRteModelValue"
     />
     <TextInput
       v-else