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

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,130 @@ 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>', titleStyle: { fontSize: '2em' } },
+    },
+  });
+
+  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();
+  });
+
+  // The RTE's mount-time style sync (setInitialStyleSettings) writes through
+  // updateTextStyles ~100ms BEFORE the canonical text write-back. If it isn't
+  // armed, it opens a plain capture burst that swallows the flagged text
+  // write — the phantom's second act (BP-5810).
+  test('updateTextStyles honours the hydration-write contract', () => {
+    const store = setupStore();
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: { fontSize: '2.25em' },
+      isHydrationWrite: true,
+    });
+
+    expect(mergeNextMutationMock).toHaveBeenCalledTimes(1);
+
+    mergeNextMutationMock.mockClear();
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: { fontSize: '3em' },
+    });
+
+    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();
+  });
+});

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

@@ -36,6 +36,7 @@ import {
   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,
@@ -389,6 +390,16 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         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({
@@ -402,6 +413,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       id,
       name,
       value,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -409,6 +421,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         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();
@@ -417,6 +434,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       id,
       name,
       value,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -424,6 +442,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
+      // Same hydration-write contract as updateItemValue.
+      if (isHydrationWrite) {
+        useHistoryStore().mergeNextMutation();
+      }
+
       item.settings.content[`${name}Style`].textStyleType = vueDeepMerge(
         item.settings.content,
         value,
@@ -435,6 +458,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       id,
       name,
       value,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -442,6 +466,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         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,
@@ -463,6 +496,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       name,
       value,
       index,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -470,6 +504,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         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,
@@ -483,6 +522,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       name,
       value,
       index,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -490,6 +530,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         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,