app/components/media/library-insert.tsx

Functions

Imports

It imports app/components/media/upload.ts. Imported by app/components/editor/writing-surface.tsx.

Source

1// "From library": an image already on the site goes into the post, with its alt text. Capsomer's editor
2// uploads (a drop, a paste, its Insert image button) but has no way to pick a file the site already
3// holds, so this is Carrel's: a dialog over the project's media endpoint, then an alt step that starts
4// from the alt the file already has, then one insert at the cursor through the writing surface, in
5// whichever editor it shows.
6
7import { useEffect, useRef, useState } from "react";
8import { useFetcher } from "react-router";
9import { Button } from "capsomer/react/button";
10import { Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "capsomer/react/dialog";
11import { Empty } from "capsomer/react/empty";
12import { Field } from "capsomer/react/field";
13
14import type { EditorMedia } from "./upload";
15
16type Row = { id: string; url: string; src: string; filename: string | null; alt: string; contentType: string };
17type Picked = { url: string; src: string; name: string };
18
19export function LibraryInsert({ media, insert: put }: { media: EditorMedia; insert: (markdown: string) => void }) {
20  const [open, setOpen] = useState(false);
21  const [picked, setPicked] = useState<Picked | null>(null);
22  const [alt, setAlt] = useState("");
23  const [q, setQ] = useState("");
24  const [opener, setOpener] = useState<HTMLElement | null>(null);
25  const altField = useRef<HTMLInputElement>(null);
26  const list = useFetcher<{ items: Row[]; nextCursor: string | null; error?: string }>();
27
28  useEffect(() => {
29    if (open && list.state === "idle" && !list.data) void list.load(media.endpoint);
30  }, [open, list, media.endpoint]);
31
32  // Focus goes to the alt field once a file is picked: the step is otherwise silent.
33  useEffect(() => {
34    if (picked) altField.current?.focus();
35  }, [picked]);
36
37  const close = () => {
38    setOpen(false);
39    setPicked(null);
40    setAlt("");
41  };
42
43  // Images only: a PDF in the library is not something a figure can show.
44  const images = (list.data?.items ?? []).filter((o) => o.contentType.startsWith("image/"));
45  const loading = !list.data;
46
47  const insert = () => {
48    if (!picked || !alt.trim()) return;
49    put(media.figure(picked.url, alt.trim()));
50    close();
51  };
52
53  return (
54    <>
55      <Button
56        variant="quiet"
57        size="sm"
58        onClick={(event) => {
59          setOpener(event.currentTarget);
60          setOpen(true);
61        }}
62      >
63        Insert from library
64      </Button>
65      <Dialog open={open} onOpenChange={(o) => !o && close()} placement="center" size="lg" returnTo={opener} aria-labelledby="library-title">
66        <DialogHeader divider>
67          <DialogTitle id="library-title">{picked ? "Describe the image" : "Insert an image from the library"}</DialogTitle>
68          <DialogDescription>{picked ? "The image is on the site. It is not in the post until it has alt text." : "Pick an image already on the site, then describe it."}</DialogDescription>
69        </DialogHeader>
70        <DialogBody>
71          {picked ? (
72            <div className="app-pick-alt" role="group" aria-label="Describe the image">
73              <img className="app-pick-thumb" src={picked.src} alt="" />
74              <div className="app-form">
75                <Field label="Alt text" required help="What the image shows, for someone who cannot see it.">
76                  <input
77                    ref={altField}
78                    className="cap-input"
79                    value={alt}
80                    onChange={(event) => setAlt(event.target.value)}
81                    autoComplete="off"
82                    onKeyDown={(event) => {
83                      if (event.key === "Enter") {
84                        event.preventDefault();
85                        insert();
86                      }
87                    }}
88                  />
89                </Field>
90                <p className="cap-muted">{picked.name}</p>
91              </div>
92            </div>
93          ) : (
94            <div className="app-form" role="group" aria-label="Insert an image from the library">
95              <p className="cap-sr-only" role="status">
96                {loading ? "Loading media" : images.length === 0 ? "No images" : `${images.length} image${images.length === 1 ? "" : "s"}`}
97              </p>
98              <form
99                className="app-filters"
100                role="search"
101                onSubmit={(event) => {
102                  event.preventDefault();
103                  void list.load(`${media.endpoint}?q=${encodeURIComponent(q.trim())}`);
104                }}
105              >
106                <Field label="Search the library">
107                  <input className="cap-input" type="search" value={q} onChange={(event) => setQ(event.target.value)} placeholder="Name or alt text" />
108                </Field>
109                <Button type="submit">Search</Button>
110              </form>
111              {list.data?.error ? (
112                <Empty kind="failed" flush title="The library did not answer">
113                  {list.data.error}
114                </Empty>
115              ) : loading ? (
116                <p className="cap-muted">Loading media...</p>
117              ) : images.length === 0 ? (
118                <Empty kind={q.trim() ? "no-match" : "nothing-yet"} flush title={q.trim() ? `No images match “${q.trim()}”` : "No images in the library yet"}>
119                  {q.trim() ? "Try the name or the alt text." : "Drop or paste one into the editor to upload it."}
120                </Empty>
121              ) : (
122                <div className="cap-media" data-size="s">
123                  <ul className="cap-media-grid" role="list" aria-label="Images">
124                    {images.map((o) => (
125                      <li key={o.id} className="cap-media-tile">
126                        <button
127                          type="button"
128                          className="cap-media-open"
129                          onClick={() => {
130                            setPicked({ url: o.url, src: o.src, name: o.filename ?? o.id });
131                            setAlt(o.alt);
132                          }}
133                        >
134                          <span className="cap-media-thumb">
135                            <img src={o.src} alt="" loading="lazy" width={160} height={160} />
136                          </span>
137                          <span className="cap-media-name">{o.filename ?? o.id}</span>
138                        </button>
139                      </li>
140                    ))}
141                  </ul>
142                </div>
143              )}
144              {list.data?.nextCursor ? <p className="cap-muted">Showing the first page. Search, or open the media library to page through the rest.</p> : null}
145            </div>
146          )}
147        </DialogBody>
148        <DialogFooter align="between">
149          {picked ? (
150            <Button
151              onClick={() => {
152                setPicked(null);
153                setAlt("");
154              }}
155            >
156              Back to the library
157            </Button>
158          ) : (
159            <DialogClose part="cancel">Cancel</DialogClose>
160          )}
161          {picked ? (
162            <Button variant="primary" onClick={insert} disabledReason={alt.trim() === "" ? "Describe the image first." : undefined}>
163              Insert figure
164            </Button>
165          ) : null}
166        </DialogFooter>
167      </Dialog>
168    </>
169  );
170}