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

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/text-style-field/TextStyleField.mixin.ts

@@ -176,17 +176,7 @@ export default defineComponent({
       TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS,
     );
 
-    const value = this.value as unknown as TextStyleDeclaration;
-
-    if (value.textStyleType) {
-      const textStyleTypeOption = this.textStyleTypeOptions.find(
-        (x) => x.value === value.textStyleType,
-      );
-
-      if (textStyleTypeOption) {
-        textStyleTypeOption.isSelected = true;
-      }
-    }
+    this.syncTextStyleTypeSelection();
   },
   computed: {
     selectedTextStyle(): TextStyleDeclaration {
@@ -423,9 +413,27 @@ export default defineComponent({
     generateFontFamilySelectorKey() {
       return `fontFamilySelector-${this.id}-${Date.now()}`;
     },
+    // Re-derive the text-style-type selection from the current `value`.
+    // Seeded in created() and re-run whenever `value` changes (e.g. undo/redo
+    // restores the model) so the dropdown title and `selectedTextStyle`
+    // reflect the model rather than a stale local flag. (BP-5811 / BP-5817)
+    syncTextStyleTypeSelection() {
+      const value = this.value as unknown as TextStyleDeclaration;
+
+      this.textStyleTypeOptions.forEach((option) => {
+        // The leading Boolean(...) guard is deliberate — do NOT simplify to
+        // `option.value === value?.textStyleType`. The "none" option's value
+        // is `undefined`, so that form would SELECT it whenever no style is
+        // set, whereas the convention (see emitChange) is all-flags-false
+        // when there is no textStyleType.
+        option.isSelected =
+          Boolean(value?.textStyleType) && option.value === value.textStyleType;
+      });
+    },
   },
   watch: {
     value() {
+      this.syncTextStyleTypeSelection();
       this.$nextTick(() => {
         this.fontFamilySelectorKey = this.generateFontFamilySelectorKey();
       });

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();
+  });
+});

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();

package/lib/src/tracker.d.ts

@@ -1,2 +0,0 @@
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
-export type { EventTracker, BpEventTrackerEvent, BpGlobalEventProps, BpUpsellEventProps, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.js

@@ -1,12 +0,0 @@
-// Lightweight subpath entry: `@designcrowd/library.brand-page/tracker`.
-// Re-exports ONLY the analytics surface (useEventTracker + event constants),
-// which depends solely on `vue`. This lets consumers import the tracker without
-// pulling the full library graph (maker, TipTap, renderer). See
-// docs/plans/multi-entrypoint-tree-shaking.md and the /tracker proposal.
-//
-// IMPORTANT: useEventTracker holds module-scoped pub/sub state (LISTENERS,
-// GLOBAL_EVENT_PROPS). It MUST resolve to a single shared instance across this
-// entry and the root `.` entry, or subscribers registered here won't receive
-// events published via the root. The multi-entry build hoists it into a shared
-// chunk (both `index` and `tracker` import it) — verified at build time.
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.mjs

@@ -1,12 +0,0 @@
-import { A as N, E as O, G as _, P as A, a as I, S as a, T as S, U as s, u as C } from "./useEventTracker-DmQ6AkNn.js";
-export {
-  N as AI_CTA_LOCATIONS,
-  O as EVENTS,
-  _ as GENERATE_TEXT_CONTINUATION_EVENTS,
-  A as PUBLISH_MODAL_CONTINUATION_EVENTS,
-  I as PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
-  a as SELECT_LOCATIONS,
-  S as TRIGGER_TYPE,
-  s as UPGRADE_CTA_LOCATIONS,
-  C as useEventTracker
-};