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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.25-undo-3",
+  "version": "5.17.25-undo-4",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/stores/history/history-store.test.ts

@@ -156,6 +156,142 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
     expect(store.currentIndex).toBe(1);
   });
 
+  // BP-5506 phantom-undo dedup: opening a content settings panel can
+  // mutate `brandPageData` in ways the user can't see (RTE empty-paragraph
+  // init, lazy textStyle hydration, isModifiedAfterTemplateApplied flip).
+  // The dedup gate normalizes these out so capture returns 'noop'.
+  describe('phantom-edit dedup (sidebar-open cascades)', () => {
+    it('treats RTE empty-paragraph init as a no-op', async () => {
+      const store = useHistoryStore();
+
+      // Baseline has description = "" (cold start).
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [{ type: 'contact-form', description: '' }],
+        },
+      ];
+      await store.captureBaseline();
+
+      // Sidebar open writes back TipTap's empty-paragraph default.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages[0].contents[0].description =
+        '<p style="text-align: center;"></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    it('treats lazy textStyle hydration (fontSize / letterSpacing) as a no-op', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [
+            {
+              type: 'contact-form',
+              titleStyle: { textStyleType: 'titles' },
+              descriptionStyle: { textStyleType: 'paragraphs' },
+            },
+          ],
+        },
+      ];
+      await store.captureBaseline();
+
+      // Settings panel resolves textStyleType → fills in fontSize / letterSpacing.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const cf = (mockMakerStore.brandPageData as any).pages[0].contents[0];
+
+      cf.titleStyle.fontSize = '2.25em';
+      cf.titleStyle.letterSpacing = '0';
+      cf.descriptionStyle.fontSize = '1em';
+      cf.descriptionStyle.letterSpacing = '0';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    it('treats isModifiedAfterTemplateApplied flip as a no-op', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).isModifiedAfterTemplateApplied =
+        false;
+      await store.captureBaseline();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).isModifiedAfterTemplateApplied =
+        true;
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    it('treats RTE empty-paragraph init as a no-op when the prior key was absent', async () => {
+      const store = useHistoryStore();
+
+      // Baseline content has NO `description` key at all (the cold-start
+      // shape for sections like testimonial-section before any editor
+      // mounts). JSON.stringify drops `undefined`, so the captured snapshot
+      // simply lacks the key.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [{ type: 'testimonial-section', title: 'A' }],
+        },
+      ];
+      await store.captureBaseline();
+
+      // Sidebar open writes back TipTap's empty-paragraph default, creating
+      // the key that was previously absent.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages[0].contents[0].description =
+        '<p style="text-align: center;"></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    it('still commits when a real edit accompanies a phantom field', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [
+            {
+              type: 'contact-form',
+              buttonText: 'Send',
+              description: '',
+            },
+          ],
+        },
+      ];
+      await store.captureBaseline();
+
+      // Real edit + phantom together — must commit.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const cf = (mockMakerStore.brandPageData as any).pages[0].contents[0];
+
+      cf.buttonText = 'Submit';
+      cf.description = '<p style="text-align: center;"></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('committed');
+      expect(store.entries.length).toBe(2);
+    });
+  });
+
   it('reentrancy guard: capture no-ops when isApplyingSnapshot is true', async () => {
     const store = useHistoryStore();
 

package/src/brand-page-maker/stores/history/history-store.ts

@@ -128,6 +128,92 @@ export const useHistoryStore = defineStore('history', () => {
     }
   }
 
+  /**
+   * Normalize a snapshot for the dedup byte-compare. Strips/canonicalizes
+   * fields that get mutated by sidebar-open reactive cascades but aren't
+   * user-visible edits — without this, opening a content panel produces an
+   * undo step that "does nothing" when replayed.
+   *
+   * Known phantom sources (BP-5506):
+   *   - TipTap RTE writing back its empty-paragraph default on first mount
+   *     (e.g. `""` → `<p style="text-align: center;"></p>`).
+   *   - Lazy hydration of `textStyle` fields (`fontSize`, `letterSpacing`)
+   *     when a content settings panel computes resolved values from
+   *     `textStyleType` and writes them onto the model.
+   *   - `isModifiedAfterTemplateApplied` flipping on first edit gesture.
+   *
+   * Used ONLY for dedup comparison. Stored snapshots remain unchanged so
+   * `applyHistorySnapshot` always sees the real state.
+   */
+  // Empty paragraph forms TipTap emits when an editor mounts on an empty
+  // string. Treated as equivalent to `""` for dedup.
+  const EMPTY_RTE_HTML = /^<p(\s[^>]*)?>(<br\s*\/?>)?<\/p>$/;
+
+  function isEmptyRteHtml(value: unknown): boolean {
+    return typeof value === 'string' && EMPTY_RTE_HTML.test(value);
+  }
+
+  function normalizeNode(node: unknown): unknown {
+    if (Array.isArray(node)) return node.map(normalizeNode);
+
+    if (node === null || typeof node !== 'object') return node;
+
+    const out: Record<string, unknown> = {};
+
+    for (const key of Object.keys(node as Record<string, unknown>)) {
+      const v = (node as Record<string, unknown>)[key];
+
+      // Strip the template-modified flag — it's meta-state that flips on
+      // first edit gesture (e.g. clicking into a panel) and does not
+      // represent a user-visible change.
+      if (key === 'isModifiedAfterTemplateApplied') continue;
+
+      // Empty TipTap paragraphs collapse to "" — and an empty string is
+      // equivalent to the key being absent (JSON.stringify drops `undefined`),
+      // so skip the key entirely. Otherwise the normalizer would emit
+      // `"description": ""` here while the baseline snapshot — captured when
+      // `description` was `undefined` — has no `description` key at all,
+      // and the two normalized strings would differ.
+      if (isEmptyRteHtml(v) || v === '') continue;
+
+      // textStyle / descriptionStyle / titleStyle / *Style objects:
+      // strip lazily-hydrated fields that get filled in when the settings
+      // panel computes resolved values from `textStyleType`.
+      if (
+        v !== null &&
+        typeof v === 'object' &&
+        !Array.isArray(v) &&
+        /Style$/.test(key)
+      ) {
+        const styleObj = v as Record<string, unknown>;
+        const cleanedStyle: Record<string, unknown> = {};
+
+        for (const sk of Object.keys(styleObj)) {
+          if (sk === 'fontSize' || sk === 'letterSpacing') continue;
+
+          cleanedStyle[sk] = normalizeNode(styleObj[sk]);
+        }
+
+        out[key] = cleanedStyle;
+        continue;
+      }
+
+      out[key] = normalizeNode(v);
+    }
+
+    return out;
+  }
+
+  function normalizeSnapshotForDedup(snapshotStr: string): string {
+    try {
+      const parsed = JSON.parse(snapshotStr);
+
+      return JSON.stringify(normalizeNode(parsed));
+    } catch {
+      return snapshotStr;
+    }
+  }
+
   /**
    * Commit a new entry into the stack at the current pointer position.
    *
@@ -160,7 +246,21 @@ export const useHistoryStore = defineStore('history', () => {
   }): 'committed' | 'oversized' | 'noop' {
     const current = entries.value[currentIndex.value];
 
-    if (current && current.snapshot === args.snapshot) return 'noop';
+    if (current) {
+      if (current.snapshot === args.snapshot) return 'noop';
+
+      // Phantom-edit dedup: normalize both snapshots to ignore
+      // sidebar-open reactive cascades (RTE empty-paragraph init, lazy
+      // textStyle hydration, isModifiedAfterTemplateApplied flips). If
+      // they're equal after normalization, this capture has no
+      // user-visible diff vs. the entry at the pointer.
+      if (
+        normalizeSnapshotForDedup(current.snapshot) ===
+        normalizeSnapshotForDedup(args.snapshot)
+      ) {
+        return 'noop';
+      }
+    }
 
     if (args.snapshot.length > MAX_ENTRY_BYTES) {
       eventTracker.sendHistoryOversizedEvent({

package/src/brand-page-maker/stores/user/user-store.ts

@@ -34,7 +34,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseAITextGenerator: false,
       canUseGoogleAdsense: false,
       googleAdsenseEnabled: false,
-      canUseUndoRedo: true,
+      canUseUndoRedo: false,
     },
     emailAddress: '',
     hasPremiumSubscription: false,