[pull] main from TryGhost:main

.gitignore

@@ -204,6 +204,7 @@ yalc.lock
 # e2e test suite
 /e2e/test-results
 /e2e/playwright-report
+/e2e/blob-report
 /e2e/build
 /e2e/playwright
 /e2e/data

apps/admin-x-framework/src/api/automated-emails.ts

@@ -28,6 +28,16 @@ export interface AutomatedEmailsVerifyResponseType extends AutomatedEmailsRespon
     meta?: Meta & {email_verified: string};
 }
 
+export type AutomatedEmailPreview = {
+    html: string;
+    plaintext: string;
+    subject: string;
+}
+
+export interface AutomatedEmailsPreviewResponseType {
+    automated_emails: AutomatedEmailPreview[];
+}
+
 const dataType = 'AutomatedEmailsResponseType';
 
 export const useBrowseAutomatedEmails = createQuery<AutomatedEmailsResponseType>({
@@ -90,3 +100,9 @@ export const useSendTestWelcomeEmail = createMutation<unknown, {id: string; emai
     path: ({id}) => `/automated_emails/${id}/test/`,
     body: ({email, subject, lexical}) => ({email, subject, lexical})
 });
+
+export const usePreviewWelcomeEmail = createMutation<AutomatedEmailsPreviewResponseType, {id: string; subject: string; lexical: string}>({
+    method: 'POST',
+    path: ({id}) => `/automated_emails/${id}/preview/`,
+    body: ({subject, lexical}) => ({subject, lexical})
+});

apps/admin-x-settings/src/components/settings/membership/member-emails/member-email-editor.tsx

@@ -27,7 +27,7 @@ const baseEditorStyles = cn(
     // Dark mode
     'dark:text-white dark:selection:bg-[rgba(88,101,116,0.99)]',
     // Placeholder styling
-    '[&_.koenig-lexical-editor-input-placeholder]:font-sans! [&_.koenig-lexical-editor-input-placeholder]:text-xl [&_.koenig-lexical-editor-input-placeholder]:tracking-tight',
+    '[&_.koenig-lexical-editor-input-placeholder]:font-sans! [&_.koenig-lexical-editor-input-placeholder]:text-[1.6rem] [&_.koenig-lexical-editor-input-placeholder]:tracking-tight',
     // Headings dark mode
     '[&_:is(h2,h3)]:dark:text-white',
     // Inputs
@@ -37,7 +37,7 @@ const baseEditorStyles = cn(
     // Settings panel
     '[&_[data-kg-card-selected]]:isolate',
     // Content typography
-    '[&_:is(p,blockquote,aside,ul,ol)]:font-sans! [&_:is(p,blockquote,aside,ul,ol)]:text-xl [&_:is(p,blockquote,aside,ul,ol)]:tracking-tight',
+    '[&_:is(p,blockquote,aside,ul,ol)]:tracking-tight',
     // Reset content typography inside card captions to match Koenig's caption styles
     '[&_figcaption_:is(p,blockquote,aside,ul,ol)]:text-[1.4rem] [&_figcaption_:is(p,blockquote,aside,ul,ol)]:tracking-[.025em]',
     '[&_figcaption_p]:mb-0',
@@ -49,7 +49,7 @@ const baseEditorStyles = cn(
     // Keep settings panel copy compact
     '[&_[data-kg-settings-panel]_p]:!mb-0',
     // Nested-editor (callout, etc.) fixes: align placeholder with text
-    '[&_.not-kg-prose>div]:font-sans! [&_.not-kg-prose>div]:tracking-tight! [&_.not-kg-prose>div]:text-xl! [&_.not-kg-prose>div]:leading-[1.6]!',
+    '[&_.not-kg-prose>div]:font-sans! [&_.not-kg-prose>div]:tracking-tight! [&_.not-kg-prose>div]:text-[1.6rem]! [&_.not-kg-prose>div]:leading-[1.6]!',
     '[&_.kg-inherit-styles_p]:mb-0!',
     '[&_.kg-inherit-styles]:pt-[3px]!',
     // CTA card: keep sponsor label at its intended 12.5px size

apps/admin-x-settings/src/components/settings/membership/member-emails/use-welcome-email-preview.ts

@@ -0,0 +1,140 @@
+import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {useRef, useState} from 'react';
+
+import {type WelcomeEmailDraft, getWelcomeEmailValidationErrors} from './welcome-email-validation';
+
+export type WelcomeEmailPreview = {
+    html: string;
+    plaintext: string;
+    subject: string;
+};
+
+export type WelcomeEmailPreviewResponse = {
+    automated_emails?: WelcomeEmailPreview[];
+};
+
+export type WelcomeEmailPreviewState =
+    | {status: 'idle'}
+    | {status: 'loading'}
+    | {status: 'success'; preview: WelcomeEmailPreview}
+    | {status: 'error'; message: string}
+    | {status: 'invalid'; message: string};
+
+export type WelcomeEmailPreviewFrameState =
+    | {status: 'loading'}
+    | {status: 'success'; html: string}
+    | {status: 'error' | 'invalid'; message: string};
+
+const preparePreviewHtml = (html: string) => {
+    if (typeof DOMParser === 'undefined') {
+        return html;
+    }
+
+    const parser = new DOMParser();
+    const parsed = parser.parseFromString(html, 'text/html');
+
+    parsed.querySelectorAll<HTMLAnchorElement>('a[href]').forEach((link) => {
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+    });
+
+    return `<!doctype html>${parsed.documentElement.outerHTML}`;
+};
+
+const getPreviewErrorMessage = (error: unknown) => {
+    const fallbackMessage = 'Failed to render preview';
+
+    if (error instanceof JSONError && error.data?.errors?.[0]) {
+        return error.data.errors[0].context || error.data.errors[0].message || fallbackMessage;
+    }
+
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+
+    return fallbackMessage;
+};
+
+export const useWelcomeEmailPreview = ({automatedEmailId, previewWelcomeEmail, setErrors}: {
+    automatedEmailId: string;
+    previewWelcomeEmail: (payload: WelcomeEmailDraft & {id: string}) => Promise<WelcomeEmailPreviewResponse>;
+    setErrors: (errors: Record<string, string>) => void;
+}) => {
+    const [previewState, setPreviewState] = useState<WelcomeEmailPreviewState>({status: 'idle'});
+    const previewRequestIdRef = useRef(0);
+
+    const exitPreview = () => {
+        previewRequestIdRef.current += 1;
+        setPreviewState({status: 'idle'});
+    };
+
+    const enterPreview = async (draft: WelcomeEmailDraft) => {
+        const requestId = previewRequestIdRef.current + 1;
+        previewRequestIdRef.current = requestId;
+
+        const validationErrors = getWelcomeEmailValidationErrors(draft);
+        setErrors(validationErrors);
+
+        const hasValidationErrors = Boolean(validationErrors.subject || validationErrors.lexical);
+        if (hasValidationErrors) {
+            setPreviewState({
+                status: 'invalid',
+                message: validationErrors.subject || validationErrors.lexical
+            });
+            return;
+        }
+
+        setPreviewState({status: 'loading'});
+
+        try {
+            // Only the latest preview request is allowed to update preview state.
+            const response = await previewWelcomeEmail({
+                id: automatedEmailId,
+                subject: draft.subject,
+                lexical: draft.lexical
+            });
+
+            if (previewRequestIdRef.current !== requestId) {
+                return;
+            }
+
+            const preview = response.automated_emails?.[0];
+
+            if (!preview?.html || !preview?.plaintext || !preview?.subject) {
+                throw new Error('Preview response was incomplete');
+            }
+
+            setPreviewState({
+                status: 'success',
+                preview: {
+                    ...preview,
+                    html: preparePreviewHtml(preview.html)
+                }
+            });
+        } catch (error) {
+            if (previewRequestIdRef.current !== requestId) {
+                return;
+            }
+
+            setPreviewState({
+                status: 'error',
+                message: getPreviewErrorMessage(error)
+            });
+        }
+    };
+
+    let previewFrameState: WelcomeEmailPreviewFrameState = {status: 'loading'};
+
+    if (previewState.status === 'success') {
+        previewFrameState = {status: 'success', html: previewState.preview.html};
+    } else if (previewState.status === 'error' || previewState.status === 'invalid') {
+        previewFrameState = {status: previewState.status, message: previewState.message};
+    }
+
+    return {
+        previewFrameState,
+        previewState,
+        enterPreview,
+        exitPreview
+    };
+};