app/routes/book.file.tsx

Functions

Imports

It imports app/components/editor/save-keys.ts, app/components/editor/typing.ts, app/components/editor/writing-surface.tsx, app/components/frame.tsx, app/components/writing/binder.tsx, app/lib/ai.server.ts, app/lib/books.server.ts, app/lib/content.server.ts, app/lib/context.ts, app/lib/novels/checks.ts, app/lib/novels/frontmatter.ts, app/lib/novels/layout.ts, app/lib/roles.ts, app/lib/writing.server.ts, app/lib/writing/binder.ts. No module of this repo imports it.

Source

1// The editor for one file in a book: a scene, a bible entry, an outline or the title page. The same
2// CodeMirror editor as posts, autosave to D1 as you type, and Save, which commits to Git with the
3// version the text started from. Beside a scene: its flags and the bible entries it names.
4
5import { useEffect, useRef, useState } from "react";
6import { Link, useFetcher, type ShouldRevalidateFunctionArgs } from "react-router";
7import { Alert, Banner } from "capsomer/react/banner";
8import { Button } from "capsomer/react/button";
9import { ConfirmDialog } from "capsomer/react/confirm-dialog";
10import { Disclosure } from "capsomer/react/disclosure";
11import { useMessage } from "capsomer/react/message";
12import { Panel } from "capsomer/react/panel";
13import { Pill, Status } from "capsomer/react/status";
14import { Time } from "capsomer/react/time";
15import { PageHead } from "capsomer/react/page-head";
16
17import { WritingSurface } from "~/components/editor/writing-surface";
18import { AUTOSAVE_DELAY_MS, useSaveShortcut } from "~/components/editor/save-keys";
19import { useTypingRecede } from "~/components/editor/typing";
20import { RouterLink } from "~/components/frame";
21import { Binder } from "~/components/writing/binder";
22
23import {
24  bookRepo,
25  checkDraft,
26  dismissFinding,
27  indexedFile,
28  listFiles,
29  listFindings,
30  requireBookProject,
31  saveBookFile,
32  type BookWrite,
33} from "~/lib/books.server";
34import { listAiDrafts, readAiDraft } from "~/lib/ai.server";
35import { autosave, discardDraft, readDraft } from "~/lib/content.server";
36import { getEnv, getViewer } from "~/lib/context";
37import type { Finding } from "~/lib/novels/checks";
38import { parseFile } from "~/lib/novels/frontmatter";
39import { countProseWords, isBookPath, kindOf, TEMPLATES, titleFromSegment } from "~/lib/novels/layout";
40import { can } from "~/lib/roles";
41import { addUntyped, clearUntyped, untypedField } from "~/lib/writing.server";
42import { binderTree } from "~/lib/writing/binder";
43
44import type { Route } from "./+types/book.file";
45
46export function meta({ loaderData: data }: Route.MetaArgs) {
47  return [{ title: data ? `${data.label} · ${data.project.name} · Carrel` : "Carrel" }];
48}
49
50function starter(path: string, name: string | null, bookName: string): string {
51  const kind = kindOf(path);
52  const fallback = titleFromSegment(path.split("/").pop()!.replace(/\.md$/, ""));
53  if (kind === "scene") return TEMPLATES.scene("");
54  if (kind === "character" || kind === "place" || kind === "rule") return TEMPLATES[kind](name?.trim() || fallback);
55  if (kind === "book") return ["---", `title: ${bookName}`, "author:", "language: en", "---", "", ""].join("\n");
56  return `# ${fallback}\n\n`;
57}
58
59function labelFor(path: string): string {
60  const kind = kindOf(path);
61  const file = titleFromSegment(path.split("/").pop()!.replace(/\.md$/, ""));
62  if (kind === "scene") return `${titleFromSegment(path.split("/")[1]!)}: ${file}`;
63  if (kind === "book") return "Title page";
64  return file;
65}
66
67export async function loader({ params, request, context }: Route.LoaderArgs) {
68  const env = getEnv(context);
69  const viewer = getViewer(context);
70  const project = await requireBookProject(env.DB, viewer, params.project, "read");
71  const path = params["*"] ?? "";
72  if (!isBookPath(path)) throw new Response("Not found", { status: 404 });
73
74  const draft = await readDraft(env.DB, project, viewer, path);
75  const { repo, detail } = bookRepo(env);
76  let git: { source: string; sha: string } | null = null;
77  let gitError: string | null = null;
78  if (repo) {
79    try {
80      git = await repo.read(`${project.book}/${path}`);
81    } catch (error) {
82      gitError = `Git did not answer (${error instanceof Error ? error.message : String(error)}), so this shows Carrel's index.`;
83    }
84  }
85  // Without Git, the index's copy stands in, read-only for saving but fine for reading.
86  const file = git ?? (!repo || gitError ? await indexedFile(env.DB, project, path) : null);
87  const canEdit = can(project.role, "edit");
88  const fresh = !file && !draft;
89  if (fresh && !canEdit) throw new Response("Not found", { status: 404 });
90
91  const kind = kindOf(path);
92  const source = draft?.source ?? file?.source ?? starter(path, new URL(request.url).searchParams.get("name"), project.name);
93
94  const indexed = await listFiles(env.DB, project);
95  // The bible entries a scene names, and every world rule, for the side panel.
96  let bible: { path: string; name: string; kind: string; body: string }[] = [];
97  if (kind === "scene") {
98    const { data } = parseFile(source);
99    const names = [data.pov, data.location, ...(Array.isArray(data.characters) ? data.characters : [])]
100      .filter((n): n is string => typeof n === "string" && n.trim() !== "")
101      .map((n) => n.trim().toLowerCase());
102    const matched = indexed.flatMap(({ path, kind, meta }) => {
103      if (meta.kind === "rule") return [{ path, kind, name: meta.entry.name }];
104      if (meta.kind !== "character" && meta.kind !== "place") return [];
105      const hit = [meta.entry.name, ...meta.entry.aliases].some((n) => names.includes(n.toLowerCase()));
106      return hit ? [{ path, kind, name: meta.entry.name }] : [];
107    });
108    bible = await Promise.all(
109      matched.map(async (m) => ({
110        ...m,
111        body: parseFile((await indexedFile(env.DB, project, m.path))?.source ?? "").body.trim().slice(0, 600),
112      })),
113    );
114  }
115
116  return {
117    project: { slug: project.slug, name: project.name, book: project.book },
118    path,
119    kind,
120    label: labelFor(path),
121    canEdit,
122    canPublish: can(project.role, "publish"),
123    connected: repo !== null,
124    connectionDetail: detail ?? gitError,
125    source,
126    baseVersion: draft ? draft.baseVersion : (file?.sha ?? null),
127    version: git?.sha ?? file?.sha ?? null,
128    draftAt: draft?.updatedAt ?? null,
129    fresh,
130    // Git moved on since this draft was started: saving it would be refused as stale.
131    behind: Boolean(draft && git && draft.baseVersion !== git.sha),
132    findings: await listFindings(env.DB, project, { path }),
133    problems: parseFile(source).problems,
134    bible,
135    binder: binderTree(indexed, `/b/${project.slug}`),
136    // AI drafts an AI session saved beside this person's own, with their text: never committed.
137    aiDrafts: await Promise.all(
138      (await listAiDrafts(env.DB, project, viewer, path)).map(async (d) => ({ ...d, source: (await readAiDraft(env.DB, project, viewer, path, d.id)).source })),
139    ),
140  };
141}
142
143type ActionResult =
144  | { intent: "autosave"; updatedAt: string }
145  | { intent: "discard"; discarded: true }
146  | { intent: "check"; findings: Finding[] }
147  | { intent: "dismiss"; dismissed: number }
148  | { intent: "use-ai-draft"; used: number }
149  | { intent: "save"; outcome: BookWrite };
150
151export async function action({ params, request, context }: Route.ActionArgs): Promise<ActionResult> {
152  const env = getEnv(context);
153  const viewer = getViewer(context);
154  const project = await requireBookProject(env.DB, viewer, params.project, "read");
155  const path = params["*"] ?? "";
156  if (!isBookPath(path)) throw new Response("Not found", { status: 404 });
157  const form = await request.formData();
158  const intent = String(form.get("intent") ?? "");
159  const source = String(form.get("source") ?? "").replace(/\r\n/g, "\n");
160  const version = String(form.get("expectedVersion") ?? "") || null;
161
162  switch (intent) {
163    case "autosave": {
164      const saved = await autosave(env.DB, project, viewer, path, { source, baseVersion: version });
165      await addUntyped(env.DB, project.id, viewer.id, path, untypedField(form.get("untyped")));
166      return { intent, updatedAt: saved.updatedAt };
167    }
168    case "discard":
169      await discardDraft(env.DB, project, viewer, path);
170      await clearUntyped(env.DB, project.id, viewer.id, path);
171      return { intent, discarded: true };
172    case "check":
173      return { intent, findings: await checkDraft(env.DB, project, path, source) };
174    case "dismiss": {
175      const id = Number(form.get("finding"));
176      if (!Number.isInteger(id)) throw new Response("Bad request", { status: 400 });
177      await dismissFinding(env.DB, project, viewer, id);
178      return { intent, dismissed: id };
179    }
180    case "use-ai-draft": {
181      // The person's decision: the AI draft's text becomes their working draft, to edit and save.
182      const id = Number(form.get("draft"));
183      if (!Number.isInteger(id)) throw new Response("Bad request", { status: 400 });
184      const ai = await readAiDraft(env.DB, project, viewer, path, id);
185      await autosave(env.DB, project, viewer, path, { source: ai.source, baseVersion: ai.baseVersion });
186      // The AI's words were not typed, so they never count toward the day (ruling 6).
187      await addUntyped(env.DB, project.id, viewer.id, path, countProseWords(parseFile(ai.source).body));
188      return { intent, used: id };
189    }
190    case "save": {
191      const { repo, detail } = bookRepo(env);
192      if (!repo) return { intent, outcome: { ok: false, reason: "failed", message: `${detail} Your text is kept here as your draft.` } };
193      return { intent, outcome: await saveBookFile(env.DB, repo, project, viewer, path, { source, expectedVersion: version, untyped: untypedField(form.get("untyped")) }) };
194    }
195    default:
196      throw new Response("Bad request", { status: 400 });
197  }
198}
199
200/** Autosave and a check write nothing the page shows, so the page has nothing to reload and Git is not asked. */
201export function shouldRevalidate({ formData, defaultShouldRevalidate }: ShouldRevalidateFunctionArgs) {
202  const intent = formData?.get("intent");
203  if (intent === "autosave" || intent === "check") return false;
204  return defaultShouldRevalidate;
205}
206
207export default function BookFileRoute({ loaderData }: Route.ComponentProps) {
208  return <BookFile key={`${loaderData.project.slug}/${loaderData.path}`} data={loaderData} />;
209}
210
211type Ask = { kind: "discard" | "dismiss" | "use-ai"; id?: number; opener: HTMLElement | null };
212
213function BookFile({ data }: { data: Route.ComponentProps["loaderData"] }) {
214  const [source, setSource] = useState(data.source);
215  // A file started from a template is not saved anywhere yet.
216  const [savedSource, setSavedSource] = useState(data.fresh ? "" : data.source);
217  const [savedAt, setSavedAt] = useState<string | null>(data.draftAt);
218  const [asking, setAsking] = useState<Ask | null>(null);
219  const autosaver = useFetcher<ActionResult>();
220  const writer = useFetcher<ActionResult>();
221  const checker = useFetcher<ActionResult>();
222  const { say } = useMessage();
223  useTypingRecede();
224  const readOnly = !data.canEdit;
225  const base = `/b/${data.project.slug}`;
226
227  // Words pasted or dropped into the text and not yet reported: they reach the file but were not
228  // typed, so the day's count leaves them out (ruling 6). Each submission carries the count, and the
229  // part a submission carried comes off once the server has it.
230  const untyped = useRef(0);
231  const untypedSent = useRef({ autosave: 0, save: 0 });
232  const countUntyped = (text: string | undefined) => {
233    if (!readOnly && text) untyped.current += countProseWords(text);
234  };
235
236  const inFlight = useRef<string | null>(null);
237  useEffect(() => {
238    if (readOnly || source === savedSource || autosaver.state !== "idle") return;
239    const timer = window.setTimeout(() => {
240      inFlight.current = source;
241      untypedSent.current.autosave = untyped.current;
242      void autosaver.submit({ intent: "autosave", source, expectedVersion: data.baseVersion ?? "", untyped: String(untyped.current) }, { method: "post" });
243    }, AUTOSAVE_DELAY_MS);
244    return () => window.clearTimeout(timer);
245    // eslint-disable-next-line react-hooks/exhaustive-deps
246  }, [source, savedSource, readOnly, data.baseVersion, autosaver.state]);
247
248  useEffect(() => {
249    if (autosaver.state !== "idle" || inFlight.current === null) return;
250    if (autosaver.data?.intent === "autosave") {
251      setSavedSource(inFlight.current);
252      setSavedAt(autosaver.data.updatedAt);
253      untyped.current = Math.max(0, untyped.current - untypedSent.current.autosave);
254    }
255    untypedSent.current.autosave = 0;
256    inFlight.current = null;
257  }, [autosaver.state, autosaver.data]);
258
259  const discarded = writer.data?.intent === "discard" && writer.state === "idle";
260  useEffect(() => {
261    if (discarded) {
262      untyped.current = 0;
263      setSource(data.source);
264      setSavedSource(data.source);
265      setSavedAt(null);
266    }
267  }, [discarded, data.source]);
268
269  // After Use as my draft, the loader has the AI draft as the working copy, which replaces the local one.
270  const usedAi = writer.data?.intent === "use-ai-draft" && writer.state === "idle";
271  useEffect(() => {
272    if (usedAi) {
273      // The text pasted into the draft it replaced is gone with it; the AI's words are counted by the server.
274      untyped.current = 0;
275      setSource(data.source);
276      setSavedSource(data.source);
277      setSavedAt(data.draftAt);
278    }
279  }, [usedAi, data.source, data.draftAt]);
280
281  const outcome = writer.data?.intent === "save" ? writer.data.outcome : null;
282  useEffect(() => {
283    if (outcome?.ok && writer.state === "idle") {
284      setSavedSource(source);
285      setSavedAt(null);
286      untyped.current = Math.max(0, untyped.current - untypedSent.current.save);
287    }
288    if (writer.state === "idle") untypedSent.current.save = 0;
289    // eslint-disable-next-line react-hooks/exhaustive-deps
290  }, [outcome, writer.state]);
291
292  // Said once in the message region, as each save finishes.
293  const said = useRef<unknown>(null);
294  useEffect(() => {
295    if (!outcome?.ok || writer.state !== "idle" || said.current === outcome) return;
296    said.current = outcome;
297    say(`Saved to Git (${outcome.commit.slice(0, 7)}). ${outcome.findings.length === 0 ? "Nothing flagged." : `${outcome.findings.length} flag${outcome.findings.length === 1 ? "" : "s"}; see the list.`}`);
298  }, [outcome, writer.state, say]);
299
300  const send = (intent: string, extra: Record<string, string> = {}) => {
301    if (intent === "save") untypedSent.current.save = untyped.current;
302    return writer.submit({ intent, source, expectedVersion: data.baseVersion ?? "", untyped: String(intent === "save" ? untyped.current : 0), ...extra }, { method: "post" });
303  };
304
305  useSaveShortcut(() => {
306    if (data.canEdit && data.connected && writer.state === "idle") void send("save");
307  });
308
309  const busy = writer.state !== "idle";
310  const checked = checker.data?.intent === "check" ? checker.data.findings : null;
311  const saveState =
312    autosaver.state !== "idle"
313      ? "Saving to Carrel"
314      : source !== savedSource
315        ? "Not yet saved"
316        : savedAt
317          ? `Draft saved in Carrel ${new Date(savedAt).toLocaleTimeString()}`
318          : data.version
319            ? "Matches Git"
320            : "";
321  const openFlags = data.findings.filter((f) => f.status === "open").length;
322  const ask = (kind: Ask["kind"], opener: HTMLElement | null, id?: number) => setAsking({ kind, opener, id });
323
324  const crumbs: { label: string; href?: string }[] = [{ label: data.project.name, href: base }];
325  if (data.kind === "scene") crumbs.push({ label: titleFromSegment(data.path.split("/")[1]!), href: `${base}/c/${data.path.split("/")[1]}` });
326  crumbs.push({ label: data.label });
327
328  return (
329    <div className="app-page app-editor">
330      <PageHead
331        renderLink={RouterLink}
332        crumbs={crumbs}
333        title={data.label}
334        lead={
335          <>
336            <span className="cap-mono">
337              {data.project.book}/{data.path}
338            </span>{" "}
339            {data.version ? null : <Pill variant="outline">Not in Git yet</Pill>}
340          </>
341        }
342        actions={
343          data.version ? (
344            <Link className="cap-btn" to={`${base}/h/${data.path}`}>
345              History
346            </Link>
347          ) : undefined
348        }
349      />
350
351      <div className="app-notices">
352        {data.connectionDetail ? <Banner tone="warn">{data.connectionDetail}</Banner> : null}
353        {data.behind ? (
354          <Banner tone="warn" title="Git moved on">
355            This file changed in Git after your draft was started, so saving it will be refused. Discard the draft to load Git's version, then reapply your changes.
356          </Banner>
357        ) : null}
358        {data.problems.length > 0 ? (
359          <Banner tone="warn" title="The header has lines Carrel does not read">
360            {data.problems.map((p) => `line ${p.line}`).join(", ")}. Use key: value, key: [a, b], or one - item per line.
361          </Banner>
362        ) : null}
363      </div>
364
365      <div className="app-editor-grid">
366        <div className="app-editor-main">
367          <section
368            className="app-editor-pane"
369            aria-label="Write"
370            onPasteCapture={(event) => countUntyped(event.clipboardData?.getData("text/plain"))}
371            onDropCapture={(event) => countUntyped(event.dataTransfer?.getData("text/plain"))}
372          >
373            <WritingSurface label={data.kind === "scene" ? "Scene" : "File"} value={source} onChange={setSource} readOnly={readOnly} linkTargets={[]} dialect="plain" />
374          </section>
375        </div>
376
377        <aside className="app-editor-side" aria-label="Binder, saving, checks and the bible">
378          <Panel title="Binder" src="The book in reading order">
379            <Binder nodes={data.binder} book={data.project.slug} current={data.path} canEdit={data.canEdit && data.connected} />
380          </Panel>
381
382          {data.canEdit ? (
383            <Panel title="This file" src={data.version ? "In Git" : "Only in Carrel so far"}>
384              <div className="app-stack" data-tight>
385                <p role="status" className="app-savestate">
386                  {saveState}
387                </p>
388                {outcome && !outcome.ok ? <Alert tone="crit">{outcome.message}</Alert> : null}
389                <div className="app-actions">
390                  <Button variant="primary" pending={busy} disabledReason={!data.connected ? "Git is not connected, so saving waits. Your text is kept here as your draft." : undefined} onClick={() => send("save")}>
391                    Save to Git
392                  </Button>
393                  <Button pending={checker.state !== "idle"} onClick={() => checker.submit({ intent: "check", source }, { method: "post" })}>
394                    Check this text
395                  </Button>
396                  {savedAt ? (
397                    <Button variant="quiet" pending={busy} onClick={(event) => ask("discard", event.currentTarget)}>
398                      Discard my draft
399                    </Button>
400                  ) : null}
401                </div>
402              </div>
403            </Panel>
404          ) : null}
405
406          <Panel title="Flags" count={openFlags} src="From the last save" id="flags">
407            <div className="app-stack" data-tight>
408              <p className="cap-muted app-note">A flag never stops a save; it holds export until it is fixed or the Owner dismisses it.</p>
409              {data.findings.length === 0 ? (
410                <p>None.</p>
411              ) : (
412                <ul className="app-flags" aria-label="Flags on this file">
413                  {data.findings.map((f) => (
414                    <li key={f.id}>
415                      {f.status === "open" ? <Status tone="warn">Open</Status> : <Pill variant="secondary">Dismissed</Pill>}
416                      <span>
417                        <strong>{f.check}</strong> {f.line ? <span className="cap-muted">line {f.line}</span> : null} {f.message}
418                      </span>
419                      {f.status === "open" && data.canPublish ? (
420                        <Button size="sm" onClick={(event) => ask("dismiss", event.currentTarget, f.id)}>
421                          Dismiss<span className="cap-sr-only"> flag: {f.message}</span>
422                        </Button>
423                      ) : null}
424                    </li>
425                  ))}
426                </ul>
427              )}
428              {checked ? (
429                <div role="status" className="app-stack" data-tight>
430                  <h3 className="app-subhead">This text, checked now</h3>
431                  {checked.length === 0 ? (
432                    <p>Nothing flagged.</p>
433                  ) : (
434                    <ul className="app-flags">
435                      {checked.map((f, i) => (
436                        <li key={i}>
437                          <Status tone="warn">Found</Status>
438                          <span>
439                            <strong>{f.check}</strong> {f.line ? <span className="cap-muted">line {f.line}</span> : null} {f.message}
440                          </span>
441                        </li>
442                      ))}
443                    </ul>
444                  )}
445                </div>
446              ) : null}
447            </div>
448          </Panel>
449
450          {data.aiDrafts.length > 0 ? (
451            <Panel title="AI drafts beside yours" count={data.aiDrafts.length} src="None has touched your draft or Git">
452              <div className="app-stack" data-tight>
453                {data.aiDrafts.map((d) => (
454                  <Disclosure
455                    key={d.id}
456                    summary={
457                      <>
458                        {d.client}{" "}
459                        <span className="cap-muted">
460                          <Time at={d.createdAt} /> · {d.words} words
461                        </span>
462                      </>
463                    }
464                  >
465                    {d.note ? <p>{d.note}</p> : null}
466                    <p className="app-bible-body">{d.source}</p>
467                    <div className="app-actions">
468                      <Link className="cap-btn" data-size="sm" to={`${base}/h/${data.path}?compare=ai&ai=${d.id}`}>
469                        Compare with yours
470                      </Link>
471                      {data.canEdit ? (
472                        <Button size="sm" pending={busy} onClick={(event) => ask("use-ai", event.currentTarget, d.id)}>
473                          Use as my draft
474                        </Button>
475                      ) : null}
476                    </div>
477                  </Disclosure>
478                ))}
479              </div>
480            </Panel>
481          ) : null}
482
483          {data.kind === "scene" ? (
484            <Panel title="From the bible" count={data.bible.length}>
485              {data.bible.length === 0 ? (
486                <p className="cap-muted">No entries match this scene's header.</p>
487              ) : (
488                <div className="app-stack" data-tight>
489                  {data.bible.map((b) => (
490                    <Disclosure
491                      key={b.path}
492                      summary={
493                        <>
494                          {b.name} <span className="cap-muted">{b.kind}</span>
495                        </>
496                      }
497                    >
498                      <p className="app-bible-body">{b.body || "(no notes)"}</p>
499                      <Link to={`${base}/f/${b.path}`}>Open</Link>
500                    </Disclosure>
501                  ))}
502                </div>
503              )}
504            </Panel>
505          ) : null}
506        </aside>
507      </div>
508
509      <ConfirmDialog
510        open={asking?.kind === "discard"}
511        title="Discard your draft?"
512        lead="Your working copy in Carrel is deleted, and the editor goes back to Git's text. This cannot be undone."
513        body={[]}
514        action="Discard my draft"
515        returnTo={asking?.opener}
516        perform={async () => void (await writer.submit({ intent: "discard" }, { method: "post" }))}
517        onClose={() => setAsking(null)}
518      />
519      <ConfirmDialog
520        open={asking?.kind === "dismiss"}
521        title="Dismiss this flag?"
522        lead="A dismissed flag no longer holds export, and it cannot be reopened."
523        body={asking?.id !== undefined ? [data.findings.find((f) => f.id === asking.id)?.message ?? ""] : []}
524        action="Dismiss flag"
525        returnTo={asking?.opener}
526        perform={async () => {
527          if (asking?.id !== undefined) await writer.submit({ intent: "dismiss", finding: String(asking.id) }, { method: "post" });
528        }}
529        onClose={() => setAsking(null)}
530      />
531      <ConfirmDialog
532        open={asking?.kind === "use-ai"}
533        title="Use the AI draft as your draft?"
534        lead="Its text replaces your working draft, which you then edit and save as usual. Your current draft is not kept."
535        body={[]}
536        action="Replace my draft"
537        returnTo={asking?.opener}
538        perform={async () => {
539          if (asking?.id !== undefined) await writer.submit({ intent: "use-ai-draft", draft: String(asking.id) }, { method: "post" });
540        }}
541        onClose={() => setAsking(null)}
542      />
543    </div>
544  );
545}