app/components/admin/use-live-preview.ts

Functions

Imports

It imports app/lib/error-message.mjs. Imported by app/components/admin/editor-bar.tsx, app/components/admin/post-editor.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2
3import { errorMessage } from "~/lib/error-message.mjs";
4
5export type Layout = "write" | "split" | "preview";
6
7const PREVIEW_DELAY_MS = 600;
8const LAYOUT_KEY = "post-editor:layout";
9
10/**
11 * The editor's layout (Write, Split, Preview), remembered in this browser, and the rendered preview
12 * that the Split and Preview layouts show, re-requested a beat after the body stops changing.
13 */
14export function useLivePreview({
15  body,
16  fieldsSlug,
17  slug,
18}: {
19  body: string;
20  /** The committed slug, which wins; the typed one stands in for a post not yet saved. */
21  fieldsSlug: string;
22  slug: string;
23}) {
24  const [layout, setLayout] = useState<Layout>("write");
25  const [preview, setPreview] = useState<{ html: string } | { error: string } | null>(null);
26  const [previewing, setPreviewing] = useState(false);
27
28  // Read after mount, not during render, so the server and the first client paint agree.
29  useEffect(() => {
30    try {
31      const stored = window.localStorage.getItem(LAYOUT_KEY);
32      if (stored === "write" || stored === "split" || stored === "preview") setLayout(stored);
33    } catch {
34      // Storage disabled. The editor opens in Write, which is the default anyway.
35    }
36  }, []);
37
38  const chooseLayout = (next: Layout) => {
39    setLayout(next);
40    try {
41      window.localStorage.setItem(LAYOUT_KEY, next);
42    } catch {
43      // As above. The choice still applies to this session.
44    }
45  };
46
47  // A sequence number guards the response: with two renders in flight the slower can land last.
48  const previewSeq = useRef(0);
49  useEffect(() => {
50    if (layout === "write") return;
51    const seq = (previewSeq.current += 1);
52    setPreviewing(true);
53    const timer = window.setTimeout(async () => {
54      const form = new FormData();
55      form.set("body", body);
56      form.set("slug", fieldsSlug || slug);
57      try {
58        const response = await fetch("/admin/preview", { method: "POST", body: form });
59        // Not JSON is a failed request, such as an expired session answering with a page.
60        const result = (await response.json().catch(() => null)) as {
61          html?: string;
62          error?: string;
63        } | null;
64        if (seq !== previewSeq.current) return;
65        if (!result || (!response.ok && !result.error)) {
66          setPreview({ error: `The preview request failed with HTTP ${response.status}.` });
67          return;
68        }
69        setPreview(result.error ? { error: result.error } : { html: result.html ?? "" });
70      } catch (error) {
71        if (seq !== previewSeq.current) return;
72        setPreview({ error: errorMessage(error) });
73      } finally {
74        if (seq === previewSeq.current) setPreviewing(false);
75      }
76    }, PREVIEW_DELAY_MS);
77    return () => window.clearTimeout(timer);
78  }, [body, layout, fieldsSlug, slug]);
79
80  return { layout, chooseLayout, preview, previewing };
81}