app/components/admin/media-palette.tsx

Functions

Imports

It imports app/components/admin/toast.tsx, app/components/admin/use-media-search.ts, app/lib/clipboard.ts, app/lib/media/byte-size.mjs. Imported by app/components/admin/media-search.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2import { useNavigate } from "react-router";
3import { Panel } from "capsomer/react/panel";
4
5import { toast } from "~/components/admin/toast";
6import { useMediaSearch } from "~/components/admin/use-media-search";
7import { copyText } from "~/lib/clipboard";
8import { byteSize } from "~/lib/media/byte-size.mjs";
9
10// Attaches to the existing search input by id rather than replacing it, so the no-script page is unchanged.
11// The input becomes an APG combobox over a listbox, the pattern the editor's link palette uses.
12
13const LIST_ID = "media-palette-list";
14// By position, not key: two keys can sanitise to the same id, and activedescendant would then point at the wrong row.
15const optionId = (index: number) => `media-palette-opt-${index}`;
16
17type PaletteKey =
18  | { do: "focus"; select: boolean }
19  | { do: "close" }
20  | { do: "move"; by: 1 | -1 }
21  | { do: "choose"; open: boolean };
22
23/**
24 * The key map. Only Cmd+K is global: a bare "/" was a single-key shortcut on the whole page, which
25 * WCAG 2.1.4 forbids without a way to turn it off. The rest applies in the search box alone, and the
26 * list keys only while a list is showing.
27 */
28function paletteKey(
29  event: KeyboardEvent,
30  inSearchBox: boolean,
31  listing: boolean,
32): PaletteKey | null {
33  if ((event.key === "k" || event.key === "K") && (event.metaKey || event.ctrlKey)) {
34    return { do: "focus", select: true };
35  }
36  if (!inSearchBox) return null;
37
38  if (event.key === "Escape") return { do: "close" };
39  if (!listing) return null;
40
41  if (event.key === "ArrowDown") return { do: "move", by: 1 };
42  if (event.key === "ArrowUp") return { do: "move", by: -1 };
43  if (event.key === "Enter") return { do: "choose", open: event.shiftKey };
44  return null;
45}
46
47export function MediaPalette({
48  inputId = "media-q",
49}: {
50  inputId?: string;
51}) {
52  const [query, setQuery] = useState("");
53  const [cursor, setCursor] = useState(0);
54  const { results, hasMore, searchError } = useMediaSearch(query, setCursor);
55  const navigate = useNavigate();
56  const [open, setOpen] = useState(false);
57  const [copied, setCopied] = useState("");
58  const [copyFailed, setCopyFailed] = useState(false);
59  const listing = open && results.length > 0 && !searchError;
60  const activeIndex = listing ? Math.min(cursor, results.length - 1) : -1;
61
62  const inputRef = useRef<HTMLInputElement | null>(null);
63
64  useEffect(() => {
65    inputRef.current = document.getElementById(inputId) as HTMLInputElement | null;
66    const input = inputRef.current;
67    if (!input) return;
68
69    const onInput = () => {
70      setQuery(input.value);
71      setCursor(0);
72      setOpen(input.value.trim().length > 0);
73    };
74    input.addEventListener("input", onInput);
75    return () => input.removeEventListener("input", onInput);
76  }, [inputId]);
77
78  // The combobox state lives on the page's own input, so it is written there rather than rendered.
79  useEffect(() => {
80    const input = inputRef.current;
81    if (!input) return;
82    input.setAttribute("role", "combobox");
83    input.setAttribute("aria-autocomplete", "list");
84    input.setAttribute("aria-expanded", String(listing));
85    if (listing) input.setAttribute("aria-controls", LIST_ID);
86    else input.removeAttribute("aria-controls");
87    if (activeIndex >= 0) input.setAttribute("aria-activedescendant", optionId(activeIndex));
88    else input.removeAttribute("aria-activedescendant");
89  }, [listing, activeIndex]);
90
91  // Announced by the page's toast region as well as shown in the count: the count is not a live region.
92  const copy = (value: string) => {
93    copyText(value)
94      .then(() => {
95        setCopyFailed(false);
96        setCopied(value);
97        toast(`Copied ${value}`);
98        window.setTimeout(() => setCopied(""), 1600);
99      })
100      .catch(() => {
101        setCopied("");
102        setCopyFailed(true);
103        toast(`Copy failed. The address is ${value}`);
104        window.setTimeout(() => setCopyFailed(false), 2400);
105      });
106  };
107
108  useEffect(() => {
109    const onKey = async (event: KeyboardEvent) => {
110      const key = paletteKey(
111        event,
112        event.target === inputRef.current,
113        open && results.length > 0,
114      );
115      if (!key) return;
116
117      if (key.do === "focus") {
118        event.preventDefault();
119        inputRef.current?.focus();
120        if (key.select) inputRef.current?.select();
121        return;
122      }
123      // APG: Escape closes the list and, pressed again, clears the field. Focus stays in the box.
124      if (key.do === "close") {
125        event.preventDefault();
126        if (open) {
127          setOpen(false);
128          return;
129        }
130        if (inputRef.current) inputRef.current.value = "";
131        setQuery("");
132        return;
133      }
134      if (key.do === "move") {
135        event.preventDefault();
136        setCursor((c) =>
137          key.by > 0 ? Math.min(results.length - 1, c + 1) : Math.max(0, c - 1),
138        );
139        return;
140      }
141      // preventDefault: otherwise the form submits and navigates, throwing away the copy.
142      event.preventDefault();
143      const hit = results[Math.min(cursor, results.length - 1)];
144      if (!hit) return;
145      if (key.open) {
146        // Router navigation: assigning window.location rebuilds the whole document just to show a panel.
147        await navigate(`/admin/media?key=${encodeURIComponent(hit.key)}`, {
148          preventScrollReset: true,
149        });
150      } else {
151        copy(hit.url);
152      }
153    };
154    window.addEventListener("keydown", onKey);
155    return () => window.removeEventListener("keydown", onKey);
156  }, [open, results, cursor, navigate]);
157
158  const count = `${results.length}${hasMore ? "+" : ""} match${results.length === 1 && !hasMore ? "" : "es"}`;
159  // In the document before the list opens, so the first count is announced as well as later ones.
160  const announcement = !open || !query.trim()
161    ? ""
162    : searchError
163      ? "Search failed"
164      : results.length
165        ? count
166        : "No matches";
167  const status = (
168    <p className="cap-sr-only" role="status">
169      {announcement}
170    </p>
171  );
172
173  const showing = open && (results.length > 0 || query.trim().length > 0);
174
175  // One return, so the region keeps its place whether or not the list shows and is never remounted.
176  return (
177    <>
178      {status}
179      {showing ? (
180        <Panel
181          title="Matching files"
182          src={
183            <span aria-hidden="true">
184              {copied ? "copied" : copyFailed ? "copy failed" : results.length ? count : ""}
185            </span>
186          }
187          flush
188          footer={
189            /* The count says "6+" when the cap was hit, so six never reads as the whole answer. */
190            <p className="cap-muted">
191              <kbd>up down</kbd> move · <kbd>enter</kbd> copies the address · <kbd>shift enter</kbd>{" "}
192              opens details
193            </p>
194          }
195        >
196          {searchError ? (
197            <p className="cap-panel-pad">
198              Search failed: {searchError}. Press Enter to search the full page.
199            </p>
200          ) : results.length === 0 ? (
201            <p className="cap-panel-pad">
202              Nothing matches &ldquo;{query.trim()}&rdquo;. Searched paths, names, alt text and tags.
203            </p>
204          ) : (
205            <ul className="cap-listbox" id={LIST_ID} role="listbox" aria-label="Matching files">
206              {results.map((r, i) => (
207                <li key={r.key} role="presentation">
208                  {/* A link, not a button: clicking a row opens it, while Enter copies. Out of the tab
209                      order: the box keeps focus and points at the option. */}
210                  <a
211                    href={`/admin/media?key=${encodeURIComponent(r.key)}`}
212                    id={optionId(i)}
213                    role="option"
214                    aria-selected={i === Math.min(cursor, results.length - 1)}
215                    tabIndex={-1}
216                    className="cap-option"
217                    data-active={i === Math.min(cursor, results.length - 1) ? "" : undefined}
218                    onMouseEnter={() => setCursor(i)}
219                  >
220                    <span className="cap-option-label">
221                      {r.name} <span className="cap-muted">{r.dir}</span>
222                    </span>
223                    <span className="cap-option-hint">
224                      {r.viewable ? "" : `${r.key.split(".").pop()?.toUpperCase()} · `}
225                      {byteSize(r.size)}
226                    </span>
227                  </a>
228                </li>
229              ))}
230            </ul>
231          )}
232        </Panel>
233      ) : null}
234    </>
235  );
236}