app/components/admin/post-editor.tsx

Functions

Imports

It imports app/components/admin/editor-bar.tsx, app/components/admin/md-editor-commands.ts, app/components/admin/post-metadata.tsx, app/components/admin/revision-list.tsx, app/components/admin/settings-drawer.tsx, app/components/admin/shell-parts.tsx, app/components/admin/title-slug-row.tsx, app/components/admin/use-draft-buffer.ts, app/components/admin/use-live-preview.ts, app/lib/editor/draft-buffer.ts, app/lib/editor/feedback.ts, app/lib/editor/frontmatter.ts, app/lib/media/upload-contract.mjs. Imported by app/routes/admin.posts.$slug.edit.tsx, app/routes/admin.posts.new.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2import { Form, Link, useBlocker, useNavigation } from "react-router";
3import { Alert, Banner } from "capsomer/react/banner";
4import { Button } from "capsomer/react/button";
5import { MarkdownEditor } from "capsomer/react/markdown-editor";
6import { Panel } from "capsomer/react/panel";
7import { Status } from "capsomer/react/status";
8
9import { PageHead } from "capsomer/react/page-head";
10import { crumbLink } from "~/components/admin/shell-parts";
11import { ACCEPT_ATTRIBUTE, uploadMedia } from "~/lib/media/upload-contract.mjs";
12
13import { clearAllBuffersFor, type DraftBuffer } from "~/lib/editor/draft-buffer";
14import type { EditorFeedback } from "~/lib/editor/feedback";
15import type { PostFields } from "~/lib/editor/frontmatter";
16import {
17  FIRST_PUBLICATION_NOTE,
18  PUBLISH_CONFIRMED_INTENT,
19  saveInPlaceIntent,
20  type PostState,
21} from "capsomer/publish-transition";
22import { EditorBar } from "./editor-bar";
23import { figureMarkdown, SCAFFOLDS } from "./md-editor-commands";
24import { PostMetadata } from "./post-metadata";
25import { RevisionList, type Revision } from "./revision-list";
26import { SettingsDrawer } from "./settings-drawer";
27import { TitleSlugRow } from "./title-slug-row";
28import { useDraftBuffer } from "./use-draft-buffer";
29import { useLivePreview } from "./use-live-preview";
30
31// There is no `draft` field: the transition rides in the submitter's `intent`, which a scriptless browser still sends.
32
33/** A post the link palette can offer; `state` flags one that is not live, since linking a draft would 404. */
34type LinkTarget = { slug: string; title: string; state: "published" | "scheduled" | "draft" };
35
36// Read off the document, not loader data: the root loader re-runs on client navigation and mints a different nonce.
37// The IDL property, not getAttribute: browsers hide the attribute after parsing so injected script cannot read it.
38function documentCspNonce(): string {
39  if (typeof document === "undefined") return "";
40  return document.querySelector<HTMLScriptElement>("script[nonce]")?.nonce ?? "";
41}
42
43/** The site's own blocks for the editor's slash menu and toolbar; the editor's behaviour is Capsomer's. */
44const SCAFFOLD_LIST = Object.entries(SCAFFOLDS).map(([id, scaffold]) => ({
45  id,
46  label: scaffold.label,
47  hint: scaffold.hint,
48  text: scaffold.text,
49  cursor: scaffold.cursor,
50}));
51
52/** A dropped or pasted image: the upload, whose failure the editor says in its alert, then the figure. */
53async function uploadImage(file: File): Promise<{ url: string }> {
54  const result = await uploadMedia(file);
55  if ("error" in result) throw new Error(result.error);
56  return { url: result.url };
57}
58
59const TONE_OF_STATE = { published: "ok", draft: "nodata", scheduled: "info" } as const;
60
61const AUTOSAVE_DELAY_MS = 800;
62const FORM_ID = "post-editor";
63
64export function PostEditor({
65  fields,
66  isNew,
67  headSha,
68  headError = null,
69  loadProblems = [],
70  previewHtml,
71  feedback,
72  state,
73  everPublished,
74  tagOptions,
75  linkTargets = [],
76  revisions = [],
77  existingSlugs = [],
78  previewLinkSlot,
79  historySlot,
80  dangerSlot,
81  awaitingPublishConfirmation = false,
82}: {
83  fields: PostFields;
84  isNew: boolean;
85  headSha: string;
86  /** Why `headSha` is empty, when the read failed; null means no reason is known. */
87  headError?: string | null;
88  /** Sentences for editor data that failed to load, so a failed read never looks like an empty one. */
89  loadProblems?: string[];
90  previewHtml?: string | null;
91  feedback?: EditorFeedback | null;
92  state: PostState;
93  everPublished: boolean;
94  tagOptions: string[];
95  linkTargets?: LinkTarget[];
96  revisions?: Revision[];
97  existingSlugs?: string[];
98  previewLinkSlot?: React.ReactNode;
99  historySlot?: React.ReactNode;
100  dangerSlot?: React.ReactNode;
101  awaitingPublishConfirmation?: boolean;
102}) {
103  const [title, setTitle] = useState(fields.title);
104  const [slug, setSlug] = useState(fields.slug);
105  // Once the author types a slug it stops tracking the title, so a chosen URL is never silently rewritten.
106  const [slugPinned, setSlugPinned] = useState(fields.slug !== "");
107  const [description, setDescription] = useState(fields.description);
108  const [tags, setTags] = useState(fields.tags);
109  const [coverSrc, setCoverSrc] = useState(fields.coverSrc);
110  const [coverAlt, setCoverAlt] = useState(fields.coverAlt);
111  const [publishAt, setPublishAt] = useState(fields.publishAt);
112  const [body, setBody] = useState(fields.body);
113  const [dirty, setDirty] = useState(false);
114  const [drawerOpen, setDrawerOpen] = useState(false);
115  const [restoredFrom, setRestoredFrom] = useState<string | null>(null);
116  const [richBody, setRichBody] = useState(false);
117
118  /* While a submit is in flight a second one would carry the same head and read as a false conflict. */
119  const busy = useNavigation().state === "submitting";
120  const busyRef = useRef(busy);
121  useEffect(() => {
122    busyRef.current = busy;
123  }, [busy]);
124
125  const formRef = useRef<HTMLFormElement>(null);
126  const keyboardIntentRef = useRef<HTMLInputElement>(null);
127
128  const { offer, setOffer, savedAt, ageNow, bufferTried, persist, autosaveTimer } = useDraftBuffer({
129    formRef,
130    slug: fields.slug,
131    headSha,
132    isNew,
133    feedback,
134    dirty,
135    setDirty,
136    setRestoredFrom,
137  });
138
139  useEffect(() => {
140    if (!dirty) return;
141    const onLeave = (event: BeforeUnloadEvent) => event.preventDefault();
142    window.addEventListener("beforeunload", onLeave);
143    return () => window.removeEventListener("beforeunload", onLeave);
144  }, [dirty]);
145
146  // The pathname check lets a save's own redirect through. A new post redirects to a different path,
147  // which onSubmit clearing `dirty` before the request leaves handles.
148  const blocker = useBlocker(
149    ({ currentLocation, nextLocation }) =>
150      dirty && currentLocation.pathname !== nextLocation.pathname,
151  );
152
153  useEffect(() => {
154    if (blocker.state === "blocked" && !dirty) blocker.reset();
155  }, [blocker, dirty]);
156
157  const { layout, chooseLayout, preview, previewing } = useLivePreview({
158    body,
159    fieldsSlug: fields.slug,
160    slug,
161  });
162
163  // Sends the in-place intent explicitly by enabling a disabled hidden field: an absent intent on a write path is refused.
164  useEffect(() => {
165    const onKey = (event: KeyboardEvent) => {
166      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "s") return;
167      event.preventDefault();
168      const form = formRef.current;
169      if (!form || busyRef.current) return;
170      const intentField = keyboardIntentRef.current;
171      if (intentField) intentField.disabled = false;
172      form.requestSubmit();
173      if (intentField) intentField.disabled = true;
174    };
175    window.addEventListener("keydown", onKey);
176    return () => window.removeEventListener("keydown", onKey);
177  }, []);
178
179  const touched = () => {
180    setDirty(true);
181    window.clearTimeout(autosaveTimer.current);
182    autosaveTimer.current = window.setTimeout(persist, AUTOSAVE_DELAY_MS);
183  };
184
185  const restore = () => {
186    const form = formRef.current;
187    if (!form || !offer) return;
188    const f = offer.fields;
189    if (f.title !== undefined) setTitle(f.title);
190    if (f.slug !== undefined) setSlug(f.slug);
191    if (f.description !== undefined) setDescription(f.description);
192    if (f.tags !== undefined) setTags(f.tags.split(",").map((t) => t.trim()).filter(Boolean));
193    if (f.coverSrc !== undefined) setCoverSrc(f.coverSrc);
194    if (f.coverAlt !== undefined) setCoverAlt(f.coverAlt);
195    if (f.publishAt !== undefined) setPublishAt(f.publishAt);
196    if (f.body !== undefined) setBody(f.body);
197    const date = form.elements.namedItem("date");
198    if (f.date !== undefined && date instanceof HTMLInputElement) date.value = f.date;
199    setOffer(null);
200    setDirty(true);
201  };
202
203  // The buffer is rewritten at once, so a tab closed after a restore cannot offer to recover out of it.
204  const applyRevision = (revision: PostFields, sha: string) => {
205    setTitle(revision.title);
206    // Pinned, so the revision's title does not rewrite its slug.
207    setSlugPinned(true);
208    setSlug(revision.slug);
209    setDescription(revision.description);
210    setTags(revision.tags);
211    setCoverSrc(revision.coverSrc);
212    setCoverAlt(revision.coverAlt);
213    setPublishAt(revision.publishAt);
214    setBody(revision.body);
215    const form = formRef.current;
216    const date = form?.elements.namedItem("date");
217    if (date instanceof HTMLInputElement) date.value = revision.date;
218
219    setOffer(null);
220    setDirty(true);
221    setRestoredFrom(sha);
222    window.clearTimeout(autosaveTimer.current);
223    window.setTimeout(persist, 0);
224  };
225
226  return (
227    <div className="app-page">
228      <PageHead
229        renderLink={crumbLink}
230        crumbs={[{ label: "Posts", href: "/admin/posts" }, { label: isNew ? "New post" : title || "Untitled" }]}
231        title={isNew ? "New post" : `Edit ${title || "Untitled"}`}
232        lead={<Status tone={TONE_OF_STATE[state]}>{state}</Status>}
233        actions={
234          <EditorBar
235            formId={FORM_ID}
236            state={state}
237            richBody={richBody}
238            layout={layout}
239            chooseLayout={chooseLayout}
240            dirty={dirty}
241            headSha={headSha}
242            feedback={feedback}
243            savedAt={savedAt}
244            ageNow={ageNow}
245            bufferTried={bufferTried}
246            busy={busy}
247            drawerOpen={drawerOpen}
248            openDrawer={() => setDrawerOpen(true)}
249            everPublished={everPublished}
250            publishAt={publishAt}
251            onPublishAtChange={(value) => {
252              setPublishAt(value);
253              setDirty(true);
254            }}
255          />
256        }
257      />
258
259      {/* `role="alert"`, not a modal: the router already stopped the navigation, and a modal would
260          trap focus around a question the author can answer by typing on. */}
261      {blocker.state === "blocked" ? (
262        <Alert
263          tone="warn"
264          title="This post has unsaved changes."
265          action={
266            <>
267              <Button onClick={() => blocker.reset()}>Stay here</Button>
268              <Button variant="quiet" onClick={() => blocker.proceed()}>
269                Leave without saving
270              </Button>
271            </>
272          }
273        >
274          Leaving now keeps them in this browser's crash net, and they are not committed.
275        </Alert>
276      ) : null}
277
278      <Form
279        id={FORM_ID}
280        method="post"
281        className="app-editor"
282        ref={formRef}
283        onChange={touched}
284        onSubmit={() => setDirty(false)}
285      >
286        <input type="hidden" name="headSha" value={headSha} />
287        <input type="hidden" name="isNew" value={isNew ? "1" : "0"} />
288        {/* Cmd+S submits with no submitter, and an absent intent is refused, so the shortcut enables
289            this for one submit. Disabled at rest so a button's own intent is the only one sent. The
290            value follows the post's state: a literal "save" would publish a draft on Cmd+S. */}
291        <input
292          ref={keyboardIntentRef}
293          type="hidden"
294          name="intent"
295          value={saveInPlaceIntent(state)}
296          disabled
297        />
298        {/* Carried so a browser save preserves it: `serializePost` writes exactly the keys it is
299            handed, so a dropped value would make a published post read as never published. */}
300        <input type="hidden" name="firstPublished" value={fields.firstPublished} />
301        {/* The build derives `updated` from the last commit and the editor stamps it on save. */}
302        <input type="hidden" name="updated" value={fields.updated} />
303        {/* No `draft` field on purpose: the intent carries the transition, so a scriptless request
304            cannot send the post's current state instead of the one the author pressed. */}
305
306        {!headSha ? (
307          <Alert tone="crit" title="Saving unavailable">
308            {headError
309              ? `The repository could not be read, so a save cannot commit: ${headError}`
310              : "GITHUB_TOKEN is not configured on this Worker, so a save cannot commit."}{" "}
311            Preview still works.
312          </Alert>
313        ) : null}
314
315        {loadProblems.length > 0 ? (
316          <Banner tone="warn" title="Some editor data did not load">
317            {loadProblems.join(" ")}
318          </Banner>
319        ) : null}
320
321        {/* Always in the DOM so the live region exists before its content does. */}
322        <div role="status" aria-live="polite">
323          {feedback ? <FeedbackMessage feedback={feedback} /> : null}
324        </div>
325
326        {/* Inside the editing form: a publish re-sends the whole post. Scheduling is script-only
327            because datetime-local reads as local time in the browser and UTC on the server. */}
328        {awaitingPublishConfirmation ? (
329          <Panel
330            title="Publish this post"
331            footer={
332              <>
333                <Link to="/admin/posts" className="cap-btn">
334                  Cancel
335                </Link>
336                <Button type="submit" name="intent" value={PUBLISH_CONFIRMED_INTENT} variant="primary">
337                  Publish now
338                </Button>
339              </>
340            }
341          >
342            <p>{FIRST_PUBLICATION_NOTE}</p>
343            <p className="cap-muted">
344              To hold it until a set time instead, set the schedule in Post settings, which needs
345              scripting.
346            </p>
347          </Panel>
348        ) : null}
349
350        {offer ? (
351          <RestoreOffer
352            buffer={offer}
353            onRestore={restore}
354            onDiscard={() => {
355              clearAllBuffersFor(fields.slug);
356              setOffer(null);
357            }}
358          />
359        ) : null}
360
361        {/* An author returning to this tab must not mistake a loaded revision for the live post. */}
362        {restoredFrom ? (
363          <Banner tone="info">
364            Loaded revision <code className="cap-mono">{restoredFrom.slice(0, 7)}</code> into the
365            editor. Nothing has been written yet. Save to commit it on top, or leave without saving to
366            discard it.
367          </Banner>
368        ) : null}
369
370        <TitleSlugRow
371          title={title}
372          setTitle={setTitle}
373          slug={slug}
374          setSlug={setSlug}
375          slugPinned={slugPinned}
376          setSlugPinned={setSlugPinned}
377          isNew={isNew}
378          existingSlugs={existingSlugs}
379        />
380
381        <div className="app-editor-canvas" data-layout={layout}>
382          <div className="app-editor-write">
383            {/* The editor's own textarea is the no-script editor and is always submitted: it holds the
384                markdown, and the editor takes over in place once it has loaded. `required` drops once it
385                mounts, since a hidden required control blocks submission unreachably. */}
386            <MarkdownEditor
387              label="Body"
388              ariaLabel="Body, markdown"
389              id="field-body"
390              name="body"
391              value={body}
392              onChange={(next) => {
393                setBody(next);
394                touched();
395              }}
396              onReady={() => setRichBody(true)}
397              required={!richBody}
398              nonce={documentCspNonce()}
399              accept={ACCEPT_ATTRIBUTE}
400              scaffolds={SCAFFOLD_LIST}
401              linkTargets={linkTargets.map((target) => ({
402                href: `/writing/${target.slug}`,
403                title: target.title,
404                note: target.state === "published" ? undefined : `not live yet (${target.state})`,
405              }))}
406              onUpload={uploadImage}
407              imageMarkdown={({ url, alt }) => figureMarkdown(url, alt)}
408              help="Markdown. Ctrl or Cmd + K links to a post. A lone / on a line opens the block menu. An image needs alt text."
409            />
410          </div>
411
412          {layout !== "write" ? <PreviewPane result={preview} busy={previewing} /> : null}
413        </div>
414
415        {/* In the page, not the drawer: the drawer is a `<dialog>` that only opens with script. */}
416        <PostMetadata
417          formId={FORM_ID}
418          featured={fields.featured}
419          series={fields.series}
420          part={fields.part}
421          furtherReading={fields.furtherReading}
422          ogTitle={fields.ogTitle}
423          ogDescription={fields.ogDescription}
424          title={title}
425          description={description}
426          linkTargets={linkTargets}
427          currentSlug={slug}
428        />
429
430        <SettingsDrawer
431          open={drawerOpen}
432          onClose={() => setDrawerOpen(false)}
433          formId={FORM_ID}
434          slug={slug}
435          isNew={isNew}
436          description={description}
437          onDescriptionChange={(value) => {
438            setDescription(value);
439            setDirty(true);
440          }}
441          tags={tags}
442          onTagsChange={(value) => {
443            setTags(value);
444            setDirty(true);
445          }}
446          tagOptions={tagOptions}
447          coverSrc={coverSrc}
448          onCoverSrcChange={(value) => {
449            setCoverSrc(value);
450            setDirty(true);
451          }}
452          coverAlt={coverAlt}
453          onCoverAltChange={(value) => {
454            setCoverAlt(value);
455            setDirty(true);
456          }}
457          date={fields.date}
458          publishAt={publishAt}
459          onPublishAtChange={(value) => {
460            setPublishAt(value);
461            setDirty(true);
462          }}
463          previewPost={{ slug, title, description, coverSrc, coverAlt }}
464          previewLinkSlot={previewLinkSlot}
465          historySlot={
466            revisions.length > 0 ? (
467              <RevisionList slug={fields.slug} revisions={revisions} onRestore={applyRevision} />
468            ) : (
469              historySlot
470            )
471          }
472          dangerSlot={dangerSlot}
473        />
474      </Form>
475
476      {!richBody && previewHtml !== undefined && previewHtml !== null ? (
477        <Panel title="Preview">
478          <article data-context="prose" dangerouslySetInnerHTML={{ __html: previewHtml }} />
479        </Panel>
480      ) : null}
481    </div>
482  );
483}
484
485// The HTML is passed through unsanitized, so the preview is what publishes. The sandbox is the isolation,
486// and it matters: the pipeline passes javascript: URLs through from ordinary markdown links.
487function PreviewPane({
488  result,
489  busy,
490}: {
491  result: { html: string } | { error: string } | null;
492  busy: boolean;
493}) {
494  const [doc, setDoc] = useState("");
495
496  useEffect(() => {
497    if (!result || "error" in result) return;
498    const styles = [...document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')]
499      .map((link) => `<link rel="stylesheet" href="${link.href}">`)
500      .join("");
501    const theme = document.documentElement.getAttribute("data-theme");
502    // A style attribute, which the policy allows, rather than a style element, which it does not.
503    setDoc(
504      `<!doctype html><html lang="en"${theme ? ` data-theme="${theme}"` : ""}>` +
505        `<head><meta charset="utf-8">${styles}</head>` +
506        `<body style="margin:0;padding:2rem 1.5rem">` +
507        `<article data-context="prose">${result.html}</article></body></html>`,
508    );
509  }, [result]);
510
511  return (
512    <Panel
513      title="Preview"
514      src={busy ? "Rendering" : result && "error" in result ? "Not renderable" : undefined}
515    >
516      {result && "error" in result ? (
517        <Alert tone="crit" title="The renderer refused this body.">
518          {result.error}
519        </Alert>
520      ) : (
521        <iframe className="app-editor-frame" title="Rendered preview" sandbox="" srcDoc={doc} />
522      )}
523    </Panel>
524  );
525}
526
527function RestoreOffer({
528  buffer,
529  onRestore,
530  onDiscard,
531}: {
532  buffer: DraftBuffer;
533  onRestore: () => void;
534  onDiscard: () => void;
535}) {
536  return (
537    <Banner
538      tone="warn"
539      title="Unsaved local changes from an earlier session."
540      actions={
541        <>
542          <Button size="sm" onClick={onRestore}>
543            Restore them
544          </Button>
545          <Button size="sm" variant="quiet" onClick={onDiscard}>
546            Discard them
547          </Button>
548        </>
549      }
550    >
551      Kept in this browser at {new Date(buffer.at).toLocaleString()}. They were never committed.
552    </Banner>
553  );
554}
555
556function FeedbackMessage({ feedback }: { feedback: EditorFeedback }) {
557  if (feedback.state === "failed") {
558    return (
559      <Alert tone="crit" title={feedback.conflict ? "Conflict. Not saved." : "Not saved."}>
560        {feedback.message}
561        {/* Shown only when present: an invented location would be worse than none. */}
562        {feedback.field || feedback.line !== undefined ? (
563          <>
564            {" "}
565            {feedback.field ? <>Field <code className="cap-mono">{feedback.field}</code></> : null}
566            {feedback.field && feedback.line !== undefined ? ", " : null}
567            {feedback.line !== undefined ? <>line {feedback.line}</> : null}
568          </>
569        ) : null}
570      </Alert>
571    );
572  }
573
574  if (feedback.state === "published-first") {
575    return (
576      <Banner tone="ok" title="Published for the first time.">
577        Stamped {feedback.at}. Commit {feedback.sha}. Live at{" "}
578        <a href={`/writing/${feedback.slug}`} target="_blank" rel="noreferrer">
579          /writing/{feedback.slug}
580        </a>
581      </Banner>
582    );
583  }
584
585  if (feedback.state === "republished") {
586    return (
587      <Banner tone="ok" title="Republished.">
588        Public again at{" "}
589        <a href={`/writing/${feedback.slug}`} target="_blank" rel="noreferrer">
590          /writing/{feedback.slug}
591        </a>
592        . Commit {feedback.sha}.
593      </Banner>
594    );
595  }
596
597  if (feedback.state === "unpublished") {
598    return (
599      <Banner tone="warn" title="Unpublished.">
600        /writing/{feedback.slug} now returns 404, and the post is out of the feed, the sitemap, search
601        and the Ask index. Commit {feedback.sha}.
602      </Banner>
603    );
604  }
605
606  return (
607    <Banner tone="ok" title="Saved.">
608      Commit {feedback.sha}.
609    </Banner>
610  );
611}