app/components/editor/rich-editor.tsx

Functions

Imports

It imports app/components/editor/source-views.ts, app/components/editor/toolbar-icons.tsx, app/lib/editor/markdown.mjs, app/lib/editor/schema.mjs. Imported by app/components/editor/writing-surface.tsx.

Source

1// The formatted editor (ruling point 3): Tiptap's MIT core over ProseMirror, showing
2// formatted text with the Markdown underneath kept byte for byte (lib/editor/markdown.mjs). It keeps
3// what the Markdown editor did: the APG toolbar (bold, italic, link, heading, code, footnote, the app's
4// blocks, an image), Ctrl or Cmd B, I, E, K and S, the link palette over the app's pages, the block
5// menu on a lone "/", an image that is not in the text until it has alt text, the word count and
6// reading time, read-only, and Tab leaving the text. Markdown the editor does not format (front
7// matter, code, tables, directives, math) sits in source blocks, edited as Markdown in place.
8//
9// The server renders a labelled textarea holding the Markdown, so the page reads the same before the
10// script runs; the editor replaces it once it loads.
11
12import { Editor, type JSONContent } from "@tiptap/core";
13import { Placeholder } from "@tiptap/extensions";
14import { useEffect, useRef, useState } from "react";
15import { countWords, filterLinkTargets, looksLikeUrl, minutesForWords, type LinkTarget, type Scaffold } from "capsomer/behaviour/markdown-editor";
16import { place } from "capsomer/behaviour/popover";
17
18import { fingerprints, fromDoc, pastedBlocks, toDoc, type Dialect, type JsonNode } from "~/lib/editor/markdown.mjs";
19import { baseExtensions } from "~/lib/editor/schema.mjs";
20
21import { sourceBlockView, SourceInlineView } from "./source-views";
22import { GLYPH, Icon } from "./toolbar-icons";
23
24export type RichEditorHandle = {
25  /** Puts Markdown (a figure, an image) in as blocks at the cursor, as the editor's own blocks are put. */
26  insertMarkdown: (markdown: string) => void;
27  focus: () => void;
28};
29
30export type RichEditorProps = {
31  /** What the editing surface is called to a screen reader, for example "Post, formatted". */
32  ariaLabel: string;
33  value: string;
34  onChange: (next: string) => void;
35  readOnly: boolean;
36  dialect: Dialect;
37  placeholder?: string;
38  scaffolds?: Scaffold[];
39  linkTargets?: LinkTarget[];
40  onUpload?: (file: File) => Promise<{ url: string }>;
41  imageMarkdown?: (image: { url: string; alt: string; name: string }) => string;
42  accept?: string;
43  onReady?: (handle: RichEditorHandle) => void;
44};
45
46const defaultImage = ({ url, alt }: { url: string; alt: string }) => `![${alt.replace(/[[\]]/g, "")}](${url})`;
47
48type Palette = { from: number; to: number; query: string; active: number };
49type Upload = { name: string; state: "sending" } | { name: string; state: "alt"; url: string } | null;
50
51export function RichEditor(props: RichEditorProps) {
52  const { ariaLabel, value, readOnly, dialect, placeholder = "Write here.", scaffolds = [], linkTargets = [], onUpload, accept } = props;
53  const host = useRef<HTMLDivElement>(null);
54  const editorRef = useRef<Editor | null>(null);
55  const origin = useRef<{ tail: string; prints: Map<number, string>; last: string }>({ tail: "", prints: new Map(), last: value });
56  const propsRef = useRef(props);
57  propsRef.current = props;
58  const readOnlyRef = useRef(readOnly);
59  readOnlyRef.current = readOnly;
60  const [ready, setReady] = useState(false);
61  const [words, setWords] = useState(() => countWords(value));
62  const [palette, setPalette] = useState<Palette | null>(null);
63  const [slash, setSlash] = useState<number | null>(null);
64  const [upload, setUpload] = useState<Upload>(null);
65  const [uploadError, setUploadError] = useState<string | null>(null);
66  const [alt, setAlt] = useState("");
67  const [said, say] = useState("");
68  const [activeTool, setActiveTool] = useState(0);
69  const toolbar = useRef<HTMLDivElement>(null);
70  const paletteRef = useRef<HTMLDivElement>(null);
71  const slashRef = useRef<HTMLUListElement>(null);
72  const fileRef = useRef<HTMLInputElement>(null);
73  const altRef = useRef<HTMLInputElement>(null);
74
75  /** The Markdown the document stands for: unchanged blocks as their bytes, the rest spelled again. */
76  const markdown = (editor: Editor) => fromDoc(editor.getJSON() as JsonNode, origin.current.tail, origin.current.prints, dialect);
77
78  const load = (editor: Editor, source: string) => {
79    const loaded = toDoc(source, dialect);
80    const doc = editor.schema.nodeFromJSON(loaded.doc);
81    // Not an edit: no undo step, and no change reported.
82    editor.view.dispatch(editor.state.tr.replaceWith(0, editor.state.doc.content.size, doc.content).setMeta("addToHistory", false).setMeta("preventUpdate", true));
83    origin.current = { tail: loaded.tail, prints: fingerprints(editor.getJSON() as JsonNode), last: source };
84    setWords(countWords(source));
85  };
86
87  // The editor itself: made once, after the page is in the browser.
88  useEffect(() => {
89    if (!host.current) return;
90    const loaded = toDoc(value, dialect);
91    const editor = new Editor({
92      element: host.current,
93      extensions: [...baseExtensions().filter((e) => e.name !== "sourceBlock" && e.name !== "sourceInline"), sourceBlockView(() => readOnlyRef.current), SourceInlineView, Placeholder.configure({ placeholder })],
94      content: loaded.doc as JSONContent,
95      editable: !readOnly,
96      // Carrel's CSP takes no inline styles: Tiptap's base rules are in app.css instead.
97      injectCSS: false,
98      editorProps: {
99        attributes: {
100          class: "app-rich-surface",
101          role: "textbox",
102          "aria-multiline": "true",
103          "aria-label": ariaLabel,
104          "aria-placeholder": placeholder,
105          spellcheck: "true",
106        },
107        handleKeyDown: (_view, event) => {
108          const mod = event.ctrlKey || event.metaKey;
109          if (mod && event.key.toLowerCase() === "s") return true; // The page's own Ctrl+S saves; the browser's never opens.
110          if (mod && event.key.toLowerCase() === "k") {
111            openPalette();
112            return true;
113          }
114          if (event.key === "ArrowDown" && slashOpen.current) {
115            slashRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
116            return true;
117          }
118          if (event.key === "Escape" && slashOpen.current) {
119            setSlash(null);
120            return true;
121          }
122          return false;
123        },
124        handlePaste: (_view, event) => {
125          const files = [...(event.clipboardData?.files ?? [])].filter((f) => f.type.startsWith("image/"));
126          if (files[0] && propsRef.current.onUpload) {
127            void startUpload(files[0]);
128            return true;
129          }
130          // Markdown pasted as text becomes formatted blocks, as typing it in Markdown did.
131          const html = event.clipboardData?.getData("text/html");
132          const text = event.clipboardData?.getData("text/plain");
133          if (!html && text && /\n|^#{1,6} |^[-*+] |^\d+\. |^> |[*_`[]/.test(text)) {
134            const blocks = pastedBlocks(text, dialect);
135            const single = blocks.length === 1 && blocks[0]!.type === "paragraph";
136            editorRef.current?.commands.insertContent(single ? (blocks[0]!.content ?? []) : blocks);
137            return true;
138          }
139          return false;
140        },
141        handleDrop: (_view, event) => {
142          const files = [...((event as DragEvent).dataTransfer?.files ?? [])].filter((f) => f.type.startsWith("image/"));
143          if (files[0] && propsRef.current.onUpload) {
144            event.preventDefault();
145            void startUpload(files[0]);
146            return true;
147          }
148          return false;
149        },
150      },
151      onUpdate: ({ editor: e }) => {
152        const md = markdown(e);
153        origin.current.last = md;
154        setWords(countWords(md));
155        propsRef.current.onChange(md);
156        syncSlash(e);
157      },
158      onSelectionUpdate: ({ editor: e }) => syncSlash(e),
159    });
160    origin.current = { tail: loaded.tail, prints: fingerprints(editor.getJSON() as JsonNode), last: value };
161    editorRef.current = editor;
162    setReady(true);
163    propsRef.current.onReady?.({ insertMarkdown, focus: () => editor.commands.focus() });
164    return () => {
165      editor.destroy();
166      editorRef.current = null;
167    };
168    // Made once; later values come in through the effects below.
169    // eslint-disable-next-line react-hooks/exhaustive-deps
170  }, []);
171
172  // A new value from outside (a discarded draft, an AI draft taken as the working copy) is loaded.
173  useEffect(() => {
174    const editor = editorRef.current;
175    if (editor && value !== origin.current.last) load(editor, value);
176    // eslint-disable-next-line react-hooks/exhaustive-deps
177  }, [value]);
178
179  useEffect(() => {
180    editorRef.current?.setEditable(!readOnly, false);
181  }, [readOnly]);
182
183  // ---- the block menu on a lone "/"
184  const slashOpen = useRef(false);
185  slashOpen.current = slash !== null;
186  function syncSlash(editor: Editor) {
187    const { $from, empty: collapsed } = editor.state.selection;
188    const lone = collapsed && !readOnlyRef.current && scaffolds.length > 0 && $from.depth === 1 && $from.parent.type.name === "paragraph" && $from.parent.textContent === "/" && $from.parentOffset === 1;
189    setSlash(lone ? $from.before() : null);
190  }
191  useEffect(() => {
192    const menu = slashRef.current;
193    const editor = editorRef.current;
194    if (!menu || !editor || slash === null) return;
195    menu.showPopover?.();
196    const at = editor.view.coordsAtPos(slash + 1);
197    place({ getBoundingClientRect: () => new DOMRect(at.left, at.top, 0, at.bottom - at.top) } as Element, menu, { side: "bottom", align: "start" });
198    say("Block menu open. Press Down arrow to choose a block, Escape to close.");
199    return () => {
200      try {
201        menu.hidePopover?.();
202      } catch {
203        // Already closed.
204      }
205    };
206  }, [slash]);
207
208  function insertScaffold(s: Scaffold, fromSlash: boolean) {
209    const editor = editorRef.current;
210    if (!editor) return;
211    const block = { type: "sourceBlock", attrs: { text: s.text, kind: s.label } };
212    const chain = editor.chain().focus();
213    if (fromSlash && slash !== null) chain.insertContentAt({ from: slash, to: slash + editor.state.doc.nodeAt(slash)!.nodeSize }, block).run();
214    else chain.insertContent(block).run();
215    setSlash(null);
216    focusSourceBlock(editor, s);
217  }
218
219  /** Focus lands inside the new block's Markdown, where the block says (for example inside alt=""). */
220  function focusSourceBlock(editor: Editor, s: Scaffold) {
221    requestAnimationFrame(() => {
222      const areas = [...editor.view.dom.querySelectorAll<HTMLTextAreaElement>(".app-src-text")];
223      const area = areas.find((a) => a.value === s.text && document.activeElement !== a) ?? areas.at(-1);
224      if (!area) return;
225      area.focus();
226      const at = s.cursorAfter ? s.text.indexOf(s.cursorAfter) + s.cursorAfter.length : (s.cursor ?? s.text.length);
227      area.setSelectionRange(at, at);
228    });
229  }
230
231  function insertMarkdown(md: string) {
232    const editor = editorRef.current;
233    if (!editor) return;
234    editor.chain().focus().insertContent(pastedBlocks(md, dialect) as JSONContent[]).run();
235  }
236
237  // ---- the link palette
238  function openPalette() {
239    const editor = editorRef.current;
240    if (!editor || readOnlyRef.current) return;
241    const { from, to } = editor.state.selection;
242    setSlash(null);
243    setPalette({ from, to, query: editor.state.doc.textBetween(from, to, " "), active: 0 });
244  }
245  useEffect(() => {
246    const panel = paletteRef.current;
247    const editor = editorRef.current;
248    if (!panel || !editor || !palette) return;
249    panel.showPopover?.();
250    const at = editor.view.coordsAtPos(palette.from);
251    place({ getBoundingClientRect: () => new DOMRect(at.left, at.top, 0, at.bottom - at.top) } as Element, panel, { side: "bottom", align: "start" });
252    panel.querySelector<HTMLInputElement>("input")?.focus();
253    return () => {
254      try {
255        panel.hidePopover?.();
256      } catch {
257        // Already closed.
258      }
259    };
260    // Opened once per palette; typing in it does not move it.
261    // eslint-disable-next-line react-hooks/exhaustive-deps
262  }, [palette !== null]);
263  const matches = palette ? filterLinkTargets(linkTargets, palette.query) : [];
264  const typedUrl = palette && looksLikeUrl(palette.query) ? palette.query.trim() : null;
265  function closePalette(restore: boolean) {
266    const editor = editorRef.current;
267    const p = palette;
268    setPalette(null);
269    if (editor && p && restore) editor.chain().focus().setTextSelection({ from: p.from, to: p.to }).run();
270  }
271  function applyLink(href: string, title: string) {
272    const editor = editorRef.current;
273    const p = palette;
274    setPalette(null);
275    if (!editor || !p) return;
276    const chain = editor.chain().focus().setTextSelection({ from: p.from, to: p.to });
277    if (p.from === p.to) chain.insertContent({ type: "text", text: title, marks: [{ type: "link", attrs: { href } }] }).run();
278    else chain.setLink({ href }).run();
279    // The cursor lands after the link, outside it.
280    editor.commands.unsetMark("link", { extendEmptyMarkRange: false });
281  }
282
283  // ---- images: uploaded, then not in the text until they have alt text
284  async function startUpload(file: File) {
285    const send = propsRef.current.onUpload;
286    if (!send) return;
287    setUploadError(null);
288    setUpload({ name: file.name, state: "sending" });
289    say(`Uploading ${file.name}`);
290    try {
291      const { url } = await send(file);
292      setAlt("");
293      setUpload({ name: file.name, state: "alt", url });
294      say("Uploaded. Describe the image to insert it.");
295      requestAnimationFrame(() => altRef.current?.focus());
296    } catch (error) {
297      setUpload(null);
298      setUploadError(error instanceof Error ? error.message : "The upload failed.");
299      say("");
300    }
301  }
302  function insertImage() {
303    if (upload?.state !== "alt" || !alt.trim()) return;
304    const md = (propsRef.current.imageMarkdown ?? defaultImage)({ url: upload.url, alt: alt.trim(), name: upload.name });
305    setUpload(null);
306    insertMarkdown(md);
307    say("Image inserted.");
308  }
309
310  // ---- the toolbar
311  const run = (fn: (e: Editor) => void) => () => {
312    const editor = editorRef.current;
313    if (editor) fn(editor);
314  };
315  const tools = [
316    { id: "bold", label: "Bold", hint: "Ctrl or Cmd + B", keys: "Control+B Meta+B", paths: GLYPH.bold, run: run((e) => e.chain().focus().toggleBold().run()) },
317    { id: "italic", label: "Italic", hint: "Ctrl or Cmd + I", keys: "Control+I Meta+I", paths: GLYPH.italic, run: run((e) => e.chain().focus().toggleItalic().run()) },
318    { id: "link", label: "Link", hint: "Ctrl or Cmd + K, searches pages", keys: "Control+K Meta+K", paths: GLYPH.link, run: openPalette },
319    {
320      id: "heading",
321      label: "Heading level",
322      hint: "Cycles h2, h3, h4, none",
323      paths: GLYPH.heading,
324      run: run((e) => {
325        const level = e.isActive("heading", { level: 2 }) ? 3 : e.isActive("heading", { level: 3 }) ? 4 : e.isActive("heading", { level: 4 }) ? 0 : 2;
326        if (level === 0) e.chain().focus().setParagraph().run();
327        else e.chain().focus().setHeading({ level: level as 2 | 3 | 4 }).run();
328      }),
329    },
330    { id: "code", label: "Code", hint: "Ctrl or Cmd + E", keys: "Control+E Meta+E", paths: GLYPH.code, run: run((e) => e.chain().focus().toggleCode().run()) },
331    {
332      id: "footnote",
333      label: "Footnote",
334      hint: "A reference and its definition",
335      paths: GLYPH.footnote,
336      run: run((e) => {
337        const md = markdown(e);
338        const n = Math.max(0, ...[...md.matchAll(/\[\^(\d+)\]/g)].map((m) => Number(m[1]))) + 1;
339        e.chain().focus().insertContent({ type: "sourceInline", attrs: { text: `[^${n}]` } }).run();
340        const end = e.state.doc.content.size;
341        e.chain().insertContentAt(end, { type: "sourceBlock", attrs: { text: `[^${n}]: `, kind: "Footnote" } }).run();
342        focusSourceBlock(e, { id: "footnote", label: "Footnote", hint: "", text: `[^${n}]: ` });
343      }),
344    },
345    ...(onUpload ? [{ id: "image", label: "Insert image", hint: "Uploads a file, then asks for alt text", paths: GLYPH.image, run: () => fileRef.current?.click() }] : []),
346  ];
347  const blocks = scaffolds.map((s) => ({ id: `scaffold-${s.id}`, label: s.label, hint: s.hint, keys: undefined, paths: s.icon ? [s.icon] : [], glyph: s.label.slice(0, 1), run: () => insertScaffold(s, false) }));
348  const all = [...tools, ...blocks];
349  const onToolbarKey = (event: React.KeyboardEvent) => {
350    const buttons = [...(toolbar.current?.querySelectorAll<HTMLButtonElement>(".cap-md-tool:not(:disabled)") ?? [])];
351    const at = buttons.findIndex((b) => b === document.activeElement);
352    const next = event.key === "ArrowRight" ? (at + 1) % buttons.length : event.key === "ArrowLeft" ? (at - 1 + buttons.length) % buttons.length : event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : null;
353    if (next === null || at < 0) return;
354    event.preventDefault();
355    buttons[next]?.focus();
356  };
357  const off = readOnly || !ready;
358
359  return (
360    <div className="cap-md app-rich" data-ready={ready ? "" : undefined}>
361      <div className="cap-md-frame">
362        <div className="cap-md-toolbar" role="toolbar" aria-label="Formatting" ref={toolbar} onKeyDown={onToolbarKey}>
363          {all.map((t, i) => (
364            <span key={t.id} className="app-tool-slot">
365              {i === tools.length && blocks.length > 0 ? <span className="cap-md-sep" aria-hidden="true" /> : null}
366              <button
367                type="button"
368                className="cap-md-tool"
369                aria-label={t.label}
370                title={`${t.label}. ${t.hint}`}
371                aria-keyshortcuts={t.keys}
372                tabIndex={i === activeTool ? 0 : -1}
373                disabled={off}
374                onFocus={() => setActiveTool(i)}
375                onMouseDown={(e) => e.preventDefault()}
376                onClick={t.run}
377              >
378                {t.paths.length > 0 ? (
379                  <Icon paths={t.paths} />
380                ) : (
381                  <span className="cap-md-tool-glyph" aria-hidden="true">
382                    {"glyph" in t ? String(t.glyph) : ""}
383                  </span>
384                )}
385              </button>
386            </span>
387          ))}
388          {blocks.length > 0 ? <span className="cap-md-toolbar-hint">Type / on an empty line</span> : null}
389        </div>
390        {!ready ? (
391          // Before the script: the Markdown itself, readable and selectable.
392          <textarea className="cap-input cap-md-source" aria-label={ariaLabel} value={value} readOnly rows={12} />
393        ) : null}
394        <div ref={host} className="cap-md-surface app-rich-host" hidden={!ready} />
395        <div className="cap-md-foot">
396          {onUpload ? (
397            <p className="cap-md-hint" aria-hidden="true">
398              <Icon paths={GLYPH.image} />
399              Drop or paste an image to upload it
400            </p>
401          ) : null}
402          <p className="cap-md-stats">
403            <span className="cap-md-count">
404              {words.toLocaleString("en")} word{words === 1 ? "" : "s"}
405              {words > 0 ? ` · ${minutesForWords(words)} min read` : ""}
406            </span>
407          </p>
408        </div>
409      </div>
410      <p className="cap-sr-only" role="status">
411        {said}
412      </p>
413      {onUpload ? (
414        <input
415          ref={fileRef}
416          type="file"
417          hidden
418          tabIndex={-1}
419          accept={accept}
420          onChange={(e) => {
421            const f = e.target.files?.[0];
422            e.target.value = "";
423            if (f) void startUpload(f);
424          }}
425        />
426      ) : null}
427      {uploadError ? (
428        <p className="cap-field-error cap-md-upload-error" role="alert">
429          {uploadError}
430        </p>
431      ) : null}
432      {upload ? (
433        <div className="cap-md-upload" role="group" aria-label="Describe the image" aria-busy={upload.state === "sending" ? "true" : undefined}>
434          {upload.state === "sending" ? (
435            <p className="cap-md-upload-wait">Uploading {upload.name}</p>
436          ) : (
437            <>
438              <img className="cap-md-upload-thumb" src={upload.url} alt="" />
439              <div className="cap-md-upload-fields">
440                <label className="cap-field-label" htmlFor="rich-alt">
441                  Alt text{" "}
442                  <span className="cap-field-required" aria-hidden="true">
443                    Required
444                  </span>
445                </label>
446                <input
447                  ref={altRef}
448                  id="rich-alt"
449                  className="cap-input"
450                  autoComplete="off"
451                  placeholder="What the image shows"
452                  aria-describedby="rich-alt-help"
453                  value={alt}
454                  onChange={(e) => setAlt(e.target.value)}
455                  onKeyDown={(e) => {
456                    if (e.key === "Enter") {
457                      e.preventDefault();
458                      insertImage();
459                    } else if (e.key === "Escape") {
460                      e.preventDefault();
461                      setUpload(null);
462                      editorRef.current?.commands.focus();
463                    }
464                  }}
465                />
466                <p className="cap-field-help" id="rich-alt-help">
467                  The image is uploaded. It is not in the text until it has alt text.
468                </p>
469                <div className="cap-md-upload-actions">
470                  <button type="button" className="cap-btn" data-variant="primary" disabled={!alt.trim()} onClick={insertImage}>
471                    Insert image
472                  </button>
473                  <button
474                    type="button"
475                    className="cap-btn"
476                    data-variant="quiet"
477                    onClick={() => {
478                      setUpload(null);
479                      editorRef.current?.commands.focus();
480                    }}
481                  >
482                    Cancel
483                  </button>
484                </div>
485              </div>
486            </>
487          )}
488        </div>
489      ) : null}
490      {palette ? (
491        <div
492          ref={paletteRef}
493          className="cap-popover cap-md-palette"
494          popover="manual"
495          role="group"
496          aria-label="Insert a link"
497          data-size="lg"
498          data-side="bottom"
499          data-align="start"
500          onBlur={(e) => {
501            if (!(e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget))) closePalette(false);
502          }}
503        >
504          <label className="cap-md-palette-label" htmlFor="rich-link">
505            Link to
506          </label>
507          <input
508            id="rich-link"
509            type="text"
510            className="cap-input"
511            role="combobox"
512            aria-autocomplete="list"
513            aria-expanded={matches.length > 0}
514            aria-controls="rich-link-list"
515            aria-activedescendant={matches.length > 0 ? `rich-link-${palette.active}` : undefined}
516            autoComplete="off"
517            spellCheck={false}
518            placeholder="Search pages, or type a URL"
519            value={palette.query}
520            onChange={(e) => setPalette({ ...palette, query: e.target.value, active: 0 })}
521            onKeyDown={(e) => {
522              if (e.key === "Escape") {
523                e.preventDefault();
524                e.stopPropagation();
525                closePalette(true);
526              } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
527                e.preventDefault();
528                if (matches.length) setPalette({ ...palette, active: (palette.active + (e.key === "ArrowDown" ? 1 : matches.length - 1)) % matches.length });
529              } else if (e.key === "Enter") {
530                e.preventDefault();
531                if (typedUrl) applyLink(typedUrl, typedUrl);
532                else if (matches[palette.active]) applyLink(matches[palette.active]!.href, matches[palette.active]!.title);
533              }
534            }}
535          />
536          <div className="cap-listbox" role="listbox" id="rich-link-list" aria-label="Pages" data-wrap="">
537            {matches.map((m, i) => (
538              <div
539                key={m.href}
540                id={`rich-link-${i}`}
541                className="cap-option"
542                role="option"
543                aria-selected={i === palette.active}
544                data-active={i === palette.active ? "" : undefined}
545                onMouseDown={(e) => e.preventDefault()}
546                onClick={() => applyLink(m.href, m.title)}
547              >
548                <span className="cap-option-label">{m.title}</span>
549                {m.note ? <span className="cap-md-option-note"> ({m.note})</span> : null}
550                {m.hint ? <span className="cap-md-option-hint">{m.hint}</span> : null}
551              </div>
552            ))}
553          </div>
554          <p className="cap-md-palette-note" role="status">
555            {typedUrl ? `Enter links to ${typedUrl}.` : matches.length === 0 ? "No page matches. Type a full address to link to it." : `${matches.length} page${matches.length === 1 ? "" : "s"}.`}
556          </p>
557        </div>
558      ) : null}
559      {slash !== null ? (
560        <ul
561          ref={slashRef}
562          className="cap-popover cap-md-slash"
563          popover="manual"
564          aria-label="Insert a block"
565          data-flush=""
566          data-size="auto"
567          data-side="bottom"
568          data-align="start"
569          onKeyDown={(e) => {
570            const items = [...e.currentTarget.querySelectorAll<HTMLButtonElement>(".cap-md-slash-item")];
571            const at = items.findIndex((b) => b === document.activeElement);
572            if (e.key === "Escape") {
573              e.preventDefault();
574              e.stopPropagation();
575              setSlash(null);
576              editorRef.current?.commands.focus();
577            } else if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
578              e.preventDefault();
579              const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (at + (e.key === "ArrowDown" ? 1 : items.length - 1)) % items.length;
580              items[next]?.focus();
581            }
582          }}
583        >
584          {scaffolds.map((s) => (
585            <li key={s.id}>
586              <button type="button" className="cap-md-slash-item" tabIndex={-1} onClick={() => insertScaffold(s, true)}>
587                <strong>{s.label}</strong>
588                <span className="cap-md-slash-hint">{s.hint}</span>
589              </button>
590            </li>
591          ))}
592        </ul>
593      ) : null}
594    </div>
595  );
596}