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

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

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

@@ -0,0 +1,149 @@
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import type { Content, LogoTheme, TextItem } from '@brand-page/models';
+import TextItemsFieldMixin from './TextItemsField.mixin';
+
+// BP-5810: TextItemsField re-wraps per-item TextareaField payloads into one
+// textItems array payload behind its own 250ms debounce. The hydration flag
+// must survive this second hop (AND rule: any user action in the burst
+// downgrades it).
+
+const DEBOUNCE_IN_MS = 250;
+
+interface EmittedPayload {
+  id: string;
+  name: string;
+  value: TextItem[];
+  isHydrationWrite?: boolean;
+}
+
+const TestHost = defineComponent({
+  mixins: [TextItemsFieldMixin],
+  template: '<div />',
+});
+
+const makeTextItem = (text: string): TextItem =>
+  ({
+    text,
+    textStyle: {
+      fontSize: '16px',
+      textAlign: 'left',
+      textStyleType: 'paragraphs',
+      applyAutoScale: true,
+    },
+  }) as TextItem;
+
+const mountHost = () =>
+  mount(TestHost, {
+    props: {
+      id: 'item-1',
+      name: 'textItems',
+      content: { id: 'item-1', type: 'text' } as Content,
+      value: [makeTextItem('<p>one</p>'), makeTextItem('<p>two</p>')],
+      isAdmin: false,
+      logoTheme: {
+        logoTextColor: '#000000',
+        logoBackgroundColor: '#ffffff',
+      } as unknown as LogoTheme,
+      showRichTextEditor: true,
+    },
+  });
+
+const emittedPayload = (
+  wrapper: ReturnType<typeof mountHost>,
+  call: number,
+): EmittedPayload =>
+  wrapper.emitted('update:model-value')![call][0] as EmittedPayload;
+
+describe('TextItemsField hydration burst flag', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('hydration-only item writes emit a flagged textItems payload', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p style="text-align: center;">one</p>',
+        isHydrationWrite: true,
+      },
+      0,
+    );
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p style="text-align: center;">two</p>',
+        isHydrationWrite: true,
+      },
+      1,
+    );
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 0).value[0].text).toBe(
+      '<p style="text-align: center;">one</p>',
+    );
+  });
+
+  test('an unflagged item write keeps the payload unflagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      { id: 'item-1', name: 'textItems', value: '<p>typed</p>' },
+      0,
+    );
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('a user action in the burst downgrades a pending hydration flag', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p>canonical</p>',
+        isHydrationWrite: true,
+      },
+      0,
+    );
+
+    // Style change is a user action and emits immediately.
+    wrapper.vm.setTextStyleOption(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: { fontSize: '20px', textAlign: 'left' },
+      },
+      1,
+    );
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+
+    // The trailing debounced emit must not resurrect the flag either.
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    const calls = wrapper.emitted('update:model-value')!;
+
+    for (let i = 0; i < calls.length; i++) {
+      expect(emittedPayload(wrapper, i).isHydrationWrite).toBeUndefined();
+    }
+  });
+});

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

@@ -84,6 +84,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 as boolean | undefined,
   }),
   async created() {
     this.options = cloneDeep(this.value);
@@ -97,6 +102,9 @@ export default defineComponent({
     onDelete(index: number) {
       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();
       }
@@ -107,6 +115,8 @@ export default defineComponent({
       this.addOption();
     },
     addOption(): void {
+      this.burstIsHydration = false;
+
       this.options.push({
         text: '',
         textStyle: {
@@ -131,16 +141,24 @@ export default defineComponent({
       return decodeHtmlEntities(text);
     },
     emitChange(): void {
+      const isHydrationWrite = this.burstIsHydration === true;
+
+      this.burstIsHydration = undefined;
+
       const payload: UpdateItemValuePayload<TextItem[]> = {
         id: this.id,
         name: this.name,
         value: this.options,
+        ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
       };
 
       this.$emit('update:model-value', payload);
     },
 
     onItemsChange(items: TextItem[]) {
+      // Reordering is a user action — downgrade any pending hydration burst.
+      this.burstIsHydration = false;
+
       const payload: UpdateItemValuePayload<TextItem[]> = {
         id: this.id,
         name: this.name,
@@ -161,9 +179,15 @@ export default defineComponent({
         id: string;
         name: string;
         value: string;
+        isHydrationWrite?: boolean;
       },
       index: number,
     ) {
+      // 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;
     },
@@ -177,6 +201,8 @@ export default defineComponent({
       index: number,
     ) {
       this.options[index].textStyle = payload.value;
+      // Style edits are user actions — downgrade any pending hydration burst.
+      this.burstIsHydration = false;
       this.emitChange();
     },
 

package/src/shared/content-settings/components/textarea-field/TextareaField.vue

@@ -5,7 +5,7 @@
       v-if="showRichTextEditor"
       :id="`${id}-${name}`"
       ref="richTextEditorRef"
-      v-model="text"
+      :model-value="text"
       class="tw-bg-white"
       :attrs="attrs"
       :label="label"
@@ -21,6 +21,7 @@
       :content-type="contentType"
       @focus="onFocus"
       @blur="onBlur"
+      @update:model-value="onRteModelValue"
     />
     <Textarea
       v-else

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

@@ -123,6 +123,15 @@ 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;
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -131,6 +140,8 @@ export interface UpdateMultipleItemValuesPayload<T extends object> {
   name: string;
   value: T;
   index?: number;
+  /** See UpdateItemValuePayload.isHydrationWrite. */
+  isHydrationWrite?: boolean;
 }
 
 export interface ValidateItemPayload {

package/src/shared/content-settings/store/content-settings-store.test.ts

@@ -5,6 +5,16 @@ import {
   useUiContentSettingsStore,
 } from './index';
 
+const { mergeNextMutationMock } = vi.hoisted(() => ({
+  mergeNextMutationMock: vi.fn(),
+}));
+
+vi.mock('@brand-page-maker/stores/history/history-store', () => ({
+  useHistoryStore: vi.fn(() => ({
+    mergeNextMutation: mergeNextMutationMock,
+  })),
+}));
+
 describe('content settings store', () => {
   beforeAll(() => {
     const pinia = createPinia();
@@ -69,3 +79,103 @@ describe('content settings store', () => {
     expect(store.modeStack[0].mode).toBe(DEFAULT_CONSTANT_SETTINGS_MODE);
   });
 });
+
+// BP-5810: hydration write-backs (RTE canonical HTML on mount, lazy config
+// hydration, stale-id clears) arrive with `isHydrationWrite` on the payload.
+// The store must arm the undo history's merge flag in the same tick as the
+// write so it folds into the current head instead of pushing a phantom entry.
+describe('content settings store — hydration writes arm the history merge', () => {
+  const makeItem = () => ({
+    id: 'item-1',
+    type: 'social-links',
+    settings: {
+      content: { title: '<p>old</p>' },
+    },
+  });
+
+  const setupStore = () => {
+    setActivePinia(createPinia());
+
+    const store = useUiContentSettingsStore();
+
+    store.items.push(makeItem() as never);
+
+    // Isolate updateItemValue: validation and the content-changed fan-out
+    // reach into maker stores that are out of scope here.
+    store.validateItem = vi.fn();
+    store.onContentChanged = vi.fn();
+
+    return store;
+  };
+
+  beforeEach(() => {
+    mergeNextMutationMock.mockClear();
+  });
+
+  test('updateItemValue with isHydrationWrite arms the merge and applies the write', () => {
+    const store = setupStore();
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'title',
+      value: '<p style="text-align: center;"></p>',
+      isHydrationWrite: true,
+    });
+
+    expect(mergeNextMutationMock).toHaveBeenCalledTimes(1);
+    expect((store.items[0].settings.content as { title?: string }).title).toBe(
+      '<p style="text-align: center;"></p>',
+    );
+  });
+
+  test('updateItemValue without the flag does not touch the history merge', () => {
+    const store = setupStore();
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'title',
+      value: '<p>user edit</p>',
+    });
+
+    expect(mergeNextMutationMock).not.toHaveBeenCalled();
+    expect((store.items[0].settings.content as { title?: string }).title).toBe(
+      '<p>user edit</p>',
+    );
+  });
+
+  test('updateItemValue for an unknown item does not arm the merge', () => {
+    const store = setupStore();
+
+    store.updateItemValue({
+      id: 'missing-item',
+      name: 'title',
+      value: '<p>x</p>',
+      isHydrationWrite: true,
+    });
+
+    expect(mergeNextMutationMock).not.toHaveBeenCalled();
+  });
+
+  test('updateMultipleItemValues honours the same contract', () => {
+    const store = setupStore();
+
+    store.updateMultipleItemValues({
+      id: 'item-1',
+      name: 'title',
+      value: { title: '<p>merged</p>' },
+      isHydrationWrite: true,
+    });
+
+    expect(mergeNextMutationMock).toHaveBeenCalledTimes(1);
+
+    mergeNextMutationMock.mockClear();
+
+    store.updateMultipleItemValues({
+      id: 'item-1',
+      name: 'title',
+      value: { title: '<p>user</p>' },
+    });
+
+    expect(mergeNextMutationMock).not.toHaveBeenCalled();
+  });
+});