@designcrowd/library.brand-page 5.18.4 → 5.18.5

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -112,16 +112,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("../../../brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("../../../brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../brand-page").BrandPageModel): void;
         export(): import("../../../brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -432,16 +432,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.js

@@ -10,6 +10,8 @@ import { usePageNavigationStore } from '../../../shared/page-navigation/store/pa
 import { navigateToPageByPageId } from '../../routing';
 import { useSnapshotStore, useAiWebsiteBuilderThreadStore, useAiCheckpointStore, useBrandPageContainerStore, useUiStore, } from '../../stores';
 import { useBrandPageMakerStore } from '../../stores';
+import { useHistoryStore } from '../../stores/history/history-store';
+import { useUndoRedoFlag } from '../useUndoRedoFlag';
 import { useBrandPageMakerUserStore } from '../../stores/user/user-store';
 import { useAiMetadataBuilder } from './useAiMetadataBuilder';
 import { pickErrorMessage, pickWsErrorMessage, buildSubmitErrorReport, } from './aiErrorCopy';
@@ -23,6 +25,8 @@ export function useAiWebsiteBuilderChat() {
     const aiThreadStore = useAiWebsiteBuilderThreadStore();
     const snapshotStore = useSnapshotStore();
     const brandPageMakerStore = useBrandPageMakerStore();
+    const historyStore = useHistoryStore();
+    const undoRedoEnabled = useUndoRedoFlag();
     const containerStore = useBrandPageContainerStore();
     const userStore = useBrandPageMakerUserStore();
     const uiStore = useUiStore();
@@ -298,6 +302,11 @@ export function useAiWebsiteBuilderChat() {
             navigateToPageByPageId(pageNavigationStore.activePageId);
         }
         await nextTick();
+        // One history entry per AI prompt (US-E1). `captureAiChangeset` cancels
+        // the auto-watcher's pending flush so the apply doesn't double-capture.
+        if (undoRedoEnabled.value) {
+            historyStore.captureAiChangeset();
+        }
         // Re-capture snapshot so subsequent messages reflect the updated page
         await snapshotStore.refreshSnapshotAsync();
         return {

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

@@ -21,6 +21,7 @@ import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRT
 import { HYPERLINK_TYPE, } from '@brand-page';
 import { letterSpacingValueConvertor, colorConvertor, backgroundColorConvertor, } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
 import { AutoLink } from './extensions/AutoLink';
@@ -72,6 +73,10 @@ export const useExternalRichTextEditor = () => {
     };
 };
 export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen, selectedLinkTypeValue) => {
+    const historyStore = useHistoryStore();
+    // 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({
         content: model.value ?? '',
         editable: !props.readOnly,
@@ -229,7 +234,14 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         }
     });
     watch(() => model.value, (newValue) => {
-        if (updateRichTextEditor.value && editor.getHTML() !== newValue) {
+        // Re-seed the editor when the model has been mutated from outside
+        // (history undo/redo, template switch, reorder). `!editor.isFocused`
+        // distinguishes "external mutation" from "user is typing in me" — the
+        // latter would wipe the user's cursor if we called setContent.
+        // `updateRichTextEditor.value` is retained as an explicit override for
+        // callers (reorder) that need to force a re-seed while focused.
+        const isExternalMutation = updateRichTextEditor.value || !editor.isFocused;
+        if (isExternalMutation && editor.getHTML() !== newValue) {
             editor.commands.setContent(newValue, false);
             updateRichTextEditor.value = false;
             //text style type is not switching when reordering
@@ -256,6 +268,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         emit('update:modelValue', sanitizedData.sanitizedHtml);
     });
     editor.on('selectionUpdate', () => {
+        // Skip while a history snapshot is being applied — `setContent` fires
+        // selectionUpdate before the editor has fully rehydrated, which causes
+        // toolbar buttons (alignment, letter-spacing) to flash through bogus
+        // active states before settling. The editor emits a final selectionUpdate
+        // after apply completes, which lands the correct values (BP-5506).
+        if (historyStore.isApplyingSnapshot)
+            return;
         const textStyleAttributes = editor.getAttributes('textStyle');
         const highlightAttributes = editor.getAttributes('highlight');
         const focusedAlignment = editor.getAttributes(editor.state.selection.$anchor.node().type.name);

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -55,6 +55,10 @@ export declare const EVENTS: {
     WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP: string;
     WEBSITE_MAKER_GETTY_VIDEO: string;
     WEBSITE_MAKER_SHIPPING_TOGGLE: string;
+    WEBSITE_MAKER_UNDO: string;
+    WEBSITE_MAKER_REDO: string;
+    WEBSITE_MAKER_HISTORY_CAPPED: string;
+    WEBSITE_MAKER_HISTORY_OVERSIZED: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;
@@ -107,6 +111,22 @@ export declare const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS: {
 };
 declare const useEventTracker: () => {
     sendShippingToggleEvent: (isEnabled: boolean) => void;
+    sendUndoEvent: (props: {
+        entries_count: number;
+        actor: string | undefined;
+    }) => void;
+    sendRedoEvent: (props: {
+        entries_count: number;
+        actor: string | undefined;
+    }) => void;
+    sendHistoryCappedEvent: (props: {
+        entries_count: number;
+        size_bytes: number;
+    }) => void;
+    sendHistoryOversizedEvent: (props: {
+        attempted_bytes: number;
+        source: string;
+    }) => void;
     sendSaveContactEvent: () => void;
     sendStartForFreeEvent: () => void;
     sendFooterLinkClickEvent: (linkType: 'watermark_logo' | 'create_your_website') => void;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -36,6 +36,10 @@ export const EVENTS = {
     WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP: 'website_maker_digital_business_cards_hide_popup',
     WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
     WEBSITE_MAKER_SHIPPING_TOGGLE: 'website_maker_shipping_toggle',
+    WEBSITE_MAKER_UNDO: 'website_maker_undo',
+    WEBSITE_MAKER_REDO: 'website_maker_redo',
+    WEBSITE_MAKER_HISTORY_CAPPED: 'website_maker_history_capped',
+    WEBSITE_MAKER_HISTORY_OVERSIZED: 'website_maker_history_oversized',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',
@@ -321,6 +325,19 @@ const useEventTracker = () => {
                 is_enabled: isEnabled,
             });
         },
+        // Undo / Redo (BP-5506)
+        sendUndoEvent: (props) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_UNDO, props);
+        },
+        sendRedoEvent: (props) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_REDO, props);
+        },
+        sendHistoryCappedEvent: (props) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_CAPPED, props);
+        },
+        sendHistoryOversizedEvent: (props) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_OVERSIZED, props);
+        },
     };
 };
 export { useEventTracker };

package/lib/src/brand-page-maker/composables/useUndoRedoFlag.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef } from 'vue';
+/**
+ * Returns whether undo/redo is active for the current maker session. All
+ * three conditions must hold:
+ *
+ *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
+ *      the consumer (BrandCrowd.Net / web-renderer) via the
+ *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
+ *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
+ *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
+ *      only; brand-page (single-page profile) and brand-contact (vCard) are
+ *      out of scope.
+ *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      admin maker uses the same components but a different editing flow
+ *      (template authoring) where undo/redo is out of scope.
+ */
+export declare function useUndoRedoFlag(): ComputedRef<boolean>;

package/lib/src/brand-page-maker/composables/useUndoRedoFlag.js

@@ -0,0 +1,25 @@
+import { computed } from 'vue';
+import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
+/**
+ * Returns whether undo/redo is active for the current maker session. All
+ * three conditions must hold:
+ *
+ *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
+ *      the consumer (BrandCrowd.Net / web-renderer) via the
+ *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
+ *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
+ *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
+ *      only; brand-page (single-page profile) and brand-contact (vCard) are
+ *      out of scope.
+ *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      admin maker uses the same components but a different editing flow
+ *      (template authoring) where undo/redo is out of scope.
+ */
+export function useUndoRedoFlag() {
+    const userStore = useBrandPageMakerUserStore();
+    const brandPageMakerStore = useBrandPageMakerStore();
+    return computed(() => userStore.features.canUseUndoRedo &&
+        brandPageMakerStore.isBrandSite &&
+        !userStore.isAdmin);
+}

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

@@ -177,16 +177,55 @@ export declare const useBrandPageMakerStore: import("pinia").StoreDefinition<"br
     hideChangeTemplateConfirmModal(): void;
     onBackgroundChanged(): void;
     onChangeTemplateConfirmModalCancel(): void;
-    onChangeTemplateConfirmModalConfirm(): void;
+    onChangeTemplateConfirmModalConfirm(): Promise<void>;
     onContentChanged(): void;
     onStyleChanged(): void;
-    onTemplateSelected(payload: OnTemplateSelectedPayload): void;
+    onTemplateSelected(payload: OnTemplateSelectedPayload): Promise<void>;
     setSelectedTabName(payload: any): void;
     showNextNotificationMessage(): Promise<void>;
     updateContent<TContent extends Content, P extends {
         id: string;
         content: TContent;
     }>(payload: P): Promise<void>;
+    /**
+     * Restore every store that the `brandPageData` getter reads from, so undo
+     * and redo bring back the EXACT document state captured at snapshot time.
+     *
+     * `initialiseStoresByBrandPageModelAsync` is too narrow for undo/redo — it
+     * only rehydrates pages, sections, and nav structure, which is enough for
+     * the AI-apply path but leaves navigation styles, backgrounds, button/text/
+     * logo/gallery styles, shop config, and several own-store fields unchanged.
+     * This action mirrors the full hydration surface of `applySelectedTemplate`
+     * (minus the template-specific logo/personalisation logic) so a restore is
+     * a complete round-trip of what `brandPageData` returns.
+     *
+     * Called ONLY by history-store during undo/redo. The history store sets
+     * `isApplyingSnapshot=true` across this call to prevent the deep-watcher
+     * on `brandPageData` from re-capturing the restored state.
+     */
+    /**
+     * Force-commit a `template_switch` entry to the history store, if the
+     * history store has a baseline (which only happens when the undo/redo
+     * feature flag is on — see `BrandPageMaker.mixin.ts`).
+     */
+    _captureTemplateSwitchIfEnabled(): void;
+    applyHistorySnapshot(snapshot: BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+    _syncLogoSettingsFromSnapshot(snapshot: BrandPageModel, logoEditsStr?: string): Promise<void>;
+    /**
+     * Restore the active page after a history apply. The id passed in is
+     * already validated against the restored nav by the history store; if
+     * it's undefined (no entry walking back had a viable page), fall back
+     * to the first/default route so the URL, `routeStore.currentRoute.params`,
+     * `pageNavigation.activePageId`, and the page-tab highlight all line up.
+     *
+     * `setCurrentActivePage` is called explicitly in addition to
+     * `navigateToPageByPageId` because `navigateToPageByPageId` is a no-op
+     * when the router instance is undefined (e.g. SSR / unit tests), but the
+     * Pinia state must still be updated so the sidebar's `currentPage`
+     * getter returns the right page.
+     */
+    _navigateToActivePage(activePageId?: string): void;
+    _fallbackSidebarIfSelectedContentMissing(snapshot: BrandPageModel): void;
     export(): BrandPageModel;
     setBrandPageType({ brandPageType }: {
         brandPageType: BrandPageType;