app/components/editor/writing-surface.tsx

Functions

Imports

It imports app/components/editor/rich-editor.tsx, app/components/media/library-insert.tsx, app/components/media/upload.ts, app/lib/editor/markdown.mjs, app/lib/site-markdown.ts. Imported by app/routes/book.file.tsx, app/routes/editor.tsx.

Source

1// Carrel's writing surface: the formatted editor by default (ruling point 3), with
2// the Markdown kept byte for byte underneath, and "Markdown" beside it, which is Capsomer's Markdown
3// editor exactly as before. Both get Carrel's blocks, its link targets and its image upload, set in
4// the serif prose layout, with "Insert from library" beside them. The choice is remembered on this
5// device. The formatted editor is components/editor/rich-editor.tsx; the Markdown one is Capsomer's.
6
7import { EditorView } from "@codemirror/view";
8import { useEffect, useRef, useState } from "react";
9import { MarkdownEditor, type LinkTarget } from "capsomer/react/markdown-editor";
10import { Segmented } from "capsomer/react/segmented";
11
12import { RichEditor, type RichEditorHandle } from "~/components/editor/rich-editor";
13import { LibraryInsert } from "~/components/media/library-insert";
14import { uploadImage, type EditorMedia } from "~/components/media/upload";
15import type { Dialect } from "~/lib/editor/markdown.mjs";
16import { SCAFFOLDS } from "~/lib/site-markdown";
17
18export type { LinkTarget };
19
20type Mode = "formatted" | "markdown";
21const MODE_KEY = "carrel:editor-mode";
22
23/** In the Markdown editor: a block at the cursor on a line of its own, as the editor's own blocks are put. */
24function insertIntoMarkdown(root: HTMLElement | null, text: string) {
25  const dom = root?.querySelector<HTMLElement>(".cm-editor");
26  const view = dom ? EditorView.findFromDOM(dom) : null;
27  if (!view) return;
28  const { from, to } = view.state.selection.main;
29  const line = view.state.doc.lineAt(from);
30  const prefix = line.from === from && line.text.trim() === "" ? "" : "\n\n";
31  view.dispatch({ changes: { from, to, insert: `${prefix}${text}` }, selection: { anchor: from + prefix.length + text.length }, scrollIntoView: true });
32  view.focus();
33}
34
35export function WritingSurface({
36  label,
37  value,
38  onChange,
39  readOnly,
40  linkTargets,
41  media,
42  dialect = "site",
43}: {
44  /** What the surface is called to a screen reader, for example "Post" or "Scene". */
45  label: string;
46  value: string;
47  onChange: (next: string) => void;
48  readOnly: boolean;
49  linkTargets: LinkTarget[];
50  /** The project's media endpoint and the site's figure markup. Absent: no image upload or insert. */
51  media?: EditorMedia | null;
52  /** A site's Markdown (directives, math) or a book's. */
53  dialect?: Dialect;
54}) {
55  const root = useRef<HTMLDivElement>(null);
56  const rich = useRef<RichEditorHandle | null>(null);
57  const [mode, setMode] = useState<Mode>("formatted");
58  useEffect(() => {
59    try {
60      if (localStorage.getItem(MODE_KEY) === "markdown") setMode("markdown");
61    } catch {
62      // Storage refused: the formatted editor, as the default.
63    }
64  }, []);
65  const choose = (next: Mode) => {
66    setMode(next);
67    try {
68      localStorage.setItem(MODE_KEY, next);
69    } catch {
70      // Not remembered, still switched.
71    }
72  };
73  // Never for a Reader, whatever the parent passes: a read-only editor inserts nothing.
74  const images = readOnly ? null : (media ?? null);
75  // The editor shows the picture it just uploaded at `src` (an address Carrel's page can load), while
76  // the Markdown must carry the site's own address, so each upload remembers which is which.
77  const sites = useRef(new Map<string, string>());
78  const onUpload = images
79    ? async (file: File) => {
80        const uploaded = await uploadImage(images.endpoint, file);
81        sites.current.set(uploaded.src, uploaded.url);
82        return { url: uploaded.src };
83      }
84    : undefined;
85  const imageMarkdown = images ? ({ url, alt }: { url: string; alt: string }) => images.figure(sites.current.get(url) ?? url, alt) : undefined;
86
87  return (
88    <div className="app-writing" ref={root} data-mode={mode}>
89      <div className="app-writing-tools">
90        <Segmented
91          legend={`Edit ${label.toLowerCase()} as`}
92          hideLegend
93          size="sm"
94          value={mode}
95          onChange={choose}
96          options={[
97            { value: "formatted", label: "Formatted" },
98            { value: "markdown", label: "Markdown" },
99          ]}
100        />
101        {images ? <LibraryInsert media={images} insert={(md) => (mode === "formatted" ? rich.current?.insertMarkdown(md) : insertIntoMarkdown(root.current, md))} /> : null}
102      </div>
103      {mode === "formatted" ? (
104        <RichEditor
105          ariaLabel={readOnly ? `${label}, formatted, read only` : `${label}, formatted`}
106          value={value}
107          onChange={onChange}
108          readOnly={readOnly}
109          dialect={dialect}
110          placeholder="Write here."
111          scaffolds={SCAFFOLDS}
112          linkTargets={linkTargets}
113          onUpload={onUpload}
114          imageMarkdown={imageMarkdown}
115          accept={images?.accept}
116          onReady={(handle) => {
117            rich.current = handle;
118          }}
119        />
120      ) : (
121        <MarkdownEditor
122          label={<span className="cap-sr-only">{label}</span>}
123          ariaLabel={readOnly ? `${label}, markdown, read only` : `${label}, markdown`}
124          value={value}
125          onChange={onChange}
126          readOnly={readOnly}
127          placeholder="Write in markdown."
128          scaffolds={SCAFFOLDS}
129          linkTargets={linkTargets}
130          accept={images?.accept}
131          onUpload={onUpload}
132          imageMarkdown={imageMarkdown}
133        />
134      )}
135    </div>
136  );
137}