Added the post preview components to the React editor

apps/admin/src/editor/preview/README.md

@@ -0,0 +1,39 @@
+# Post preview
+
+`<PostPreviewModal>` shows a post as its readers will get it: rendered by the site (Web) or rendered as the newsletter it would be sent as (Email). It is self-contained — the caller supplies the post's identity and preview URL, and the modal reads everything else (settings, tiers, newsletters, the current user, the email preview) from the Admin API.
+
+| Prop             | Meaning                                                                          |
+| ---------------- | -------------------------------------------------------------------------------- |
+| `open`           | Whether the modal is shown; `onOpenChange` reports closing                       |
+| `postId`         | Identifies the post for the email preview and test-send endpoints                |
+| `previewUrl`     | The post's public preview URL; empty until the post has a uuid                   |
+| `isPost`         | Pages have no email preview                                                      |
+| `newsletterSlug` | The post's own newsletter, preselected in the email preview                      |
+| `onBeforeOpen`   | Awaited before the preview renders, so the caller can save the draft it previews |
+
+The modal never writes to the post. `onBeforeOpen` exists because a draft must be persisted before the site or the email renderer can see the latest content; what that means — dirty checks, a save in flight — belongs to the caller.
+
+## Audience
+
+One audience drives both formats, held as a segment plus an optional tier slug and translated by `preview-url.ts`:
+
+| Segment     | Web query                               | Email params                            |
+| ----------- | --------------------------------------- | --------------------------------------- |
+| `anonymous` | `member_status=anonymous`               | not offered — email has no visitor      |
+| `free`      | `member_status=free`                    | `member_status=free`                    |
+| `paid`      | `member_status=paid`                    | `member_status=paid`                    |
+| `tier`      | `member_status=paid&member_tier=<slug>` | `member_status=paid&member_tier=<slug>` |
+
+The paid audiences appear only when paid members are enabled, and the tier audience only when the site has paid tiers. The default is a free member.
+
+## Email
+
+The Email tab is offered for posts only, when members are on, newsletters are not disabled in the editor settings, and the user is not a contributor.
+
+The rendered email arrives as a complete HTML document and is shown in a `srcdoc` iframe sandboxed without `allow-scripts` and without `allow-same-origin`, so it can neither run its own scripts nor reach the admin page. Scrollbar styling is concatenated into that document because the admin stylesheet does not apply inside it.
+
+Switching newsletters re-renders the preview against that newsletter, and the test send goes to exactly one address — the current user's, unless it is edited — for the audience currently selected.
+
+## Not here yet
+
+Known gaps, listed so they are not mistaken for decisions: the email subject is read-only (editing it would write to the post), there is no over-100kB "may get clipped" warning, an Escape pressed inside the site preview frame does not close the modal, an already-sent post is re-rendered by the preview endpoint rather than showing its stored email, and the sender address does not apply the managed-email override.

apps/admin/src/editor/preview/browser-preview.tsx

@@ -0,0 +1,37 @@
+import { EmptyIndicator, PreviewChrome } from '@tryghost/shade/components';
+import { LucideIcon } from '@tryghost/shade/utils';
+
+import { browserPreviewUrl, type PreviewAudience, type PreviewDevice } from './preview-url';
+
+interface BrowserPreviewProps {
+  /** The post's public preview URL, before the audience params are applied. */
+  previewUrl: string;
+  audience: PreviewAudience;
+  device: PreviewDevice;
+}
+
+export function BrowserPreview({ previewUrl, audience, device }: BrowserPreviewProps) {
+  if (!previewUrl) {
+    return (
+      <EmptyIndicator
+        className="grow justify-center"
+        data-testid="post-preview-unavailable"
+        description="A post gets its preview link the first time it is saved."
+        title="Nothing to preview yet"
+      >
+        <LucideIcon.Eye />
+      </EmptyIndicator>
+    );
+  }
+
+  return (
+    <PreviewChrome data-testid="post-preview-browser" device={device}>
+      <iframe
+        className="size-full border-0"
+        data-testid="post-preview-browser-frame"
+        src={browserPreviewUrl(previewUrl, audience)}
+        title="Post preview"
+      />
+    </PreviewChrome>
+  );
+}

apps/admin/src/editor/preview/email-preview.tsx

@@ -0,0 +1,145 @@
+import {
+  LoadingIndicator,
+  PreviewChrome,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tryghost/shade/components';
+import { Inline, Stack } from '@tryghost/shade/primitives';
+import { getSettingValues, useBrowseSettings } from '@tryghost/admin-x-framework/api/settings';
+import { useEmailPreview } from '@tryghost/admin-x-framework/api/email-previews';
+import type { Newsletter } from '@tryghost/admin-x-framework/api/newsletters';
+
+import { SendTestEmail } from './send-test-email';
+import {
+  audienceDescription,
+  emailPreviewAudience,
+  type PreviewAudience,
+  type PreviewDevice,
+} from './preview-url';
+
+// Scrollbar chrome for the rendered email document, which carries its own
+// styles and never sees the admin stylesheet.
+const PREVIEW_DOCUMENT_STYLES = `
+html {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+html::-webkit-scrollbar {
+    width: 8px;
+    background: transparent;
+}
+html::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+html::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+`;
+
+function withPreviewDocumentStyles(html: string): string {
+  const styles = `<style>${PREVIEW_DOCUMENT_STYLES}</style>`;
+
+  return html.includes('</head>')
+    ? html.replace('</head>', `${styles}</head>`)
+    : `${html}${styles}`;
+}
+
+interface EmailPreviewProps {
+  postId: string;
+  audience: PreviewAudience;
+  /** The selected tier's name, for the test-email audience description. */
+  tierName?: string;
+  device: PreviewDevice;
+  newsletters: Newsletter[];
+  newsletterSlug?: string;
+  onNewsletterChange: (slug: string) => void;
+}
+
+export function EmailPreview({
+  postId,
+  audience,
+  tierName,
+  device,
+  newsletters,
+  newsletterSlug,
+  onNewsletterChange,
+}: EmailPreviewProps) {
+  const { data: settingsData } = useBrowseSettings();
+  const [defaultEmailAddress] = getSettingValues<string>(settingsData?.settings ?? [], [
+    'default_email_address',
+  ]);
+  const { data, isLoading } = useEmailPreview(postId, {
+    ...emailPreviewAudience(audience),
+    newsletter: newsletterSlug,
+  });
+
+  const preview = data?.email_previews[0];
+  // Only the newsletter the preview was requested for, so the From line, the
+  // selection and the test send can never name a different one.
+  const selectedNewsletter = newsletters.find((newsletter) => newsletter.slug === newsletterSlug);
+  const senderAddress = (sender: string | null) => sender ?? defaultEmailAddress ?? '';
+
+  return (
+    <PreviewChrome data-testid="post-preview-email" device={device}>
+      <Stack className="size-full bg-background" gap="none">
+        <Stack className="border-b border-border-default p-4" gap="md">
+          <Inline gap="lg" justify="between">
+            <Inline className="min-w-0" gap="md">
+              <span className="shrink-0 text-sm text-muted-foreground">From</span>
+              {newsletters.length > 1 ? (
+                <Select value={selectedNewsletter?.slug} onValueChange={onNewsletterChange}>
+                  <SelectTrigger aria-label="Newsletter" className="w-auto">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {newsletters.map((newsletter) => (
+                      <SelectItem key={newsletter.id} value={newsletter.slug}>
+                        {newsletter.name} &lt;{senderAddress(newsletter.sender_email)}&gt;
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <p className="min-w-0 truncate text-sm" data-testid="post-preview-email-from">
+                  {selectedNewsletter?.name}{' '}
+                  <span className="text-muted-foreground">
+                    &lt;{senderAddress(selectedNewsletter?.sender_email ?? null)}&gt;
+                  </span>
+                </p>
+              )}
+            </Inline>
+            <SendTestEmail
+              audience={audience}
+              audienceLabel={audienceDescription(audience, tierName)}
+              newsletterSlug={newsletterSlug}
+              postId={postId}
+            />
+          </Inline>
+          <Inline className="min-w-0" gap="md">
+            <span className="shrink-0 text-sm text-muted-foreground">Subject</span>
+            <p className="min-w-0 truncate text-sm" data-testid="post-preview-email-subject">
+              {preview?.subject}
+            </p>
+          </Inline>
+        </Stack>
+        {isLoading ? (
+          <Inline className="grow" gap="none" justify="center">
+            <LoadingIndicator size="md" />
+          </Inline>
+        ) : (
+          <iframe
+            className="min-h-0 grow border-0"
+            data-testid="post-preview-email-frame"
+            sandbox="allow-popups allow-popups-to-escape-sandbox"
+            srcDoc={withPreviewDocumentStyles(preview?.html ?? '')}
+            title="Email preview"
+          />
+        )}
+      </Stack>
+    </PreviewChrome>
+  );
+}