@designcrowd/library.brand-page 5.17.25-undo-7 → 5.17.25-undo-9

package/package.json

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

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.ts

@@ -37,6 +37,13 @@ export default defineComponent({
       return this.brandPageContainerStore.isPublished;
     },
 
+    // Only render the bar when at least one inner cluster has something to
+    // show. Otherwise we'd render an empty white strip — e.g. on an
+    // unpublished page with the undo flag off.
+    shouldShowBar(): boolean {
+      return Boolean(this.undoRedoEnabled) || this.isPublished;
+    },
+
     brandPageUrl(): string {
       if (
         this.brandPageContainerStore.isCustomDomainEnabled &&

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="undoRedoEnabled || isPublished"
+    v-if="shouldShowBar"
     data-component="quick-link-bar"
     class="c-quick-links tw-w-full tw-flex-none tw-bg-white md:tw-h-12 tw-border-b tw-border-grayscale-500 tw-px-2 lg:tw-px-4 tw-box-border tw-flex tw-items-center tw-text-grayscale-800 tw-fixed lg:tw-static"
   >

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

@@ -40,6 +40,13 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
+import {
+  CONTENT_SETTINGS_MODES,
+  useUiContentSettingsStore,
+} from '@shared/content-settings/store';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
@@ -560,4 +567,118 @@ describe('brand page maker store module', () => {
     // Assert
     expect(setDesignTemplateTokenSpy).not.toHaveBeenCalled();
   });
+
+  // BP-5506 regression: applyHistorySnapshot must replace nested navigation
+  // style refs as a whole, not deep-merge them. The previous bug was that
+  // object-form $patch would leave keys present in the live state but absent
+  // from the snapshot in place — e.g. switching nav button styles then
+  // undoing would leave the new style's borderColor / borderRadius applied.
+  test('applyHistorySnapshot replaces navigation styles wholesale (no key bleed across undo)', async () => {
+    // Arrange — initialise the maker so `applyHistorySnapshot` has a
+    // populated set of dependent stores to write into.
+    const makerStore = useBrandPageMakerStore();
+    const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // Build snapshot A — the "older" state we'll undo back to. Keep the
+    // navigation simple: only borderRadius is set on selectedButtonStyle.
+    const snapshotA = {
+      ...makerStore.brandPageData,
+      pageHeaderDesktop: {
+        ...makerStore.brandPageData.pageHeaderDesktop,
+        navigation: {
+          ...makerStore.brandPageData.pageHeaderDesktop?.navigation,
+          selectedButtonStyle: {
+            borderRadius: '0px',
+          },
+        },
+      },
+    } as BrandPageModel;
+
+    // Build snapshot B — the "newer" state with extra keys that the
+    // older snapshot does NOT have. If $patch deep-merged, these would
+    // survive an undo back to A.
+    const snapshotB = {
+      ...snapshotA,
+      pageHeaderDesktop: {
+        ...snapshotA.pageHeaderDesktop,
+        navigation: {
+          ...snapshotA.pageHeaderDesktop?.navigation,
+          selectedButtonStyle: {
+            borderRadius: '12px',
+            borderColor: 'rgb(255, 0, 0)',
+            borderStyle: 'dashed',
+            borderWidth: '4px',
+          },
+        },
+      },
+    } as BrandPageModel;
+
+    // Act — apply newer first (simulates the user making the edit), then
+    // older (simulates the undo). NavigationDesktop's constructor folds
+    // its input over a defaults object, so we read the resulting state
+    // and assert against the keys that came from snapshotB but NOT from
+    // snapshotA.
+    await makerStore.applyHistorySnapshot(snapshotB);
+    await makerStore.applyHistorySnapshot(snapshotA);
+
+    // Assert — after the undo, no keys from B should bleed through onto
+    // A's selectedButtonStyle. Specifically the values that are unique to
+    // B (red dashed border) must not be present.
+    const restored =
+      navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ];
+    const restoredSelected = restored.selectedButtonStyle;
+
+    expect(restoredSelected.borderRadius).toBe('0px');
+    // The B-only values must not survive the undo. NavigationStyles'
+    // constructor seeds defaults for selectedButtonStyle, so we assert
+    // the *exact* B-only values are gone rather than a strict superset.
+    expect(restoredSelected.borderColor).not.toBe('rgb(255, 0, 0)');
+    expect(restoredSelected.borderStyle).not.toBe('dashed');
+    expect(restoredSelected.borderWidth).not.toBe('4px');
+  });
+
+  // BP-5506 regression: when undoing a content add, the selected item
+  // disappears. The fallback must restore the Content tab's natural
+  // landing state (mode = edit, selectedItemId = null), not just switch
+  // tabs — otherwise `<FocusedContentItemSettings>` keeps rendering for
+  // a missing item and paints a blank panel.
+  test('applyHistorySnapshot resets sidebar to default Content tab when selected item is gone', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+    const sideBarStore = useUiSideBarStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // Simulate the user opening a content item's focused settings.
+    const orphanItemId = 'orphan-content-id-not-in-snapshot';
+
+    contentSettingsStore.pushMode({
+      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
+      selectedItemId: orphanItemId,
+    });
+    contentSettingsStore.selectedItemId = orphanItemId;
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    // Pre-condition: panel is showing the focused content item.
+    expect(contentSettingsStore.mode).toBe(
+      CONTENT_SETTINGS_MODES.focusedContentItem,
+    );
+    expect(contentSettingsStore.selectedItemId).toBe(orphanItemId);
+
+    // Snapshot does NOT contain orphanItemId — simulates undo of an add.
+    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
+
+    // Post-condition: same shape as a fresh Content tab click.
+    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.edit);
+    expect(contentSettingsStore.selectedItemId).toBeNull();
+    expect(sideBarStore.selectedTabName).toBe(
+      SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    );
+  });
 });

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

@@ -928,9 +928,23 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       if (existingContentIds.has(selectedItemId)) return;
 
+      // The previously-selected content was undone away. Restore the
+      // Content tab's natural landing state — the same shape produced
+      // when the user clicks the Content tab fresh — instead of leaving
+      // the sidebar stuck rendering `<FocusedContentItemSettings>` for
+      // a missing item, which paints a blank panel.
+      //
+      // `resetMode()` pops the modeStack back to the base `edit` entry
+      // (the default landing mode); clearing `selectedItemId` releases
+      // the pointer to the now-deleted item.
       sideBarStore.setSelectedTabName({
         tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
       });
+      contentSettingsStore.resetMode();
+      contentSettingsStore.selectedItemId = null;
+      contentSettingsStore.selectedItemFieldName = null;
+      contentSettingsStore.selectedItemIndex = null;
+      contentSettingsStore.selectedItemValue = null;
     },
     export(): BrandPageModel {
       const data = this.brandPageData;

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

@@ -297,6 +297,76 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
       expect(store.entries.length).toBe(2);
     });
 
+    // BP-5506 follow-up: editing logo text via the Logo sidebar mutates
+    // `editableLogoStore.logoEdits` (not in brandPageData), then re-renders
+    // the result into `logoImageBase64Url` on every header/footer +
+    // per-page logo content. If history captured that base64, undo would
+    // revert the canvas without touching the sidebar input — the user
+    // sees the canvas snap back but the sidebar still shows their typed
+    // value. V1 excludes logo property edits from undo, so dedup must
+    // collapse base64-only diffs.
+    it('treats isolated logoImageBase64Url changes as a no-op', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pageHeaderDesktop = {
+        logoImageBase64Url: 'data:image/png;base64,AAAA',
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pageHeaderMobile = {
+        logoImageBase64Url: 'data:image/png;base64,AAAA',
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pageFooterDesktop = {
+        logoImageBase64Url: 'data:image/png;base64,AAAA',
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pageFooterMobile = {
+        logoImageBase64Url: 'data:image/png;base64,AAAA',
+      };
+      await store.captureBaseline();
+
+      // Logo text/font/color edit re-renders all four base64 fields.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data = mockMakerStore.brandPageData as any;
+
+      data.pageHeaderDesktop.logoImageBase64Url = 'data:image/png;base64,BBBB';
+      data.pageHeaderMobile.logoImageBase64Url = 'data:image/png;base64,BBBB';
+      data.pageFooterDesktop.logoImageBase64Url = 'data:image/png;base64,BBBB';
+      data.pageFooterMobile.logoImageBase64Url = 'data:image/png;base64,BBBB';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    // BYO-upload undo MUST still work — that diff is in
+    // `logoImage.logoDraftToken`, not `logoImageBase64Url`. Stripping the
+    // base64 must not collapse a draft-token change.
+    it('still commits when logoImage.logoDraftToken changes (BYO upload)', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pageHeaderDesktop = {
+        logoImage: { logoDraftToken: 'token-original', logoVariation: 0 },
+        logoImageBase64Url: 'data:image/png;base64,AAAA',
+      };
+      await store.captureBaseline();
+
+      // BYO upload swaps both the draft token AND the base64.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const header = (mockMakerStore.brandPageData as any).pageHeaderDesktop;
+
+      header.logoImage.logoDraftToken = 'token-uploaded';
+      header.logoImageBase64Url = 'data:image/png;base64,BBBB';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('committed');
+      expect(store.entries.length).toBe(2);
+    });
+
     it('treats isModifiedAfterTemplateApplied flip as a no-op', async () => {
       const store = useHistoryStore();
 
@@ -419,7 +489,10 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
       expect(store.entries.length).toBe(1);
     });
 
-    it('still commits when RTE content has real inline formatting tags', async () => {
+    it('still commits when RTE content has partial-text inline formatting', async () => {
+      // Partial bold (`Hello <strong>world</strong>`) is a real edit — only
+      // *part* of the text is bold, which can't be expressed via the global
+      // textStyle. The dedup must NOT collapse this.
       const store = useHistoryStore();
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -435,8 +508,6 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
       ];
       await store.captureBaseline();
 
-      // Real formatting (the <strong> tag) must NOT be collapsed to plain
-      // text — it represents a user-visible diff.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
         '<p>Hello <strong>world</strong></p>';
@@ -447,6 +518,104 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
       expect(store.entries.length).toBe(2);
     });
 
+    // BP-5506 follow-up: TipTap re-emits a whole-content <strong>/<em>/<u>/<s>
+    // wrapper on first hydration to mirror the textStyle's fontWeight /
+    // fontStyle / textDecoration. The whole-content case is hydration noise
+    // (textStyle already encodes it), so it must dedup. The earlier RTE
+    // canonicalizer rejected anything containing `<` or `>` inside the inner
+    // text, so this case slipped through and produced phantom undo entries
+    // when the user clicked any content section that had bolded text.
+    it('treats whole-content <strong>/<em>/<u>/<s> hydration wrappers as a no-op', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [
+            {
+              type: 'shapes-section',
+              textItems: [
+                { text: 'This test is for text' },
+                { text: 'Italic line' },
+                { text: 'Underline line' },
+                { text: 'Strikethrough line' },
+                { text: 'Bold italic combo' },
+              ],
+            },
+          ],
+        },
+      ];
+      await store.captureBaseline();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const items = (mockMakerStore.brandPageData as any).pages[0].contents[0]
+        .textItems;
+
+      // Each item gets hydrated to its TipTap default-shape with a
+      // whole-content format tag mirroring the textStyle.
+      items[0].text =
+        '<p style="text-align: left;"><span style="font-family: Lemonada; font-size: 1.875em;"><strong>This test is for text</strong></span></p>';
+      items[1].text =
+        '<p><span style="font-family: Lato;"><em>Italic line</em></span></p>';
+      items[2].text = '<p><u>Underline line</u></p>';
+      items[3].text = '<p><s>Strikethrough line</s></p>';
+      items[4].text = '<p><em><strong>Bold italic combo</strong></em></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('noop');
+      expect(store.entries.length).toBe(1);
+    });
+
+    // Anything beyond the hydration whitelist must NOT be collapsed.
+    // <a> is the canonical case — a TipTap-rendered link is real authoring
+    // intent and must survive dedup.
+    it('still commits when RTE content adds a link (real authoring intent)', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [{ type: 'banner', title: 'click here' }],
+        },
+      ];
+      await store.captureBaseline();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
+        '<p>click <a href="https://example.com">here</a></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('committed');
+      expect(store.entries.length).toBe(2);
+    });
+
+    // A <span> carrying a style property outside the hydration whitelist
+    // (e.g. `text-shadow`, `text-transform`) is a real edit. TipTap's
+    // hydration span only emits `font-family / font-size / letter-spacing /
+    // line-height / color / background-color`.
+    it('still commits when RTE content adds a non-hydration style property', async () => {
+      const store = useHistoryStore();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages = [
+        {
+          contents: [{ type: 'banner', title: 'shadowed' }],
+        },
+      ];
+      await store.captureBaseline();
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
+        '<p><span style="text-shadow: 1px 1px 2px black;">shadowed</span></p>';
+
+      const result = store.capture({ source: 'manual_edit', actor: 'user' });
+
+      expect(result).toBe('committed');
+      expect(store.entries.length).toBe(2);
+    });
+
     it('treats canvas section-click cascade as a no-op (BP-5506 repro)', async () => {
       // Captured live from UAT: clicking any section on the canvas mounts
       // every RTE editor on the page at once + resolves textStyleType for

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

@@ -139,6 +139,10 @@ export const useHistoryStore = defineStore('history', () => {
    *     (e.g. `""` → `<p style="text-align: center;"></p>`).
    *   - TipTap RTE writing back its default-style hydration on first mount
    *     (e.g. plain `"Hello"` → `<p style="..."><span style="..."><mark ...>Hello</mark></span></p>`).
+   *   - TipTap re-emitting whole-content `<strong>`/`<em>`/`<u>`/`<s>` tags
+   *     to mirror the resolved `textStyle.fontWeight / fontStyle /
+   *     textDecoration` (e.g. plain `"text"` →
+   *     `<p>...<span>...<strong>text</strong></span></p>`).
    *   - Lazy hydration of `*Style` objects when a content settings panel —
    *     or section selection on the canvas — resolves `textStyleType` and
    *     writes the full resolved style (fontFamily, fontSize, color,
@@ -146,43 +150,223 @@ export const useHistoryStore = defineStore('history', () => {
    *     onto the model. The `textStyleType` itself is the authoring
    *     intent; the resolved keys are just cached values.
    *   - `isModifiedAfterTemplateApplied` flipping on first edit gesture.
+   *   - `logoImageBase64Url` — the rendered logo PNG. Per-property logo
+   *     edits author through `editableLogoStore.logoEdits` (not in
+   *     `brandPageData`), so an undo would revert the canvas image but
+   *     leave the sidebar fields showing the user's typed value. Logo
+   *     property edits are excluded from V1 undo scope; BYO-upload undo
+   *     still works because that diff lives in `logoImage.logoDraftToken`.
+   *
+   * RTE strings are canonicalized by parsing the HTML with DOMParser and
+   * walking the tree; only attributeless format wrappers (and a tightly
+   * scoped set of hydration styles on `<p>` / `<span>` / `<mark>`) are
+   * collapsed. Real authoring intent (links, custom colors, partial-text
+   * formatting like `Hello <strong>world</strong>`) survives the walk
+   * because at least one node falls outside the hydration whitelist,
+   * and the walker bails to "preserve original" the moment that happens.
    *
    * Used ONLY for dedup comparison. Stored snapshots remain unchanged so
    * `applyHistorySnapshot` always sees the real state.
    */
+  // Tags TipTap re-emits purely to mirror the resolved textStyle on first
+  // hydration. None carry user authoring intent on their own when they are
+  // the sole element-child wrapping the entire content:
+  //   - <p>:    only its `text-align` style is meaningful, and that's already
+  //             captured in `textStyle.textAlign`.
+  //   - <span>: TipTap wraps content in a span with `font-family`, `font-size`,
+  //             `color`, `letter-spacing`, `line-height` resolved from the
+  //             textStyle. The textStyle object on the same content is the
+  //             authoritative source.
+  //   - <mark>: TipTap's highlight extension default — collapses regardless
+  //             of `data-color` / `style` attrs, mirroring the original
+  //             regex's behavior on a hydrated highlight.
+  //   - <strong>/<em>/<u>/<s>: attributeless tags that mirror
+  //             `fontWeight: bold` / `fontStyle: italic` / `textDecoration:
+  //             underline / line-through`. ONLY recognized as hydration when
+  //             they are the sole child of their parent — partial-content
+  //             usage like `Hello <strong>world</strong>` is a real edit.
+  // Anything else (`<a>`, `<br>`, `<span style="color: red">`, attributes on
+  // <strong>/<em>, etc.) is preserved as a real diff.
+  const STRUCTURAL_HYDRATION_TAGS = new Set(['P', 'SPAN', 'MARK']);
+  const FORMAT_HYDRATION_TAGS = new Set(['STRONG', 'EM', 'U', 'S']);
+
+  // Default style properties TipTap emits on a hydration <span> /
+  // <mark>. The textStyle resolver writes all of these onto the live
+  // model, so when TipTap re-emits them as inline style on its
+  // hydration span/mark there is no user-visible delta.
+  // Anything outside this whitelist (e.g. `text-decoration` mid-content,
+  // `text-shadow`, `text-transform`) is treated as a real edit.
+  const HYDRATION_INLINE_STYLE_PROPS = new Set([
+    'font-family',
+    'font-size',
+    'letter-spacing',
+    'line-height',
+    'color',
+    'background-color',
+  ]);
+
   // 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>$/;
-
-  // TipTap's default-hydration shape: a single <p> (with optional align
-  // attr) containing the original plain text, optionally wrapped in
-  // default-styled <span> (font-family / font-size / color) and/or
-  // <mark> (highlight) tags. The inner capture intentionally rejects any
-  // string that itself contains `<` or `>` so that real formatting tags
-  // — `<strong>`, `<em>`, `<a>`, nested spans with non-default styles —
-  // are preserved as a real diff rather than collapsed.
-  const RTE_DEFAULT_HYDRATION =
-    /^<p(\s[^>]*)?>(<span(\s[^>]*)?>)?(<mark(\s[^>]*)?>)?([^<>]*)(<\/mark>)?(<\/span>)?<\/p>$/;
-
   function isEmptyRteHtml(value: unknown): boolean {
-    return typeof value === 'string' && EMPTY_RTE_HTML.test(value);
+    if (typeof value !== 'string') return false;
+
+    return /^<p(\s[^>]*)?>(<br\s*\/?>)?<\/p>$/.test(value);
+  }
+
+  function isHydrationOnlyAttributes(el: Element): boolean {
+    // Format tags (<strong>/<em>/<u>/<s>) must be attributeless. Anything
+    // with class/style/data-*/etc. is a real edit.
+    if (FORMAT_HYDRATION_TAGS.has(el.tagName))
+      return el.attributes.length === 0;
+
+    for (const attr of Array.from(el.attributes)) {
+      // <mark> may carry a `data-color` attr (TipTap highlight extension's
+      // default-and-resolved value). The accompanying `style` is checked
+      // against the same hydration-prop whitelist as <span>.
+      if (
+        el.tagName === 'MARK' &&
+        (attr.name === 'data-color' || attr.name === 'style')
+      ) {
+        if (attr.name === 'data-color') continue;
+      } else if (attr.name !== 'style') {
+        return false;
+      }
+
+      const decls = attr.value
+        .split(';')
+        .map((d) => d.trim())
+        .filter(Boolean);
+
+      if (el.tagName === 'P') {
+        for (const decl of decls) {
+          const [prop] = decl.split(':').map((s) => s.trim());
+
+          if (prop !== 'text-align') return false;
+        }
+      } else if (el.tagName === 'SPAN' || el.tagName === 'MARK') {
+        for (const decl of decls) {
+          const [prop, value] = decl.split(':').map((s) => s.trim());
+
+          // Allow `color: inherit` on <mark> (TipTap stamps it on the
+          // default highlight to inherit the span's color). Otherwise
+          // require the prop to be in the hydration whitelist.
+          if (
+            el.tagName === 'MARK' &&
+            prop === 'color' &&
+            value === 'inherit'
+          ) {
+            continue;
+          }
+
+          if (!HYDRATION_INLINE_STYLE_PROPS.has(prop)) return false;
+        }
+      } else {
+        return false;
+      }
+    }
+
+    return true;
   }
 
   /**
-   * If `value` is TipTap's default-hydration wrapper around a plain text
-   * (no inline formatting tags), return the bare inner text. Otherwise
-   * return the original string. This collapses the BP-5506 phantom where
-   * opening a content sidebar mounts every RTE editor at once and writes
-   * back wrapped HTML with no user-visible delta.
+   * Walk a parsed HTML node tree. Return the joined text content if every
+   * descendant is hydration noise; return null if any node carries real
+   * authoring intent (links, partial formatting, custom styles, etc.).
+   *
+   * `isFormatTag` differs in how it's allowed to appear: a structural tag
+   * (P/SPAN/MARK) can have siblings; a format tag (STRONG/EM/U/S) is only
+   * allowed when it's the SOLE child of its parent. The caller enforces
+   * that at the iteration site.
+   */
+  function extractCanonicalText(node: Node): string | null {
+    if (node.nodeType === 3 /* TEXT_NODE */) return node.textContent ?? '';
+
+    if (node.nodeType !== 1 /* ELEMENT_NODE */) {
+      // Comments, CDATA, etc. — treat as opaque (preserve original).
+      return null;
+    }
+
+    const el = node as Element;
+    const isStructural = STRUCTURAL_HYDRATION_TAGS.has(el.tagName);
+    const isFormat = FORMAT_HYDRATION_TAGS.has(el.tagName);
+
+    if (!isStructural && !isFormat) return null;
+
+    if (!isHydrationOnlyAttributes(el)) return null;
+
+    const children = Array.from(el.childNodes);
+    let out = '';
+
+    for (const child of children) {
+      // Format tags only count as hydration when they wrap the ENTIRE
+      // content of their parent. If a <strong>/<em>/<u>/<s> appears
+      // alongside any sibling (text or element), it's partial-content
+      // formatting — a real edit that can't be expressed via textStyle —
+      // so bail.
+      if (
+        child.nodeType === 1 &&
+        FORMAT_HYDRATION_TAGS.has((child as Element).tagName) &&
+        children.length > 1
+      ) {
+        return null;
+      }
+
+      const part = extractCanonicalText(child);
+
+      if (part === null) return null;
+
+      out += part;
+    }
+
+    return out;
+  }
+
+  /**
+   * If `value` is TipTap's default-hydration wrapper around plain text
+   * (only hydration-noise elements wrapping bare text), return that bare
+   * text. Otherwise return the original string unchanged.
+   *
+   * This collapses the BP-5506 phantom where opening a content sidebar —
+   * or selecting a section on the canvas — mounts every RTE editor at
+   * once and writes back wrapped HTML with no user-visible delta.
    */
   function canonicalizeRteString(value: string): string {
-    if (EMPTY_RTE_HTML.test(value)) return '';
+    // Cheap exit: no tags at all.
+    if (!value.includes('<')) return value;
+
+    if (isEmptyRteHtml(value)) return '';
 
-    const match = value.match(RTE_DEFAULT_HYDRATION);
+    // DOMParser is unavailable in some non-browser test environments;
+    // fall back to leaving the value as-is so the caller produces a
+    // real diff (i.e. fail open — never falsely collapse).
+    if (typeof DOMParser === 'undefined') return value;
 
-    if (!match) return value;
+    let doc: Document;
 
-    return match[6] ?? '';
+    try {
+      doc = new DOMParser().parseFromString(
+        `<div id="__rte_root__">${value}</div>`,
+        'text/html',
+      );
+    } catch {
+      return value;
+    }
+
+    const root = doc.getElementById('__rte_root__');
+
+    if (!root) return value;
+
+    let out = '';
+
+    for (const child of Array.from(root.childNodes)) {
+      const part = extractCanonicalText(child);
+
+      if (part === null) return value;
+
+      out += part;
+    }
+
+    return out;
   }
 
   function normalizeNode(node: unknown): unknown {
@@ -200,6 +384,17 @@ export const useHistoryStore = defineStore('history', () => {
       // represent a user-visible change.
       if (key === 'isModifiedAfterTemplateApplied') continue;
 
+      // Strip the rendered logo PNG. Logo property edits (text, color,
+      // font, outline, shadow) authored via the Logo sidebar live in
+      // `editableLogoStore.logoEdits` — which is NOT in `brandPageData`,
+      // so an undo would revert this base64 image on the canvas without
+      // touching the sidebar fields. Per V1 scope, logo property edits
+      // are non-undoable (parallels the PRD's admin-logo exclusion);
+      // BYO-upload undo still works because that change shows up in
+      // `logoImage.logoDraftToken`, not here. Stripping the field keeps
+      // those isolated render-output diffs out of the stack entirely.
+      if (key === 'logoImageBase64Url') continue;
+
       // Collapse RTE default-hydration wrappers down to the plain text
       // they wrap. Plain "X" and `<p style="..."><span ...><mark ...>X
       // </mark></span></p>` share the same canonical "X" so a sidebar