components/markdown-editor/markdown-editor.ts

Functions

Imports

It imports components/listbox/listbox.ts, components/markdown-editor/markdown-editor-edits.ts, components/markdown-editor/markdown-editor.view.ts, components/popover/popover.ts. Imported by components/markdown-editor/markdown-editor.react.tsx, components/markdown-editor/markdown-editor.view.ts.

Source

1// The markdown editor's behaviour: a labelled <textarea>, delivered in the page's HTML, is
2// upgraded in place to a CodeMirror surface with a toolbar, a link palette, a slash menu, an
3// image prompt that insists on alt text, and a word count. The textarea stays in the page,
4// hidden and kept in step, so a form posts the markdown and a page without script still has
5// a working field; see markdown-editor.md.
6//
7// This file holds no CodeMirror: it imports markdown-editor.view.ts with import(), so the
8// editor is its own chunk. The pure helpers (edits, counting, filtering, roving) are
9// exported so the React wrapper and a node test can use them without the browser.
10
11import { type Listbox, createListbox } from "../listbox/listbox.ts";
12import { place } from "../popover/popover.ts";
13import { type Edit, LINK_RESULT_LIMIT, type LinkTarget, type MarkdownEditorHandle, type MarkdownEditorOptions, type Scaffold, blockEdit, countWords, defaultImageMarkdown, filterLinkTargets, footnoteEdit, headingEdit, linkEdit, looksLikeUrl, minutesForWords, rovingIndex, scaffoldCursor, slashBlockEdit, wrapEdit } from "./markdown-editor-edits.ts";
14import type { Surface } from "./markdown-editor.view.ts";
15
16export { countWords, minutesForWords, looksLikeUrl, filterLinkTargets, rovingIndex, lineBounds, wrapEdit, headingEdit, footnoteEdit, blockEdit, slashBlockEdit, scaffoldCursor, linkEdit, defaultImageMarkdown } from "./markdown-editor-edits.ts";
17export type { Edit, LinkTarget, Scaffold, UploadResult, MarkdownEditorOptions, MarkdownEditorHandle } from "./markdown-editor-edits.ts";
18
19// ---- the DOM -------------------------------------------------------------------------------
20
21const SVG_NS = "http://www.w3.org/2000/svg";
22let serial = 0;
23
24function el<K extends keyof HTMLElementTagNameMap>(tag: K, props: Record<string, string> = {}, ...kids: Array<Node | string>): HTMLElementTagNameMap[K] {
25  const node = document.createElement(tag);
26  for (const [k, v] of Object.entries(props)) node.setAttribute(k, v);
27  node.append(...kids);
28  return node;
29}
30
31function icon(paths: string[]): SVGSVGElement {
32  const svg = document.createElementNS(SVG_NS, "svg");
33  for (const [k, v] of Object.entries({ width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false" })) {
34    svg.setAttribute(k, v);
35  }
36  for (const d of paths) {
37    const p = document.createElementNS(SVG_NS, "path");
38    p.setAttribute("d", d);
39    svg.append(p);
40  }
41  return svg;
42}
43
44const GLYPH = {
45  bold: ["M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z"],
46  italic: ["M15 4h-5M14 20H9M14 4 10 20"],
47  link: ["M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1", "M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"],
48  heading: ["M6 4v16M18 4v16M6 12h12"],
49  code: ["m8 6-6 6 6 6M16 6l6 6-6 6"],
50  footnote: ["M4 6h10M4 12h10M4 18h7", "M18 5v6M21 8h-6"],
51  image: ["M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z", "m3 16 5-5 5 5", "M15.5 8.5h.01"],
52};
53
54function nonceFromPage(): string {
55  if (typeof document === "undefined") return "";
56  // The property, not getAttribute: browsers hide the attribute after parsing.
57  return document.querySelector<HTMLScriptElement>("script[nonce]")?.nonce ?? "";
58}
59
60function messageOf(e: unknown): string {
61  return e instanceof Error && e.message ? e.message : "The image did not upload. Try again.";
62}
63
64interface Tool {
65  id: string;
66  label: string;
67  hint: string;
68  keys?: string;
69  paths: string[];
70  glyph?: string;
71  run: () => void;
72}
73
74// Upgrades one editor: the element carrying data-cap="markdown-editor", holding a label and a
75// textarea. Resolves once CodeMirror has loaded and the surface is mounted; if it cannot
76// load, the textarea simply stays, and the promise rejects.
77export async function mountMarkdownEditor(host: HTMLElement, options: MarkdownEditorOptions = {}): Promise<MarkdownEditorHandle> {
78  const found = host.querySelector("textarea");
79  if (!found) throw new Error("markdown-editor: no <textarea> inside the element");
80  const ta: HTMLTextAreaElement = found;
81  const labelEl = host.querySelector("label");
82  const { createSurface } = await import("./markdown-editor.view.ts");
83  // The element may have been detached or upgraded while CodeMirror loaded.
84  if (!host.isConnected) throw new Error("markdown-editor: the element left the page");
85  if (handles.has(host)) throw new Error("markdown-editor: the element is already an editor");
86
87  const o: MarkdownEditorOptions = { ...options };
88  const uid = `cap-md-${++serial}`;
89  const cleanups: Array<() => void> = [];
90  const listen = <T extends EventTarget>(t: T, type: string, fn: (e: never) => void, opt?: AddEventListenerOptions | boolean) => {
91    t.addEventListener(type, fn as EventListener, opt);
92    cleanups.push(() => t.removeEventListener(type, fn as EventListener, opt));
93  };
94
95  let surface: Surface | null = null;
96  let quiet = false; // true while the app itself sets the text: no onChange for that
97  let upload: { token: number; panel: HTMLElement } | null = null;
98  let uploadToken = 0;
99  let link: { from: number; to: number; panel: HTMLElement; input: HTMLInputElement; list: HTMLElement; note: HTMLElement; lb: Listbox; matches: LinkTarget[]; ask: number; stop: () => void } | null = null;
100  let slash: { from: number; menu: HTMLElement; stop: () => void } | null = null;
101  let requiredMessage: HTMLElement | null = null;
102
103  // ---- what the textarea says -----------------------------------------------------------
104  const readOnly = () => o.readOnly ?? ta.readOnly;
105  const disabled = () => o.disabled ?? ta.disabled;
106  const placeholder = () => o.placeholder ?? (ta.getAttribute("placeholder") || "Write in markdown.");
107  const maxLength = () => o.maxLength ?? (ta.maxLength > 0 ? ta.maxLength : undefined);
108  const labelText = () => o.label ?? `${(labelEl?.textContent ?? "Body").replace(/\s*Required\s*$/i, "").trim() || "Body"}, markdown`;
109  const attrs = (): Record<string, string> => {
110    const a: Record<string, string> = { "aria-label": labelText() };
111    if (ta.getAttribute("aria-invalid") === "true") a["aria-invalid"] = "true";
112    const described = ta.getAttribute("aria-describedby");
113    if (described) a["aria-describedby"] = described;
114    if (ta.required) a["aria-required"] = "true";
115    if (readOnly()) a["aria-readonly"] = "true";
116    if (disabled()) a["aria-disabled"] = "true";
117    return a;
118  };
119
120  // ---- the chrome -----------------------------------------------------------------------
121  const frame = el("div", { class: "cap-md-frame" });
122  const toolbar = el("div", { class: "cap-md-toolbar", role: "toolbar", "aria-label": "Markdown formatting" });
123  const surfaceEl = el("div", { class: "cap-md-surface" });
124  const foot = el("div", { class: "cap-md-foot" });
125  const hint = el("p", { class: "cap-md-hint", "aria-hidden": "true" }, icon(GLYPH.image), "Drop or paste an image to upload it");
126  const stats = el("p", { class: "cap-md-stats" });
127  const statsCount = el("span", { class: "cap-md-count" });
128  const statsLimit = el("span", { class: "cap-md-limit" });
129  const status = el("p", { class: "cap-sr-only", role: "status" });
130  const file = el("input", { type: "file", hidden: "" });
131  file.tabIndex = -1;
132  stats.append(statsCount, statsLimit);
133  foot.append(hint, stats);
134  frame.append(toolbar, surfaceEl, foot);
135
136  const say = (text: string) => {
137    status.textContent = text;
138  };
139
140  function updateStats(value: string) {
141    const words = countWords(value);
142    const mins = minutesForWords(words, o.wordsPerMinute);
143    statsCount.textContent = `${words.toLocaleString("en")} word${words === 1 ? "" : "s"}${words > 0 ? ` · ${mins} min read` : ""}`;
144    const max = maxLength();
145    if (max === undefined) {
146      statsLimit.textContent = "";
147      delete statsLimit.dataset.over;
148    } else if (value.length > max) {
149      statsLimit.textContent = ` · ${(value.length - max).toLocaleString("en")} over the ${max.toLocaleString("en")} character limit`;
150      statsLimit.dataset.over = "";
151    } else {
152      statsLimit.textContent = ` · ${value.length.toLocaleString("en")} of ${max.toLocaleString("en")} characters`;
153      delete statsLimit.dataset.over;
154    }
155  }
156
157  // ---- edits ----------------------------------------------------------------------------
158  const doc = () => surface?.getValue() ?? ta.value;
159  const apply = (edit: Edit) => surface?.apply(edit);
160  const sel = () => surface?.selection() ?? { from: 0, to: 0 };
161
162  const commands = {
163    bold: () => apply(wrapEdit(doc(), sel().from, sel().to, "**")),
164    italic: () => apply(wrapEdit(doc(), sel().from, sel().to, "_")),
165    code: () => apply(wrapEdit(doc(), sel().from, sel().to, "`")),
166    heading: () => apply(headingEdit(doc(), surface?.caret().head ?? 0)),
167    footnote: () => apply(footnoteEdit(doc(), sel().from, sel().to)),
168  };
169
170  function insertScaffold(s: Scaffold, replaceSlash = false) {
171    if (!surface) return;
172    const fromSlash = replaceSlash && slash !== null;
173    closeSlash();
174    const cursor = scaffoldCursor(s);
175    if (fromSlash) {
176      const c = surface.caret();
177      surface.apply(slashBlockEdit(c.lineFrom, c.lineTo, s.text, cursor));
178    } else {
179      apply(blockEdit(doc(), sel().from, sel().to, s.text, cursor));
180    }
181  }
182
183  // ---- toolbar (APG toolbar: one tab stop, arrows between the buttons) -------------------
184  let activeTool = 0;
185  function tools(): Tool[] {
186    const t: Tool[] = [
187      { id: "bold", label: "Bold", hint: "Ctrl or Cmd + B", keys: "Control+B Meta+B", paths: GLYPH.bold, run: commands.bold },
188      { id: "italic", label: "Italic", hint: "Ctrl or Cmd + I", keys: "Control+I Meta+I", paths: GLYPH.italic, run: commands.italic },
189      { id: "link", label: "Link", hint: "Ctrl or Cmd + K, searches pages", keys: "Control+K Meta+K", paths: GLYPH.link, run: openLink },
190      { id: "heading", label: "Heading level", hint: "Cycles h2, h3, h4, none", paths: GLYPH.heading, run: commands.heading },
191      { id: "code", label: "Code", hint: "Ctrl or Cmd + E", keys: "Control+E Meta+E", paths: GLYPH.code, run: commands.code },
192      { id: "footnote", label: "Footnote", hint: "A reference and its definition", paths: GLYPH.footnote, run: commands.footnote },
193    ];
194    if (o.onUpload) t.push({ id: "image", label: "Insert image", hint: "Uploads a file, then asks for alt text", paths: GLYPH.image, run: () => file.click() });
195    return t;
196  }
197
198  function buildToolbar() {
199    const main = tools();
200    const blocks: Tool[] = (o.scaffolds ?? []).map((s) => ({ id: `scaffold-${s.id}`, label: s.label, hint: s.hint, paths: s.icon ? [s.icon] : [], glyph: s.label.slice(0, 1).toUpperCase(), run: () => insertScaffold(s) }));
201    const all = [...main, ...blocks];
202    activeTool = Math.min(activeTool, Math.max(0, all.length - 1));
203    const nodes: Node[] = [];
204    all.forEach((t, i) => {
205      if (i === main.length && blocks.length > 0) nodes.push(el("span", { class: "cap-md-sep", "aria-hidden": "true" }));
206      const b = el("button", { type: "button", class: "cap-md-tool", "aria-label": t.label, title: `${t.label}. ${t.hint}` });
207      if (t.keys) b.setAttribute("aria-keyshortcuts", t.keys);
208      b.tabIndex = i === activeTool ? 0 : -1;
209      b.disabled = disabled() || readOnly();
210      b.append(t.paths.length > 0 ? icon(t.paths) : el("span", { class: "cap-md-tool-glyph", "aria-hidden": "true" }, t.glyph ?? ""));
211      b.addEventListener("click", () => t.run());
212      b.addEventListener("focus", () => {
213        activeTool = i;
214        for (const [j, other] of [...toolbar.querySelectorAll<HTMLElement>(".cap-md-tool")].entries()) other.tabIndex = j === i ? 0 : -1;
215      });
216      nodes.push(b);
217    });
218    if (blocks.length > 0) nodes.push(el("span", { class: "cap-md-toolbar-hint" }, "Type / on an empty line"));
219    toolbar.replaceChildren(...nodes);
220    // With every button disabled there is no tab stop, and the toolbar says so by being empty of focus.
221    hint.hidden = !o.onUpload;
222  }
223
224  listen(toolbar, "keydown", (e: KeyboardEvent) => {
225    const buttons = [...toolbar.querySelectorAll<HTMLButtonElement>(".cap-md-tool:not(:disabled)")];
226    const at = buttons.findIndex((b) => b === e.target);
227    if (at < 0) return;
228    const next = rovingIndex(e.key, at, buttons.length);
229    const target = next === null ? undefined : buttons[next];
230    if (!target) return;
231    e.preventDefault();
232    target.focus();
233  });
234
235  // ---- floating surfaces: the shared popover, placed at the cursor --------------------------
236  // A floating panel is the shared `.cap-popover` (popover.css), shown with the Popover API in
237  // the top layer so the editor's clipping frame cannot cut it off, and placed by popover.ts's
238  // `place()` against a virtual anchor: the box of the character at `pos`. It follows the
239  // window's scroll and resize while it is open.
240  function floating(panel: HTMLElement, pos: number): () => void {
241    const anchor = {
242      getBoundingClientRect: () => {
243        const c = surface?.coords(pos);
244        return c ? new DOMRect(c.left, c.top, 0, c.bottom - c.top) : host.getBoundingClientRect();
245      },
246    } as unknown as Element;
247    panel.showPopover();
248    place(anchor, panel, { side: "bottom", align: "start" });
249    let frame = 0;
250    const follow = () => {
251      if (frame) return;
252      frame = requestAnimationFrame(() => {
253        frame = 0;
254        if (panel.isConnected) place(anchor, panel, { side: "bottom", align: "start" });
255      });
256    };
257    window.addEventListener("scroll", follow, true);
258    window.addEventListener("resize", follow);
259    return () => {
260      cancelAnimationFrame(frame);
261      window.removeEventListener("scroll", follow, true);
262      window.removeEventListener("resize", follow);
263    };
264  }
265
266  function dismiss(panel: HTMLElement) {
267    try {
268      if (panel.matches(":popover-open")) panel.hidePopover();
269    } catch {
270      // Already gone.
271    }
272    panel.remove();
273  }
274
275  // ---- the link palette: a labelled combobox over the shared listbox ----------------------
276  async function resolveTargets(query: string): Promise<LinkTarget[]> {
277    const src = o.linkTargets;
278    if (!src) return [];
279    if (typeof src === "function") return (await src(query)).slice(0, LINK_RESULT_LIMIT);
280    return filterLinkTargets(src, query);
281  }
282
283  function renderLink() {
284    if (!link) return;
285    const l = link;
286    const typed = l.input.value;
287    const url = looksLikeUrl(typed);
288    l.list.replaceChildren(
289      ...l.matches.map((t) => {
290        const opt = el("div", { class: "cap-option", role: "option", "data-value": t.href, "data-label": t.title });
291        opt.append(el("span", { class: "cap-option-label" }, t.title), el("span", { class: "cap-md-option-hint" }, t.hint ?? t.href, t.note ? el("span", { class: "cap-md-option-note" }, ` ${t.note}`) : ""));
292        return opt;
293      }),
294    );
295    l.list.hidden = l.matches.length === 0;
296    l.input.setAttribute("aria-expanded", String(l.matches.length > 0));
297    l.lb.refresh();
298    l.lb.setActive(l.matches.length > 0 ? 0 : null);
299    l.note.textContent = url
300      ? "Enter to link to this address"
301      : l.matches.length > 0
302        ? `${l.matches.length} page${l.matches.length === 1 ? "" : "s"}. Up and Down choose, Enter links.`
303        : o.linkTargets
304          ? "No pages match. Type a URL to link out."
305          : "Type a URL to link to.";
306  }
307
308  async function refreshLink() {
309    if (!link) return;
310    const l = link;
311    const ask = ++l.ask;
312    const matches = await resolveTargets(l.input.value).catch(() => []);
313    if (link !== l || ask !== l.ask) return;
314    l.matches = matches;
315    renderLink();
316  }
317
318  function openLink() {
319    if (!surface || link || readOnly() || disabled()) return;
320    closeSlash();
321    const { from, to } = surface.selection();
322    const selected = doc().slice(from, to);
323    const panel = el("div", { class: "cap-popover cap-md-palette", popover: "manual", role: "group", "aria-label": "Insert a link", "data-size": "lg", "data-side": "bottom", "data-align": "start" });
324    const input = el("input", { type: "text", class: "cap-input", id: `${uid}-link`, role: "combobox", "aria-autocomplete": "list", "aria-expanded": "false", "aria-controls": `${uid}-list`, autocomplete: "off", spellcheck: "false", placeholder: "Search pages, or type a URL" });
325    input.value = selected;
326    const label = el("label", { class: "cap-md-palette-label", for: input.id }, "Link to");
327    const list = el("div", { class: "cap-listbox", role: "listbox", id: `${uid}-list`, "aria-label": "Pages", "data-wrap": "" });
328    const note = el("p", { class: "cap-md-palette-note", role: "status" });
329    panel.append(label, input, list, note);
330    host.append(panel);
331    // Enter on a typed address is the palette's own; the listbox must not also act on it, and
332    // it does not once the event is defaultPrevented. This listener goes first.
333    input.addEventListener("keydown", (e) => {
334      const l = link;
335      if (!l) return;
336      if (e.key === "Enter" && looksLikeUrl(l.input.value)) {
337        e.preventDefault();
338        insertLink(l.input.value.trim(), l.input.value.trim());
339      } else if (e.key === "Escape") {
340        // Stopped as well as prevented: the Escape must not also close a dialog around the editor.
341        e.preventDefault();
342        e.stopPropagation();
343        closeLink(true);
344      }
345    });
346    const lb = createListbox(list, { input, selection: "none", wrap: true, status: note, hideWhenEmpty: false });
347    list.addEventListener("cap:option-select", ((e: CustomEvent<{ value: string; label: string }>) => insertLink(e.detail.value, e.detail.label)) as EventListener);
348    panel.addEventListener("focusout", (e) => {
349      const to = e.relatedTarget;
350      if (to instanceof Node && panel.contains(to)) return;
351      // Focus leaving the window (another tab) is not leaving the palette.
352      if (to === null && !document.hasFocus()) return;
353      closeLink(to === null);
354    });
355    link = { from, to, panel, input, list, note, lb, matches: [], ask: 0, stop: floating(panel, from) };
356    input.focus();
357    renderLink();
358    void refreshLink();
359    input.addEventListener("input", () => void refreshLink());
360  }
361
362  function teardownLink(l: NonNullable<typeof link>) {
363    link = null;
364    l.stop();
365    l.lb.detach();
366    dismiss(l.panel);
367  }
368
369  function closeLink(restoreFocus: boolean) {
370    const l = link;
371    if (!l) return;
372    teardownLink(l);
373    if (!surface) return;
374    surface.select(l.from, l.to);
375    if (restoreFocus) surface.focus();
376  }
377
378  function insertLink(href: string, fallback: string) {
379    const l = link;
380    if (!l || !surface) return;
381    const selected = doc().slice(l.from, l.to);
382    teardownLink(l);
383    surface.apply(linkEdit(l.from, l.to, selected, href, fallback));
384  }
385
386  // ---- the slash menu: a lone "/" on its line offers the app's blocks ---------------------
387  function syncSlash() {
388    if (!surface || !o.scaffolds?.length || readOnly() || disabled()) return closeSlash();
389    const c = surface.caret();
390    if (c.lineText !== "/" || c.head !== c.lineTo) return closeSlash();
391    if (!slash) {
392      const menu = el("ul", { class: "cap-popover cap-md-slash", popover: "manual", role: "list", "aria-label": "Insert a block", "data-flush": "", "data-size": "auto", "data-side": "bottom", "data-align": "start" });
393      for (const s of o.scaffolds) {
394        const b = el("button", { type: "button", class: "cap-md-slash-item" }, el("strong", {}, s.label), el("span", { class: "cap-md-slash-hint" }, s.hint));
395        b.tabIndex = -1;
396        b.addEventListener("click", () => insertScaffold(s, true));
397        menu.append(el("li", {}, b));
398      }
399      menu.addEventListener("keydown", (e) => {
400        if (e.key === "Escape") {
401          e.preventDefault();
402          e.stopPropagation();
403          closeSlash();
404          surface?.focus();
405          return;
406        }
407        const items = [...menu.querySelectorAll<HTMLElement>(".cap-md-slash-item")];
408        const next = rovingIndex(e.key, items.findIndex((i) => i === document.activeElement), items.length, "vertical");
409        if (next === null) return;
410        e.preventDefault();
411        items[next]?.focus();
412      });
413      host.append(menu);
414      slash = { from: c.lineFrom, menu, stop: floating(menu, c.lineFrom) };
415      say("Block menu open. Press Down arrow to choose a block, Escape to close.");
416    }
417    slash.from = c.lineFrom;
418  }
419
420  function closeSlash() {
421    if (!slash) return;
422    // Cleared first: removing a focused item fires focusout, which comes back here.
423    const { menu, stop } = slash;
424    slash = null;
425    stop();
426    dismiss(menu);
427  }
428
429  // ---- image upload with a mandatory alt step -------------------------------------------
430  function clearUploadError() {
431    host.querySelector(".cap-md-upload-error")?.remove();
432  }
433
434  function cancelUpload(restoreFocus: boolean) {
435    if (!upload) return;
436    const { panel } = upload;
437    upload = null;
438    uploadToken++;
439    panel.remove();
440    if (restoreFocus) surface?.focus();
441  }
442
443  async function startUpload(f: File): Promise<void> {
444    const send = o.onUpload;
445    if (!send || !surface) return;
446    cancelUpload(false);
447    clearUploadError();
448    const token = ++uploadToken;
449    const panel = el("div", { class: "cap-md-upload", role: "group", "aria-label": "Describe the image", "aria-busy": "true" }, el("p", { class: "cap-md-upload-wait" }, `Uploading ${f.name}`));
450    upload = { token, panel };
451    frame.after(panel);
452    say(`Uploading ${f.name}`);
453    try {
454      const result = await send(f);
455      if (!upload || upload.token !== token) return;
456      showAltStep(panel, f.name, result.url);
457    } catch (e) {
458      if (!upload || upload.token !== token) return;
459      panel.remove();
460      upload = null;
461      const err = el("p", { class: "cap-field-error cap-md-upload-error", role: "alert" }, messageOf(e));
462      frame.after(err);
463      say("");
464    }
465  }
466
467  function showAltStep(panel: HTMLElement, name: string, url: string) {
468    panel.removeAttribute("aria-busy");
469    const alt = el("input", { type: "text", class: "cap-input", id: `${uid}-alt`, autocomplete: "off", placeholder: "What the image shows", "aria-describedby": `${uid}-alt-help` });
470    const thumb = el("img", { class: "cap-md-upload-thumb", src: url, alt: "" });
471    const help = el("p", { class: "cap-field-help", id: `${uid}-alt-help` }, "The image is uploaded. It is not in the text until it has alt text.");
472    const insert = el("button", { type: "button", class: "cap-btn", "data-variant": "primary" }, "Insert image");
473    insert.disabled = true;
474    const cancel = el("button", { type: "button", class: "cap-btn", "data-variant": "quiet" }, "Cancel");
475    const fields = el("div", { class: "cap-md-upload-fields" }, el("label", { class: "cap-field-label", for: alt.id }, "Alt text ", el("span", { class: "cap-field-required", "aria-hidden": "true" }, "Required")), alt, help, el("div", { class: "cap-md-upload-actions" }, insert, cancel));
476    panel.replaceChildren(thumb, fields);
477    const go = () => {
478      const text = alt.value.trim();
479      if (!text || !surface) return;
480      const md = (o.imageMarkdown ?? defaultImageMarkdown)({ url, alt: text, name });
481      cancelUpload(false);
482      apply(blockEdit(doc(), sel().from, sel().to, md));
483      say("Image added to the text.");
484    };
485    alt.addEventListener("input", () => {
486      insert.disabled = alt.value.trim() === "";
487      help.hidden = alt.value.trim() !== "";
488    });
489    alt.addEventListener("keydown", (e) => {
490      if (e.key === "Enter") {
491        e.preventDefault();
492        go();
493      }
494    });
495    insert.addEventListener("click", go);
496    cancel.addEventListener("click", () => cancelUpload(true));
497    panel.addEventListener("keydown", (e) => {
498      if (e.key === "Escape") {
499        e.preventDefault();
500        e.stopPropagation();
501        cancelUpload(true);
502      }
503    });
504    // Focus goes to the alt field once the file is stored: the step is otherwise silent, and
505    // the image cannot go in until it is answered.
506    alt.focus();
507    say("Image uploaded. Describe it to add it to the text.");
508  }
509
510  listen(file, "change", () => {
511    const f = file.files?.[0];
512    file.value = "";
513    if (f) void startUpload(f);
514  });
515
516  // ---- sync with the textarea and the page ------------------------------------------------
517  function syncState() {
518    surface?.configure({ placeholder: placeholder(), readOnly: readOnly(), disabled: disabled(), attrs: attrs() });
519    for (const b of toolbar.querySelectorAll<HTMLButtonElement>(".cap-md-tool")) b.disabled = disabled() || readOnly();
520    file.accept = o.accept ?? "image/*";
521    updateStats(doc());
522    if (disabled() || readOnly()) {
523      closeSlash();
524      closeLink(false);
525    }
526  }
527
528  function onDocChange(value: string) {
529    ta.value = value;
530    updateStats(value);
531    if (requiredMessage && value.trim() !== "") clearRequired();
532    ta.dispatchEvent(new Event("input", { bubbles: true }));
533    host.dispatchEvent(new CustomEvent("cap-md-change", { bubbles: true, detail: { value } }));
534    if (!quiet) o.onChange?.(value);
535  }
536
537  function clearRequired() {
538    ta.removeAttribute("aria-invalid");
539    const id = requiredMessage?.id;
540    if (id) ta.setAttribute("aria-describedby", (ta.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((x) => x && x !== id).join(" "));
541    if (!ta.getAttribute("aria-describedby")) ta.removeAttribute("aria-describedby");
542    requiredMessage?.remove();
543    requiredMessage = null;
544    syncState();
545  }
546
547  // A required, empty textarea blocks the form, and the browser cannot focus a hidden one to
548  // say so. This does it for the editor: focus the surface and say what is wrong.
549  listen(ta, "invalid", (e: Event) => {
550    e.preventDefault();
551    if (!requiredMessage) {
552      requiredMessage = el("p", { class: "cap-field-error", id: `${uid}-required`, role: "alert" }, ta.dataset.errorValueMissing ?? "Write something before saving.");
553      ta.after(requiredMessage);
554      ta.setAttribute("aria-describedby", [`${uid}-required`, ta.getAttribute("aria-describedby")].filter(Boolean).join(" "));
555    }
556    ta.setAttribute("aria-invalid", "true");
557    syncState();
558    surface?.focus();
559  });
560  const form = ta.form;
561  if (form) listen(form, "reset", () => setTimeout(() => api.setValue(ta.defaultValue), 0));
562  if (labelEl) listen(labelEl, "click", () => surface?.focus());
563  // Focus leaving the editor closes the slash menu; a click into the menu is not leaving.
564  listen(host, "focusout", (e: FocusEvent) => {
565    const to = e.relatedTarget;
566    if (slash && !(to instanceof Node && slash.menu.contains(to)) && !(to instanceof Node && frame.contains(to))) closeSlash();
567  });
568
569  const watch = new MutationObserver(syncState);
570  watch.observe(ta, { attributes: true, attributeFilter: ["readonly", "disabled", "aria-invalid", "aria-describedby", "placeholder", "maxlength", "required"] });
571
572  // ---- mount ----------------------------------------------------------------------------
573  buildToolbar();
574  surface = createSurface({
575    parent: surfaceEl,
576    doc: ta.value,
577    placeholder: placeholder(),
578    nonce: o.nonce ?? nonceFromPage(),
579    lineNumbers: !!o.lineNumbers,
580    readOnly: readOnly(),
581    disabled: disabled(),
582    attrs: attrs(),
583    onDocChange,
584    onCaret: syncSlash,
585    onFile: (f) => {
586      if (!o.onUpload) return false;
587      void startUpload(f);
588      return true;
589    },
590    onKey(name) {
591      switch (name) {
592        case "bold":
593          if (!readOnly() && !disabled()) commands.bold();
594          return true;
595        case "italic":
596          if (!readOnly() && !disabled()) commands.italic();
597          return true;
598        case "code":
599          if (!readOnly() && !disabled()) commands.code();
600          return true;
601        case "link":
602          openLink();
603          return true;
604        case "save": {
605          const value = doc();
606          const ev = new CustomEvent("cap-md-save", { bubbles: true, cancelable: true, detail: { value } });
607          host.dispatchEvent(ev);
608          o.onSave?.(value);
609          return true;
610        }
611        case "escape":
612          // Esc closes the menu or the palette first; only then does it fall through (to a dialog around the editor).
613          if (slash) {
614            closeSlash();
615            return true;
616          }
617          return false;
618        case "down":
619          if (!slash) return false;
620          slash.menu.querySelector<HTMLElement>(".cap-md-slash-item")?.focus();
621          return true;
622      }
623    },
624  });
625
626  host.append(file, status);
627  ta.before(frame);
628  ta.hidden = true;
629  ta.tabIndex = -1;
630  // A script or the field component that calls focus() on the textarea (to show an error) lands in the editor.
631  ta.focus = () => surface?.focus();
632  host.dataset.capMd = "ready";
633  syncState();
634
635  const api: MarkdownEditorHandle = {
636    root: host,
637    getValue: () => doc(),
638    setValue(value) {
639      quiet = true;
640      try {
641        surface?.setValue(value);
642      } finally {
643        quiet = false;
644      }
645    },
646    focus(at) {
647      if (at) {
648        const pos = at === "end" ? doc().length : 0;
649        surface?.select(pos, pos);
650      }
651      surface?.focus();
652    },
653    update(patch) {
654      Object.assign(o, patch);
655      buildToolbar();
656      syncState();
657    },
658    destroy() {
659      watch.disconnect();
660      for (const fn of cleanups.splice(0).reverse()) fn();
661      closeLink(false);
662      closeSlash();
663      cancelUpload(false);
664      clearUploadError();
665      surface?.destroy();
666      surface = null;
667      frame.remove();
668      file.remove();
669      status.remove();
670      Reflect.deleteProperty(ta, "focus");
671      ta.hidden = false;
672      ta.removeAttribute("tabindex");
673      delete host.dataset.capMd;
674      handles.delete(host);
675    },
676  };
677  handles.set(host, api);
678  host.dispatchEvent(new CustomEvent("cap-md-ready", { bubbles: true, detail: { handle: api } }));
679  return api;
680}
681
682const handles = new WeakMap<HTMLElement, MarkdownEditorHandle>();
683
684// The handle of an editor that has finished loading, or undefined while it is still the plain
685// textarea (listen for the bubbling `cap-md-ready` event to know when).
686export function getMarkdownEditor(host: Element): MarkdownEditorHandle | undefined {
687  return host instanceof HTMLElement ? handles.get(host) : undefined;
688}
689
690// Upgrades every [data-cap="markdown-editor"] under root not yet upgraded. The textarea is
691// the editor until CodeMirror has loaded, and again if it cannot. `options` apply to each one;
692// to give editors different options, pass a narrower `root`. Returns a function that undoes it.
693export function enhance(root: ParentNode = document, options: MarkdownEditorOptions = {}): () => void {
694  const undo: Array<() => void> = [];
695  for (const host of root.querySelectorAll<HTMLElement>("[data-cap='markdown-editor']:not([data-cap-ready])")) {
696    host.dataset.capReady = "";
697    let gone = false;
698    let mounted: MarkdownEditorHandle | null = null;
699    mountMarkdownEditor(host, options).then(
700      (h) => {
701        if (gone) h.destroy();
702        else mounted = h;
703      },
704      () => {
705        // CodeMirror did not load, or the page changed: the textarea stays as the editor.
706      },
707    );
708    undo.push(() => {
709      gone = true;
710      mounted?.destroy();
711      delete host.dataset.capReady;
712    });
713  }
714  return () => {
715    for (const fn of undo.splice(0)) fn();
716  };
717}