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

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

@@ -550,14 +550,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         resetMode(): void;
         updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): 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;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: ItemCategory;
         }): void;

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

@@ -400,14 +400,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         resetMode(): void;
         updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): 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;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
         }): void;

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

@@ -386,14 +386,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): 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;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;

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

@@ -428,14 +428,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): 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;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;

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

@@ -379,14 +379,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): 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;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
             id: string;
             name: string;
         }): unknown;
-        updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
-        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;

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

@@ -394,14 +394,14 @@ export declare const useUiContentSettingsStore: import("pinia").StoreDefinition<
     resetMode(): void;
     updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
     updateMultipleItemValues({ id, name, value, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
-    updateTextStyleType({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
-    updateTextStyles({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateTextStyleType({ id, name, value, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateTextStyles({ id, name, value, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
     getTextStyles({ id, name }: {
         id: string;
         name: string;
     }): unknown;
-    updateTextItemTextStyleType({ id, name, value, index, }: UpdateMultipleItemValuesPayload<any>): void;
-    updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
     _setActiveCategoryTab({ activeCategoryTab, }: {
         activeCategoryTab: ItemCategory;
     }): void;

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

@@ -240,20 +240,32 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             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();
@@ -265,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

@@ -4412,14 +4412,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         resetMode(): void;
         updateItemValue(payload: import("../../../content-settings/models").UpdateItemValuePayload<unknown>): 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;
+        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

@@ -3788,14 +3788,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): 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;
+        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-3",
+  "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

@@ -625,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,
@@ -639,6 +643,7 @@ export const useRichTextEditor = (
           lineHeight: globalStyles.lineHeight,
           letterSpacing: globalStyles.letterSpacing,
         },
+        isHydrationWrite: !editor.isFocused,
       });
 
       // sync toolbar editor styles

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

@@ -89,7 +89,7 @@ describe('content settings store — hydration writes arm the history merge', ()
     id: 'item-1',
     type: 'social-links',
     settings: {
-      content: { title: '<p>old</p>' },
+      content: { title: '<p>old</p>', titleStyle: { fontSize: '2em' } },
     },
   });
 
@@ -156,6 +156,33 @@ describe('content settings store — hydration writes arm the history merge', ()
     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();
 

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

@@ -434,6 +434,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       id,
       name,
       value,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -441,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,
@@ -452,6 +458,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       id,
       name,
       value,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -459,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,
@@ -480,6 +496,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       name,
       value,
       index,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -487,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,
@@ -500,6 +522,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       name,
       value,
       index,
+      isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
       const item = this.items.find((i) => i.id === id);
 
@@ -507,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,