@designcrowd/library.brand-page 5.18.1-undo-32 → 5.18.1-undo-33

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

@@ -187,8 +187,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

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

@@ -55,14 +55,7 @@ export default defineComponent({
     },
     mounted() {
         if (this.canUseRichTextEditor) {
-            // `switchAllContentToRTE` walks every content item on every page
-            // and rewraps plain-text titles/paragraphs in TipTap HTML so they
-            // render through the inline RTE. That's a hydration write — it
-            // happens whenever the Content sidebar tab mounts (incl. when the
-            // user clicks the header in the canvas) and produces no
-            // user-visible change. Arm the merge flag so the watcher folds
-            // the resulting flush into the current head entry instead of
-            // pushing a phantom undo step.
+            // RTE rewrap on tab mount — fold into current head.
             this.historyStore.mergeNextMutation();
             switchAllContentToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore);
         }

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -184,8 +184,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.js

@@ -102,14 +102,8 @@ export default defineComponent({
                 name: this.name,
                 value,
             };
-            // Stripe Connect linkage hydration runs the first time the user
-            // opens a Tipping/Request Payment/Shop section sidebar. The emit
-            // below mutates `brandPageData[*].paymentConfig` from undefined to
-            // the live `shopConfigStore.paymentConfig` — no user authoring
-            // intent. Arm the merge flag so the watcher's flush folds this
-            // into the current head instead of pushing a phantom undo entry
-            // that would, when undone, surface the "Please enable a payment
-            // provider" warning.
+            // Lazy paymentConfig hydration — fold into current head instead
+            // of pushing a phantom entry.
             this.historyStore.mergeNextMutation();
             this.$emit('update:modelValue', payload);
         }

package/lib/src/shared/content-settings/components/radio-field/RadioField.mixin.d.ts

@@ -110,9 +110,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     placeholder: string;
     variant: string;
     value: string | boolean | Record<string, any>;
-    isRequired: boolean;
     multiple: boolean;
     optionsConvertor: OptionsConvertor<unknown>;
+    isRequired: boolean;
 }, {}, {
     FieldSubHeader: import("vue").DefineComponent<{}, {}, any>;
     Button: any;

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -184,8 +184,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -184,8 +184,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -198,8 +198,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -191,8 +191,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -187,8 +187,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     minLength: number;
     maxLength: number;
     value: string | false | undefined;
-    isRequired: boolean;
     attrs: Record<string, any>;
+    isRequired: boolean;
     isToggled: boolean;
     readOnly: boolean;
     contentType: string;

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -186,25 +186,7 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     getEditableLogoVariationByVariationId(id: number): any;
     getEditableLogoVariationByBase64(base64: string): any;
     updateEditableLogoImageUrlAsync(defaultPrimaryText?: string, overrideLogoVariation?: number | undefined, layout?: string): Promise<void>;
-    /**
-     * Stamp `editableLogoVariations[*].base64` across every consumer in
-     * `brandPageData`: header/footer logo sections (desktop + mobile)
-     * and every `LogoContent` block on every page. Used by the live edit
-     * path after a fabric-render POST AND by the undo/redo BYO branch
-     * after `restoreVariationsForDraftToken` has rehydrated the cache.
-     *
-     * The history store strips `logoImageBase64Url` from snapshots to
-     * keep them under the 25 MB per-entry cap, so something has to
-     * write the base64 back into `brandPageData` after restore — for
-     * designed logos it's the awaited fabric-render call; for BYO it's
-     * this method.
-     */
     stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number): void;
-    /**
-     * Restore the variations grid for `logoDraftToken` from the per-token
-     * cache. Called by `_syncLogoSettingsFromSnapshot` during undo/redo.
-     * Returns true on cache hit.
-     */
     restoreVariationsForDraftToken(logoDraftToken: string): boolean;
     updateMetadataAsync(defaultPrimaryText?: string, resetLogoTemplateMetadata?: boolean, layout?: string): Promise<void>;
     updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string, layout?: string): Promise<ModifyLogoDataResponse | null>;

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -219,30 +219,15 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             await Promise.all(tasks);
             this.stampLogoBase64IntoBrandPageData(overrideLogoVariation);
-            // Stash the freshly rendered variation set under the active draft
-            // token so undo can restore it later without re-rendering. This is
-            // the only place in production that meaningfully populates
-            // `editableLogoVariations` (BYO upload + designed-logo setStateAsync
-            // both funnel here), so caching here keeps every distinct draft's
-            // grid available for the lifetime of the session.
+            // Cache per draft token so BYO undo can restore without re-rendering.
             if (this.logoDraftToken) {
                 this.variationsByDraftToken[this.logoDraftToken] =
                     this.editableLogoVariations.map((v) => ({ ...v }));
             }
         },
-        /**
-         * Stamp `editableLogoVariations[*].base64` across every consumer in
-         * `brandPageData`: header/footer logo sections (desktop + mobile)
-         * and every `LogoContent` block on every page. Used by the live edit
-         * path after a fabric-render POST AND by the undo/redo BYO branch
-         * after `restoreVariationsForDraftToken` has rehydrated the cache.
-         *
-         * The history store strips `logoImageBase64Url` from snapshots to
-         * keep them under the 25 MB per-entry cap, so something has to
-         * write the base64 back into `brandPageData` after restore — for
-         * designed logos it's the awaited fabric-render call; for BYO it's
-         * this method.
-         */
+        // Stamp editableLogoVariations[*].base64 across header/footer + every
+        // LogoContent. Called by the live edit path post-render, and by
+        // undo/redo to repopulate the stripped logoImageBase64Url fields.
         stampLogoBase64IntoBrandPageData(overrideLogoVariation) {
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
@@ -270,11 +255,8 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 });
             });
         },
-        /**
-         * Restore the variations grid for `logoDraftToken` from the per-token
-         * cache. Called by `_syncLogoSettingsFromSnapshot` during undo/redo.
-         * Returns true on cache hit.
-         */
+        // Restore variations grid for a draft token from the per-token cache.
+        // Returns true on cache hit.
         restoreVariationsForDraftToken(logoDraftToken) {
             const cached = this.variationsByDraftToken[logoDraftToken];
             if (!cached)

package/package.json

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

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -211,17 +211,8 @@ export const useRichTextEditor = (
 ): UseRichTextEditorReturn => {
   const historyStore = useHistoryStore();
 
-  // TipTap rehydrates `model.value` on first mount and writes the
-  // canonical HTML back via `editor.on('update', ...)` — even when the
-  // user-visible text is unchanged (it normalises whitespace, wraps plain
-  // text in `<p>`, expands `%0A` to `<br>`, mirrors the resolved textStyle
-  // as inline `<strong>`/`<span style="...">`/`<mark>` tags, etc). Each of
-  // those rehydration writes mutates `brandPageData` and would otherwise
-  // surface as a phantom undo entry the first time the user opens a
-  // sidebar or clicks into a section. Arming the merge flag folds the
-  // resulting watcher flush into the current head instead of pushing.
-  // Idempotent — every editor on the page mounting at once collapses
-  // into the same merge.
+  // TipTap rehydrates and writes back canonical HTML on mount — fold
+  // that into the current head instead of pushing a phantom entry.
   historyStore.mergeNextMutation();
 
   const editor = new Editor({

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

@@ -924,23 +924,15 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const logoStore = useLogoStore();
       const containerStore = useBrandPageContainerStore();
 
-      // Snapshot the pre-restore logo identity BEFORE we $patch logoEdits.
-      // Used below to short-circuit the fabric-render call when the entry
-      // we're restoring has the same logoEdits + draft token as the live
-      // state — i.e. only non-logo state changed between the two entries.
+      // Pre-restore logo identity, used to short-circuit the
+      // fabric-render call when only non-logo state changed.
       const prevLogoEditsStr = JSON.stringify(
         toRaw(editableLogoStore.logoEdits),
       );
       const prevDraftToken = editableLogoStore.logoDraftToken;
 
-      // Restore `editableLogoStore.logoEdits` first — sidecar to `brandPageData`,
-      // captured per-entry. Wholesale-replace via `$patch` so a previous
-      // entry's textObjects/colors don't leak through (e.g. switching
-      // template A→B then undoing A's restored object set must NOT contain
-      // B's textObject ids). Failing parse is non-fatal; the logo tab will
-      // just keep showing whatever logoEdits state was already loaded —
-      // canvas + saved metadata still come from `brandPageData` + the
-      // save-time `updateMetadataAsync` round-trip.
+      // Wholesale-replace via $patch so prior textObjects/colors don't
+      // leak across template switches.
       if (logoEditsStr) {
         try {
           const parsed = JSON.parse(logoEditsStr);
@@ -973,12 +965,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       if (!draftToken) return;
 
-      // Re-derive `enableEditMode` and the active template asset from the
-      // logo-store's draft registry. Drafts are append-only for the session,
-      // and BYO upload stamps `templateAsset` onto the registered draft when
-      // it lands — so the registered draft is enough to fully restore the
-      // sidebar's design/upload chooser without storing anything inside
-      // each history entry.
+      // Re-derive enableEditMode + templateAsset from the draft registry
+      // (append-only for the session) instead of stashing on every entry.
       const draft = logoStore.getLogoDraftAssetByToken(draftToken);
 
       if (draft) {
@@ -991,12 +979,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       editableLogoStore.setLogoDraftToken(draftToken);
 
-      // Did the logo identity actually change between the two entries?
-      // If both `logoEdits` and the draft token match what was already
-      // live, the cached `editableLogoVariations` is still the right
-      // render and we just need to stamp it back into `brandPageData`
-      // (history-store strips `logoImageBase64Url` from snapshots, so
-      // the page-level base64 fields are now empty).
+      // No logo change → cache is still correct; just stamp base64 back
+      // (snapshot doesn't carry logoImageBase64Url).
       const logoUnchanged =
         prevDraftToken === draftToken &&
         (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
@@ -1010,13 +994,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const isByo = !!draft?.isByo;
 
       if (isByo) {
-        // BYO uploads register a fresh `logoDraftToken` per upload, so
-        // `variationsByDraftToken` keyed off that token always matches the
-        // base64 the user saw at capture. No re-render — the uploaded
-        // image bytes are the source of truth and there's nothing for
-        // fabric-render to derive. After restoring the variations cache,
-        // stamp the base64 back across header/footer/per-page logo
-        // content; the snapshot itself doesn't carry `logoImageBase64Url`.
+        // BYO mints a fresh draftToken per upload so the per-token
+        // cache always matches; no re-render needed.
         if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
           editableLogoStore.stampLogoBase64IntoBrandPageData();
         }
@@ -1024,22 +1003,11 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         return;
       }
 
-      // Designed (non-BYO) logo whose form state actually differs from
-      // the live state. The draft token is reused across every form-field
-      // edit, so the per-token cache only holds the latest render —
-      // re-issue the same fabric-render call the live edit path runs.
-      // `updateEditableLogoImageUrlAsync` POSTs the freshly-restored
-      // `logoEdits`, writes the returned base64 across every header/footer
-      // + per-page logo content + `editableLogoVariations`.
-      //
-      // Awaited (not fire-and-forget): two undos in quick succession would
-      // otherwise kick off two parallel render bursts whose `Promise.all`
-      // tasks interleave, leaving each variation showing whichever request
-      // happened to win the race rather than the variation that belongs
-      // to the snapshot the user landed on. Awaiting also keeps the call
-      // inside the `applyHistorySnapshot`/`isApplyingSnapshot` window, so
-      // the post-render writeback is naturally suppressed by the existing
-      // watcher guard — no `mergeNextMutation()` needed.
+      // Designed: draft token is reused across edits, so the cache
+      // only holds the latest render. Re-issue fabric-render — same
+      // call as the live edit path. Awaited so concurrent undos
+      // serialize and the call sits inside the isApplyingSnapshot
+      // window (watcher guard suppresses the writeback).
       if (
         containerStore.isPrePurchase &&
         logoEditsStr &&